Update store selectors

hubmapconsortium · Oct 21, 2024 · c8e3784 · c8e3784
1 parent f105649
commit c8e3784
Show file tree

Hide file tree

Showing 11 changed files with 104 additions and 54 deletions.
diff --git a/context/app/static/js/components/search/Facets/FilterChips.tsx b/context/app/static/js/components/search/Facets/FilterChips.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import { useShallow } from 'zustand/react/shallow';
 import Chip, { ChipProps } from '@mui/material/Chip';
 import Stack from '@mui/material/Stack';
 
@@ -17,7 +18,7 @@ import {
 import { getFieldLabel, getTransformedFieldalue } from '../fieldConfigurations';
 
 function FilterChip({ onDelete, label, ...props }: ChipProps & { onDelete: () => void }) {
-  const { analyticsCategory } = useSearchStore();
+  const analyticsCategory = useSearchStore((state) => state.analyticsCategory);
 
   const handleDelete = useCallback(() => {
     onDelete();
@@ -32,7 +33,15 @@ function FilterChip({ onDelete, label, ...props }: ChipProps & { onDelete: () =>
 }
 
 function FilterChips() {
-  const { filters, facets, filterTerm, filterRange, filterHierarchicalChildTerm } = useSearchStore();
+  const { filters, facets, filterTerm, filterRange, filterHierarchicalChildTerm } = useSearchStore(
+    useShallow((state) => ({
+      filters: state.filters,
+      facets: state.facets,
+      filterTerm: state.filterTerm,
+      filterRange: state.filterRange,
+      filterHierarchicalChildTerm: state.filterHierarchicalChildTerm,
+    })),
+  );
 
   return (
     <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>

diff --git a/context/app/static/js/components/search/Facets/RangeFacet.tsx b/context/app/static/js/components/search/Facets/RangeFacet.tsx
@@ -1,9 +1,10 @@
 import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react';
+import { useShallow } from 'zustand/react/shallow';
 import { useTheme } from '@mui/material/styles';
-
 import Slider from '@mui/material/Slider';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
+
 import { useSearch } from '../Search';
 import { RangeConfig, RangeValues, isRangeFacet, isRangeFilter, useSearchStore } from '../store';
 import FacetAccordion from './FacetAccordion';
@@ -21,7 +22,7 @@ function buildBins({ buckets }: { buckets: HistogramBucket[] }) {
 
 function RangeFacet({ filter, field, facet }: { filter: RangeValues; field: string; facet: RangeConfig }) {
   const { aggregations } = useSearch();
-  const { filterRange } = useSearchStore();
+  const filterRange = useSearchStore((state) => state.filterRange);
   const theme = useTheme();
 
   const { values } = filter;
@@ -110,10 +111,15 @@ function RangeFacet({ filter, field, facet }: { filter: RangeValues; field: stri
 }
 
 function FacetGuard({ field }: { field: string }) {
-  const {
-    filters: { [field]: filter },
-    facets: { [field]: facet },
-  } = useSearchStore();
+  const { filters, facets } = useSearchStore(
+    useShallow((state) => ({
+      filters: state.filters,
+      facets: state.facets,
+    })),
+  );
+
+  const { [field]: filter } = filters;
+  const { [field]: facet } = facets;
 
   if (!isRangeFilter(filter) || !isRangeFacet(facet)) {
     return null;

diff --git a/context/app/static/js/components/search/Facets/TermFacet.tsx b/context/app/static/js/components/search/Facets/TermFacet.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useCallback } from 'react';
+import { useShallow } from 'zustand/react/shallow';
 import Typography from '@mui/material/Typography';
 import IndeterminateCheckBoxOutlinedIcon from '@mui/icons-material/IndeterminateCheckBoxOutlined';
 import Accordion from '@mui/material/Accordion';
@@ -79,7 +80,7 @@ function CheckboxFilterItem({
   indeterminate = false,
   field,
 }: CheckboxItem) {
-  const { analyticsCategory } = useSearchStore();
+  const analyticsCategory = useSearchStore((state) => state.analyticsCategory);
 
   const handleClick = useCallback(() => {
     onClick();
@@ -103,7 +104,7 @@ function CheckboxFilterItem({
           color="primary"
           icon={<StyledCheckBoxBlankIcon />}
           checkedIcon={<StyledCheckBoxIcon />}
-          onClick={handleClick}
+          onChange={handleClick}
         />
       }
       label={
@@ -118,7 +119,7 @@ interface TermFacet extends Omit<CheckboxItem, 'onClick'> {
 }
 
 export function TermFacetItem({ label, field, ...rest }: TermFacet) {
-  const { filterTerm } = useSearchStore();
+  const filterTerm = useSearchStore((state) => state.filterTerm);
 
   const handleClick = useCallback(() => {
     filterTerm({ term: field, value: label });
@@ -131,7 +132,9 @@ const smallAggSize = 5;
 const maxAggSize = 10000;
 
 function FacetSizeButton({ field, hasMoreBuckets }: { field: string; hasMoreBuckets: boolean }) {
-  const { setTermSize, facets } = useSearchStore();
+  const { setTermSize, facets } = useSearchStore(
+    useShallow((state) => ({ setTermSize: state.setTermSize, facets: state.facets })),
+  );
 
   const facet = facets?.[field];
 
@@ -188,9 +191,9 @@ function TermFacetContent({ filter, field }: { filter: TermValues; field: string
 }
 
 export function TermFacet({ field }: { field: string }) {
-  const {
-    filters: { [field]: filter },
-  } = useSearchStore();
+  const filters = useSearchStore((state) => state.filters);
+
+  const { [field]: filter } = filters;
 
   if (!isTermFilter(filter)) {
     return null;
@@ -208,7 +211,7 @@ function buildExpandTooltip({ expanded, disabled }: { expanded: boolean; disable
 }
 
 export function HierarchicalFacetParent({ childValues, field, label, ...rest }: TermFacet & { childValues: string[] }) {
-  const { filterHierarchicalParentTerm } = useSearchStore();
+  const filterHierarchicalParentTerm = useSearchStore((state) => state.filterHierarchicalParentTerm);
 
   return (
     <CheckboxFilterItem
@@ -221,7 +224,7 @@ export function HierarchicalFacetParent({ childValues, field, label, ...rest }:
 }
 
 export function HierarchicalFacetChild({ parentValue, field, label, ...rest }: TermFacet & { parentValue: string }) {
-  const { filterHierarchicalChildTerm } = useSearchStore();
+  const filterHierarchicalChildTerm = useSearchStore((state) => state.filterHierarchicalChildTerm);
 
   return (
     <CheckboxFilterItem
@@ -251,9 +254,9 @@ export function HierarchicalTermFacetItem({
     setExpanded((prev) => !prev);
   }, [setExpanded]);
 
-  const {
-    filters: { [parentField]: filter },
-  } = useSearchStore();
+  const filters = useSearchStore((state) => state.filters);
+
+  const { [parentField]: filter } = filters;
 
   if (!childBuckets || !Array.isArray(childBuckets) || !isHierarchicalFilter(filter)) {
     return null;
@@ -302,17 +305,18 @@ export function HierarchicalTermFacetItem({
         />
       </HierarchicalAccordionSummary>
       <AccordionDetails sx={{ ml: 1.5, p: 0 }}>
-        {sortBuckets({ buckets: childBuckets, field: parentField }).map(({ key, doc_count }) => (
-          <HierarchicalFacetChild
-            field={field}
-            label={key}
-            key={key}
-            count={doc_count}
-            parentValue={label}
-            active={childState?.has(key)}
-            title={title}
-          />
-        ))}
+        {expanded &&
+          sortBuckets({ buckets: childBuckets, field: parentField }).map(({ key, doc_count }) => (
+            <HierarchicalFacetChild
+              field={field}
+              label={key}
+              key={key}
+              count={doc_count}
+              parentValue={label}
+              active={childState?.has(key)}
+              title={title}
+            />
+          ))}
       </AccordionDetails>
     </Accordion>
   );
@@ -321,9 +325,9 @@ export function HierarchicalTermFacetItem({
 export function HierarchicalTermFacet({ field: parentField, childField }: { field: string; childField: string }) {
   const { aggregations } = useSearch();
 
-  const {
-    filters: { [parentField]: filter },
-  } = useSearchStore();
+  const filters = useSearchStore((state) => state.filters);
+
+  const { [parentField]: filter } = filters;
 
   if (!aggregations || !isHierarchicalFilter(filter)) {
     return null;

diff --git a/context/app/static/js/components/search/Results/Results.tsx b/context/app/static/js/components/search/Results/Results.tsx
@@ -19,7 +19,7 @@ function Results() {
     isLoading,
   } = useSearch();
 
-  const { view } = useSearchStore();
+  const view = useSearchStore((state) => state.view);
 
   if (!isLoading && !length) {
     return <NoResults />;

diff --git a/context/app/static/js/components/search/Results/ResultsTable.tsx b/context/app/static/js/components/search/Results/ResultsTable.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import { useShallow } from 'zustand/react/shallow';
 import { SearchHit } from '@elastic/elasticsearch/lib/api/types';
 import TableRow from '@mui/material/TableRow';
 import TableHead from '@mui/material/TableHead';
@@ -59,7 +60,13 @@ export function getSortOrder({
 }
 
 function SortHeaderCell({ field, label }: { field: string; label: string }) {
-  const { sortField, setSortField, analyticsCategory } = useSearchStore();
+  const { sortField, setSortField, analyticsCategory } = useSearchStore(
+    useShallow((state) => ({
+      sortField: state.sortField,
+      setSortField: state.setSortField,
+      analyticsCategory: state.analyticsCategory,
+    })),
+  );
 
   const { direction, field: currentSortField } = sortField;
 
@@ -122,10 +129,15 @@ function HighlightRow({ colSpan, highlight }: { colSpan: number } & Required<Pic
 }
 
 function LoadingRows() {
-  const {
-    sourceFields: { table: tableFields },
-    size,
-  } = useSearchStore();
+  const { sourceFields, size } = useSearchStore(
+    useShallow((state) => ({
+      sourceFields: state.sourceFields,
+      size: state.size,
+    })),
+  );
+
+  const { table: tableFields } = sourceFields;
+
   return Array.from({ length: size }).map((_, i) => (
     // eslint-disable-next-line react/no-array-index-key
     <TableRow key={i}>
@@ -142,9 +154,8 @@ function LoadingRows() {
 function ResultsTable() {
   const { searchHits: hits, isLoading } = useSearch();
 
-  const {
-    sourceFields: { table: tableFields },
-  } = useSearchStore();
+  const sourceFields = useSearchStore((state) => state.sourceFields);
+  const { table: tableFields } = sourceFields;
 
   return (
     <Box>

diff --git a/context/app/static/js/components/search/Results/ResultsTiles.tsx b/context/app/static/js/components/search/Results/ResultsTiles.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import { useShallow } from 'zustand/react/shallow';
 import { SearchHit } from '@elastic/elasticsearch/lib/api/types';
 import Box from '@mui/material/Box';
 import MenuItem from '@mui/material/MenuItem';
@@ -19,12 +20,16 @@ import { useSearchStore } from '../store';
 import { getFieldLabel } from '../fieldConfigurations';
 
 function TilesSortSelect() {
-  const {
-    sortField,
-    setSortField,
-    sourceFields: { table: tableFields },
-    analyticsCategory,
-  } = useSearchStore();
+  const { sortField, setSortField, sourceFields, analyticsCategory } = useSearchStore(
+    useShallow((state) => ({
+      sortField: state.sortField,
+      setSortField: state.setSortField,
+      sourceFields: state.sourceFields,
+      analyticsCategory: state.analyticsCategory,
+    })),
+  );
+
+  const { table: tableFields } = sourceFields;
 
   const handleChange = useCallback(
     (event: SelectChangeEvent) => {

diff --git a/context/app/static/js/components/search/Results/ViewMoreResults.tsx b/context/app/static/js/components/search/Results/ViewMoreResults.tsx
@@ -9,7 +9,7 @@ import { useSearchStore } from '../store';
 
 function ViewMoreResults() {
   const { searchHits: hits, loadMore, totalHitsCount } = useSearch();
-  const { analyticsCategory } = useSearchStore();
+  const analyticsCategory = useSearchStore((state) => state.analyticsCategory);
 
   const resultsShown = `${hits.length} Results Shown | ${totalHitsCount} Total Results`;
 

diff --git a/context/app/static/js/components/search/Search.tsx b/context/app/static/js/components/search/Search.tsx
@@ -160,7 +160,7 @@ function Header({ type }: TypeProps) {
 }
 
 function Bar({ type }: TypeProps) {
-  const { view } = useSearchStore();
+  const view = useSearchStore((state) => state.view);
 
   return (
     <Stack direction="row" spacing={1}>

diff --git a/context/app/static/js/components/search/SearchBar.tsx b/context/app/static/js/components/search/SearchBar.tsx
@@ -1,10 +1,18 @@
 import React, { useCallback, useState } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+
 import { trackSiteSearch, trackEvent } from 'js/helpers/trackers';
 import SearchBarComponent from 'js/shared-styles/inputs/SearchBar';
 import { useSearchStore } from './store';
 
 function SearchBar() {
-  const { setSearch, search, analyticsCategory } = useSearchStore();
+  const { setSearch, search, analyticsCategory } = useSearchStore(
+    useShallow((state) => ({
+      setSearch: state.setSearch,
+      search: state.search,
+      analyticsCategory: state.analyticsCategory,
+    })),
+  );
 
   const [input, setInput] = useState(search);
 

diff --git a/context/app/static/js/components/search/SearchNote.tsx b/context/app/static/js/components/search/SearchNote.tsx
@@ -53,7 +53,7 @@ const paramNotes = [
 ];
 
 function SearchNote() {
-  const { filters } = useSearchStore();
+  const filters = useSearchStore((state) => state.filters);
   const notesToDisplay = paramNotes.filter(({ filter }) => filters?.[filter]);
 
   if (notesToDisplay.length === 0) {

diff --git a/context/app/static/js/components/search/SearchViewSwitch.tsx b/context/app/static/js/components/search/SearchViewSwitch.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import { useShallow } from 'zustand/react/shallow';
 import ListRoundedIcon from '@mui/icons-material/ListRounded';
 import GridOnRoundedIcon from '@mui/icons-material/GridOnRounded';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
@@ -10,7 +11,13 @@ import { trackEvent } from 'js/helpers/trackers';
 import { useSearchStore } from './store';
 
 function SearchViewSwitch({ views }: { views: { label: string; icon: typeof SvgIcon }[] }) {
-  const { view, setView, analyticsCategory } = useSearchStore();
+  const { view, setView, analyticsCategory } = useSearchStore(
+    useShallow((state) => ({
+      view: state.view,
+      setView: state.setView,
+      analyticsCategory: state.analyticsCategory,
+    })),
+  );
 
   const handleChange = useCallback(
     (event: React.MouseEvent<HTMLElement>, v: string) => {