WIP collapse button for floating viz controls

VEuPathDB · Oct 4, 2023 · 3637a62 · 3637a62
1 parent 7ab5540
commit 3637a62
Show file tree

Hide file tree

Showing 15 changed files with 364 additions and 260 deletions.
diff --git a/packages/libs/eda/src/lib/core/components/layouts/FloatingLayout.tsx b/packages/libs/eda/src/lib/core/components/layouts/FloatingLayout.tsx
@@ -1,4 +1,5 @@
-import { CSSProperties } from 'react';
+import { FilledButton } from '@veupathdb/coreui';
+import { CSSProperties, useState } from 'react';
 import { FloatingDiv } from '../../../map/analysis/FloatingDiv';
 import { RequiredInputsPrompt } from './RequiredInputPrompts';
 
@@ -7,6 +8,7 @@ import { LayoutProps } from './types';
 export interface Props extends LayoutProps {
   showRequiredInputsPrompt?: boolean;
   isMosaicPlot?: boolean;
+  hideControls?: boolean;
 }
 
 const defaultContainerStyles: CSSProperties = {
@@ -27,15 +29,18 @@ export function FloatingLayout({
   plotStyles,
   showRequiredInputsPrompt,
   isMosaicPlot,
+  hideControls,
 }: Props) {
   return (
     <div style={{ ...defaultContainerStyles, ...containerStyles }}>
       <div style={{ ...defaultPlotStyles, ...plotStyles }}>
-        {showRequiredInputsPrompt && (
-          <RequiredInputsPrompt isMosaicPlot={isMosaicPlot} />
-        )}
-        {plotNode}
-        {controlsNode}
+        <div>
+          {showRequiredInputsPrompt && (
+            <RequiredInputsPrompt isMosaicPlot={isMosaicPlot} />
+          )}
+          {plotNode}
+          {!hideControls && controlsNode}
+        </div>
       </div>
     </div>
   );

diff --git a/packages/libs/eda/src/lib/core/components/layouts/types.ts b/packages/libs/eda/src/lib/core/components/layouts/types.ts
@@ -4,11 +4,13 @@ export interface LayoutProps {
   containerStyles?: CSSProperties;
   legendNode?: ReactNode;
   legendStyles?: CSSProperties;
+  // inputVariablesNode?: ReactNode;
   plotNode: ReactNode;
   controlsNode?: ReactNode;
   plotStyles?: CSSProperties;
   tableGroupNode: ReactNode;
   tableGroupStyles?: CSSProperties;
+  hideControls?: boolean;
 }
 
 export type StyleProps<P> = Pick<P, keyof P & `${string}Styles`>;
@@ -19,6 +21,7 @@ export interface LayoutOptions {
   hideFacetInputs?: boolean;
   // considering marginal histogram
   showMarginalHistogram?: boolean;
+  // hideInputsAndControls?: boolean;
 }
 
 export interface TitleOptions {

diff --git a/packages/libs/eda/src/lib/core/components/visualizations/VisualizationTypes.ts b/packages/libs/eda/src/lib/core/components/visualizations/VisualizationTypes.ts
@@ -31,6 +31,8 @@ export interface VisualizationProps<Options = undefined> {
   geoConfigs: GeoConfig[];
   otherVizOverviews: VisualizationOverview[];
   computeJobStatus?: JobStatus;
+  hideInputsAndControls?: boolean;
+  plotContainerStyles?: React.CSSProperties;
 }
 
 export interface IsEnabledInPickerParams {

diff --git a/packages/libs/eda/src/lib/core/components/visualizations/VisualizationsContainer.tsx b/packages/libs/eda/src/lib/core/components/visualizations/VisualizationsContainer.tsx
@@ -66,6 +66,7 @@ interface Props {
   createComputeJob?: () => void;
   /** optional dynamic plugins */
   plugins?: Partial<Record<string, ComputationPlugin>>;
+  hideInputsAndControls?: boolean;
 }
 
 /**
@@ -449,7 +450,8 @@ type FullScreenVisualizationPropKeys =
   | 'disableThumbnailCreation'
   | 'computeJobStatus'
   | 'createComputeJob'
-  | 'plugins';
+  | 'plugins'
+  | 'hideInputsAndControls';
 
 interface FullScreenVisualizationProps
   extends Pick<Props, FullScreenVisualizationPropKeys> {
@@ -479,6 +481,7 @@ export function FullScreenVisualization(props: FullScreenVisualizationProps) {
     computeJobStatus,
     createComputeJob,
     plugins = staticPlugins,
+    hideInputsAndControls,
   } = props;
   const themePrimaryColor = useUITheme()?.palette.primary;
   const history = useHistory();
@@ -643,20 +646,24 @@ export function FullScreenVisualization(props: FullScreenVisualizationProps) {
         </ContentError>
       ) : (
         <div>
-          <h3>
-            <SaveableTextEditor
-              value={viz.displayName ?? 'unnamed visualization'}
-              onSave={(value) => {
-                if (value)
-                  analysisState.updateVisualization({
-                    ...viz,
-                    displayName: value,
-                  });
-              }}
-            />
-          </h3>
-          <div className="Subtitle">{overview?.displayName}</div>
-          {plugin && analysisState.analysis && (
+          {!hideInputsAndControls && (
+            <>
+              <h3>
+                <SaveableTextEditor
+                  value={viz.displayName ?? 'unnamed visualization'}
+                  onSave={(value) => {
+                    if (value)
+                      analysisState.updateVisualization({
+                        ...viz,
+                        displayName: value,
+                      });
+                  }}
+                />
+              </h3>
+              <div className="Subtitle">{overview?.displayName}</div>
+            </>
+          )}
+          {!hideInputsAndControls && plugin && analysisState.analysis && (
             <div
               style={{
                 display: 'flex',
@@ -719,6 +726,7 @@ export function FullScreenVisualization(props: FullScreenVisualizationProps) {
                   geoConfigs={geoConfigs}
                   otherVizOverviews={overviews.others}
                   computeJobStatus={computeJobStatus}
+                  hideInputsAndControls={hideInputsAndControls}
                 />
               </div>
             </ComputationStepContainer>
@@ -741,6 +749,7 @@ export function FullScreenVisualization(props: FullScreenVisualizationProps) {
               geoConfigs={geoConfigs}
               otherVizOverviews={overviews.others}
               computeJobStatus={computeJobStatus}
+              hideInputsAndControls={hideInputsAndControls}
             />
           )}
         </div>

diff --git a/.../libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx b/.../libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx
@@ -113,6 +113,8 @@ export type BarplotDataWithStatistics = (
 ) &
   CoverageStatistics;
 
+// Do we want to pull this out and pass it in as a prop?
+// If so, it will be harder to make sure we honor it as part of the API
 const plotContainerStyles = {
   height: 450,
   width: 750,
@@ -191,6 +193,7 @@ function BarplotViz(props: VisualizationProps<Options>) {
     toggleStarredVariable,
     totalCounts,
     filteredCounts,
+    hideInputsAndControls,
   } = props;
   const studyMetadata = useStudyMetadata();
   const { id: studyId } = studyMetadata;
@@ -892,40 +895,45 @@ function BarplotViz(props: VisualizationProps<Options>) {
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
       <div style={{ display: 'flex', alignItems: 'center', zIndex: 1 }}>
-        <InputVariables
-          inputs={inputs}
-          entities={entities}
-          selectedVariables={selectedVariables}
-          onChange={handleInputVariableChange}
-          constraints={dataElementConstraints}
-          dataElementDependencyOrder={dataElementDependencyOrder}
-          starredVariables={starredVariables}
-          enableShowMissingnessToggle={
-            (overlayVariable != null || facetVariable != null) &&
-            data.value?.completeCasesAllVars !==
-              data.value?.completeCasesAxesVars
-          }
-          toggleStarredVariable={toggleStarredVariable}
-          // this can be used to show and hide no data control
-          onShowMissingnessChange={
-            computation.descriptor.type === 'pass'
-              ? onShowMissingnessChange
-              : undefined
-          }
-          showMissingness={vizConfig.showMissingness}
-          outputEntity={outputEntity}
-        />
+        {!hideInputsAndControls && (
+          <InputVariables
+            inputs={inputs}
+            entities={entities}
+            selectedVariables={selectedVariables}
+            onChange={handleInputVariableChange}
+            constraints={dataElementConstraints}
+            dataElementDependencyOrder={dataElementDependencyOrder}
+            starredVariables={starredVariables}
+            enableShowMissingnessToggle={
+              (overlayVariable != null || facetVariable != null) &&
+              data.value?.completeCasesAllVars !==
+                data.value?.completeCasesAxesVars
+            }
+            toggleStarredVariable={toggleStarredVariable}
+            // this can be used to show and hide no data control
+            onShowMissingnessChange={
+              computation.descriptor.type === 'pass'
+                ? onShowMissingnessChange
+                : undefined
+            }
+            showMissingness={vizConfig.showMissingness}
+            outputEntity={outputEntity}
+          />
+        )}
       </div>
 
       <PluginError error={data.error} outputSize={outputSize} />
-      <OutputEntityTitle entity={outputEntity} outputSize={outputSize} />
+      {!hideInputsAndControls && (
+        <OutputEntityTitle entity={outputEntity} outputSize={outputSize} />
+      )}
       <LayoutComponent
         isFaceted={isFaceted(data.value)}
         plotNode={plotNode}
         controlsNode={controlsNode}
         legendNode={showOverlayLegend ? legendNode : null}
         tableGroupNode={tableGroupNode}
         showRequiredInputsPrompt={!areRequiredInputsSelected}
+        hideControls={hideInputsAndControls}
       />
     </div>
   );

diff --git a/.../libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx b/.../libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx
@@ -192,6 +192,7 @@ function BoxplotViz(props: VisualizationProps<Options>) {
     totalCounts,
     filteredCounts,
     computeJobStatus,
+    hideInputsAndControls,
   } = props;
   const studyMetadata = useStudyMetadata();
   const { id: studyId } = studyMetadata;
@@ -871,45 +872,50 @@ function BoxplotViz(props: VisualizationProps<Options>) {
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
       <div style={{ display: 'flex', alignItems: 'center', zIndex: 1 }}>
-        <InputVariables
-          inputs={finalizedInputs}
-          entities={entities}
-          selectedVariables={selectedVariables}
-          variablesForConstraints={variablesForConstraints}
-          onChange={handleInputVariableChange}
-          constraints={dataElementConstraints}
-          dataElementDependencyOrder={dataElementDependencyOrder}
-          starredVariables={starredVariables}
-          toggleStarredVariable={toggleStarredVariable}
-          enableShowMissingnessToggle={
-            (overlayVariable != null || facetVariable != null) &&
-            data.value?.completeCasesAllVars !==
-              data.value?.completeCasesAxesVars
-          }
-          showMissingness={vizConfig.showMissingness}
-          // this can be used to show and hide no data control
-          onShowMissingnessChange={
-            options?.hideShowMissingnessToggle
-              ? undefined
-              : onShowMissingnessChange
-          }
-          outputEntity={outputEntity}
-        />
+        {!hideInputsAndControls && (
+          <InputVariables
+            inputs={finalizedInputs}
+            entities={entities}
+            selectedVariables={selectedVariables}
+            variablesForConstraints={variablesForConstraints}
+            onChange={handleInputVariableChange}
+            constraints={dataElementConstraints}
+            dataElementDependencyOrder={dataElementDependencyOrder}
+            starredVariables={starredVariables}
+            toggleStarredVariable={toggleStarredVariable}
+            enableShowMissingnessToggle={
+              (overlayVariable != null || facetVariable != null) &&
+              data.value?.completeCasesAllVars !==
+                data.value?.completeCasesAxesVars
+            }
+            showMissingness={vizConfig.showMissingness}
+            // this can be used to show and hide no data control
+            onShowMissingnessChange={
+              options?.hideShowMissingnessToggle
+                ? undefined
+                : onShowMissingnessChange
+            }
+            outputEntity={outputEntity}
+          />
+        )}
       </div>
 
       <PluginError error={data.error} outputSize={outputSize} />
-      <OutputEntityTitle
-        entity={outputEntity}
-        outputSize={outputSize}
-        subtitle={plotSubtitle}
-      />
+      {!hideInputsAndControls && (
+        <OutputEntityTitle
+          entity={outputEntity}
+          outputSize={outputSize}
+          subtitle={plotSubtitle}
+        />
+      )}
       <LayoutComponent
         isFaceted={isFaceted(data.value)}
         legendNode={showOverlayLegend ? legendNode : null}
         plotNode={plotNode}
         controlsNode={controlsNode}
         tableGroupNode={tableGroupNode}
         showRequiredInputsPrompt={!areRequiredInputsSelected}
+        hideControls={hideInputsAndControls}
       />
     </div>
   );