ESCKAN fix: Move phenotype colormap to context

package.json

@@ -21,13 +21,15 @@
     "@mui/material": "^5.15.9",
     "@projectstorm/react-canvas-core": "^7.0.2",
     "@projectstorm/react-diagrams": "^7.0.3",
+    "chroma-js": "^2.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-heatmap-grid": "^0.9.0",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.2"
   },
   "devDependencies": {
+    "@types/chroma-js": "^2.4.4",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^6.21.0",

src/components/Connections.tsx

@@ -7,13 +7,11 @@ import {
   PhenotypeKsIdMap,
   SummaryType,
   KsMapType,
-  PhenotypeType,
 } from './common/Types';
 import { useDataContext } from '../context/DataContext.ts';
 import {
   calculateSecondaryConnections,
   convertViaToString,
-  generatePhenotypeColors,
   getAllPhenotypes,
   getAllViasFromConnections,
   getDestinations,
@@ -63,7 +61,6 @@ function Connections() {
     x: number;
     y: number;
   } | null>(null); // useful for coordinates
-  const [phenotypes, setPhenotypes] = useState<PhenotypeType>({});
   const [knowledgeStatementsMap, setKnowledgeStatementsMap] =
     useState<KsMapType>({});
   const [xAxis, setXAxis] = useState<string[]>([]);
@@ -91,42 +88,12 @@ function Connections() {
   const totalConnectionCount = Object.keys(
     selectedConnectionSummary?.connections || ({} as KsMapType),
   ).length;
-  const phenotypeNamesArray = useMemo(
-    () =>
-      getAllPhenotypes(
-        selectedConnectionSummary?.connections || ({} as KsMapType),
-      ),
-    [selectedConnectionSummary],
-  );
-
-  useEffect(() => {
-    // Generate the phenotype colors and set the phenotypes
-    if (
-      selectedConnectionSummary &&
-      phenotypeNamesArray &&
-      phenotypeNamesArray.length > 0
-    ) {
-      const phenotypeColors: string[] = generatePhenotypeColors(
-        phenotypeNamesArray.length,
-      );
-      const phenotypes: PhenotypeType = {};
-      phenotypeNamesArray.forEach((phenotype, index) => {
-        phenotypes[phenotype] = {
-          label: phenotype,
-          color: phenotypeColors[index],
-        };
-      });
-      setPhenotypes(phenotypes);
-    }
-  }, [phenotypeNamesArray, selectedConnectionSummary]);
-
   const nerves = getNerveFilters(viasConnection, majorNerves);
 
   useEffect(() => {
     // calculate the connectionsMap for the secondary heatmap
     if (
       selectedConnectionSummary &&
-      phenotypes &&
       selectedConnectionSummary.hierarchy &&
       hierarchicalNodes
     ) {
@@ -145,9 +112,13 @@ function Connections() {
     selectedConnectionSummary,
     summaryFilters,
     knowledgeStatements,
-    phenotypes,
   ]);
 
+  const selectedPhenotypes = useMemo(
+    () => getAllPhenotypes(connectionsMap),
+    [connectionsMap],
+  );
+
   useEffect(() => {
     // set the xAxis for the heatmap
     if (selectedConnectionSummary) {
@@ -283,7 +254,10 @@ function Connections() {
                 to view the details of each connections.
               </Typography>
             </Box>
-            <SummaryFiltersDropdown nerves={nerves} phenotypes={phenotypes} />
+            <SummaryFiltersDropdown
+              nerves={nerves}
+              phenotypes={selectedPhenotypes}
+            />
             <HeatmapGrid
               yAxis={yAxis}
               setYAxis={setYAxis}
@@ -293,11 +267,10 @@ function Connections() {
               secondaryHeatmapData={heatmapData}
               xAxisLabel={'Project to'}
               yAxisLabel={'Somas in'}
-              phenotypes={phenotypes}
             />
           </Box>
 
-          <PhenotypeLegend phenotypes={phenotypes} />
+          <PhenotypeLegend phenotypes={selectedPhenotypes} />
         </>
       )}
     </Box>

src/components/SummaryFiltersDropdown.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { SummaryFilters, useDataContext } from '../context/DataContext';
 import CustomFilterDropdown from './common/CustomFilterDropdown';
-import { Option, PhenotypeType } from './common/Types';
+import { Option } from './common/Types';
 import { Box } from '@mui/material';
 import {
   searchNerveFilter,
@@ -33,7 +33,7 @@ const SummaryFiltersDropdown = ({
   phenotypes,
 }: {
   nerves: { [key: string]: string };
-  phenotypes: PhenotypeType;
+  phenotypes: string[];
 }) => {
   const { summaryFilters, setSummaryFilters } = useDataContext();
 
@@ -47,11 +47,11 @@ const SummaryFiltersDropdown = ({
       content: [],
     }));
   };
-  const convertPhenotypesToOptions = (phenotypes: PhenotypeType): Option[] => {
-    return Object.values(phenotypes)
+  const convertPhenotypesToOptions = (phenotypes: string[]): Option[] => {
+    return phenotypes
       .map((phenotype) => ({
-        id: phenotype.label,
-        label: phenotype.label,
+        id: phenotype,
+        label: phenotype,
         group: 'Phenotype',
         content: [],
       }))

src/components/common/Heatmap.tsx

@@ -4,13 +4,14 @@ import { vars } from '../../theme/variables';
 import CollapsibleList from './CollapsibleList';
 import HeatMap from 'react-heatmap-grid';
 import HeatmapTooltip, { HeatmapTooltipRow } from './HeatmapTooltip';
-import { HierarchicalItem, PhenotypeType, PhenotypeKsIdMap } from './Types.ts';
+import { HierarchicalItem, PhenotypeKsIdMap } from './Types.ts';
 import { getNormalizedValueForMinMax } from '../../services/summaryHeatmapService.ts';
 import {
   generateYLabelsAndIds,
   getPhenotypeColors,
 } from '../../services/heatmapService.ts';
 import { OTHER_PHENOTYPE_LABEL } from '../../settings.ts';
+import { useDataContext } from '../../context/DataContext.ts';
 
 const { gray50, primaryPurple500, gray100A, gray500 } = vars;
 
@@ -24,7 +25,6 @@ interface HeatmapGridProps {
   selectedCell?: { x: number; y: number } | null;
   heatmapData?: number[][];
   secondaryHeatmapData?: PhenotypeKsIdMap[][];
-  phenotypes?: PhenotypeType;
 }
 
 const prepareSecondaryHeatmapData = (
@@ -51,8 +51,9 @@ const HeatmapGrid: FC<HeatmapGridProps> = ({
   selectedCell,
   heatmapData,
   secondaryHeatmapData,
-  phenotypes,
 }) => {
+  const { phenotypesColorMap } = useDataContext();
+
   const secondary = !!secondaryHeatmapData;
   const yAxisData = generateYLabelsAndIds(yAxis);
 
@@ -116,7 +117,6 @@ const HeatmapGrid: FC<HeatmapGridProps> = ({
   ) => {
     // Gets the color for secondary heatmap cell based on the phenotypes
     if (
-      phenotypes &&
       secondary &&
       secondaryHeatmapData &&
       secondaryHeatmapData[_y] &&
@@ -126,11 +126,13 @@ const HeatmapGrid: FC<HeatmapGridProps> = ({
       const phenotypeColorsSet = new Set<string>();
 
       Object.keys(heatmapCellPhenotypes).forEach((phenotype) => {
-        const phnColor = phenotypes[phenotype]?.color;
+        const phnColor = phenotypesColorMap[phenotype]?.color;
         if (phnColor) {
           phenotypeColorsSet.add(phnColor);
         } else {
-          phenotypeColorsSet.add(phenotypes[OTHER_PHENOTYPE_LABEL].color);
+          phenotypeColorsSet.add(
+            phenotypesColorMap[OTHER_PHENOTYPE_LABEL].color,
+          );
         }
       });
 
@@ -153,16 +155,15 @@ const HeatmapGrid: FC<HeatmapGridProps> = ({
     if (
       secondary &&
       secondaryHeatmapData &&
-      phenotypes &&
       secondaryHeatmapData[yIndex] &&
       secondaryHeatmapData[yIndex][xIndex]
     ) {
       const heatmapCellPhenotypes = secondaryHeatmapData[yIndex][xIndex];
 
       return Object.keys(heatmapCellPhenotypes).map((phenotype) => ({
         color:
-          phenotypes[phenotype]?.color ||
-          phenotypes[OTHER_PHENOTYPE_LABEL].color,
+          phenotypesColorMap[phenotype]?.color ||
+          phenotypesColorMap[OTHER_PHENOTYPE_LABEL].color,
         name: phenotype,
         count: heatmapCellPhenotypes[phenotype].ksIds.length,
       }));

src/components/common/Types.ts

@@ -50,7 +50,3 @@ export type PhenotypeDetail = {
   label: string;
   color: string;
 };
-
-export type PhenotypeType = {
-  [key: string]: PhenotypeDetail;
-};

src/components/connections/PhenotypeLegend.tsx

@@ -1,11 +1,11 @@
 import { Box, Typography } from '@mui/material';
-import { PhenotypeDetail, PhenotypeType } from '../common/Types';
 import { vars } from '../../theme/variables';
+import { useDataContext } from '../../context/DataContext.ts';
 
 const { gray100 } = vars;
 
-const PhenotypeLegend = ({ phenotypes }: { phenotypes: PhenotypeType }) => {
-  const phenotypesLegends = Object.values(phenotypes);
+const PhenotypeLegend = ({ phenotypes }: { phenotypes: string[] }) => {
+  const { phenotypesColorMap } = useDataContext();
   return (
     <Box
       sx={{
@@ -42,22 +42,22 @@ const PhenotypeLegend = ({ phenotypes }: { phenotypes: PhenotypeType }) => {
             gap: '1.5rem',
           }}
         >
-          {phenotypesLegends?.map((phenotype: PhenotypeDetail) => (
+          {phenotypes.map((phenotype: string) => (
             <Box
               sx={{
                 p: '0.1875rem 0.25rem',
                 display: 'flex',
                 alignItems: 'center',
                 gap: '0.375rem',
               }}
-              key={phenotype.label}
+              key={phenotype}
             >
               <Box
                 sx={{
                   width: '1.4794rem',
                   height: '1rem',
                   borderRadius: '0.125rem',
-                  background: `${phenotype.color}`,
+                  background: `${phenotypesColorMap[phenotype].color}`,
                 }}
               />
               <Typography
@@ -68,7 +68,7 @@ const PhenotypeLegend = ({ phenotypes }: { phenotypes: PhenotypeType }) => {
                   color: '#4A4C4F',
                 }}
               >
-                {phenotype.label}
+                {phenotype}
               </Typography>
             </Box>
           ))}

src/context/DataContext.ts

@@ -4,7 +4,7 @@ import {
   HierarchicalNode,
   KnowledgeStatement,
 } from '../models/explorer';
-import { Option } from '../components/common/Types.ts';
+import { Option, PhenotypeDetail } from '../components/common/Types.ts';
 import { KsMapType } from '../components/common/Types';
 
 export interface Filters {
@@ -41,6 +41,7 @@ export interface DataContext {
   setConnectionSummary: React.Dispatch<
     React.SetStateAction<ConnectionSummary | null>
   >;
+  phenotypesColorMap: Record<string, PhenotypeDetail>;
 }
 
 export const DataContext = createContext<DataContext>({
@@ -64,6 +65,7 @@ export const DataContext = createContext<DataContext>({
   setSummaryFilters: () => {},
   selectedConnectionSummary: null,
   setConnectionSummary: () => {},
+  phenotypesColorMap: {},
 });
 
 export const useDataContext = () => useContext(DataContext);

src/context/DataContextProvider.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useState } from 'react';
+import { PropsWithChildren, useMemo, useState } from 'react';
 import {
   DataContext,
   Filters,
@@ -10,6 +10,9 @@ import {
   KnowledgeStatement,
   Organ,
 } from '../models/explorer.ts';
+import { PhenotypeDetail } from '../components/common/Types.ts';
+import { generatePhenotypeColors } from '../services/summaryHeatmapService.ts';
+import { OTHER_PHENOTYPE_LABEL } from '../settings.ts';
 
 export const DataContextProvider = ({
   hierarchicalNodes,
@@ -39,6 +42,25 @@ export const DataContextProvider = ({
   const [selectedConnectionSummary, setSelectedConnectionSummary] =
     useState<ConnectionSummary | null>(null);
 
+  const phenotypes = useMemo(() => {
+    const allPhenotypes = Object.values(knowledgeStatements).map(
+      (ks) => ks.phenotype || OTHER_PHENOTYPE_LABEL,
+    );
+    return Array.from(new Set(allPhenotypes)); // Get unique phenotypes
+  }, [knowledgeStatements]);
+
+  const phenotypesColorMap = useMemo(() => {
+    const colors = generatePhenotypeColors(phenotypes.length);
+    const colorMap: Record<string, PhenotypeDetail> = {};
+    phenotypes.forEach((phenotype, index) => {
+      colorMap[phenotype] = {
+        label: phenotype,
+        color: colors[index],
+      };
+    });
+    return colorMap;
+  }, [phenotypes]);
+
   const dataContextValue = {
     filters,
     summaryFilters,
@@ -50,6 +72,7 @@ export const DataContextProvider = ({
     setFilters,
     selectedConnectionSummary,
     setConnectionSummary: setSelectedConnectionSummary,
+    phenotypesColorMap,
   };
 
   return (

src/models/explorer.ts

@@ -280,19 +280,19 @@ export interface HierarchicalNode {
   uri: string;
   /**
    *  The children of the node
-   * @type {Array<string>}
+   * @type {Set<string>}
    * @memberof HierarchicalNode
    */
   children: Set<string>;
   /**
    * The connection details of the node targetOrgan -> KnowledgeStatementsId
-   * @type {Record<string, Set<string>>}
+   * @type {Record<string, string[]>}
    * @memberof HierarchicalNode
    */
   connectionDetails?: Record<string, string[]>;
   /**
    * The sub end organs of the node
-   * @type {Record<string, Set<string>>}
+   * @type {Record<string, string[]>}
    * @memberof HierarchicalNode
    */
   destinationDetails?: Record<string, string[]>;