NickAkhmetov/HMP-500 - Biomarkers landing page #3330

NickAkhmetov · 2023-11-15T18:24:41Z

This PR

Implements the Biomarkers landing page, which currently displays only genes
- I also implemented a basic mobile view
Adds a link to the Biomarkers landing page to the Other dropdown in the site header
Converts panel lists to TSX and extends functionality to simplify creation of customized panels going forward

2023-11-30.biomarker.landing.page.demo.1.mov

… for it to be functional)

…w best practices

… to tsx

tsliaw · 2023-12-01T18:38:39Z

@NickAkhmetov Can you clarify to me how the search works? Is it only looking up by gene symbols right now and is case-sensitive? Because anytime I am typing anything that is lower-case, there are no results.

If that is how the search works, this isn't blocking. I just need to know so I know how to change the language of the placeholder text.

NickAkhmetov · 2023-12-01T18:51:45Z

@tsliaw Unfortunately, search is case sensitive and matches against the start of a string gene name/alias/symbol.

Per Alan, the reason for case sensitivity is due to the endpoint matching against a variety of identifiers, including name and alias: https://hubmapconsortium.slack.com/archives/C05CYU38D7T/p1699019370903709

We should definitely adjust the current text to reflect this limitation.

tsliaw · 2023-12-01T19:18:01Z

@NickAkhmetov Is it also matching with gene name or just with symbol? Since it is case-sensitive, I would expect the lower-case searches to match with some of the gene names.

tsliaw · 2023-12-01T18:40:50Z

context/app/static/js/components/biomarkers/Description.tsx

+  return (
+    <Stack direction="column" spacing={1}>
+      <div>
+        Gene and protein information are available in HuBMAP data. To look up information about a specific gene or


Can you change the text to
Gene information is currently available in HuBMAP data. To look up information about a specific gene, use the search bar below. Protein information is upcoming. Launch the <InternalLink href="/cells">Molecular Query</InternalLink> to find datasets for a specific biomarker.

We can revert back to the original text once we have proteins in place.

👍🏻 Done!

tsliaw · 2023-12-01T19:22:48Z

context/app/static/js/components/biomarkers/BiomarkersSearchBar.tsx

+import { useBiomarkersSearchActions, useBiomarkersSearchState } from './BiomarkersSearchContext';
+
+const searchbarPlaceholder =
+  'Search for biomarkers by gene symbol, gene name or protein name. Example: CD4, Cytokeratin';


If search is only gene symbol, change text to
Search for biomarkers by gene symbol. Note that searches are case-sensitive. Example: CD4, MMRN1

If search is both gene name and symbol, change text to
Search for biomarkers by gene name or symbol. Note that searches are case-sensitive. Example: CD4, MMRN1

I'm pending a response from Alan on this, but went with the former for now since that's the behavior we've personally observed

NickAkhmetov · 2023-12-01T20:04:56Z

@NickAkhmetov Is it also matching with gene name or just with symbol? Since it is case-sensitive, I would expect the lower-case searches to match with some of the gene names.

According to Alan in the conversation I linked, it should be matching on names as well, but I haven't observed any results for lowercase queries. We should confirm with him.

john-conroy

Nice! Very minor points feel free to ignore. We should all discuss a media query strategy moving forward.

john-conroy · 2023-12-01T20:43:16Z

context/app/static/js/components/biomarkers/BiomarkersPanelItem.tsx

+  const responsiveProps: Partial<StackProps> = {
+    height: isMobile ? 'unset' : 52,
+    direction: isMobile ? 'column' : 'row',
+    spacing: isMobile ? 2 : 4,
+    py: isMobile ? 2 : 0,
+  };


I'd prefer having a single ternary for readability, but not major.

I pulled the two constants out of the component and made this a ternary between them instead, good call!

context/app/static/js/components/biomarkers/BiomarkersPanelList.tsx

john-conroy · 2023-12-01T20:55:28Z

context/app/static/js/components/biomarkers/BiomarkersPanelList.tsx

+    const propsList: PanelProps[] = [
+      {
+        key: 'filters',
+        noHover: true,
+        children: <BiomarkerPanel.Filters />,
+      },
+      {
+        key: 'header',
+        noPadding: true,
+        children: <BiomarkerPanel.Header />,
+      },
+    ];
+    propsList.push(
+      ...genesList.map(({ approved_name, approved_symbol, summary }) => ({
+        key: approved_symbol,
+        noPadding: true,
+        children: (
+          <BiomarkerPanel.Item
+            name={`${approved_name} (${approved_symbol})`}
+            description={summary || 'No description available.'}
+            href={`/genes/${approved_symbol}`}
+            type="Gene"
+          />
+        ),
+      })),
+    );
+    propsList.push({
+      key: 'view-more',
+      noPadding: true,
+      children: <ViewMoreButton />,
+    });
+    return propsList;
+  }, [genesList, isLoading]);


