feat: 5673 cell guide tissue specific cell type route #6232

tihuan · 2023-11-15T20:55:55Z

Reason for Change

Populate the global tissue filter with the tissue in the tissue card #5673

~~⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️~~
~~DO NOT MERGE UNTIL @ainfeld is back to help sort out analytics impact~~
UPDATE(12/1): @ainfeld has confirmed that no engineering changes for analytics changes
~~⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️~~

Changes

Behavior changes:

On a cell type page, the tissue dropdown now navigates to tissue specific cell type page
On a cell type page, the right cell type info panel's link now navigates to tissue specific cell type page
On a tissue page, clicking on a cell type node now navigates to its tissue specific cell type page. HOWEVER, if the cell type page ends up not having the specific tissue in its tissue dropdown, we will redirect the page to its tissue agnostic equivalent

Code changes:

Move tissueId from hook state to the route state
Refactor: Extract hooks into connect.ts
Add SEO snapshots for new tissue specific cell type pages
Add isSuccess to hooks useAllOrgansLookupTables() and useOrganAndOrganismFilterListForCellType(), so we can do behavior change 3 above
Add a new useEffect in connect.ts to redirect user to tissue agnostic cell type page, using isSuccess from the change right above
Extract getCellTypeLink() utility function for all three places (dropdown, ontology viewer, and right side cell type info panel) that push user to cell type page to use
Add e2e tests

Testing steps

Three behavior changes:

BEHAVIOR 1:

Navigate to https://pr-6232-frontend.rdev.single-cell.czi.technology/cellguide/tissues/UBERON_0000955/cell-types/CL_0000540
You should see Neuron Cell Page with Brain selected in the tissue dropdown

Video:

Changing tissue changes the URL, which is a shareable URL by default
Route change doesn't trigger a full page reload, which is more performant
App state also changes accordingly to show tissue specific data when a tissue is selected

Screen.Recording.2023-11-16.at.9.38.40.AM.mov

BEHAVIOR 2:

On a tissue page, clicking on a cell type node in ontology viewer should navigate you to its tissue specific cell type page

BEHAVIOR 3:

On a tissue page, clicking on a cell type node in ontology viewer should navigate you to its tissue AGNOSTIC cell type page, IF the cell type page turns out not having such tissue in its tissue dropdown.

For example, on Brain tissue page, clicking on "cell" node should take you to the tissue agnostic "cell" page

Checklist 🛎️

Add product, design, and eng as reviewers for rdev review
For UI changes, add screenshots/videos, so the reviewers know what you expect them to see
For UI changes, add e2e tests to prevent regressions

Notes for Reviewer

github-actions · 2023-11-15T20:56:09Z

Deployment Summary

backend_url: https://pr-6232-backend.rdev.single-cell.czi.technology
frontend_url: https://pr-6232-frontend.rdev.single-cell.czi.technology
delete_db_task_definition_arn: arn:aws:ecs:us-west-2:***:task-definition/dp-rdev-pr-6232-deletion:1
migrate_db_task_definition_arn: arn:aws:ecs:us-west-2:***:task-definition/dp-rdev-pr-6232-migration:1

codecov · 2023-11-15T21:03:04Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (04ca119) 91.96% compared to head (8083870) 91.96%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6232   +/-   ##
=======================================
  Coverage   91.96%   91.96%           
=======================================
  Files         178      178           
  Lines       14706    14706           
=======================================
  Hits        13524    13524           
  Misses       1182     1182

