SAM - fix floater overlay order

packages/libs/eda/src/lib/core/api/DataClient/types.ts

@@ -758,6 +758,15 @@ export const MapMarkersOverlayResponse = type({
 
 // OverlayConfig will be used for all next-gen visualizations eventually
 
+export type BinDefinitions = TypeOf<typeof BinDefinitions>;
+export const BinDefinitions = array(
+  type({
+    binStart: string,
+    binEnd: string,
+    binLabel: string,
+  })
+);
+
 export type OverlayConfig = TypeOf<typeof OverlayConfig>;
 export const OverlayConfig = intersection([
   type({
@@ -771,13 +780,7 @@ export const OverlayConfig = intersection([
     }),
     type({
       overlayType: literal('continuous'),
-      overlayValues: array(
-        type({
-          binStart: string,
-          binEnd: string,
-          binLabel: string,
-        })
-      ),
+      overlayValues: BinDefinitions,
     }),
   ]),
 ]);

packages/libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx

@@ -53,6 +53,7 @@ import {
   nonUniqueWarning,
   hasIncompleteCases,
   assertValidInputVariables,
+  substituteUnselectedToken,
 } from '../../../utils/visualization';
 import { VariablesByInputName } from '../../../utils/data-element-constraints';
 // use lodash instead of Math.min/max
@@ -73,7 +74,10 @@ import PlotLegend from '@veupathdb/components/lib/components/plotControls/PlotLe
 import { LegendItemsProps } from '@veupathdb/components/lib/components/plotControls/PlotListLegend';
 
 // import { gray } from '../colors';
-import { ColorPaletteDefault } from '@veupathdb/components/lib/types/plots/addOns';
+import {
+  ColorPaletteDefault,
+  SequentialGradientColorscale,
+} from '@veupathdb/components/lib/types/plots/addOns';
 // a custom hook to preserve the status of checked legend items
 import { useCheckedLegendItems } from '../../../hooks/checkedLegendItemsStatus';
 
@@ -452,26 +456,30 @@ function BarplotViz(props: VisualizationProps<Options>) {
         variable?.vocabulary,
         variable
       );
-      const overlayVocabulary = fixLabelsForNumberVariables(
-        overlayVariable?.vocabulary,
-        overlayVariable
-      );
+      const overlayVocabulary =
+        (overlayVariable && options?.getOverlayVocabulary?.()) ??
+        fixLabelsForNumberVariables(
+          overlayVariable?.vocabulary,
+          overlayVariable
+        );
       const facetVocabulary = fixLabelsForNumberVariables(
         facetVariable?.vocabulary,
         facetVariable
       );
 
       return grayOutLastSeries(
-        reorderData(
-          barplotResponseToData(
-            response,
-            variable,
-            overlayVariable,
-            facetVariable
-          ),
-          vocabulary,
-          vocabularyWithMissingData(overlayVocabulary, showMissingOverlay),
-          vocabularyWithMissingData(facetVocabulary, showMissingFacet)
+        substituteUnselectedToken(
+          reorderData(
+            barplotResponseToData(
+              response,
+              variable,
+              overlayVariable,
+              facetVariable
+            ),
+            vocabulary,
+            vocabularyWithMissingData(overlayVocabulary, showMissingOverlay),
+            vocabularyWithMissingData(facetVocabulary, showMissingFacet)
+          )
         ),
         showMissingOverlay
       );
@@ -675,6 +683,10 @@ function BarplotViz(props: VisualizationProps<Options>) {
         max: truncationConfigDependentAxisMax,
       },
     },
+    colorPalette:
+      options?.getOverlayType?.() === 'continuous'
+        ? SequentialGradientColorscale
+        : ColorPaletteDefault,
     ...neutralPaletteProps,
   };
 

packages/libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx

@@ -61,14 +61,18 @@ import {
   fixVarIdLabel,
   getVariableLabel,
   assertValidInputVariables,
+  substituteUnselectedToken,
 } from '../../../utils/visualization';
 import { VariablesByInputName } from '../../../utils/data-element-constraints';
 import { StudyEntity, Variable } from '../../../types/study';
 import { isFaceted } from '@veupathdb/components/lib/types/guards';
 // custom legend
 import PlotLegend from '@veupathdb/components/lib/components/plotControls/PlotLegend';
 import { LegendItemsProps } from '@veupathdb/components/lib/components/plotControls/PlotListLegend';
-import { ColorPaletteDefault } from '@veupathdb/components/lib/types/plots/addOns';
+import {
+  ColorPaletteDefault,
+  SequentialGradientColorscale,
+} from '@veupathdb/components/lib/types/plots/addOns';
 // a custom hook to preserve the status of checked legend items
 import { useCheckedLegendItems } from '../../../hooks/checkedLegendItemsStatus';
 import {
@@ -522,27 +526,31 @@ function BoxplotViz(props: VisualizationProps<Options>) {
         xAxisVariable?.vocabulary,
         xAxisVariable
       );
-      const overlayVocabulary = fixLabelsForNumberVariables(
-        overlayVariable?.vocabulary,
-        overlayVariable
-      );
+      const overlayVocabulary =
+        (overlayVariable && options?.getOverlayVocabulary?.()) ??
+        fixLabelsForNumberVariables(
+          overlayVariable?.vocabulary,
+          overlayVariable
+        );
       const facetVocabulary = fixLabelsForNumberVariables(
         facetVariable?.vocabulary,
         facetVariable
       );
       return grayOutLastSeries(
-        reorderData(
-          boxplotResponseToData(
-            response,
-            xAxisVariable,
-            overlayVariable,
-            facetVariable,
+        substituteUnselectedToken(
+          reorderData(
+            boxplotResponseToData(
+              response,
+              xAxisVariable,
+              overlayVariable,
+              facetVariable,
+              entities
+            ),
+            vocabulary,
+            vocabularyWithMissingData(overlayVocabulary, showMissingOverlay),
+            vocabularyWithMissingData(facetVocabulary, showMissingFacet),
             entities
-          ),
-          vocabulary,
-          vocabularyWithMissingData(overlayVocabulary, showMissingOverlay),
-          vocabularyWithMissingData(facetVocabulary, showMissingFacet),
-          entities
+          )
         ),
         showMissingOverlay,
         '#a0a0a0'
@@ -720,6 +728,11 @@ function BoxplotViz(props: VisualizationProps<Options>) {
       truncatedDependentAxisWarning={truncatedDependentAxisWarning}
       setTruncatedDependentAxisWarning={setTruncatedDependentAxisWarning}
       dependentAxisMinMax={dependentAxisMinMax}
+      colorPalette={
+        options?.getOverlayType?.() === 'continuous'
+          ? SequentialGradientColorscale
+          : ColorPaletteDefault
+      }
       {...neutralPaletteProps}
     />
   );

packages/libs/eda/src/lib/core/components/visualizations/implementations/HistogramVisualization.tsx

@@ -64,6 +64,7 @@ import {
   variablesAreUnique,
   nonUniqueWarning,
   assertValidInputVariables,
+  substituteUnselectedToken,
 } from '../../../utils/visualization';
 import { useUpdateThumbnailEffect } from '../../../hooks/thumbnails';
 // import variable's metadata-based independent axis range utils
@@ -72,7 +73,10 @@ import PluginError from '../PluginError';
 // for custom legend
 import PlotLegend from '@veupathdb/components/lib/components/plotControls/PlotLegend';
 import { LegendItemsProps } from '@veupathdb/components/lib/components/plotControls/PlotListLegend';
-import { ColorPaletteDefault } from '@veupathdb/components/lib/types/plots/addOns';
+import {
+  ColorPaletteDefault,
+  SequentialGradientColorscale,
+} from '@veupathdb/components/lib/types/plots/addOns';
 // a custom hook to preserve the status of checked legend items
 import { useCheckedLegendItems } from '../../../hooks/checkedLegendItemsStatus';
 
@@ -521,24 +525,28 @@ function HistogramViz(props: VisualizationProps<Options>) {
           response.completeCasesTable
         );
 
-      const overlayVocabulary = fixLabelsForNumberVariables(
-        overlayVariable?.vocabulary,
-        overlayVariable
-      );
+      const overlayVocabulary =
+        (overlayVariable && options?.getOverlayVocabulary?.()) ??
+        fixLabelsForNumberVariables(
+          overlayVariable?.vocabulary,
+          overlayVariable
+        );
       const facetVocabulary = fixLabelsForNumberVariables(
         facetVariable?.vocabulary,
         facetVariable
       );
       return grayOutLastSeries(
-        reorderData(
-          histogramResponseToData(
-            response,
-            xAxisVariable,
-            overlayVariable,
-            facetVariable
-          ),
-          vocabularyWithMissingData(overlayVocabulary, showMissingOverlay),
-          vocabularyWithMissingData(facetVocabulary, showMissingFacet)
+        substituteUnselectedToken(
+          reorderData(
+            histogramResponseToData(
+              response,
+              xAxisVariable,
+              overlayVariable,
+              facetVariable
+            ),
+            vocabularyWithMissingData(overlayVocabulary, showMissingOverlay),
+            vocabularyWithMissingData(facetVocabulary, showMissingFacet)
+          )
         ),
         showMissingOverlay
       );
@@ -878,6 +886,10 @@ function HistogramViz(props: VisualizationProps<Options>) {
         max: truncationConfigDependentAxisMax,
       },
     },
+    colorPalette:
+      options?.getOverlayType?.() === 'continuous'
+        ? SequentialGradientColorscale
+        : ColorPaletteDefault,
     ...neutralPaletteProps,
   };
 

packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx

@@ -85,11 +85,13 @@ import {
   vocabularyWithMissingData,
   hasIncompleteCases,
   assertValidInputVariables,
+  substituteUnselectedToken,
 } from '../../../utils/visualization';
 import { gray } from '../colors';
 import {
   AvailableUnitsAddon,
   ColorPaletteDefault,
+  SequentialGradientColorscale,
 } from '@veupathdb/components/lib/types/plots/addOns';
 // import variable's metadata-based independent axis range utils
 import { VariablesByInputName } from '../../../utils/data-element-constraints';
@@ -320,6 +322,12 @@ function LineplotViz(props: VisualizationProps<Options>) {
     providedOverlayVariableDescriptor
   );
 
+  const colorPaletteOverride =
+    neutralPaletteProps.colorPalette ??
+    options?.getOverlayType?.() === 'continuous'
+      ? SequentialGradientColorscale
+      : undefined;
+
   const findEntityAndVariable = useFindEntityAndVariable(filters);
 
   const {
@@ -739,10 +747,12 @@ function LineplotViz(props: VisualizationProps<Options>) {
         xAxisVariable?.vocabulary,
         xAxisVariable
       );
-      const overlayVocabulary = fixLabelsForNumberVariables(
-        overlayVariable?.vocabulary,
-        overlayVariable
-      );
+      const overlayVocabulary =
+        (overlayVariable && options?.getOverlayVocabulary?.()) ??
+        fixLabelsForNumberVariables(
+          overlayVariable?.vocabulary,
+          overlayVariable
+        );
       const facetVocabulary = fixLabelsForNumberVariables(
         facetVariable?.vocabulary,
         facetVariable
@@ -762,7 +772,7 @@ function LineplotViz(props: VisualizationProps<Options>) {
         showMissingFacet,
         facetVocabulary,
         facetVariable,
-        neutralPaletteProps.colorPalette
+        colorPaletteOverride
       );
     }, [
       outputEntity,
@@ -1955,7 +1965,7 @@ export function lineplotResponseToData(
           })),
         };
   return {
-    dataSetProcess,
+    dataSetProcess: substituteUnselectedToken(dataSetProcess!),
     // calculated y axis limits
     xMin,
     xMinPos,

packages/libs/eda/src/lib/core/components/visualizations/implementations/ScatterplotVisualization.tsx

@@ -78,13 +78,15 @@ import {
   fixVarIdLabel,
   getVariableLabel,
   assertValidInputVariables,
+  substituteUnselectedToken,
 } from '../../../utils/visualization';
 import { gray } from '../colors';
 import {
   ColorPaletteDefault,
   ColorPaletteDark,
   gradientSequentialColorscaleMap,
   gradientDivergingColorscaleMap,
+  SequentialGradientColorscale,
 } from '@veupathdb/components/lib/types/plots/addOns';
 import { VariablesByInputName } from '../../../utils/data-element-constraints';
 import { useRouteMatch } from 'react-router';
@@ -353,7 +355,11 @@ function ScatterplotViz(props: VisualizationProps<Options>) {
     vizConfig.overlayVariable,
     providedOverlayVariableDescriptor
   );
-
+  const colorPaletteOverride =
+    neutralPaletteProps.colorPalette ??
+    options?.getOverlayType?.() === 'continuous'
+      ? SequentialGradientColorscale
+      : ColorPaletteDefault;
   const findEntityAndVariable = useFindEntityAndVariable(filters);
 
   const {
@@ -779,7 +785,11 @@ function ScatterplotViz(props: VisualizationProps<Options>) {
         ? response.scatterplot.config.variables.find(
             (v) => v.plotReference === 'overlay' && v.vocabulary != null
           )?.vocabulary
-        : fixLabelsForNumberVariables(
+        : // TO DO: remove the categorical condition when https://github.com/VEuPathDB/EdaNewIssues/issues/642 is sorted
+          (overlayVariable && options?.getOverlayType?.() === 'categorical'
+            ? options?.getOverlayVocabulary?.()
+            : undefined) ??
+          fixLabelsForNumberVariables(
             overlayVariable?.vocabulary,
             overlayVariable
           );
@@ -800,7 +810,7 @@ function ScatterplotViz(props: VisualizationProps<Options>) {
         // pass computation
         computation.descriptor.type,
         entities,
-        neutralPaletteProps.colorPalette
+        colorPaletteOverride
       );
       return {
         ...returnData,
@@ -2226,7 +2236,7 @@ export function scatterplotResponseToData(
       );
 
     return {
-      dataSetProcess: dataSetProcess,
+      dataSetProcess: substituteUnselectedToken(dataSetProcess),
       xMin,
       xMinPos,
       xMax,

packages/libs/eda/src/lib/core/components/visualizations/options/types.ts

@@ -1,3 +1,4 @@
+import { OverlayConfig } from '../../../api/DataClient';
 import { Filter } from '../../../types/filter';
 import { VariableDescriptor } from '../../../types/variable';
 import { Computation } from '../../../types/visualization';
@@ -11,6 +12,8 @@ export interface OverlayOptions {
     computeConfig: unknown
   ) => VariableDescriptor | undefined;
   getOverlayVariableHelp?: () => string;
+  getOverlayType?: () => OverlayConfig['overlayType'] | undefined;
+  getOverlayVocabulary?: () => string[] | undefined;
   getCheckedLegendItems?: (computeConfig: unknown) => string[] | undefined;
 }