updates to notebook, ex feature-1567-integrate-de-notebook

Author: Cristina Aurrecoechea

packages/libs/eda/src/lib/core/components/computations/Types.ts

@@ -17,7 +17,6 @@ export interface ComputationProps {
 }
 
 export interface ComputationConfigProps extends ComputationProps {
-  // alphadiv abundance
   computation: Computation;
   visualizationId: string;
   addNewComputation: (name: string, configuration: unknown) => void;
@@ -27,6 +26,7 @@ export interface ComputationConfigProps extends ComputationProps {
   additionalCollectionPredicate?: (
     variableCollection: CollectionVariableTreeNode
   ) => boolean; // Additional constraints for allowed collection variables
+  hideConfigurationComponent?: boolean; // Whether to hide the configuration component entirely
 }
 
 export interface ComputationOverviewProps extends ComputationProps {}

packages/libs/eda/src/lib/core/components/computations/plugins/dimensionalityReduction.tsx

@@ -1,4 +1,4 @@
-import { useFindEntityAndVariableCollection } from '../../..';
+import { StudyEntity, useFindEntityAndVariableCollection, useStudyEntities } from '../../..';
 import { VariableCollectionDescriptor } from '../../../types/variable';
 import { scatterplotVisualization } from '../../visualizations/implementations/ScatterplotVisualization';
 import { ComputationConfigProps, ComputationPlugin } from '../Types';
@@ -17,6 +17,9 @@ import { makeClassNameHelper } from '@veupathdb/wdk-client/lib/Utils/ComponentUt
 import { VariableCollectionSingleSelect } from '../../variableSelectors/VariableCollectionSingleSelect';
 import { IsEnabledInPickerParams } from '../../visualizations/VisualizationTypes';
 import { entityTreeToArray } from '../../../utils/study-metadata';
+import { useEffect, useMemo, useState } from 'react';
+import { ItemGroup } from '@veupathdb/coreui/lib/components/inputs/SingleSelect';
+import { Item } from '@veupathdb/coreui/lib/components/inputs/checkboxes/CheckboxList';
 
 const cx = makeClassNameHelper('AppStepConfigurationContainer');
 
@@ -120,6 +123,7 @@ export function DimensionalityReductionConfiguration(
     visualizationId,
     changeConfigHandlerOverride,
     showStepNumber = true,
+    hideConfigurationComponent = false,
   } = props;
   assertComputationWithConfig(computation, DimensionalityReductionConfig);
   const configuration = computation.descriptor.configuration;
@@ -134,7 +138,52 @@ export function DimensionalityReductionConfiguration(
     ? changeConfigHandlerOverride
     : workspaceChangeConfigHandler;
 
-  return (
+  const entities = useStudyEntities();
+
+  const collectionsInStudy = useMemo(() => {
+      const collectionItems = entities
+        .filter(
+          (e): e is StudyEntity & Required<Pick<StudyEntity, 'collections'>> =>
+            !!e.collections?.length
+        )
+        .map((e): ItemGroup<string> => {
+          const collections = e.collections.filter(isNotAbsoluteAbundanceVariableCollection)
+          return {
+            label: e.displayName,
+            items: collections.map(
+              (collection): Item<string> => ({
+                value: `${e.id}:${collection.id}`,
+                display: collection.displayName ?? collection.id,
+              })
+            ),
+          };
+        })
+        .filter((itemGroup) => itemGroup.items.length > 0); // Remove entites that had all their collections fail the collection predicate.
+      return collectionItems;
+    }, [entities]);
+
+    console.log('collectionsInStudy', collectionsInStudy);
+  
+  // This computation only has one input. If there is only one option for the input (one collection),
+  // then we can set it automaticaly. 
+  // With only one collection, it may be useful to hide the entire configuration component (differential expression notebook)
+  useEffect(() => {
+    // If there is only one collection variable, set it automatically
+    // TEMPORARY - until we have the right data, just pretend we only have one by 
+    // using the first collection
+    // if (collectionsInStudy.length === 1) {
+      console.log('only one collection group');
+      changeConfigHandler('collectionVariable', {
+        entityId: collectionsInStudy[0].items[0].value.split(':')[0],
+        collectionId: collectionsInStudy[0].items[0].value.split(':')[1],
+      });
+    // }
+  }, [collectionsInStudy, changeConfigHandler]);
+    
+
+  return hideConfigurationComponent ? (
+    null
+  ) : (
     <ComputationStepContainer
       computationStepInfo={{
         stepNumber: 1,
@@ -159,8 +208,8 @@ export function DimensionalityReductionConfiguration(
   );
 }
 
-// Dimensionality reduction's only requirement of the study is that it contains
-// at least one collection.
+// For now, dimensionality reduction's only requirement of the study is that it contains
+// at least one collection. This may change in the future or possibly made configurable via the notebook.
 function isEnabledInPicker({
   studyMetadata,
 }: IsEnabledInPickerParams): boolean {

packages/libs/eda/src/lib/core/components/computations/plugins/index.ts

@@ -6,7 +6,7 @@ import { plugin as distributions } from './distributions';
 import { plugin as countsandproportions } from './countsAndProportions';
 import { plugin as abundance } from './abundance';
 import { plugin as differentialabundance } from './differentialabundance';
-// import { plugin as differentialexpression } from './differentialExpression';
+import { plugin as differentialexpression } from './differentialExpression';
 import { plugin as correlationassaymetadata } from './correlationAssayMetadata'; // mbio
 import { plugin as correlationassayassay } from './correlationAssayAssay'; // mbio
 import { plugin as correlation } from './correlation'; // genomics (- vb)
@@ -19,7 +19,7 @@ export const plugins: Record<string, ComputationPlugin> = {
   betadiv,
   dimensionalityreduction,
   differentialabundance,
-  // differentialexpression,
+  differentialexpression,
   correlationassaymetadata,
   correlationassayassay,
   correlation,

packages/libs/eda/src/lib/core/components/variableSelectors/VariableCollectionSingleSelect.tsx

@@ -23,6 +23,12 @@ export function VariableCollectionSingleSelect(props: Props) {
   const { collectionPredicate, onSelect, value, additionalItemGroups } = props;
   const entities = useStudyEntities();
 
+  console.log('collections', entities
+      .filter(
+        (e): e is StudyEntity & Required<Pick<StudyEntity, 'collections'>> =>
+          !!e.collections?.length
+      ));
+
   const items = useMemo(() => {
     const collectionItems = entities
       .filter(

packages/libs/eda/src/lib/notebook/ComputeNotebookCell.tsx

@@ -8,6 +8,10 @@ import { plugins } from '../core/components/computations/plugins';
 import { ComputeCellDescriptor } from './NotebookPresets';
 import { useCachedPromise } from '../core/hooks/cachedPromise';
 import ExpandablePanel from '@veupathdb/coreui/lib/components/containers/ExpandablePanel';
+import { useEffect, useState } from 'react';
+import Dialog from '@veupathdb/wdk-client/lib/Components/Overlays/Dialog';
+import { FilledButton, OutlinedButton } from '@veupathdb/coreui';
+import { Link } from 'react-router-dom';
 
 export function ComputeNotebookCell(
   props: NotebookCellProps<ComputeCellDescriptor>
@@ -22,11 +26,13 @@ export function ComputeNotebookCell(
     computationId,
     cells,
     getAdditionalCollectionPredicate,
+    hidden=false,
   } = cell;
   const computation = analysis.descriptor.computations.find(
     (comp) => comp.computationId === computationId
   );
   if (computation == null) throw new Error('Cannot find computation.');
+  const [showErrorDialog, setShowErrorDialog] = useState(false);
 
   // fetch 'apps'
   const dataClient = useDataClient();
@@ -49,7 +55,6 @@ export function ComputeNotebookCell(
   // Ideally it should also use the functional update form of setComputations.
   //
   // We'll use a special, simple changeConfigHandler for the computation configuration
-  console.log('analysis', analysis.descriptor.computations);
   const changeConfigHandler = (propertyName: string, value?: any) => {
     if (!computation || !analysis.descriptor.computations[0]) return;
 
@@ -96,50 +101,101 @@ export function ComputeNotebookCell(
   const isComputationConfigurationValid = !!plugin?.isConfigurationComplete(
     computation.descriptor.configuration
   );
-
+  
   // Prep any additional restrictions on collections, if defined
   const additionalCollectionPredicate =
     getAdditionalCollectionPredicate &&
     getAdditionalCollectionPredicate(projectId);
+  
+  
+  // Run the compute if we're all set to go. Useful when there is a default configuration.
+  useEffect(() => {
+    if (isComputationConfigurationValid && jobStatus === 'no-such-job' && hidden) {
+      console.log("creating job");
+      createJob();
+    }
+  }, [isComputationConfigurationValid, jobStatus, createJob, hidden]);
+
+  // Show error dialog when hidden compute fails
+  useEffect(() => {
+    if (hidden && jobStatus === 'failed') {
+      setShowErrorDialog(true);
+    }
+  }, [hidden, jobStatus]);
+
 
   return computation && appOverview ? (
     <>
-      {cell.helperText && (
-        <div className="NotebookCellHelpText">
-          <span>{cell.helperText}</span>
-        </div>
-      )}
-      <ExpandablePanel
-        title={cell.title}
-        subTitle={''}
-        state="open"
-        themeRole="primary"
+      {/* Error Dialog */}
+      <Dialog
+        open={showErrorDialog}
+        onClose={() => setShowErrorDialog(false)}
+        aria-labelledby="compute-error-dialog-title"
+        title="Computation failed"
       >
-        <div
-          className={'NotebookCellContent' + (isDisabled ? ' disabled' : '')}
-        >
-          <plugin.configurationComponent
-            analysisState={analysisState}
-            computation={computation}
-            totalCounts={totalCountsResult}
-            filteredCounts={filteredCountsResult}
-            visualizationId="not_used" // irrelevant because we have our own changeConfigHandler
-            addNewComputation={() => {}} // also irrelevant for us because we add the computation elsewhere
-            computationAppOverview={appOverview}
-            geoConfigs={[]}
-            changeConfigHandlerOverride={changeConfigHandler}
-            showStepNumber={false}
-            showExpandableHelp={false} // no expandable sections within an expandable element.
-            additionalCollectionPredicate={additionalCollectionPredicate}
-          />
-          <RunComputeButton
-            computationAppOverview={appOverview}
-            status={jobStatus}
-            isConfigured={isComputationConfigurationValid}
-            createJob={createJob}
-          />
+        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', width: '600px', padding: '1em', alignItems: 'center', fontSize: '1.2em', height: '130px', textAlign: 'center', margin: '0.5em 0' }}>
+            <p>The background {cell.title + ' ' || ''}computation for has failed. <strong>Please <Link to="/contact-us">contact us</Link> for assistance.</strong>
+            </p>
+            <p>After closing this dialog, you may continue with your search.</p>
         </div>
-      </ExpandablePanel>
+      </Dialog>
+      {hidden ? (
+        <plugin.configurationComponent
+          analysisState={analysisState}
+          computation={computation}
+          totalCounts={totalCountsResult}
+          filteredCounts={filteredCountsResult}
+          visualizationId="not_used" // irrelevant because we have our own changeConfigHandler
+          addNewComputation={() => {}} // also irrelevant for us because we add the computation elsewhere
+          computationAppOverview={appOverview}
+          geoConfigs={[]}
+          changeConfigHandlerOverride={changeConfigHandler}
+          showStepNumber={false}
+          showExpandableHelp={false} // no expandable sections within an expandable element.
+          additionalCollectionPredicate={additionalCollectionPredicate}
+          hideConfigurationComponent={true}
+        />
+      ) : (
+        <>
+          {cell.helperText && (
+          <div className="NotebookCellHelpText">
+            <span>{cell.helperText}</span>
+          </div>
+          )}
+          <ExpandablePanel
+            title={cell.title}
+            subTitle={''}
+            state="open"
+            themeRole="primary"
+          >
+            <div
+              className={'NotebookCellContent' + (isDisabled ? ' disabled' : '')}
+            >
+              <plugin.configurationComponent
+                analysisState={analysisState}
+                computation={computation}
+                totalCounts={totalCountsResult}
+                filteredCounts={filteredCountsResult}
+                visualizationId="not_used" // irrelevant because we have our own changeConfigHandler
+                addNewComputation={() => {}} // also irrelevant for us because we add the computation elsewhere
+                computationAppOverview={appOverview}
+                geoConfigs={[]}
+                changeConfigHandlerOverride={changeConfigHandler}
+                showStepNumber={false}
+                showExpandableHelp={false} // no expandable sections within an expandable element.
+                additionalCollectionPredicate={additionalCollectionPredicate}
+                hideConfigurationComponent={false}
+              />
+              <RunComputeButton
+                computationAppOverview={appOverview}
+                status={jobStatus}
+                isConfigured={isComputationConfigurationValid}
+                createJob={createJob}
+              />
+            </div>
+          </ExpandablePanel>
+        </>
+      )}
       {cells &&
         cells.map((subCell, index) => {
           const isSubCellDisabled =

packages/libs/eda/src/lib/notebook/EdaNotebookAnalysis.tsx

@@ -26,6 +26,7 @@ export type UpdateParamValue = (
 ) => void;
 
 export interface WdkState {
+  queryName?: string;
   parameters?: Parameter[];
   paramValues?: ParameterValues;
   updateParamValue?: UpdateParamValue;

packages/libs/eda/src/lib/notebook/NotebookPresets.tsx

@@ -54,6 +54,7 @@ export interface ComputeCellDescriptor
   getAdditionalCollectionPredicate?: (
     projectId?: string
   ) => (variableCollection: CollectionVariableTreeNode) => boolean;
+  hidden?: boolean; // Whether to hide this computation cell in the UI. Useful for computations where the entire configuration is already known.
 }
 
 export interface TextCellDescriptor extends NotebookCellDescriptorBase<'text'> {
@@ -91,32 +92,33 @@ export const presetNotebooks: Record<string, PresetNotebook> = {
         title: 'Select samples (optional)',
         helperText: (
           <NumberedHeader
-            number={0}
+            number={1}
             text={'Optionally refine samples for differential expression.'}
             color={colors.grey[800]}
           />
         ),
       },
       {
         type: 'compute',
-        title: 'Configure PCA',
+        title: 'PCA',
         computationName: 'dimensionalityreduction',
         computationId: 'pca_1',
-        helperText: (
-          <NumberedHeader
-            number={1}
-            text={
-              'Use PCA to investigate possible sources of variation in the dataset.'
-            }
-            color={colors.grey[800]}
-          />
-        ),
+        hidden: true, // Hide in UI since config is already known.
         cells: [
           {
             type: 'visualization',
             title: 'PCA Plot',
             visualizationName: 'scatterplot',
             visualizationId: 'pca_1',
+            helperText: (
+              <NumberedHeader
+                number={2}
+                text={
+                  'Use PCA to investigate possible sources of variation in the dataset.'
+                }
+                color={colors.grey[800]}
+              />
+            ),
           },
         ],
       },
@@ -127,7 +129,7 @@ export const presetNotebooks: Record<string, PresetNotebook> = {
         computationId: 'de_1',
         helperText: (
           <NumberedHeader
-            number={2}
+            number={3}
             text={
               'Run a differential expression analysis using DESeq2. Please choose the metadata variable for comparison, and then set up the reference and comparison groups. When all selections have been made, we can run the computation.'
             }
@@ -177,7 +179,7 @@ export const presetNotebooks: Record<string, PresetNotebook> = {
             },
             helperText: (
               <NumberedHeader
-                number={3}
+                number={4}
                 text={
                   'Once the DESeq2 results are ready, a volcano plot will appear below. Set the threshold lines to color the genes based on their significance and fold change.'
                 }
@@ -190,7 +192,7 @@ export const presetNotebooks: Record<string, PresetNotebook> = {
             title: 'Review and run search',
             helperText: (
               <NumberedHeader
-                number={4}
+                number={5}
                 text={
                   'After identifying genes of interest from the volcano plot, run a gene search to review the genes in the Gene Search Results table.'
                 }