Fix up client for tall differential expression (#1595)

Note: dimensionality-reduction still TO DO - PCA is commented out. Some notes on this in CLAUDE-going-tall-next-steps.md 

* Enhance variable constraints system to filter on variableIds and implement basic InputVariables pickers for DE compute

* next steps documentation

* resolve some keyless list react errors

* upgrade visx and revert Jeremy's fork to see what's going on

* cleaned up notebook typing and null safety

* remove duplication

* small fix for new wdkState typing

* wiring of EDA notebook to WDK params eda_analysis_spec, eda_dataset_id and eda_notebook_type

* first fixes for stale state issues

* improve verbiage

* fix janky state updates in 'Comparison Group' dropdowns

* auto section numbering

* update Claude progress

* add sense/antisense variable ID support

* make compatible variables toggle work and add it by default

* move metadata variable into the InputVariables system to get proper entity constraints, 'only show compatible vars' and cancel button functionality

Author: bobular

CLAUDE-going-tall-next-steps.md

@@ -12,16 +12,16 @@
     "@typescript-eslint/eslint-plugin": "^5.46.0",
     "@typescript-eslint/parser": "^5.46.0",
     "@veupathdb/coreui": "workspace:^",
-    "@visx/axis": "^3.1.0",
-    "@visx/brush": "^3.0.1",
-    "@visx/gradient": "^1.0.0",
-    "@visx/group": "^1.0.0",
-    "@visx/hierarchy": "^1.0.0",
-    "@visx/shape": "^1.4.0",
-    "@visx/text": "^1.3.0",
-    "@visx/tooltip": "^1.3.0",
-    "@visx/visx": "^1.1.0",
-    "@visx/xychart": "https://github.com/jernestmyers/visx.git#visx-xychart",
+    "@visx/axis": "^3.12.0",
+    "@visx/brush": "^3.12.0",
+    "@visx/gradient": "^3.12.0",
+    "@visx/group": "^3.12.0",
+    "@visx/hierarchy": "^3.12.0",
+    "@visx/shape": "^3.12.0",
+    "@visx/text": "^3.12.0",
+    "@visx/tooltip": "^3.12.0",
+    "@visx/visx": "^3.12.0",
+    "@visx/xychart": "^3.12.0",
     "bootstrap": "^4.5.2",
     "color-math": "^1.1.3",
     "d3": "^7.1.1",

packages/libs/components/package.json

@@ -21,7 +21,7 @@ import { ToImgopts } from 'plotly.js';
 import { gray } from '@veupathdb/coreui/lib/definitions/colors';
 import { ExportPlotToImageButton } from './ExportPlotToImageButton';
 import { plotToImage } from './visxVEuPathDB';
-import { GlyphTriangle } from '@visx/visx';
+import { GlyphTriangle } from '@visx/glyph';
 import { Option as NodeLabelProp } from '../components/plotControls/MultiSelect';
 
 import './NetworkPlot.css';

packages/libs/components/src/plots/NetworkPlot.tsx

@@ -24,7 +24,6 @@ import {
   AnnotationLabel,
   Tooltip,
 } from '@visx/xychart';
-import findNearestDatumXY from '@visx/xychart/lib/utils/findNearestDatumXY';
 import { Group } from '@visx/group';
 import {
   gridStyles,
@@ -35,7 +34,7 @@ import {
 } from './visxVEuPathDB';
 import { Polygon } from '@visx/shape';
 import { useContext } from 'react';
-import { PatternLines } from '@visx/visx';
+import { PatternLines } from '@visx/pattern';
 import Spinner from '../components/Spinner';
 // For screenshotting
 import { ToImgopts } from 'plotly.js';
@@ -296,7 +295,6 @@ function VolcanoPlot(props: VolcanoPlotProps, ref: Ref<HTMLDivElement>) {
               ],
               zero: false,
             }}
-            findNearestDatumOverride={findNearestDatumXY}
             margin={{
               top: MARGIN_DEFAULT,
               right: showFlooredDataAnnotation ? 150 : MARGIN_DEFAULT + 10,
@@ -322,6 +320,7 @@ function VolcanoPlot(props: VolcanoPlotProps, ref: Ref<HTMLDivElement>) {
               comparisonLabels.map((label, ind) => {
                 return (
                   <Annotation
+                    key={ind}
                     datum={{
                       x: [xAxisMin, xAxisMax][ind], // Labels go at extremes of x axis
                       y:
@@ -428,7 +427,6 @@ function VolcanoPlot(props: VolcanoPlotProps, ref: Ref<HTMLDivElement>) {
                 data={data.statistics}
                 {...dataAccessors}
                 colorAccessor={(d: VolcanoPlotDataPoint) => d.significanceColor}
-                findNearestDatumOverride={findNearestDatumXY}
               />
             </Group>
             <Tooltip<VolcanoPlotDataPoint>

packages/libs/components/src/plots/VolcanoPlot.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { ReactNode } from 'react';
 
 export type NumberedHeaderProps = {
   number: number;
-  text: string;
+  children: ReactNode;
   color?: string;
 };
 
@@ -48,7 +48,7 @@ export default function NumberedHeader(props: NumberedHeaderProps) {
           fontWeight: 'bold',
         }}
       >
-        {props.text}
+        {props.children}
       </div>
     </div>
   );

packages/libs/coreui/src/components/forms/NumberedHeader.tsx

@@ -8,7 +8,7 @@ type ComputationStepContainer = {
   children: React.ReactChild;
   computationStepInfo: {
     stepNumber: NumberedHeaderProps['number'];
-    stepTitle: NumberedHeaderProps['text'];
+    stepTitle: string;
     color?: NumberedHeaderProps['color'];
   };
   isStepDisabled?: boolean;
@@ -35,9 +35,10 @@ export function ComputationStepContainer(props: ComputationStepContainer) {
       {showStepNumber && (
         <NumberedHeader
           number={computationStepInfo.stepNumber}
-          text={computationStepInfo.stepTitle}
           color={isStepDisabled ? 'darkgrey' : primaryColor}
-        />
+        >
+          {computationStepInfo.stepTitle}
+        </NumberedHeader>
       )}
       {children}
     </div>

packages/libs/eda/src/lib/core/components/computations/ComputationStepContainer.tsx

@@ -404,3 +404,15 @@ export function partialToCompleteCodec<T extends {}>(
 ): t.TypeC<T> {
   return t.type(partialCodec.props);
 }
+
+/**
+ * Stable IDs for gene expression variables in tall format.
+ * These IDs are used to identify specific variables in the differential expression plugin.
+ */
+export const GENE_EXPRESSION_STABLE_IDS = {
+  IDENTIFIER: 'VEUPATHDB_GENE_ID',
+  COUNT: 'SEQUENCE_READ_COUNT',
+  COUNT_SENSE: 'SEQUENCE_READ_COUNT_SENSE',
+  COUNT_ANTISENSE: 'SEQUENCE_READ_COUNT_ANTISENSE',
+  NORMALIZED: 'NORMALIZED_EXPRESSION',
+} as const;