From 20f4fb96ca761c4a0cb47c17f45ca11c6363c688 Mon Sep 17 00:00:00 2001 From: asizemore Date: Mon, 7 Aug 2023 10:51:43 -0400 Subject: [PATCH 1/9] show quantiles in group selector --- .../plugins/differentialabundance.tsx | 55 ++++++++++++++++--- .../analysis/utils/defaultOverlayConfig.ts | 4 +- 2 files changed, 48 insertions(+), 11 deletions(-) diff --git a/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx b/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx index cc83944b96..14e8db3c4a 100644 --- a/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx +++ b/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx @@ -1,4 +1,9 @@ -import { useCollectionVariables, useStudyMetadata } from '../../..'; +import { + ContinuousVariableDataShape, + useCollectionVariables, + usePromise, + useStudyMetadata, +} from '../../..'; import { VariableDescriptor } from '../../../types/variable'; import { volcanoPlotVisualization } from '../../visualizations/implementations/VolcanoPlotVisualization'; import { ComputationConfigProps, ComputationPlugin } from '../Types'; @@ -7,8 +12,11 @@ import { useConfigChangeHandler, assertComputationWithConfig } from '../Utils'; import * as t from 'io-ts'; import { Computation } from '../../../types/visualization'; import SingleSelect from '@veupathdb/coreui/lib/components/inputs/SingleSelect'; -import { useFindEntityAndVariable } from '../../../hooks/workspace'; -import { useMemo } from 'react'; +import { + useDataClient, + useFindEntityAndVariable, +} from '../../../hooks/workspace'; +import { useCallback, useMemo } from 'react'; import { ComputationStepContainer } from '../ComputationStepContainer'; import VariableTreeDropdown from '../../variableTrees/VariableTreeDropdown'; import { ValuePicker } from '../../visualizations/implementations/ValuePicker'; @@ -19,6 +27,11 @@ import { SwapHorizOutlined } from '@material-ui/icons'; import './Plugins.scss'; import { makeClassNameHelper } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils'; import { Tooltip } from '@material-ui/core'; +import { DataClient } from '../../../api'; +import { + GetBinRangesProps, + getBinRanges, +} from '../../../../map/analysis/utils/defaultOverlayConfig'; const cx = makeClassNameHelper('AppStepConfigurationContainer'); @@ -111,6 +124,7 @@ function DifferentialAbundanceConfigDescriptionComponent({ collectionVariable ) ); + return (

