ESCKAN-20 linting cleanup

src/components/Connections.tsx

@@ -2,23 +2,21 @@ 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, SubConnections, PhenotypeDetail, SummaryType, KsMapType, LabelIdPair } from "./common/Types";
+import { HierarchicalItem, SubConnections, PhenotypeDetail, SummaryType, KsMapType } from "./common/Types";
 import { useDataContext } from "../context/DataContext.ts";
 import {
   calculateSecondaryConnections,
   convertViaToString, generatePhenotypeColors,
   getAllPhenotypes, getAllViasFromConnections, getNerveFilters,
   getSecondaryHeatmapData,
   getXAxisForHeatmap,
-  getYAxisNode
 } from "../services/summaryHeatmapService.ts";
-import { getYAxis, getKnowledgeStatementMap, generateYLabelsAndIds } from "../services/heatmapService.ts";
-import CustomFilterDropdown from "./common/CustomFilterDropdown";
+import { getYAxis, getKnowledgeStatementMap } from "../services/heatmapService.ts";
 import SummaryHeader from "./connections/SummaryHeader";
 import SummaryInstructions from "./connections/SummaryInstructions.tsx";
 import PhenotypeLegend from "./connections/PhenotypeLegend.tsx";
 import HeatmapGrid from "./common/Heatmap.tsx";
-import { BaseEntity, HierarchicalNode, Organ } from "../models/explorer.ts";
+import { BaseEntity, Organ } from "../models/explorer.ts";
 import SummaryDetails from "./connections/SummaryDetails.tsx";
 import SummaryFiltersDropdown from "./SummaryFiltersDropdown.tsx";
 

src/components/ConnectivityGrid.tsx

@@ -7,10 +7,9 @@ import {
     calculateConnections, getMinMaxConnections, getHierarchyFromId,
     getXAxisOrgans, getYAxis, getHeatmapData,
     getKnowledgeStatementMap,
-    generateYLabelsAndIds
 } from "../services/heatmapService.ts";
 import FiltersDropdowns from "./FiltersDropdowns.tsx";
-import { DetailedHeatmapData, HierarchicalItem } from "./common/Types.ts";
+import { HierarchicalItem } from "./common/Types.ts";
 import { Organ } from "../models/explorer.ts";
 import Loader from "./common/Loader.tsx";
 

src/components/common/Heatmap.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo, } from "react";
+import React, { FC, useCallback, useMemo, } from "react";
 import { Box, Typography } from "@mui/material";
 import { vars } from "../../theme/variables";
 import CollapsibleList from "./CollapsibleList";
@@ -24,20 +24,23 @@ interface HeatmapGridProps {
 }
 
 const prepareSecondaryHeatmapData = (data?: SubConnections[][]): number[][] => {
-    return useMemo(() => {
-        if (!data) return [];
-        return data.map(row => row.map(cell => cell.ksIds.size));
-    }, [data])
+    if (!data) return [];
+    return data.map(row => row.map(cell => cell.ksIds.size));
 }
 
+
 const HeatmapGrid: FC<HeatmapGridProps> = ({
     xAxis, yAxis, setYAxis,
     xAxisLabel, yAxisLabel,
     onCellClick, selectedCell, heatmapData, secondaryHeatmapData
 }) => {
     const secondary = secondaryHeatmapData ? true : false;
-    const heatmapMatrixData = secondary ? prepareSecondaryHeatmapData(secondaryHeatmapData) : heatmapData;
-    const handleCollapseClick = (item: HierarchicalItem) => {
+
+    const heatmapMatrixData = useMemo(() => {
+        return secondary ? prepareSecondaryHeatmapData(secondaryHeatmapData) : heatmapData;
+    }, [secondary, secondaryHeatmapData, heatmapData]);
+
+    const handleCollapseClick = useCallback((item: HierarchicalItem) => {
         const updateList = (list: HierarchicalItem[], selectedItem: HierarchicalItem): HierarchicalItem[] => {
             return list?.map(listItem => {
                 if (listItem.label === selectedItem.label) {
@@ -50,10 +53,12 @@ const HeatmapGrid: FC<HeatmapGridProps> = ({
         };
         const updatedList = updateList(yAxis, item);
         setYAxis(updatedList);
-    };
+    }, [yAxis, setYAxis]);
 
     const yAxisData = generateYLabelsAndIds(yAxis);
 
+
+
     const handleCellClick = (x: number, y: number) => {
         const ids = yAxisData.ids
         if (onCellClick) {

src/services/heatmapService.ts

@@ -211,7 +211,7 @@ export const getPhenotypeColors = (normalizedValue: number, phenotypeColors: str
     });
 
     // if there are multiple colors, create a linear gradient
-    let phenotypeColor = phenotypeColors.length > 1 ? `linear-gradient(to right, ${phenotypeColorsWithPercentage.join(',')}` :
+    const phenotypeColor = phenotypeColors.length > 1 ? `linear-gradient(to right, ${phenotypeColorsWithPercentage.join(',')}` :
         phenotypeColors.length === 1 ? phenotypeColors[0] : '';
 
     // ADD the following if we need opacity for secondary/phenotype heatmap -  replace the alpha value of the color with the normalized value