Maybe I'm missing something, but why push? Can these not just be defined in propsList?

That's an artifact of a previous approach, good catch. I was originally unsure whether to display the filters/header when no results were available, but I decided against that for simplicity.

john-conroy · 2023-12-01T20:57:24Z

context/app/static/js/components/biomarkers/hooks.ts

+
+  const genesList = data?.flatMap((page) => page.genes) ?? [];
+
+  const hasMore = data?.[0]?.pagination?.page !== data?.[0]?.pagination?.total_pages;


Could avoid repeating data?.[0].pagination.

Good call; I've also revised this to use .at(-1) instead of [0] to make sure the latest page's number is used.

john-conroy · 2023-12-01T20:58:56Z

context/app/static/js/components/biomarkers/hooks.ts

+export function useViewMore() {
+  const { size, setSize, isLoading, isValidating } = useResultsList();
+  return useCallback(async () => {
+    if (isLoading || isValidating) return;
+    await setSize(size + 1);
+  }, [isLoading, isValidating, setSize, size]);
+}


Could move into the useResultsList hook for simplicity since it only depends on values returned by that hook?

Realistically, I should be using useGenesList here instead; both useResultsList and useViewMore are going to grow in complexity as we introduce proteins to this page, so having these hooks be decoupled from one another will be useful.

I added a local useCurrentGenesList hook to avoid repeatedly needing to access the context to pull out the search value to provide to useGenesList which the useResultsList and useViewMore hooks can both use to access the genes SWR data.

…t.tsx Co-authored-by: John Conroy <[email protected]>

… there are more results instead of first

john-conroy

Thanks!

Co-authored-by: John Conroy <[email protected]>

NickAkhmetov added 17 commits November 13, 2023 16:56

add "get datasets with cell type" endpoint

17043bd

add modal to display available datasets for cell type

7f20aaf

add ontology API row to service status table (pending gateway updates…

52ccb50

… for it to be functional)

convert view datasets to open search page with selected UUIDs

39cbe04

compress UUIDs to fit more UUIDs in max URL length

ab9eb00

Display error when invalid gene page is requested

9f423aa

revise compression

527af56

refactor searchnote to add support for displaying cell type and follo…

cbb35be

…w best practices

explanatory comment for hardcode

c9be17c

Switch from base64 to lz compression

568303d

switch to base64 compress/decompress

8519bcb

avoid bare except

b449106

Changelog

cc39436

add logging for exception

2edfa81

update searchnote spec

99ce3c9

Merge branch 'main' into nickakhmetov/hmp-495-gene-details-cells-api

991171a

scaffold /biomarkers route

a69ca9a

Base automatically changed from nickakhmetov/hmp-495-gene-details-cells-api to main November 16, 2023 19:58

NickAkhmetov added 6 commits November 29, 2023 12:14

Merge branch 'main' into nickakhmetov/hmp-500-biomarker-landing-page

