Feature/esckan-43 - connect Summary Filters

src/components/Connections.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { Box, Chip, TextField, Typography } from "@mui/material";
 import { ArrowRightIcon } from "./icons";
 import { vars } from "../theme/variables";
-import { HierarchicalItem, ISubConnections, Option, SummaryType, ksMapType } from "./common/Types";
+import { HierarchicalItem, ISubConnections, PhenotypeDetail, SummaryType, ksMapType } from "./common/Types";
 import { useDataContext } from "../context/DataContext.ts";
 import {
   calculateSecondaryConnections,
@@ -12,13 +12,13 @@ import {
   getYAxisNode
 } from "../services/summaryHeatmapService.ts";
 import { getYAxis, getKnowledgeStatementAndCount } from "../services/heatmapService.ts";
-import CustomFilterDropdown from "./common/CustomFilterDropdown";
 import SummaryHeader from "./connections/SummaryHeader";
 import Details from "./connections/Details.tsx";
 import SummaryInstructions from "./connections/SummaryInstructions.tsx";
 import PhenotypeLegend from "./connections/PhenotypeLegend.tsx";
 import HeatmapGrid from "./common/Heatmap.tsx";
 import { Organ } from "../models/explorer.ts";
+import SummaryFiltersDropdown from "./SummaryFiltersDropdown.tsx";
 
 const { gray700, gray600A, gray100 } = vars;
 
@@ -38,28 +38,6 @@ const styles = {
     }
 }
 