@@ -150,6 +164,7 @@ export function DifferentialAbundanceConfiguration( const configuration = computation.descriptor .configuration as DifferentialAbundanceConfig; const studyMetadata = useStudyMetadata(); + const dataClient = useDataClient(); const toggleStarredVariable = useToggleStarredVariable(props.analysisState); const filters = analysisState.analysis?.descriptor.subset.descriptor; const findEntityAndVariable = useFindEntityAndVariable(filters); @@ -207,10 +222,36 @@ export function DifferentialAbundanceConfiguration( } }, [configuration, findEntityAndVariable]); + // For continuous variables, use quantiles as vocabulary + + const continuousVariableBins = usePromise( + useCallback(async () => { + if ( + !ContinuousVariableDataShape.is( + selectedComparatorVariable?.variable.dataShape + ) + ) + return; + const binRangeProps: GetBinRangesProps = { + studyId: studyMetadata.id, + ...configuration.comparator.variable, + filters: filters ?? [], + dataClient, + binningMethod: 'quantile', + }; + const bins = await getBinRanges(binRangeProps); + return bins; + }, [dataClient, configuration.comparator.variable]) + ); + const disableSwapGroupValuesButton = !configuration?.comparator?.groupA && !configuration?.comparator?.groupB; const disableGroupValueSelectors = !configuration?.comparator?.variable; + const groupValueOptions = continuousVariableBins.value + ? continuousVariableBins.value.map((bin) => bin.binLabel) + : selectedComparatorVariable?.variable.vocabulary; + return ( Group A @@ -328,9 +367,7 @@ export function DifferentialAbundanceConfiguration( /> Group B diff --git a/packages/libs/eda/src/lib/map/analysis/utils/defaultOverlayConfig.ts b/packages/libs/eda/src/lib/map/analysis/utils/defaultOverlayConfig.ts index c2618be7da..aa26974d5b 100644 --- a/packages/libs/eda/src/lib/map/analysis/utils/defaultOverlayConfig.ts +++ b/packages/libs/eda/src/lib/map/analysis/utils/defaultOverlayConfig.ts @@ -121,7 +121,7 @@ async function getMostFrequentValues({ : [...sortedValues.slice(0, numValues), UNSELECTED_TOKEN]; } -type GetBinRangesProps = { +export type GetBinRangesProps = { studyId: string; variableId: string; entityId: string; @@ -131,7 +131,7 @@ type GetBinRangesProps = { }; // get the equal spaced bin definitions (for now at least) -async function getBinRanges({ +export async function getBinRanges({ studyId, variableId, entityId, From 9300d8d9a08fce8760b07d0e3704260b7bd85139 Mon Sep 17 00:00:00 2001 From: asizemore Date: Fri, 1 Sep 2023 10:23:31 -0400 Subject: [PATCH 2/9] fix undefined comparator error --- .../components/computations/plugins/differentialabundance.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx b/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx index 14e8db3c4a..03aad2abaa 100644 --- a/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx +++ b/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx @@ -234,14 +234,14 @@ export function DifferentialAbundanceConfiguration( return; const binRangeProps: GetBinRangesProps = { studyId: studyMetadata.id, - ...configuration.comparator.variable, + ...configuration.comparator?.variable, filters: filters ?? [], dataClient, binningMethod: 'quantile', }; const bins = await getBinRanges(binRangeProps); return bins; - }, [dataClient, configuration.comparator.variable]) + }, [dataClient, configuration]) ); const disableSwapGroupValuesButton = From 835d2f707d51d28118374c4e4b72e089f8fc5081 Mon Sep 17 00:00:00 2001 From: asizemore Date: Fri, 1 Sep 2023 13:27:03 -0400 Subject: [PATCH 3/9] use new LabeledRange format --- .../eda/src/lib/core/api/DataClient/types.ts | 11 +++ .../plugins/differentialabundance.tsx | 74 ++++++++++++++----- 2 files changed, 68 insertions(+), 17 deletions(-) diff --git a/packages/libs/eda/src/lib/core/api/DataClient/types.ts b/packages/libs/eda/src/lib/core/api/DataClient/types.ts index 4333667f77..c9bae7c184 100755 --- a/packages/libs/eda/src/lib/core/api/DataClient/types.ts +++ b/packages/libs/eda/src/lib/core/api/DataClient/types.ts @@ -902,6 +902,17 @@ export const BinRange = type({ binLabel: string, }); +export type LabeledRange = TypeOf; +export const LabeledRange = intersection([ + type({ + label: string, + }), + partial({ + max: string, + min: string, + }), +]); + export type ContinousVariableMetadataResponse = TypeOf< typeof ContinousVariableMetadataResponse >; diff --git a/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx b/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx index 03aad2abaa..c61b43d715 100644 --- a/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx +++ b/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx @@ -1,5 +1,6 @@ import { ContinuousVariableDataShape, + LabeledRange, useCollectionVariables, usePromise, useStudyMetadata, @@ -27,7 +28,6 @@ import { SwapHorizOutlined } from '@material-ui/icons'; import './Plugins.scss'; import { makeClassNameHelper } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils'; import { Tooltip } from '@material-ui/core'; -import { DataClient } from '../../../api'; import { GetBinRangesProps, getBinRanges, @@ -57,8 +57,8 @@ export type DifferentialAbundanceConfig = t.TypeOf< const Comparator = t.intersection([ t.partial({ - groupA: t.array(t.string), - groupB: t.array(t.string), + groupA: t.array(LabeledRange), + groupB: t.array(LabeledRange), }), t.type({ variable: VariableDescriptor, @@ -241,16 +241,38 @@ export function DifferentialAbundanceConfiguration( }; const bins = await getBinRanges(binRangeProps); return bins; - }, [dataClient, configuration]) + }, [ + dataClient, + configuration, + filters, + selectedComparatorVariable, + studyMetadata.id, + ]) ); const disableSwapGroupValuesButton = !configuration?.comparator?.groupA && !configuration?.comparator?.groupB; const disableGroupValueSelectors = !configuration?.comparator?.variable; + // We have to send an array of LabeledRanges so go ahead and map everything to that format const groupValueOptions = continuousVariableBins.value - ? continuousVariableBins.value.map((bin) => bin.binLabel) - : selectedComparatorVariable?.variable.vocabulary; + ? continuousVariableBins.value.map((bin) => { + return { + min: bin.binStart, + max: bin.binEnd, + label: bin.binLabel, + } as LabeledRange; + }) + : selectedComparatorVariable?.variable.vocabulary?.map((value) => { + return { + label: value, + } as LabeledRange; + }); + + console.log( + '🚀 ~ file: differentialabundance.tsx:253 ~ groupValueOptions:', + groupValueOptions + ); return ( Group A + allowedValues={groupValueOptions?.map( + (option) => option.label + )} + selectedValues={configuration?.comparator?.groupA?.map( + (bin) => bin.label + )} + disabledValues={configuration?.comparator?.groupB?.map( + (bin) => bin.label + )} + onSelectedValuesChange={(newValues) => { + console.log(newValues); + console.log(configuration?.comparator?.groupA); changeConfigHandler('comparator', { variable: configuration?.comparator?.variable ?? undefined, - groupA: newValues.length ? newValues : undefined, + groupA: groupValueOptions?.filter((bin) => + newValues.includes(bin.label) + ), groupB: configuration?.comparator?.groupB ?? undefined, - }) - } + }); + }} disabledCheckboxTooltipContent="Values cannot overlap between groups" showClearSelectionButton={false} disableInput={disableGroupValueSelectors} @@ -367,15 +399,23 @@ export function DifferentialAbundanceConfiguration( /> Group B option.label + )} + selectedValues={configuration?.comparator?.groupB?.map( + (bin) => bin.label + )} + disabledValues={configuration?.comparator?.groupA?.map( + (bin) => bin.label + )} onSelectedValuesChange={(newValues) => changeConfigHandler('comparator', { variable: configuration?.comparator?.variable ?? undefined, groupA: configuration?.comparator?.groupA ?? undefined, - groupB: newValues.length ? newValues : undefined, + groupB: groupValueOptions?.filter((bin) => + newValues.includes(bin.label) + ), }) } disabledCheckboxTooltipContent="Values cannot overlap between groups" From 5e5716637379b25d75e7b5522b3679db4cdbedf9 Mon Sep 17 00:00:00 2001 From: asizemore Date: Tue, 5 Sep 2023 10:38:39 -0400 Subject: [PATCH 4/9] successful continuous var request and response --- .../VolcanoPlotVisualization.tsx | 32 +++++++++++++------ 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx index 808de911b2..974108051e 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx @@ -199,6 +199,7 @@ function VolcanoPlotViz(props: VisualizationProps) { y: { min: dataYMin, max: dataYMax }, }; }, [data.value]); + console.log(rawDataMinMaxValues); // Determine mins, maxes of axes in the plot. These are different than the data mins/maxes because // of the log transform and the little bit of padding, or because axis ranges are supplied. @@ -229,7 +230,11 @@ function VolcanoPlotViz(props: VisualizationProps) { } = rawDataMinMaxValues; // Standard volcano plots have -log10(raw p value) as the y axis const yAxisMin = -Math.log10(dataYMax); - const yAxisMax = -Math.log10(dataYMin); + const yAxisMax = dataYMin > 0 ? -Math.log10(dataYMin) : 20; + console.log( + '🚀 ~ file: VolcanoPlotVisualization.tsx:233 ~ dependentAxisRange ~ yAxisMax:', + yAxisMax + ); // Add a little padding to prevent clipping the glyph representing the extreme points return { min: Math.floor(yAxisMin - (yAxisMax - yAxisMin) * AXIS_PADDING_FACTOR), @@ -237,6 +242,7 @@ function VolcanoPlotViz(props: VisualizationProps) { }; } }, [data.value, vizConfig.dependentAxisRange, rawDataMinMaxValues]); + console.log(dependentAxisRange); const significanceThreshold = vizConfig.significanceThreshold ?? DEFAULT_SIG_THRESHOLD; @@ -253,6 +259,7 @@ function VolcanoPlotViz(props: VisualizationProps) { .filter((d) => { const log2foldChange = Number(d?.log2foldChange); const transformedPValue = -Math.log10(Number(d?.pValue)); + if (d?.pValue === '0') console.log(d); return ( log2foldChange <= independentAxisRange.max && log2foldChange >= independentAxisRange.min && @@ -340,6 +347,7 @@ function VolcanoPlotViz(props: VisualizationProps) { significanceThreshold, log2FoldChangeThreshold, ]); + console.log(finalData); // For the legend, we need the counts of the data const countsData = useMemo(() => { @@ -381,8 +389,14 @@ function VolcanoPlotViz(props: VisualizationProps) { computationConfiguration.comparator?.groupA && computationConfiguration.comparator?.groupB ? [ - 'Up in ' + computationConfiguration.comparator.groupA.join(', '), - 'Up in ' + computationConfiguration.comparator.groupB.join(', '), + 'Up in ' + + computationConfiguration.comparator.groupA + .map((bin) => bin.label) + .join(','), + 'Up in ' + + computationConfiguration.comparator.groupB + .map((bin) => bin.label) + .join(','), ] : []; @@ -561,17 +575,17 @@ function VolcanoPlotViz(props: VisualizationProps) { markerColor: significanceColors['inconclusive'], }, { - label: `Up regulated in ${computationConfiguration.comparator.groupB?.join( - ', ' - )} (${countsData[significanceColors['high']]})`, + label: `Up regulated in ${computationConfiguration.comparator.groupB + ?.map((bin) => bin.label) + .join(',')} (${countsData[significanceColors['high']]})`, marker: 'circle', hasData: true, markerColor: significanceColors['high'], }, { - label: `Up regulated in ${computationConfiguration.comparator.groupA?.join( - ', ' - )} (${countsData[significanceColors['low']]})`, + label: `Up regulated in ${computationConfiguration.comparator.groupA + ?.map((bin) => bin.label) + .join(',')} (${countsData[significanceColors['low']]})`, marker: 'circle', hasData: true, markerColor: significanceColors['low'], From 4b649349b0b386bc614e24260d9e8f05768f2885 Mon Sep 17 00:00:00 2001 From: asizemore Date: Fri, 8 Sep 2023 06:28:11 -0400 Subject: [PATCH 5/9] add loading spinner to SelectList --- .../src/components/inputs/SelectList.tsx | 9 +++++++ .../plugins/differentialabundance.tsx | 24 +++++++++---------- .../implementations/ValuePicker.tsx | 4 ++++ .../VolcanoPlotVisualization.tsx | 9 +------ 4 files changed, 25 insertions(+), 21 deletions(-) diff --git a/packages/libs/coreui/src/components/inputs/SelectList.tsx b/packages/libs/coreui/src/components/inputs/SelectList.tsx index aa6b80bfdc..d6538a4cd7 100644 --- a/packages/libs/coreui/src/components/inputs/SelectList.tsx +++ b/packages/libs/coreui/src/components/inputs/SelectList.tsx @@ -1,12 +1,15 @@ import { ReactNode, useEffect, useState } from 'react'; import PopoverButton from '../buttons/PopoverButton/PopoverButton'; import CheckboxList, { CheckboxListProps } from './checkboxes/CheckboxList'; +import Spinner from '@veupathdb/components/lib/components/Spinner'; export interface SelectListProps extends CheckboxListProps { children?: ReactNode; /** A button's content if/when no values are currently selected */ defaultButtonDisplayContent: ReactNode; isDisabled?: boolean; + /** Are contents loading? */ + isLoading?: boolean; } export default function SelectList({ @@ -18,6 +21,7 @@ export default function SelectList({ children, defaultButtonDisplayContent, isDisabled = false, + isLoading = false, ...props }: SelectListProps) { const [selected, setSelected] = useState['value']>(value); @@ -67,6 +71,11 @@ export default function SelectList({ margin: '0.5em', }} > + {isLoading && ( +
+ +
+ )} Group A option.label - )} + allowedValues={ + !continuousVariableBins.pending + ? groupValueOptions?.map((option) => option.label) + : undefined + } selectedValues={configuration?.comparator?.groupA?.map( (bin) => bin.label )} @@ -354,8 +351,6 @@ export function DifferentialAbundanceConfiguration( (bin) => bin.label )} onSelectedValuesChange={(newValues) => { - console.log(newValues); - console.log(configuration?.comparator?.groupA); changeConfigHandler('comparator', { variable: configuration?.comparator?.variable ?? undefined, @@ -368,6 +363,7 @@ export function DifferentialAbundanceConfiguration( disabledCheckboxTooltipContent="Values cannot overlap between groups" showClearSelectionButton={false} disableInput={disableGroupValueSelectors} + isLoading={continuousVariableBins.pending} /> Group B option.label - )} + allowedValues={ + !continuousVariableBins.pending + ? groupValueOptions?.map((option) => option.label) + : undefined + } selectedValues={configuration?.comparator?.groupB?.map( (bin) => bin.label )} diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/ValuePicker.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/ValuePicker.tsx index 0aefb33d93..4aa00f306d 100644 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/ValuePicker.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/ValuePicker.tsx @@ -11,6 +11,8 @@ export type ValuePickerProps = { disabledCheckboxTooltipContent?: ReactNode; disableInput?: boolean; showClearSelectionButton?: boolean; + /** Show loading spinner */ + isLoading?: boolean; }; const EMPTY_ALLOWED_VALUES_ARRAY: string[] = []; @@ -25,6 +27,7 @@ export function ValuePicker({ disabledCheckboxTooltipContent, disableInput = false, showClearSelectionButton = true, + isLoading = false, }: ValuePickerProps) { const items = allowedValues.map((value) => ({ display: {value}, @@ -41,6 +44,7 @@ export function ValuePicker({ value={selectedValues} disabledCheckboxTooltipContent={disabledCheckboxTooltipContent} isDisabled={disableInput} + isLoading={isLoading} /> {showClearSelectionButton && ( ) { y: { min: dataYMin, max: dataYMax }, }; }, [data.value]); - console.log(rawDataMinMaxValues); // Determine mins, maxes of axes in the plot. These are different than the data mins/maxes because // of the log transform and the little bit of padding, or because axis ranges are supplied. @@ -231,10 +230,7 @@ function VolcanoPlotViz(props: VisualizationProps) { // Standard volcano plots have -log10(raw p value) as the y axis const yAxisMin = -Math.log10(dataYMax); const yAxisMax = dataYMin > 0 ? -Math.log10(dataYMin) : 20; - console.log( - '🚀 ~ file: VolcanoPlotVisualization.tsx:233 ~ dependentAxisRange ~ yAxisMax:', - yAxisMax - ); + // Add a little padding to prevent clipping the glyph representing the extreme points return { min: Math.floor(yAxisMin - (yAxisMax - yAxisMin) * AXIS_PADDING_FACTOR), @@ -242,7 +238,6 @@ function VolcanoPlotViz(props: VisualizationProps) { }; } }, [data.value, vizConfig.dependentAxisRange, rawDataMinMaxValues]); - console.log(dependentAxisRange); const significanceThreshold = vizConfig.significanceThreshold ?? DEFAULT_SIG_THRESHOLD; @@ -259,7 +254,6 @@ function VolcanoPlotViz(props: VisualizationProps) { .filter((d) => { const log2foldChange = Number(d?.log2foldChange); const transformedPValue = -Math.log10(Number(d?.pValue)); - if (d?.pValue === '0') console.log(d); return ( log2foldChange <= independentAxisRange.max && log2foldChange >= independentAxisRange.min && @@ -347,7 +341,6 @@ function VolcanoPlotViz(props: VisualizationProps) { significanceThreshold, log2FoldChangeThreshold, ]); - console.log(finalData); // For the legend, we need the counts of the data const countsData = useMemo(() => { From 8df648ff8dff2b95bfbd94243cb4d56b41d42283 Mon Sep 17 00:00:00 2001 From: asizemore Date: Fri, 8 Sep 2023 07:29:19 -0400 Subject: [PATCH 6/9] clean up and comment a bit --- .../plugins/differentialabundance.tsx | 31 +++++++++++-------- .../VolcanoPlotVisualization.tsx | 10 +++--- 2 files changed, 23 insertions(+), 18 deletions(-) diff --git a/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx b/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx index e55bb286d3..8fa4f0facc 100644 --- a/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx +++ b/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx @@ -222,8 +222,7 @@ export function DifferentialAbundanceConfiguration( } }, [configuration, findEntityAndVariable]); - // For continuous variables, use quantiles as vocabulary - + // If the variable is continuous, ask the backend for a list of bins const continuousVariableBins = usePromise( useCallback(async () => { if ( @@ -232,6 +231,7 @@ export function DifferentialAbundanceConfiguration( ) ) return; + const binRangeProps: GetBinRangesProps = { studyId: studyMetadata.id, ...configuration.comparator?.variable, @@ -254,7 +254,8 @@ export function DifferentialAbundanceConfiguration( !configuration?.comparator?.groupA && !configuration?.comparator?.groupB; const disableGroupValueSelectors = !configuration?.comparator?.variable; - // We have to send an array of LabeledRanges so go ahead and map everything to that format + // Create the options for groupA and groupB. Organizing into the LabeledRange[] format + // here in order to keep the later code clean. const groupValueOptions = continuousVariableBins.value ? continuousVariableBins.value.map((bin) => { return { @@ -345,18 +346,20 @@ export function DifferentialAbundanceConfiguration( : undefined } selectedValues={configuration?.comparator?.groupA?.map( - (bin) => bin.label + (entry) => entry.label )} disabledValues={configuration?.comparator?.groupB?.map( - (bin) => bin.label + (entry) => entry.label )} onSelectedValuesChange={(newValues) => { changeConfigHandler('comparator', { variable: configuration?.comparator?.variable ?? undefined, - groupA: groupValueOptions?.filter((bin) => - newValues.includes(bin.label) - ), + groupA: newValues.length + ? groupValueOptions?.filter((option) => + newValues.includes(option.label) + ) + : undefined, groupB: configuration?.comparator?.groupB ?? undefined, }); }} @@ -401,19 +404,21 @@ export function DifferentialAbundanceConfiguration( : undefined } selectedValues={configuration?.comparator?.groupB?.map( - (bin) => bin.label + (entry) => entry.label )} disabledValues={configuration?.comparator?.groupA?.map( - (bin) => bin.label + (entry) => entry.label )} onSelectedValuesChange={(newValues) => changeConfigHandler('comparator', { variable: configuration?.comparator?.variable ?? undefined, groupA: configuration?.comparator?.groupA ?? undefined, - groupB: groupValueOptions?.filter((bin) => - newValues.includes(bin.label) - ), + groupB: newValues.length + ? groupValueOptions?.filter((option) => + newValues.includes(option.label) + ) + : undefined, }) } disabledCheckboxTooltipContent="Values cannot overlap between groups" diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx index 66f2e3cdf1..6690aa4d82 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx @@ -229,7 +229,7 @@ function VolcanoPlotViz(props: VisualizationProps) { } = rawDataMinMaxValues; // Standard volcano plots have -log10(raw p value) as the y axis const yAxisMin = -Math.log10(dataYMax); - const yAxisMax = dataYMin > 0 ? -Math.log10(dataYMin) : 20; + const yAxisMax = -Math.log10(dataYMin); // Add a little padding to prevent clipping the glyph representing the extreme points return { @@ -384,11 +384,11 @@ function VolcanoPlotViz(props: VisualizationProps) { ? [ 'Up in ' + computationConfiguration.comparator.groupA - .map((bin) => bin.label) + .map((entry) => entry.label) .join(','), 'Up in ' + computationConfiguration.comparator.groupB - .map((bin) => bin.label) + .map((entry) => entry.label) .join(','), ] : []; @@ -569,7 +569,7 @@ function VolcanoPlotViz(props: VisualizationProps) { }, { label: `Up regulated in ${computationConfiguration.comparator.groupB - ?.map((bin) => bin.label) + ?.map((entry) => entry.label) .join(',')} (${countsData[significanceColors['high']]})`, marker: 'circle', hasData: true, @@ -577,7 +577,7 @@ function VolcanoPlotViz(props: VisualizationProps) { }, { label: `Up regulated in ${computationConfiguration.comparator.groupA - ?.map((bin) => bin.label) + ?.map((entry) => entry.label) .join(',')} (${countsData[significanceColors['low']]})`, marker: 'circle', hasData: true, From 27f62c148fccc87592d823f4cc334158eda116f1 Mon Sep 17 00:00:00 2001 From: Ann Sizemore Blevins Date: Mon, 11 Sep 2023 14:33:02 -0400 Subject: [PATCH 7/9] Apply suggestions from code review Co-authored-by: Dave Falke --- .../computations/plugins/differentialabundance.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx b/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx index 9c46a9acee..8f8a3f3068 100644 --- a/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx +++ b/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx @@ -243,7 +243,7 @@ export function DifferentialAbundanceConfiguration( return bins; }, [ dataClient, - configuration, + configuration.comparator?.variable, filters, selectedComparatorVariable, studyMetadata.id, @@ -257,17 +257,17 @@ export function DifferentialAbundanceConfiguration( // Create the options for groupA and groupB. Organizing into the LabeledRange[] format // here in order to keep the later code clean. const groupValueOptions = continuousVariableBins.value - ? continuousVariableBins.value.map((bin) => { + ? continuousVariableBins.value.map((bin): LabeledRange => { return { min: bin.binStart, max: bin.binEnd, label: bin.binLabel, - } as LabeledRange; + }; }) - : selectedComparatorVariable?.variable.vocabulary?.map((value) => { + : selectedComparatorVariable?.variable.vocabulary?.map((value): LabeledRange => { return { label: value, - } as LabeledRange; + }; }); return ( From 39f1ed0409db58259b8710b6bcdf58b64d8a9232 Mon Sep 17 00:00:00 2001 From: asizemore Date: Mon, 11 Sep 2023 14:48:18 -0400 Subject: [PATCH 8/9] fix spinner circular dep and comparator undefined --- .../coreui/src/components/inputs/SelectList.tsx | 7 +------ .../computations/plugins/differentialabundance.tsx | 14 ++++++++------ 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/libs/coreui/src/components/inputs/SelectList.tsx b/packages/libs/coreui/src/components/inputs/SelectList.tsx index d6538a4cd7..1de1366795 100644 --- a/packages/libs/coreui/src/components/inputs/SelectList.tsx +++ b/packages/libs/coreui/src/components/inputs/SelectList.tsx @@ -1,7 +1,6 @@ import { ReactNode, useEffect, useState } from 'react'; import PopoverButton from '../buttons/PopoverButton/PopoverButton'; import CheckboxList, { CheckboxListProps } from './checkboxes/CheckboxList'; -import Spinner from '@veupathdb/components/lib/components/Spinner'; export interface SelectListProps extends CheckboxListProps { children?: ReactNode; @@ -71,11 +70,7 @@ export default function SelectList({ margin: '0.5em', }} > - {isLoading && ( -
- -
- )} + {isLoading &&
Loading...
} { - return { - label: value, - }; - }); + : selectedComparatorVariable?.variable.vocabulary?.map( + (value): LabeledRange => { + return { + label: value, + }; + } + ); return ( Date: Mon, 11 Sep 2023 15:00:32 -0400 Subject: [PATCH 9/9] add loading to group B dropdown --- .../components/computations/plugins/differentialabundance.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx b/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx index e75efa8988..d3b8a91438 100644 --- a/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx +++ b/packages/libs/eda/src/lib/core/components/computations/plugins/differentialabundance.tsx @@ -435,6 +435,7 @@ export function DifferentialAbundanceConfiguration( disabledCheckboxTooltipContent="Values cannot overlap between groups" showClearSelectionButton={false} disableInput={disableGroupValueSelectors} + isLoading={continuousVariableBins.pending} />