Implement advanced map marker configuration menu

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

@@ -767,6 +767,12 @@ export const BinDefinitions = array(
   })
 );
 
+export type AllValuesDefinition = TypeOf<typeof AllValuesDefinition>;
+export const AllValuesDefinition = type({
+  label: string,
+  count: number,
+});
+
 export type OverlayConfig = TypeOf<typeof OverlayConfig>;
 export const OverlayConfig = intersection([
   type({
@@ -777,6 +783,7 @@ export const OverlayConfig = intersection([
     type({
       overlayType: literal('categorical'),
       overlayValues: array(string),
+      allValuesSorted: array(AllValuesDefinition),
     }),
     type({
       overlayType: literal('continuous'),

packages/libs/eda/src/lib/map/analysis/MapAnalysis.tsx

@@ -2,6 +2,7 @@ import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 
 import {
   AnalysisState,
+  CategoricalVariableDataShape,
   DEFAULT_ANALYSIS_NAME,
   EntityDiagram,
   OverlayConfig,
@@ -274,17 +275,26 @@ function MapAnalysisImpl(props: ImplProps) {
   // get the default overlay config.
   const activeOverlayConfig = usePromise(
     useCallback(async (): Promise<OverlayConfig | undefined> => {
-      // TODO Use `selectedValues` to generate the overlay config. Something like this:
-      // if (activeMarkerConfiguration?.selectedValues) {
-      //   return {
-      //     overlayType: CategoryVariableDataShape.is(overlayVariable?.dataShape) ? 'categorical' : 'continuous',
-      //     overlayVariable: {
-      //       variableId: overlayVariable.id,
-      //       entityId: overlayEntity.id,
-      //     },
-      //     overlayValues: activeMarkerConfiguration.selectedValues
-      //   } as OverlayConfig
-      // }
+      // Use `selectedValues` to generate the overlay config
+      if (
+        activeMarkerConfiguration?.selectedValues &&
+        activeMarkerConfiguration?.allValues
+      ) {
+        return {
+          overlayType: CategoricalVariableDataShape.is(
+            overlayVariable?.dataShape
+          )
+            ? 'categorical'
+            : 'continuous',
+          overlayVariable: {
+            variableId: overlayVariable?.id,
+            entityId: overlayEntity?.id,
+          },
+          overlayValues: activeMarkerConfiguration.selectedValues,
+          allValuesSorted: activeMarkerConfiguration.allValues,
+        } as OverlayConfig;
+      }
+
       return getDefaultOverlayConfig({
         studyId,
         filters,
@@ -300,6 +310,8 @@ function MapAnalysisImpl(props: ImplProps) {
       overlayVariable,
       studyId,
       subsettingClient,
+      activeMarkerConfiguration?.selectedValues,
+      activeMarkerConfiguration?.allValues,
     ])
   );
 
@@ -503,6 +515,11 @@ function MapAnalysisImpl(props: ImplProps) {
                     }
                     toggleStarredVariable={toggleStarredVariable}
                     constraints={markerVariableConstraints}
+                    overlayConfiguration={activeOverlayConfig.value}
+                    overlayVariable={overlayVariable}
+                    subsettingClient={subsettingClient}
+                    studyId={studyId}
+                    filters={filters}
                   />
                 ) : (
                   <></>
@@ -528,6 +545,11 @@ function MapAnalysisImpl(props: ImplProps) {
                     toggleStarredVariable={toggleStarredVariable}
                     configuration={activeMarkerConfiguration}
                     constraints={markerVariableConstraints}
+                    overlayConfiguration={activeOverlayConfig.value}
+                    overlayVariable={overlayVariable}
+                    subsettingClient={subsettingClient}
+                    studyId={studyId}
+                    filters={filters}
                   />
                 ) : (
                   <></>

packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/BarPlotMarkerConfigurationMenu.tsx

@@ -1,12 +1,22 @@
-import { H6 } from '@veupathdb/coreui';
+import { useCallback } from 'react';
 import {
   InputVariables,
   Props as InputVariablesProps,
 } from '../../../core/components/visualizations/InputVariables';
 import RadioButtonGroup from '@veupathdb/components/lib/components/widgets/RadioButtonGroup';
 import { VariableDescriptor } from '../../../core/types/variable';
 import { VariablesByInputName } from '../../../core/utils/data-element-constraints';
-import { BinDefinitions } from '../../../core';
+import {
+  usePromise,
+  AllValuesDefinition,
+  OverlayConfig,
+  Variable,
+  Filter,
+} from '../../../core';
+import { CategoricalMarkerConfigurationTable } from './CategoricalMarkerConfigurationTable';
+import { MarkerPreview } from './MarkerPreview';
+import Barplot from '@veupathdb/components/lib/plots/Barplot';
+import { SubsettingClient } from '../../../core/api';
 
 interface MarkerConfiguration<T extends string> {
   type: T;
@@ -15,8 +25,9 @@ interface MarkerConfiguration<T extends string> {
 export interface BarPlotMarkerConfiguration
   extends MarkerConfiguration<'barplot'> {
   selectedVariable: VariableDescriptor;
-  selectedValues: BinDefinitions | undefined;
+  selectedValues: OverlayConfig['overlayValues'] | undefined;
   selectedPlotMode: 'count' | 'proportion';
+  allValues: AllValuesDefinition[] | undefined;
 }
 
 interface Props
@@ -26,16 +37,73 @@ interface Props
   > {
   onChange: (configuration: BarPlotMarkerConfiguration) => void;
   configuration: BarPlotMarkerConfiguration;
+  overlayConfiguration: OverlayConfig | undefined;
+  overlayVariable: Variable | undefined;
+  subsettingClient: SubsettingClient;
+  studyId: string;
+  filters: Filter[] | undefined;
 }
 
+// TODO: generalize this and PieMarkerConfigMenu into MarkerConfigurationMenu. Lots of code repitition...
+
 export function BarPlotMarkerConfigurationMenu({
   entities,
   onChange,
   starredVariables,
   toggleStarredVariable,
   configuration,
   constraints,
+  overlayConfiguration,
+  overlayVariable,
+  subsettingClient,
+  studyId,
+  filters,
 }: Props) {
+  const barplotData = usePromise(
+    useCallback(async () => {
+      if (
+        !overlayVariable ||
+        overlayConfiguration?.overlayType !== 'continuous' ||
+        !('distributionDefaults' in overlayVariable)
+      )
+        return;
+      const binSpec = {
+        displayRangeMin:
+          overlayVariable.distributionDefaults.rangeMin +
+          (overlayVariable.type === 'date' ? 'T00:00:00Z' : ''),
+        displayRangeMax:
+          overlayVariable.distributionDefaults.rangeMax +
+          (overlayVariable.type === 'date' ? 'T00:00:00Z' : ''),
+        binWidth: overlayVariable.distributionDefaults.binWidth,
+        // @ts-ignore
+        binUnits: overlayVariable.distributionDefaults.binUnits,
+      };
+      const distributionResponse = await subsettingClient.getDistribution(
+        studyId,
+        configuration.selectedVariable.entityId,
+        configuration.selectedVariable.variableId,
+        {
+          valueSpec: 'count',
+          filters: filters ?? [],
+          // @ts-ignore
+          binSpec,
+        }
+      );
+      return {
+        name: '',
+        value: distributionResponse.histogram.map((d) => d.value),
+        label: distributionResponse.histogram.map((d) => d.binLabel),
+        showValues: false,
+      };
+    }, [
+      overlayVariable,
+      overlayConfiguration?.overlayType,
+      subsettingClient,
+      filters,
+      configuration.selectedVariable,
+    ])
+  );
+
   function handleInputVariablesOnChange(selection: VariablesByInputName) {
     if (!selection.overlayVariable) {
       console.error(
@@ -59,6 +127,19 @@ export function BarPlotMarkerConfigurationMenu({
 
   return (
     <div>
+      <MarkerPreview data={overlayConfiguration} markerType="barplot" />
+      <RadioButtonGroup
+        containerStyles={{
+          marginTop: 20,
+        }}
+        label="Y-axis"
+        selectedOption={configuration.selectedPlotMode || 'count'}
+        options={['count', 'proportion']}
+        optionLabels={['Count', 'Proportion']}
+        buttonColor={'primary'}
+        margins={['0em', '0', '0', '1em']}
+        onOptionSelected={handlePlotModeSelection}
+      />
       <p
         style={{
           paddingLeft: 7,
@@ -80,18 +161,23 @@ export function BarPlotMarkerConfigurationMenu({
         toggleStarredVariable={toggleStarredVariable}
         constraints={constraints}
       />
-      <RadioButtonGroup
-        containerStyles={{
-          marginTop: 20,
-        }}
-        label="Y-axis"
-        selectedOption={configuration.selectedPlotMode || 'count'}
-        options={['count', 'proportion']}
-        optionLabels={['Count', 'Proportion']}
-        buttonColor={'primary'}
-        margins={['0em', '0', '0', '1em']}
-        onOptionSelected={handlePlotModeSelection}
-      />
+      {overlayConfiguration?.overlayType === 'categorical' && (
+        <CategoricalMarkerConfigurationTable
+          overlayConfiguration={overlayConfiguration}
+          configuration={configuration}
+          // @ts-ignore
+          onChange={onChange}
+        />
+      )}
+      {overlayConfiguration?.overlayType === 'continuous' &&
+        barplotData.value && (
+          <Barplot
+            data={{ series: [barplotData.value] }}
+            barLayout="overlay"
+            showValues={false}
+            showIndependentAxisTickLabel={false}
+          />
+        )}
     </div>
   );
 }

packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/CategoricalMarkerConfigurationTable.tsx

@@ -0,0 +1,121 @@
+import Mesa from '@veupathdb/wdk-client/lib/Components/Mesa';
+import { OverlayConfig, AllValuesDefinition } from '../../../core';
+import { Tooltip } from '@veupathdb/components/lib/components/widgets/Tooltip';
+import { BarPlotMarkerConfiguration } from './BarPlotMarkerConfigurationMenu';
+import { PieMarkerConfiguration } from './PieMarkerConfigurationMenu';
+import { ColorPaletteDefault } from '@veupathdb/components/lib/types/plots';
+
+type Props = {
+  overlayConfiguration: OverlayConfig;
+  onChange: (
+    configuration: BarPlotMarkerConfiguration | PieMarkerConfiguration
+  ) => void;
+  configuration: BarPlotMarkerConfiguration | PieMarkerConfiguration;
+};
+
+export function CategoricalMarkerConfigurationTable({
+  overlayConfiguration,
+  configuration,
+  onChange,
+}: Props) {
+  if (overlayConfiguration.overlayType !== 'categorical') return <></>;
+  const { overlayType, overlayValues, allValuesSorted } = overlayConfiguration;
+  const selected = new Set(overlayValues);
+  const totalCount = allValuesSorted.reduce(
+    (prev, curr) => prev + curr.count,
+    0
+  );
+
+  function handleSelection(data: AllValuesDefinition) {
+    if (
+      overlayValues.length <= ColorPaletteDefault.length - 1 &&
+      overlayType === 'categorical'
+    ) {
+      if (selected.has(data.label)) return;
+      const lastItem = [...overlayValues].pop() ?? ''; // TEMP until better solution
+      onChange({
+        ...configuration,
+        selectedValues: overlayValues
+          .slice(0, overlayValues.length - 1)
+          .concat(data.label, lastItem),
+        allValues: allValuesSorted,
+      });
+    } else {
+      alert(`Only ${ColorPaletteDefault.length - 1} values can be selected`);
+    }
+  }
+
+  function handleDeselection(data: AllValuesDefinition) {
+    if (overlayType === 'categorical')
+      onChange({
+        ...configuration,
+        selectedValues: overlayValues.filter((val) => val !== data.label),
+        allValues: allValuesSorted,
+      });
+  }
+
+  const tableState = {
+    options: {
+      isRowSelected: (value: AllValuesDefinition) => selected.has(value.label),
+    },
+    eventHandlers: {
+      onRowSelect: handleSelection,
+      onRowDeselect: handleDeselection,
+    },
+    actions: [],
+    rows: allValuesSorted as AllValuesDefinition[],
+    columns: [
+      {
+        key: 'values',
+        name: 'Values',
+        renderCell: (data: { row: AllValuesDefinition }) => (
+          <>{data.row.label}</>
+        ),
+      },
+      {
+        key: 'counts',
+        name: 'Counts',
+        renderCell: (data: { row: AllValuesDefinition }) => (
+          <>{data.row.count}</>
+        ),
+      },
+      {
+        key: 'distribution',
+        name: 'Distribution',
+        renderCell: (data: { row: AllValuesDefinition }) => (
+          <Distribution count={data.row.count} filteredTotal={totalCount} />
+        ),
+      },
+    ],
+  };
+  return <Mesa state={tableState} />;
+}
+
+type DistributionProps = {
+  count: number;
+  filteredTotal: number;
+};
+
+function Distribution({ count, filteredTotal }: DistributionProps) {
+  return (
+    <Tooltip title={`${count} out of ${filteredTotal}`}>
+      <div
+        style={{
+          width: '99%',
+          position: 'relative',
+          cursor: 'pointer',
+        }}
+      >
+        <div
+          style={{
+            width: (count / filteredTotal) * 100 + '%',
+            backgroundColor: 'black',
+            minWidth: 1,
+            position: 'absolute',
+            height: '1em',
+          }}
+        ></div>
+      </div>
+    </Tooltip>
+  );
+}