From 8d8fd222b619d3a109d4d2832f9ba0e347aa1a55 Mon Sep 17 00:00:00 2001 From: Vihang Shah <83380615+svihang8@users.noreply.github.com> Date: Wed, 22 Jan 2025 21:59:19 -0500 Subject: [PATCH 1/3] added function to retrieve all sampleid --- src/pages/patientView/SampleManager.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/pages/patientView/SampleManager.tsx b/src/pages/patientView/SampleManager.tsx index 4666bb2cb6d..72b40c02c2b 100644 --- a/src/pages/patientView/SampleManager.tsx +++ b/src/pages/patientView/SampleManager.tsx @@ -125,6 +125,17 @@ export function getSpecimenCollectionDayMap( return collectionDayMap; } +export function sampleIdsForSamples(samples: Array) { + let output: { id: string; value: string }[] = []; + samples.forEach((sample, sampleIndex) => { + output.push({ + id: sample.id, + value: sample.id, + }); + }); + return output; +} + export function clinicalAttributeListForSamples( samples: Array ) { From d2267f6f7e816eb5977dfa0c29dc194e6975d70c Mon Sep 17 00:00:00 2001 From: Vihang Shah <83380615+svihang8@users.noreply.github.com> Date: Wed, 22 Jan 2025 22:01:16 -0500 Subject: [PATCH 2/3] added selection by sampleid ui feature --- .../patientView/timeline/VAFChartControls.tsx | 140 +++++++++++++++++- .../timeline/VAFChartUtils.spec.ts | 14 ++ .../patientView/timeline/VAFChartUtils.ts | 22 +++ .../patientView/timeline/VAFChartWrapper.tsx | 1 + .../timeline/VAFChartWrapperStore.tsx | 6 + 5 files changed, 182 insertions(+), 1 deletion(-) diff --git a/src/pages/patientView/timeline/VAFChartControls.tsx b/src/pages/patientView/timeline/VAFChartControls.tsx index 1caf97384b4..66eb2cacc89 100644 --- a/src/pages/patientView/timeline/VAFChartControls.tsx +++ b/src/pages/patientView/timeline/VAFChartControls.tsx @@ -1,11 +1,13 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { observer } from 'mobx-react'; import ReactSelect from 'react-select'; import SampleManager, { clinicalAttributeListForSamples, + sampleIdsForSamples, } from '../SampleManager'; import LabeledCheckbox from '../../../shared/components/labeledCheckbox/LabeledCheckbox'; import VAFChartWrapperStore from './VAFChartWrapperStore'; +import _ from 'lodash'; interface IVAFChartControlsProps { wrapperStore: VAFChartWrapperStore; @@ -13,9 +15,65 @@ interface IVAFChartControlsProps { } export const GROUP_BY_NONE = 'None'; +export const SELECT_SAMPLE_ALL = { + label: 'All', + value: 'All', +}; +export const SELECT_SAMPLE_NONE = { + label: 'None', + value: 'None', +}; const VAFChartControls: React.FunctionComponent = observer( function({ wrapperStore, sampleManager }) { + const [ + isInitialSelectedSamples, + setisInitialSelectedSamples, + ] = useState(true); + + const selectedSamplesOptions = [ + SELECT_SAMPLE_ALL, + SELECT_SAMPLE_NONE, + ...sampleIdsForSamples(sampleManager.samples).map(item => ({ + label: `${item.value}`, + value: `${item.id}`, + })), + ]; + + function selectSamplesByValue() { + let allSelectedSamples = selectedSamplesOptions; + allSelectedSamples = allSelectedSamples.filter(sample => { + return ( + sample.label != SELECT_SAMPLE_ALL.label && + sample.label != SELECT_SAMPLE_NONE.label + ); + }); + if (isInitialSelectedSamples) { + console.log('running initial'); + wrapperStore.setSelectedSamplesOptions(allSelectedSamples); + setisInitialSelectedSamples(!isInitialSelectedSamples); + } + if (wrapperStore.selectedSamplesOptions.length === 0) { + return { + label: 'None', + value: 'None', + }; + } + if ( + _.isEqual( + wrapperStore.selectedSamplesOptions, + allSelectedSamples + ) + ) { + return { + label: 'All', + value: 'All', + }; + } + + return wrapperStore.selectedSamplesOptions; + } + const groupByOptions = [ { label: GROUP_BY_NONE, @@ -34,6 +92,8 @@ const VAFChartControls: React.FunctionComponent = observ opt => opt.value == wrapperStore.groupByOption ); + console.log(`Group By Value : ${value}`); + return value ? { label: value.label, @@ -42,8 +102,86 @@ const VAFChartControls: React.FunctionComponent = observ : ''; } + const SelectedSampleChecklistComponent: React.FC = props => { + const { data, isSelected, innerRef, innerProps } = props; + return ( +
+ {}} + style={{ marginRight: '10px' }} + /> + +
+ ); + }; + return (
+ +