From 107ab5d43afadb187983f85dacb503454eef5e3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Melissa=20Weber=20Mendon=C3=A7a?= Date: Fri, 14 Feb 2025 14:10:06 -0300 Subject: [PATCH 01/10] fix: Wording and style of Neuroglancer tooltip Surfaces a link to the Neuroglancer quickstart guide in the View Tomogram button tooltip. --- .../app/components/ViewTomogramButton.tsx | 29 +++++++++++++++---- .../public/locales/en/translation.json | 4 ++- 2 files changed, 26 insertions(+), 7 deletions(-) diff --git a/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx b/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx index bca189915..c725670e8 100644 --- a/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx +++ b/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx @@ -1,5 +1,6 @@ import { Button, ButtonProps, TooltipProps } from '@czi-sds/components' +import { I18n } from 'app/components/I18n' import { IdPrefix } from 'app/constants/idPrefixes' import { useI18n } from 'app/hooks/useI18n' import { EventPayloads, Events, usePlausible } from 'app/hooks/usePlausible' @@ -38,16 +39,32 @@ export function ViewTomogramButton({ return ( + + {t('viewTomogramInNeuroglancer', { + id: `${IdPrefix.Tomogram}-${tomogramId}`, + })} + +
+ +

+ +

+ + + ) : ( + t('noTomogramsAvailable') + ) } sdsStyle="dark" center placement={tooltipPlacement} - size="s" + size="m" > {/* We need to disable this rule because we need the div to capture bubbled click events from the link button below. This is because Plausible automatically adds event listeners to every diff --git a/frontend/packages/data-portal/public/locales/en/translation.json b/frontend/packages/data-portal/public/locales/en/translation.json index 55b93c32a..932ace61e 100644 --- a/frontend/packages/data-portal/public/locales/en/translation.json +++ b/frontend/packages/data-portal/public/locales/en/translation.json @@ -269,6 +269,7 @@ "nameOrId": "Name/ID", "napariPlugin": "napari Plugin", "ndJsonLink": "https://zarr.readthedocs.io/en/stable/", + "neuroglancerTutorialLink": "https://chanzuckerberg.github.io/cryoet-data-portal/stable/neuroglancer_quickstart.html", "next": "Next", "no": "No", "noAnnotationsAvailable": "No Annotations Available", @@ -470,10 +471,11 @@ "viewDocs": "View Docs", "viewDeposition": "View Deposition", "viewModel": "View Model", + "viewNeuroglancerTutorial": "View Neuroglancer tutorial", "viewOnKaggle": "View on Kaggle", "viewOutcome": "View Outcome Paper", "viewTomogram": "View Tomogram", - "viewTomogramInNeuroglancer": "View Tomogram {{id}} in Neuroglancer", + "viewTomogramInNeuroglancer": "Open {{id}} in Neuroglancer", "viewWinners": "View Winning Depositions", "voxelSpacing": "Voxel Spacing", "voxelSpacingId": "Voxel Spacing ID", From aba407d48d729798998939e890524e1de70832c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Melissa=20Weber=20Mendon=C3=A7a?= Date: Fri, 14 Feb 2025 17:05:01 -0300 Subject: [PATCH 02/10] fix: Make tooltip clickable for RunsTable The tooltip was disappearing before it could be clicked. --- .../packages/data-portal/app/components/Dataset/RunsTable.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx index 4ed24dd67..f0e60ee90 100644 --- a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx +++ b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx @@ -48,7 +48,7 @@ export function RunsTable() { const { t } = useI18n() const [searchParams] = useSearchParams() - const [isHoveringOverInteractable, setIsHoveringOverInteractable] = + const [isHoveringOverInteractable] = useState(false) const navigate = useNavigate() @@ -234,7 +234,6 @@ export function RunsTable() { }} tooltipPlacement="top" neuroglancerConfig={tomogram?.neuroglancerConfig} - setIsHoveringOver={setIsHoveringOverInteractable} /> ) From 8deb1971eebf2ca0fcb87718e3795b650490f048 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Melissa=20Weber=20Mendon=C3=A7a?= Date: Fri, 14 Feb 2025 18:06:17 -0300 Subject: [PATCH 03/10] fix: lint --- .../packages/data-portal/app/components/Dataset/RunsTable.tsx | 3 +-- .../packages/data-portal/app/components/ViewTomogramButton.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx index f0e60ee90..5050d7fa4 100644 --- a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx +++ b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx @@ -48,8 +48,7 @@ export function RunsTable() { const { t } = useI18n() const [searchParams] = useSearchParams() - const [isHoveringOverInteractable] = - useState(false) + const [isHoveringOverInteractable] = useState(false) const navigate = useNavigate() const getRunUrl = useCallback( diff --git a/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx b/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx index c725670e8..6c725510a 100644 --- a/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx +++ b/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx @@ -49,7 +49,7 @@ export function ViewTomogramButton({

From e11948fed9fe7aff9283ac400548e2d94ec860c6 Mon Sep 17 00:00:00 2001 From: Suzette McCanny Date: Thu, 20 Feb 2025 11:43:46 -0500 Subject: [PATCH 04/10] keep isHoveringOverInteractable in tact --- .../data-portal/app/components/Dataset/RunsTable.tsx | 4 +++- .../data-portal/app/components/ViewTomogramButton.tsx | 7 +++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx index 5050d7fa4..4ed24dd67 100644 --- a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx +++ b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx @@ -48,7 +48,8 @@ export function RunsTable() { const { t } = useI18n() const [searchParams] = useSearchParams() - const [isHoveringOverInteractable] = useState(false) + const [isHoveringOverInteractable, setIsHoveringOverInteractable] = + useState(false) const navigate = useNavigate() const getRunUrl = useCallback( @@ -233,6 +234,7 @@ export function RunsTable() { }} tooltipPlacement="top" neuroglancerConfig={tomogram?.neuroglancerConfig} + setIsHoveringOver={setIsHoveringOverInteractable} /> ) diff --git a/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx b/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx index 6c725510a..2abafdc1a 100644 --- a/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx +++ b/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx @@ -41,12 +41,11 @@ export function ViewTomogramButton({ tooltip={ enabled ? ( <> - +

{t('viewTomogramInNeuroglancer', { id: `${IdPrefix.Tomogram}-${tomogramId}`, })} - -
+

setIsHoveringOver?.(true)} + onMouseEnter={() => setIsHoveringOver?.(false)} // could be changed back to true if we needed this fine-grained control onMouseLeave={() => setIsHoveringOver?.(false)} className="min-w-[152px]" > From 95493355f3486550f34a728745adcb9209e24532 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Melissa=20Weber=20Mendon=C3=A7a?= Date: Fri, 21 Feb 2025 11:38:10 -0300 Subject: [PATCH 05/10] feat: Change View Tomogram to minimal style in runs table --- .../packages/data-portal/app/components/Dataset/RunsTable.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx index 4ed24dd67..7c037d732 100644 --- a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx +++ b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx @@ -219,8 +219,8 @@ export function RunsTable() { ), From 07e356e0f8612ea98dffd4c12f8a856501bd0133 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Melissa=20Weber=20Mendon=C3=A7a?= Date: Fri, 21 Feb 2025 11:47:31 -0300 Subject: [PATCH 06/10] fix: Capitalize T in Neuroglancer Tutorial link --- .../packages/data-portal/public/locales/en/translation.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/packages/data-portal/public/locales/en/translation.json b/frontend/packages/data-portal/public/locales/en/translation.json index 932ace61e..0a566f106 100644 --- a/frontend/packages/data-portal/public/locales/en/translation.json +++ b/frontend/packages/data-portal/public/locales/en/translation.json @@ -471,7 +471,7 @@ "viewDocs": "View Docs", "viewDeposition": "View Deposition", "viewModel": "View Model", - "viewNeuroglancerTutorial": "View Neuroglancer tutorial", + "viewNeuroglancerTutorial": "View Neuroglancer Tutorial", "viewOnKaggle": "View on Kaggle", "viewOutcome": "View Outcome Paper", "viewTomogram": "View Tomogram", From 3f654768973c0603c4dba0d2da4c9ea5b5f39d30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Melissa=20Weber=20Mendon=C3=A7a?= Date: Fri, 21 Feb 2025 15:29:38 -0300 Subject: [PATCH 07/10] feat: Add hover state to View Tomogram button in Runs table --- .../packages/data-portal/app/components/ViewTomogramButton.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx b/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx index 2abafdc1a..fa95cfea8 100644 --- a/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx +++ b/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx @@ -6,6 +6,7 @@ import { useI18n } from 'app/hooks/useI18n' import { EventPayloads, Events, usePlausible } from 'app/hooks/usePlausible' import { getNeuroglancerUrl } from 'app/utils/url' +import { cns } from 'app/utils/cns' import { Link } from './Link' import { Tooltip } from './Tooltip' @@ -85,6 +86,7 @@ export function ViewTomogramButton({ href={enabled ? getNeuroglancerUrl(neuroglancerConfig) : undefined} disabled={!enabled} LinkComponent={Link} + className="!min-w-[141px] min-h-[32px] hover:!bg-sds-color-primitive-gray-200 rounded-md" {...buttonProps} > {t('viewTomogram')} From fad2d35afe58a2ed6c76d61c059aa392cefd146b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Melissa=20Weber=20Mendon=C3=A7a?= Date: Fri, 21 Feb 2025 15:34:21 -0300 Subject: [PATCH 08/10] fix: lint --- .../packages/data-portal/app/components/ViewTomogramButton.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx b/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx index fa95cfea8..57f07beb0 100644 --- a/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx +++ b/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx @@ -6,7 +6,6 @@ import { useI18n } from 'app/hooks/useI18n' import { EventPayloads, Events, usePlausible } from 'app/hooks/usePlausible' import { getNeuroglancerUrl } from 'app/utils/url' -import { cns } from 'app/utils/cns' import { Link } from './Link' import { Tooltip } from './Tooltip' From 8a4e00f7d6f018734d4d58ee47775fb62a864315 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Melissa=20Weber=20Mendon=C3=A7a?= Date: Fri, 21 Feb 2025 16:12:13 -0300 Subject: [PATCH 09/10] fix: Remove erroneous hover from Run page --- .../packages/data-portal/app/components/Dataset/RunsTable.tsx | 1 + .../packages/data-portal/app/components/ViewTomogramButton.tsx | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx index 7c037d732..b80d4d965 100644 --- a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx +++ b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx @@ -224,6 +224,7 @@ export function RunsTable() { startIcon: ( ), + className: '!min-w-[141px] min-h-[32px] hover:!bg-sds-color-primitive-gray-200 rounded-md', }} event={{ datasetId: dataset.id, diff --git a/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx b/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx index 57f07beb0..2abafdc1a 100644 --- a/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx +++ b/frontend/packages/data-portal/app/components/ViewTomogramButton.tsx @@ -85,7 +85,6 @@ export function ViewTomogramButton({ href={enabled ? getNeuroglancerUrl(neuroglancerConfig) : undefined} disabled={!enabled} LinkComponent={Link} - className="!min-w-[141px] min-h-[32px] hover:!bg-sds-color-primitive-gray-200 rounded-md" {...buttonProps} > {t('viewTomogram')} From 90973bfd5bc82ed4b0e280f51ad029659daab261 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Melissa=20Weber=20Mendon=C3=A7a?= Date: Fri, 21 Feb 2025 16:15:28 -0300 Subject: [PATCH 10/10] fix: lint --- .../packages/data-portal/app/components/Dataset/RunsTable.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx index b80d4d965..ad6945344 100644 --- a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx +++ b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx @@ -224,7 +224,8 @@ export function RunsTable() { startIcon: ( ), - className: '!min-w-[141px] min-h-[32px] hover:!bg-sds-color-primitive-gray-200 rounded-md', + className: + '!min-w-[141px] min-h-[32px] hover:!bg-sds-color-primitive-gray-200 rounded-md', }} event={{ datasetId: dataset.id,