Make DefaultQuestionForm submit button optionally depend on configurable notebook readiness check (#1602)

* make DefaultQuestionForm submit button optionally depend on configurable notebook readiness check

* add isReady for WGCNA notebook and attempted to style required inputs in WdkParamNotebookCell

Author: bobular

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

@@ -38,10 +38,11 @@ interface Props {
   analysisState: AnalysisState;
   notebookType: string;
   wdkState: WdkState;
+  onReadinessChange?: (isReady: boolean) => void;
 }
 
 export function EdaNotebookAnalysis(props: Props) {
-  const { analysisState, notebookType, wdkState } = props;
+  const { analysisState, notebookType, wdkState, onReadinessChange } = props;
   const { analysis, setComputations, addVisualization } = analysisState;
 
   if (analysis == null) throw new Error('Cannot find analysis.');
@@ -50,6 +51,14 @@ export function EdaNotebookAnalysis(props: Props) {
   if (notebookPreset == null)
     throw new Error(`Cannot find a notebook preset for ${notebookType}`);
 
+  useEffect(() => {
+    if (!onReadinessChange) return;
+    const ready = notebookPreset.isReady
+      ? notebookPreset.isReady({ analysisState, wdkState })
+      : true;
+    onReadinessChange(ready);
+  }, [analysisState.analysis, wdkState, notebookPreset, onReadinessChange]);
+
   // Check to ensure the notebook is valid for this project
   const projectId = useWdkService(
     async (wdkService) => (await wdkService.getConfig()).projectId

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

@@ -7,6 +7,7 @@ import { NodeData } from '@veupathdb/components/lib/types/plots/network';
 import { WdkState } from './EdaNotebookAnalysis';
 import useSnackbar from '@veupathdb/coreui/lib/components/notifications/useSnackbar';
 import { AnalysisState, CollectionVariableTreeNode } from '../core';
+import { plugins } from '../core/components/computations/plugins';
 import {
   VolcanoPlotConfig,
   VolcanoPlotOptions,
@@ -68,14 +69,20 @@ export interface SubsetCellDescriptor
 export interface WdkParamCellDescriptor
   extends NotebookCellDescriptorBase<'wdkparam'> {
   paramNames: string[]; // Param names from the wdk query. These must match exactly or the notebook will err.
+  requiredParamNames?: string[]; // Subset of paramNames that are required. Labels will be red with an asterisk until filled.
 }
 
+export type ReadinessContext =
+  | { analysisState: AnalysisState; wdkState?: WdkState }
+  | { analysisState?: AnalysisState; wdkState: WdkState };
+
 type PresetNotebook = {
   name: string;
   displayName: string;
   projects: string[];
   cells: NotebookCellDescriptor[];
   header?: string; // Optional header text for the notebook, to be displayed above the cells.
+  isReady?: (context: ReadinessContext) => boolean;
 };
 
 // Preset notebooks
@@ -283,6 +290,13 @@ export const presetNotebooks: Record<string, PresetNotebook> = {
         ],
       },
     ],
+    isReady: ({ analysisState }) => {
+      const config = analysisState?.analysis?.descriptor.computations.find(
+        (c: { descriptor: { type: string } }) =>
+          c.descriptor.type === 'differentialexpression'
+      )?.descriptor.configuration;
+      return plugins['differentialexpression'].isConfigurationComplete(config);
+    },
   },
   // WGCNA - only for plasmo. No subsetting cells because of the pre-computed modules and eigengenes.
   // Will be primed and prettified in https://github.com/VEuPathDB/web-monorepo/issues/1381
@@ -403,6 +417,7 @@ export const presetNotebooks: Record<string, PresetNotebook> = {
         type: 'wdkparam',
         title: 'Run gene search',
         paramNames: ['wgcnaParam', 'wgcna_correlation_cutoff'],
+        requiredParamNames: ['wgcnaParam'],
         numberedHeader: true,
         helperText: (
           <span>
@@ -412,6 +427,14 @@ export const presetNotebooks: Record<string, PresetNotebook> = {
         ),
       },
     ],
+    isReady: ({ wdkState }) => {
+      if (!wdkState) return false;
+      const value = wdkState.paramValues['wgcnaParam'];
+      // Target wgcnaParam's index-zero makeshift placeholder ("1_choose_module" => "Choose a Module")
+      if (value == null || value === '' || value.includes('choose_module'))
+        return false;
+      return true;
+    },
   },
   boxplotNotebook: {
     name: 'boxplot',

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

@@ -14,7 +14,7 @@ export function WdkParamNotebookCell(
 
   if (!wdkState) return null;
 
-  const { paramNames, title } = cell;
+  const { paramNames, title, requiredParamNames } = cell;
   const { parameters, paramValues, updateParamValue } = wdkState;
 
   // userInputParameters are the wdk parameters that the user will
@@ -40,6 +40,8 @@ export function WdkParamNotebookCell(
           <div className="WdkParamInputs">
             {userInputParameters.map((param) => {
               const paramCurrentValue = paramValues[param.name];
+              const isRequired =
+                requiredParamNames?.includes(param.name) ?? false;
 
               // There are many param types. The following is not exhaustive.
               if (param.type === 'single-pick-vocabulary') {
@@ -58,7 +60,10 @@ export function WdkParamNotebookCell(
 
                 return (
                   <div className="InputGroup" key={param.name}>
-                    <span>{param.displayName}</span>
+                    <span>
+                      {param.displayName}
+                      {isRequired && <sup>*</sup>}
+                    </span>
                     <SingleSelect
                       items={selectItems}
                       value={paramCurrentValue}
@@ -72,7 +77,10 @@ export function WdkParamNotebookCell(
               } else if (param.type === 'string' && param.isNumber) {
                 return (
                   <div className="InputGroup" key={param.name}>
-                    <span>{param.displayName}</span>
+                    <span>
+                      {param.displayName}
+                      {isRequired && <sup>*</sup>}
+                    </span>
                     <NumberInput
                       value={Number(paramCurrentValue)}
                       minValue={0} // TO DO: Currently not derived from the parameter, though they should be.

packages/libs/wdk-client/src/Views/Question/DefaultQuestionForm.tsx

@@ -58,6 +58,7 @@ export type Props = {
   resetFormConfig: ResetFormConfig;
   containerClassName?: string;
   searchName?: string;
+  submissionDisabled?: boolean;
 };
 
 const cx = makeClassNameHelper('wdk-QuestionForm');
@@ -128,7 +129,8 @@ export default function DefaultQuestionForm(props: Props) {
     state.paramsUpdatingDependencies
   );
 
-  const submissionDisabled = dependentParamsAreUpdating;
+  const submissionDisabled =
+    dependentParamsAreUpdating || (props.submissionDisabled ?? false);
 
   const handleSubmit = React.useCallback(
     (event: React.FormEvent) => {

packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/EdaNotebookParameter.tsx

@@ -38,10 +38,11 @@ import {
 
 type EdaNotebookParameterProps = {
   wdkState: WdkState;
+  onReadinessChange?: (isReady: boolean) => void;
 };
 
 export function EdaNotebookParameter(props: EdaNotebookParameterProps) {
-  const { wdkState } = props;
+  const { wdkState, onReadinessChange } = props;
   const { parameters, paramValues, updateParamValue } = wdkState;
 
   const studyId = paramValues['eda_dataset_id'];
@@ -102,6 +103,7 @@ export function EdaNotebookParameter(props: EdaNotebookParameterProps) {
               analysisState={analysisState}
               notebookType={notebookType}
               wdkState={wdkState}
+              onReadinessChange={onReadinessChange}
             />
           </CoreUIThemeProvider>
         </WorkspaceContainer>
@@ -114,10 +116,11 @@ interface EdaNotebookAdapterProps {
   analysisState: AnalysisState;
   notebookType: string;
   wdkState: WdkState;
+  onReadinessChange?: (isReady: boolean) => void;
 }
 
 function EdaNotebookAdapter(props: EdaNotebookAdapterProps) {
-  const { analysisState, wdkState, notebookType } = props;
+  const { analysisState, wdkState, notebookType, onReadinessChange } = props;
   const studyId = analysisState.analysis?.studyId;
 
   const analysisClient = useConfiguredAnalysisClient(edaServiceUrl);
@@ -141,6 +144,7 @@ function EdaNotebookAdapter(props: EdaNotebookAdapterProps) {
             analysisState={analysisState}
             notebookType={notebookType}
             wdkState={wdkState}
+            onReadinessChange={onReadinessChange}
           />
         </EDAWorkspaceContainer>
       )}

packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/questions/EdaNotebookQuestionForm.tsx

@@ -1,17 +1,25 @@
 import DefaultQuestionForm, {
   Props,
 } from '@veupathdb/wdk-client/lib/Views/Question/DefaultQuestionForm';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { EdaNotebookParameter } from './EdaNotebookParameter';
 import { Parameter } from '@veupathdb/wdk-client/lib/Utils/WdkModel';
 import { WdkState } from '@veupathdb/eda/lib/notebook/EdaNotebookAnalysis';
+import { presetNotebooks } from '@veupathdb/eda/lib/notebook/NotebookPresets';
 
 export const EdaNotebookQuestionForm = (props: Props) => {
   const { searchName } = props;
   if (!searchName) {
     throw new Error('No search defined.');
   }
 
+  const notebookType =
+    props.state.question.properties?.['edaNotebookType']?.[0];
+  const preset = notebookType ? presetNotebooks[notebookType] : undefined;
+
+  // Start disabled only if the preset has a readiness check
+  const [notebookReady, setNotebookReady] = useState(!preset?.isReady);
+
   // We'll use this function throughout the notebook to update any wdk parameters.
   const updateParamValue = useCallback(
     (parameter: Parameter, newParamValue: string) => {
@@ -25,27 +33,42 @@ export const EdaNotebookQuestionForm = (props: Props) => {
     [props.eventHandlers, searchName]
   );
 
-  const wdkState: WdkState = {
-    // Safe: pluginConfig.tsx only routes here when edaNotebookType property is present
-    queryName: props.state.question.queryName!,
-    parameters: props.state.question.parameters,
-    paramValues: props.state.paramValues,
-    updateParamValue,
-    questionProperties: props.state.question.properties ?? {},
-  };
+  const wdkState = useMemo<WdkState>(
+    () => ({
+      // Safe: pluginConfig.tsx only routes here when edaNotebookType property is present
+      queryName: props.state.question.queryName!,
+      parameters: props.state.question.parameters,
+      paramValues: props.state.paramValues,
+      updateParamValue,
+      questionProperties: props.state.question.properties ?? {},
+    }),
+    [
+      props.state.question.queryName,
+      props.state.question.parameters,
+      props.state.paramValues,
+      updateParamValue,
+      props.state.question.properties,
+    ]
+  );
 
   // An override that renders the notebook instead of any default parameter or parameter group ui.
   // NOTE: this function is run for every visible parameter group. May cause
   // an issue if the wdk question has multiple parameter groups.
   const renderParamGroup = () => {
-    return <EdaNotebookParameter wdkState={wdkState} />;
+    return (
+      <EdaNotebookParameter
+        wdkState={wdkState}
+        onReadinessChange={setNotebookReady}
+      />
+    );
   };
 
   return (
     <DefaultQuestionForm
       {...props}
       renderParamGroup={renderParamGroup}
       resetFormConfig={{ offered: false }}
+      submissionDisabled={!notebookReady}
     />
   );
 };