fc3b692

replace outdated changelog

fb1fc6c

WIP - most of biomarker landing page implemented, converted panellist…

d72c136

… to tsx

added filter chips and responsive mobile view

5e7a8d7

typefix

09bbaad

lint fixes that didn't get picked up

3f70765

NickAkhmetov marked this pull request as ready for review November 30, 2023 20:32

NickAkhmetov requested review from tsliaw and john-conroy November 30, 2023 20:32

tsliaw reviewed Dec 1, 2023

View reviewed changes

john-conroy previously approved these changes Dec 1, 2023

View reviewed changes

NickAkhmetov dismissed john-conroy’s stale review via 5e9be48 December 1, 2023 21:17

NickAkhmetov and others added 7 commits December 1, 2023 16:17

Update context/app/static/js/components/biomarkers/BiomarkersPanelLis…

5e9be48

…t.tsx Co-authored-by: John Conroy <[email protected]>

single ternary

049afc3

No need to use push

3fd1813

avoid repeating pagination info, also use latest page to determine if…

4f234d7

… there are more results instead of first

decouple useViewMore from useResultsList

4ffa89b

update description text

e6e133d

update other usage of panelBorderStyles

4dcbfff

john-conroy previously approved these changes Dec 1, 2023

View reviewed changes

update searchbar placeholder

b086aa3

NickAkhmetov dismissed john-conroy’s stale review via b086aa3 December 1, 2023 21:56

NickAkhmetov requested a review from john-conroy December 1, 2023 21:59

john-conroy approved these changes Dec 1, 2023

View reviewed changes

NickAkhmetov merged commit c6c116f into main Dec 1, 2023
8 checks passed

NickAkhmetov deleted the nickakhmetov/hmp-500-biomarker-landing-page branch December 1, 2023 22:08

lchoy pushed a commit that referenced this pull request Dec 13, 2023

NickAkhmetov/HMP-500 - Biomarkers landing page (#3330)

56d45b6

Co-authored-by: John Conroy <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NickAkhmetov/HMP-500 - Biomarkers landing page #3330

NickAkhmetov/HMP-500 - Biomarkers landing page #3330

NickAkhmetov commented Nov 15, 2023 •

edited

Loading

tsliaw commented Dec 1, 2023 •

edited

Loading

NickAkhmetov commented Dec 1, 2023

tsliaw commented Dec 1, 2023

tsliaw Dec 1, 2023

NickAkhmetov Dec 1, 2023

tsliaw Dec 1, 2023

NickAkhmetov Dec 1, 2023

NickAkhmetov commented Dec 1, 2023

john-conroy left a comment

john-conroy Dec 1, 2023

NickAkhmetov Dec 1, 2023

john-conroy Dec 1, 2023

NickAkhmetov Dec 1, 2023

john-conroy Dec 1, 2023

NickAkhmetov Dec 1, 2023

john-conroy Dec 1, 2023

NickAkhmetov Dec 1, 2023

NickAkhmetov Dec 1, 2023

john-conroy left a comment


		const genesList = data?.flatMap((page) => page.genes) ?? [];

		const hasMore = data?.[0]?.pagination?.page !== data?.[0]?.pagination?.total_pages;

NickAkhmetov/HMP-500 - Biomarkers landing page #3330

NickAkhmetov/HMP-500 - Biomarkers landing page #3330

Conversation

NickAkhmetov commented Nov 15, 2023 • edited Loading

tsliaw commented Dec 1, 2023 • edited Loading

NickAkhmetov commented Dec 1, 2023

tsliaw commented Dec 1, 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

NickAkhmetov commented Dec 1, 2023

john-conroy left a 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

Choose a reason for hiding this comment

john-conroy left a comment

Choose a reason for hiding this comment

NickAkhmetov commented Nov 15, 2023 •

edited

Loading

tsliaw commented Dec 1, 2023 •

edited

Loading