-type PhenotypeDetail = {
-    label: string;
-    color: string;
-};
-const phenotype: PhenotypeDetail[] = [
-    {
-        label: 'Sympathetic',
-        color: '#9B18D8'
-    },
-    {
-        label: 'Parasympathetic',
-        color: '#2C2CCE'
-    },
-    {
-        label: 'Sensory',
-        color: '#DC6803'
-    },
-    {
-        label: 'Motor',
-        color: '#EAAA08'
-    }
-]
 
 
 function Connections() {
@@ -81,44 +59,23 @@ function Connections() {
   const viasConnection = getAllViasFromConnections(selectedConnectionSummary.connections);
   const viasStatement = convertViaToString(Object.values(viasConnection))
   const totalConnectionCount = Object.keys(selectedConnectionSummary.connections).length;
-  const phenotypes = getAllPhenotypes(selectedConnectionSummary.connections);
-  const [phenotypeFilters, setPhenotypeFilters] = useState<PhenotypeDetail[]>(phenotype);
+  const [phenotypeFilters, setPhenotypeFilters] = useState<PhenotypeDetail[]>([]);
 
   useEffect(() => {
     if (!checkIfConnectionSummaryIsEmpty(selectedConnectionSummary)) {
       const phenotypes = getAllPhenotypes(selectedConnectionSummary.connections);
       const phenotypeColors: string[] = generatePhenotypeColors(phenotypes.length)
       setPhenotypeFilters(phenotypes.map((phenotype, index) => ({
         label: phenotype,
-        color: phenotypeColors[index]
+        color: phenotypeColors[index],
+        ksId: ''
       })))
     }
 
   }, [selectedConnectionSummary])
 
   const nerves = getNerveFilters(viasConnection, majorNerves);
 
-  const searchPhenotypeFilter = (searchValue: string): Option[] => {
-    console.log(searchValue)
-    const searchedPhenotype = phenotypes
-    return searchedPhenotype.map((phenotype) => ({
-      id: phenotype,
-      label: phenotype,
-      group: 'Phenotype',
-      content: []
-    }));
-  }
-
-  const searchNerveFilter = (searchValue: string): Option[] => {
-    console.log(searchValue)
-    const searchedNerve = Object.keys(nerves)
-    return searchedNerve.map((nerve) => ({
-      id: nerve,
-      label: nerves[nerve],
-      group: 'Nerve',
-      content: []
-    }));
-  }
 
   useEffect(() => {
     if (!checkIfConnectionSummaryIsEmpty(selectedConnectionSummary) && phenotypeFilters) {
@@ -230,26 +187,7 @@ function Connections() {
                     Summary map shows the connections of the selected connection origin and end organ with phenotypes. Select individual squares to view the details of each connections.
                   </Typography>
                 </Box>
-                <Box display="flex" gap={1} flexWrap='wrap'>
-                    <CustomFilterDropdown
-                        key={"Phenotype"}
-                        id={"Phenotype"}
-                        placeholder="Phenotype"
-                        searchPlaceholder="Search Phenotype"
-                        selectedOptions={[]}
-                      onSearch={(searchValue: string) => searchPhenotypeFilter(searchValue)}
-                        onSelect={() => {}}
-                    />
-                    <CustomFilterDropdown
-                        key={"Nerve"}
-                        id={"Nerve"}
-                        placeholder="Nerve"
-                        searchPlaceholder="Search Nerve"
-                        selectedOptions={[]}
-                      onSearch={(searchValue: string) => searchNerveFilter(searchValue)}
-                        onSelect={() => {}}
-                    />
-                </Box>
+                  <SummaryFiltersDropdown nerves={nerves} phenotypes={phenotypeFilters} />
                   <HeatmapGrid
                     yAxis={yAxis}
                     setYAxis={setYAxis}

src/components/FiltersDropdowns.tsx

@@ -2,7 +2,7 @@ import {Box} from "@mui/material";
 import CustomFilterDropdown from "./common/CustomFilterDropdown.tsx";
 import React, {useMemo} from "react";
 import {Filters, useDataContext} from "../context/DataContext.ts";
-import {Option} from "./common/Types.ts";
+import { Option } from "./common/Types.ts";
 import {
     getUniqueApinatomies, getUniqueOrgans,
     getUniqueOrigins,
@@ -17,7 +17,6 @@ import {
     searchSpecies, searchVias
 } from "../services/searchService.ts";
 
-
 interface FilterConfig {
     id: keyof Filters;
     placeholder: string;

src/components/SummaryFiltersDropdown.tsx

@@ -0,0 +1,85 @@
+import { useMemo } from "react";
+import { SummaryFilters, useDataContext } from "../context/DataContext";
+import CustomFilterDropdown from "./common/CustomFilterDropdown";
+import { Option, PhenotypeDetail } from "./common/Types";
+import { Box } from "@mui/material";
+import { searchNerveFilter, searchPhenotypeFilter } from "../services/searchService";
+import { OTHER_LABEL } from "../constants";
+
+interface FilterConfig {
+	id: keyof SummaryFilters;
+	placeholder: string;
+	searchPlaceholder: string;
+}
+
+const filterConfig: FilterConfig[] = [
+	{
+		id: "Phenotype",
+		placeholder: "Phenotype",
+		searchPlaceholder: "Search phenotype",
+	},
+	{
+		id: "Nerve",
+		placeholder: "Nerve",
+		searchPlaceholder: "Search Nerve",
+	}
+]
+
+const SummaryFiltersDropdown = ({ nerves, phenotypes }: {
+	nerves: { [key: string]: string },
+	phenotypes: PhenotypeDetail[]
+}) => {
+	const { summaryFilters, setSummaryFilters } = useDataContext();
+
+	const convertNervesToOptions = (nerves: { [key: string]: string }): Option[] => {
+		return Object.keys(nerves).map(nerve => ({
+			id: nerve,
+			label: nerves[nerve],
+			group: 'Nerve',
+			content: []
+		}));
+	}
+	const convertPhenotypesToOptions = (phenotypes: PhenotypeDetail[]): Option[] => {
+		// filter the phenotype where label is other
+		return phenotypes.map(phenotype => ({
+			id: phenotype.label,
+			label: phenotype.label,
+			group: 'Phenotype',
+			content: []
+		})).filter(phenotype => phenotype.label !== OTHER_LABEL);
+	}
+
+	const phenotypeOptions = useMemo(() => convertPhenotypesToOptions(phenotypes), [phenotypes]);
+	const nerveOptions = useMemo(() => convertNervesToOptions(nerves), [nerves]);
+
+	const handleSelect = (filterKey: keyof typeof summaryFilters, selectedOptions: Option[]) => {
+		setSummaryFilters(prevFilters => ({
+			...prevFilters,
+			[filterKey]: selectedOptions
+		}));
+	};
+
+	const searchFunctions = {
+		Phenotype: (value: string) => searchPhenotypeFilter(value, phenotypeOptions),
+		Nerve: (value: string) => searchNerveFilter(value, nerveOptions)
+	};
+
+	return (
+		<Box display="flex" gap={1} flexWrap="wrap">
+			{filterConfig.map(filter => (
+				<CustomFilterDropdown
+					key={filter.id}
+					id={filter.id}
+					placeholder={filter.placeholder}
+					searchPlaceholder={filter.searchPlaceholder}
+					selectedOptions={summaryFilters[filter.id]}
+					onSearch={(searchValue: string) => searchFunctions[filter.id](searchValue)}
+					onSelect={(options: Option[]) => handleSelect(filter.id as keyof SummaryFilters, options)}
+				/>
+			))}
+		</Box>
+	)
+
+}
+
+export default SummaryFiltersDropdown;

src/components/common/Types.ts

@@ -31,4 +31,5 @@ export interface HierarchicalItem {
 export type PhenotypeDetail = {
   label: string;
   color: string;
-};
+  ksId: string;
+};

src/constants.tsx

@@ -0,0 +1 @@
+export const OTHER_LABEL = 'other'

src/services/searchService.ts

@@ -1,6 +1,6 @@
 // Search origins
-import {Option} from "../components/common/Types.ts";
-import {SYNONYMS_TITLE} from "../settings.ts";
+import { Option } from "../components/common/Types.ts";
+import { SYNONYMS_TITLE } from "../settings.ts";
 
 export const searchOrigins = (searchValue: string, options: Option[]): Option[] => {
     return searchAnatomicalEntities(searchValue, options);
@@ -26,6 +26,13 @@ export const searchVias = (searchValue: string, options: Option[]): Option[] =>
     return searchAnatomicalEntities(searchValue, options);
 };
 
+export const searchNerveFilter = (value: string, nerveOptions: Option[]): Option[] => {
+    return searchByLabel(value, nerveOptions);
+}
+
+export const searchPhenotypeFilter = (value: string, phenotypeOptions: Option[]): Option[] => {
+    return searchByLabel(value, phenotypeOptions);
+}
 
 const searchByLabel = (searchValue: string, options: Option[]): Option[] => {
     const lowerSearchValue = searchValue.toLowerCase();

src/services/summaryHeatmapService.ts

@@ -3,6 +3,7 @@ import { HierarchicalItem, ISubConnections, ksMapType } from "../components/comm
 import { ConnectionSummary, SummaryFilters } from "../context/DataContext.ts";
 import { HierarchicalNode, KnowledgeStatement, Organ } from "../models/explorer.ts";
 import { PhenotypeDetail } from "../components/common/Types.ts";
+import { OTHER_LABEL } from "../constants.tsx";
 
 
 export const checkIfConnectionSummaryIsEmpty = (connectionSummary: ConnectionSummary): boolean => {
@@ -58,7 +59,7 @@ export function getAllPhenotypes(connections: ksMapType): string[] {
 		if (connection.ks?.phenotype) {
 			phenotypeNames.add(connection.ks.phenotype);
 		} else {
-			phenotypeNames.add('other');
+			phenotypeNames.add(OTHER_LABEL);
 		}
 	});
 	return Array.from(phenotypeNames)
@@ -129,8 +130,14 @@ export function getSecondaryHeatmapData(yAxis: HierarchicalItem[], connections:
 export function summaryFilterKnowledgeStatements(knowledgeStatements: Record<string, KnowledgeStatement>, summaryFilters: SummaryFilters): Record<string, KnowledgeStatement> {
 	const phenotypeIds = summaryFilters.Phenotype.map(option => option.id);
 	const nerveIds = summaryFilters.Nerve.map(option => option.id);
-	console.log(phenotypeIds, nerveIds);
-	return knowledgeStatements;
+	return Object.entries(knowledgeStatements).reduce((filtered, [id, ks]) => {
+		const phenotypeMatch = !phenotypeIds.length || phenotypeIds.includes(ks.phenotype);
+		const nerveMatch = !nerveIds.length || ks.via?.some(via => via.anatomical_entities.map(entity => entity.id).some(id => nerveIds.includes(id)));
+		if (phenotypeMatch && nerveMatch) {
+			filtered[id] = ks;
+		}
+		return filtered;
+	}, {} as Record<string, KnowledgeStatement>);
 }
 
 export function calculateSecondaryConnections(
@@ -187,7 +194,7 @@ export function calculateSecondaryConnections(
 							const ksPhenotypes = knowledgeStatementIds.map(ksId => knowledgeStatements[ksId].phenotype).filter(phenotype => phenotype !== '');
 							const phenotypeColorsSet = new Set<string>();
 
-							const unknownFilter = phenotypes.find(p => p.label === 'other');
+							const unknownFilter = phenotypes.find(p => p.label === OTHER_LABEL);
 							ksPhenotypes.length === 0 ? phenotypeColorsSet.add(unknownFilter?.color || '') :
 								ksPhenotypes.map(phenotype => {
 									const phn = phenotypes.find(p => p.label === phenotype);
@@ -220,5 +227,6 @@ export const getNormalizedValueForMinMax = (value: number, min: number, max: num
 	// keep the min 0 always... 
 	// Ex. for situations where min is 4... the value 4 will not be shown...
 	min = 0;
+	if (max === 0) return 0;
 	return max !== min ? (value - min) / (max - min) : 1;
 }