Flag	Coverage Δ
unittests	`91.96% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

tihuan · 2023-11-16T17:49:18Z

...llGuide/cellGuide.test.ts-snapshots/tissue-specific-cellType-seoMetaTags-chromium-darwin.txt

new snapshot for tissue specific cell type page SEO

tihuan · 2023-11-16T17:51:47Z

frontend/src/pages/cellguide/[cellTypeId].tsx

@@ -1,3 +1,11 @@
+/**


The intention is to use [cellTypeId].tsx to serve both CELL_GUIDE_CELL_TYPE and CELL_GUIDE_TISSUE_SPECIFIC_CELL_TYPE routes, so we have single source of truth and not duplicate code where possible

tihuan · 2023-11-16T17:52:10Z

frontend/src/views/CellGuide/components/CellGuideCard/connect.ts

extracts out stuff to connect.ts

tihuan · 2023-11-16T17:53:03Z

frontend/src/views/CellGuide/components/CellGuideCard/connect.ts

+    element: JSX.Element;
+  } | null>(null);
+
+  const { cellTypeId: queryCellTypeId, tissueId: queryTissueId } = router.query;


since we get tissueId from the router now, I've removed the states that used to track selectedOrgan and selectedOrganId

tihuan · 2023-11-16T17:53:59Z

frontend/src/views/CellGuide/components/CellGuideCard/index.tsx

-  const throttledHandleResize = useMemo(() => {
-    return throttle(handleResize, 100);
-  }, [handleResize]);
+  const handleChangeOrgan = (


handleChangeOrgan() now just pushes the app to the new route!

tihuan · 2023-11-16T17:55:40Z

frontend/tests/features/cellGuide/cellGuide.test.ts

-      const headerName = page.getByTestId(CELL_GUIDE_CARD_HEADER_NAME);
-      const headerNameText = await headerName.textContent();
-      expect(headerNameText).toBe("Neuron");
+    test("All tissue specific CellGuide card components are present", async ({


test for tissue specific cell type page SEO description

tihuan · 2023-11-16T17:56:18Z

frontend/tests/features/cellGuide/cellGuide.test.ts

-                const rowCountAfter = rowElementsAfter.length;
-                expect(rowCountAfter).toBeGreaterThan(1);
-                expect(rowCountAfter).not.toBe(rowCountBefore);
+                await tryUntil(


update test to avoid flakiness caused by table not yet loaded

tihuan · 2023-11-16T17:58:12Z

frontend/tests/features/cellGuide/cellGuide.test.ts

-            const firstRowContentAfter =
-              await rowElementsAfter[0].textContent();
-            expect(firstRowContentBefore).not.toBe(firstRowContentAfter);
+            await tryUntil(


update test to avoid flakiness caused by table not yet loaded new data for specific tissue

tihuan · 2023-11-16T17:58:31Z

frontend/tests/features/cellGuide/cellGuide.test.ts

+         * (thuang): Since the marker gene table is not stably sorted, we need
+         * to target a specific marker gene to prevent flakiness.
+         */
+        const markerGeneNRXN1 = page.locator(`${tableSelector} tbody tr`, {


prevent flakiness caused by marker gene table not having a stable sort

tihuan · 2023-11-16T17:59:05Z

frontend/tests/features/cellGuide/cellGuide.test.ts

        const node = page.getByTestId(
-          `${CELL_GUIDE_CARD_ONTOLOGY_DAG_VIEW_RECT_OR_CIRCLE_PREFIX_ID}-CL:0000099__0-has-children-isTargetNode=false`
+          `${CELL_GUIDE_CARD_ONTOLOGY_DAG_VIEW_RECT_OR_CIRCLE_PREFIX_ID}-CL:0002319__0-has-children-isTargetNode=false`


neural cell works well with NRXN1 marker gene

hthomas-czi

@tihuan The page should maintain scroll position when changing the tissue. Is that still possible? Otherwise looks good!

tihuan · 2023-11-16T18:18:15Z

@tihuan The page should maintain scroll position when changing the tissue. Is that still possible? Otherwise looks good!

Oh yes! I wasn't sure if it was a bug or a feature to keep the scroll position, so went with the default navigation behavior 😆

Just updated the code to keep the scroll position. Rdev should be updated soon 🙆‍♂️

Thanks for the great feedback!

tihuan · 2023-11-20T19:22:38Z

@atarashansky PTAL this PR for feature related implementation 🙏

I'm keeping this PR in draft until @ainfeld is back to collaborate on analytics changes

Thank you!

tihuan · 2023-12-01T16:09:21Z

...llGuide/cellGuide.test.ts-snapshots/tissue-specific-cellType-seoMetaTags-chromium-darwin.txt

updated snapshots for tissue specific cell type page SEO

tihuan · 2023-12-01T16:10:59Z

frontend/src/common/constants/routes.ts

+  CELL_GUIDE_CELL_TYPE = "/cellguide/:cellTypeId",
+  CELL_GUIDE_TISSUE = "/cellguide/tissues/:tissueId",
+  CELL_GUIDE_TISSUE_SPECIFIC_CELL_TYPE = "/cellguide/tissues/:tissueId/cell-types/:cellTypeId",


add routes for easier way to have a consistent way to create URL and find places that navigate to the same route

tihuan · 2023-12-01T16:14:36Z

frontend/src/views/CellGuide/components/CellGuideInfoSideBar/index.tsx

@@ -60,27 +65,27 @@ function CellGuideInfoBar({
            router.push(href);
          }
          track(EVENTS.CG_VIEW_CELLGUIDE_PAGE_CLICKED, {
-            cell_type: cellInfoCellType.cellTypeName,


here and below - use destructuring to improve readability

tihuan · 2023-12-01T16:14:52Z

frontend/src/views/CellGuide/components/CellGuideInfoSideBar/index.tsx

+
+  const { cellTypeId, cellTypeName } = cellInfoCellType;
+
+  const cellTypeUrl = getCellTypeLink({


use the new utility function to get cellTypeLink

tihuan · 2023-12-01T16:15:19Z

...end/src/views/CellGuide/components/common/OntologyDagView/components/AnimatedNodes/index.tsx


 interface AnimatedNodesProps {
  tree: HierarchyPointNode<TreeNodeWithState>;
+  tissueId?: string;


this component needs tissueId now to construct cellTypeLink

tihuan · 2023-12-01T16:15:52Z

frontend/tests/features/cellGuide/cellGuide.test.ts

-      await isElementVisible(page, CELL_GUIDE_CARD_HEADER_NAME);
-      await isElementVisible(page, CELL_GUIDE_CARD_HEADER_TAG);
-      await isElementVisible(page, CELL_GUIDE_CARD_CL_DESCRIPTION);
-      await isElementVisible(page, CELL_GUIDE_CARD_GPT_DESCRIPTION);
-      await isElementVisible(page, CELL_GUIDE_CARD_SYNONYMS);
-      await isElementVisible(page, CELL_GUIDE_CARD_GPT_TOOLTIP_LINK);
-      await isElementVisible(page, CELL_GUIDE_CARD_SEARCH_BAR);
-      await isElementVisible(page, CELL_GUIDE_CARD_ENRICHED_GENES_TABLE);
-      await isElementVisible(page, CELL_GUIDE_CARD_ONTOLOGY_DAG_VIEW);
-      const headerName = page.getByTestId(CELL_GUIDE_CARD_HEADER_NAME);
-      const headerNameText = await headerName.textContent();
-      expect(headerNameText).toBe("Neuron");


extracted to assertAllCellCardComponentsArePresent() for reuse

tihuan · 2023-12-01T16:17:35Z

frontend/tests/features/cellGuide/cellGuide.test.ts

@@ -554,6 +578,99 @@ describe("Cell Guide", () => {
    });

    describe("Ontology Viewer", () => {
+      describe("Tissue specific cell type page", () => {
+        test("Clicks on a cell type node that has the same tissue in its dropdown in the ontology viewer navigates to the correct cell type page", async ({


Add new tests to cover the behaviors where:

On a tissue page, clicking on a cell type node should navigate to its tissue specific cell type page

On a tissue page, clicking on a cell type node should navigate to its tissue agnostic page IF the cell type page turns out not having such tissue in the tissue dropdown

kaloster

Solid work @tihuan! Look good to me 🚀

tihuan · 2023-12-07T18:31:46Z

@kaloster Thanks for reviewing this!

@ainfeld sorry that this didn't go out this week, but it will get merged today and go out to prod next week for sure now. Thank you!

(I'm still on bereavement, just thought I'd get this merged 😆 Will be back 12/18. Thanks all!)

ainfeld · 2023-12-07T19:27:29Z

thanks @tihuan!! no worries about when it actually goes to prod, doesn't really matter to me haha just useful to know when it's expected so I can plan the work I need to do after it. This gives me lots of time to play around with it in staging to understand what I need to change for analytics so really really appreciate that 🙏

tihuan · 2023-12-07T20:03:00Z

Ahaha awesome! Glad some extra time in staging is useful this time 🎉 Thanks again, @ainfeld 😄 🙏

tihuan force-pushed the thuang-5673-new-cell-guide-route branch 6 times, most recently from c2b40cc to bcd9d8a Compare November 16, 2023 17:46

tihuan requested review from kaloster, niknak33 and hthomas-czi November 16, 2023 17:46

tihuan commented Nov 16, 2023

View reviewed changes

tihuan changed the title ~~feat: 5673 cell guide tissue specific cell type route~~ [DO NOT MERGE] feat: 5673 cell guide tissue specific cell type route Nov 16, 2023

hthomas-czi reviewed Nov 16, 2023

View reviewed changes

tihuan requested a review from atarashansky November 20, 2023 19:21

tihuan force-pushed the thuang-5673-new-cell-guide-route branch 8 times, most recently from d489736 to 804ef34 Compare November 21, 2023 23:05

tihuan mentioned this pull request Nov 30, 2023

Populate the global tissue filter with the tissue in the tissue card #5673

Closed

5 tasks

tihuan force-pushed the thuang-5673-new-cell-guide-route branch 2 times, most recently from 8b39639 to 7d94c83 Compare November 30, 2023 20:29

tihuan changed the title ~~[DO NOT MERGE] feat: 5673 cell guide tissue specific cell type route~~ feat: 5673 cell guide tissue specific cell type route Nov 30, 2023

tihuan force-pushed the thuang-5673-new-cell-guide-route branch from 7d94c83 to c3f9873 Compare November 30, 2023 20:58

tihuan force-pushed the thuang-5673-new-cell-guide-route branch 7 times, most recently from bd7afa9 to 5ed4f90 Compare December 1, 2023 16:08

tihuan commented Dec 1, 2023

View reviewed changes

feat: 5673 cell guide tissue specific cell type route

fe41791

tihuan force-pushed the thuang-5673-new-cell-guide-route branch from 5ed4f90 to fe41791 Compare December 1, 2023 16:18

tihuan marked this pull request as ready for review December 1, 2023 16:31

Merge branch 'main' into thuang-5673-new-cell-guide-route

c39a56e

kaloster approved these changes Dec 5, 2023

View reviewed changes

Merge branch 'main' into thuang-5673-new-cell-guide-route

8083870

tihuan enabled auto-merge (squash) December 7, 2023 18:30

tihuan merged commit 35b99a4 into main Dec 7, 2023
40 checks passed

tihuan deleted the thuang-5673-new-cell-guide-route branch December 7, 2023 18:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 5673 cell guide tissue specific cell type route #6232

feat: 5673 cell guide tissue specific cell type route #6232

tihuan commented Nov 15, 2023 •

edited

Loading

github-actions bot commented Nov 15, 2023

codecov bot commented Nov 15, 2023 •

edited

Loading

tihuan Nov 16, 2023

tihuan Nov 16, 2023

tihuan Nov 16, 2023

tihuan Nov 16, 2023

tihuan Nov 16, 2023

tihuan Nov 16, 2023

tihuan Nov 16, 2023

tihuan Nov 16, 2023

tihuan Nov 16, 2023

tihuan Nov 16, 2023

hthomas-czi left a comment

tihuan commented Nov 16, 2023

tihuan commented Nov 20, 2023

tihuan Dec 1, 2023

tihuan Dec 1, 2023

tihuan Dec 1, 2023

tihuan Dec 1, 2023

tihuan Dec 1, 2023

tihuan Dec 1, 2023

tihuan Dec 1, 2023

kaloster left a comment

tihuan commented Dec 7, 2023

ainfeld commented Dec 7, 2023

tihuan commented Dec 7, 2023


		const { cellTypeId, cellTypeName } = cellInfoCellType;

		const cellTypeUrl = getCellTypeLink({

feat: 5673 cell guide tissue specific cell type route #6232

feat: 5673 cell guide tissue specific cell type route #6232

Conversation

tihuan commented Nov 15, 2023 • edited Loading

Reason for Change

Changes

Testing steps

Checklist 🛎️

Notes for Reviewer

github-actions bot commented Nov 15, 2023

Deployment Summary

codecov bot commented Nov 15, 2023 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hthomas-czi left a comment

Choose a reason for hiding this comment

tihuan commented Nov 16, 2023

tihuan commented Nov 20, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kaloster left a comment

Choose a reason for hiding this comment

tihuan commented Dec 7, 2023

ainfeld commented Dec 7, 2023

tihuan commented Dec 7, 2023

tihuan commented Nov 15, 2023 •

edited

Loading

codecov bot commented Nov 15, 2023 •

edited

Loading