Render button in panel instead of AllAnalyses

VEuPathDB · Sep 12, 2023 · 31293ab · 31293ab
1 parent 966c84b
commit 31293ab
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 37 deletions.
diff --git a/packages/libs/coreui/src/components/icons/Plus.tsx b/packages/libs/coreui/src/components/icons/Plus.tsx
@@ -0,0 +1,19 @@
+import { SVGProps } from 'react';
+import { Add } from '@material-ui/icons';
+
+const Plus = (props: SVGProps<SVGSVGElement>) => {
+  const { height = '1em', width = '1em' } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="-16 176 352 224"
+      height={height}
+      width={width}
+      {...props}
+    >
+      <Add />
+    </svg>
+  );
+};
+
+export default Plus;
diff --git a/packages/libs/coreui/src/components/icons/index.tsx b/packages/libs/coreui/src/components/icons/index.tsx
@@ -14,6 +14,7 @@ export { default as Filter } from './Filter';
 export { default as Loading } from './Loading';
 export { default as NoEdit } from './NoEdit';
 export { default as Pencil } from './Pencil';
+export { default as Plus } from './Plus';
 export { default as SampleDetailsDark } from './SampleDetailsDark';
 export { default as SampleDetailsLight } from './SampleDetailsLight';
 export { default as Share } from './Share';

diff --git a/packages/libs/eda/src/lib/map/analysis/MapAnalysis.tsx b/packages/libs/eda/src/lib/map/analysis/MapAnalysis.tsx
@@ -31,8 +31,10 @@ import { DocumentationContainer } from '../../core/components/docs/Documentation
 import {
   CheckIcon,
   Download,
+  Plus,
   FilledButton,
   Filter as FilterIcon,
+  FloatingButton,
   H5,
   Table,
 } from '@veupathdb/coreui';
@@ -69,9 +71,10 @@ import { useLoginCallbacks } from '../../workspace/sharing/hooks';
 import NameAnalysis from '../../workspace/sharing/NameAnalysis';
 import NotesTab from '../../workspace/NotesTab';
 import ConfirmShareAnalysis from '../../workspace/sharing/ConfirmShareAnalysis';
-import { useHistory } from 'react-router';
+import { useHistory, useRouteMatch } from 'react-router';
 
 import { uniq } from 'lodash';
+import Path from 'path';
 import DownloadTab from '../../workspace/DownloadTab';
 import { RecordController } from '@veupathdb/wdk-client/lib/Controllers';
 import {
@@ -87,7 +90,6 @@ import {
 import { leastAncestralEntity } from '../../core/utils/data-element-constraints';
 import { getDefaultOverlayConfig } from './utils/defaultOverlayConfig';
 import { AllAnalyses } from '../../workspace/AllAnalyses';
-import { getStudyId } from '@veupathdb/study-data-access/lib/shared/studies';
 import { isSavedAnalysis } from '../../core/utils/analysis';
 import {
   MapTypeConfigurationMenu,
@@ -115,6 +117,7 @@ import { DraggablePanelCoordinatePair } from '@veupathdb/coreui/lib/components/c
 import _ from 'lodash';
 
 import EZTimeFilter from './EZTimeFilter';
+import AnalysisNameDialog from '../../workspace/AnalysisNameDialog';
 
 enum MapSideNavItemLabels {
   Download = 'Download',
@@ -717,6 +720,23 @@ function MapAnalysisImpl(props: ImplProps) {
 
   const filteredEntities = uniq(filters?.map((f) => f.entityId));
 
+  const [isAnalysisNameDialogOpen, setIsAnalysisNameDialogOpen] =
+    useState(false);
+  const { url: urlRouteMatch } = useRouteMatch();
+  const redirectURL = studyId
+    ? urlRouteMatch.endsWith(studyId)
+      ? `/workspace/${urlRouteMatch}/new`
+      : Path.resolve(urlRouteMatch, '../new')
+    : null;
+  const redirectToNewAnalysis = useCallback(() => {
+    if (redirectURL) {
+      history.push(redirectURL);
+      // push() alone doesn't seem to work in this context; the URL changes,
+      // but the page doesn't load, so we force a refresh
+      history.go(0);
+    }
+  }, [history, redirectURL]);
+
   const sideNavigationButtonConfigurationObjects: SideNavigationItemConfigurationObject[] =
     [
       {
@@ -1071,6 +1091,31 @@ function MapAnalysisImpl(props: ImplProps) {
                 maxWidth: '1500px',
               }}
             >
+              {analysisId && redirectToNewAnalysis ? (
+                <div style={{ float: 'right' }}>
+                  <FloatingButton
+                    text="Create new analysis"
+                    icon={Plus}
+                    onPress={
+                      analysisState.analysis?.displayName ===
+                      DEFAULT_ANALYSIS_NAME
+                        ? () => setIsAnalysisNameDialogOpen(true)
+                        : redirectToNewAnalysis
+                    }
+                  />
+                </div>
+              ) : (
+                <></>
+              )}
+              {analysisState.analysis && (
+                <AnalysisNameDialog
+                  isOpen={isAnalysisNameDialogOpen}
+                  setIsOpen={setIsAnalysisNameDialogOpen}
+                  initialAnalysisName={analysisState.analysis.displayName}
+                  setAnalysisName={analysisState.setName}
+                  redirectToNewAnalysis={redirectToNewAnalysis}
+                />
+              )}
               <AllAnalyses
                 analysisClient={analysisClient}
                 analysisState={

diff --git a/packages/libs/eda/src/lib/workspace/AllAnalyses.tsx b/packages/libs/eda/src/lib/workspace/AllAnalyses.tsx
@@ -37,7 +37,6 @@ import {
   AnalysisClient,
   AnalysisState,
   AnalysisSummary,
-  DEFAULT_ANALYSIS_NAME,
   StudyRecord,
   useAnalysisList,
   usePinnedAnalyses,
@@ -51,7 +50,6 @@ import {
   makeCurrentProvenanceString,
   makeOnImportProvenanceString,
 } from '../core/utils/analysis';
-import { AnalysisNameDialog } from './AnalysisNameDialog';
 import { convertISOToDisplayFormat } from '../core/utils/date-conversion';
 import ShareFromAnalysesList from './sharing/ShareFromAnalysesList';
 import { Checkbox, Toggle, colors } from '@veupathdb/coreui';
@@ -128,8 +126,6 @@ export function AllAnalyses(props: Props) {
   const history = useHistory();
   const location = useLocation();
   const classes = useStyles();
-  const [isAnalysisNameDialogOpen, setIsAnalysisNameDialogOpen] =
-    useState(false);
   const analysis = analysisState?.analysis;
   const activeAnalysisId = getAnalysisId(analysis);
   const studyId = studyRecord ? getStudyId(studyRecord) : null;
@@ -345,24 +341,6 @@ export function AllAnalyses(props: Props) {
           selectedAnalyses.has(analysis.analysisId),
       },
       actions: [
-        {
-          element:
-            activeAnalysisId && redirectToNewAnalysis ? (
-              <Button
-                type="button"
-                startIcon={<Icon color="action" className="fa fa-plus" />}
-                onClick={
-                  analysis && analysis.displayName === DEFAULT_ANALYSIS_NAME
-                    ? () => setIsAnalysisNameDialogOpen(true)
-                    : redirectToNewAnalysis
-                }
-              >
-                Create new analysis
-              </Button>
-            ) : (
-              <></>
-            ),
-        },
         {
           element: (
             <Button
@@ -684,8 +662,6 @@ export function AllAnalyses(props: Props) {
       user,
       studyId,
       activeAnalysisId,
-      analysis,
-      redirectToNewAnalysis,
     ]
   );
 
@@ -757,15 +733,6 @@ export function AllAnalyses(props: Props) {
           </Mesa.Mesa>
         ) : null}
       </div>
-      {analysis && (
-        <AnalysisNameDialog
-          isOpen={isAnalysisNameDialogOpen}
-          setIsOpen={setIsAnalysisNameDialogOpen}
-          initialAnalysisName={analysis.displayName}
-          setAnalysisName={analysisState.setName}
-          redirectToNewAnalysis={redirectToNewAnalysis}
-        />
-      )}
     </>
   );
 }
diff --git a/packages/libs/eda/src/lib/workspace/AnalysisNameDialog.tsx b/packages/libs/eda/src/lib/workspace/AnalysisNameDialog.tsx
@@ -22,7 +22,7 @@ interface AnalysisNameDialogProps {
   redirectToNewAnalysis: () => void;
 }
 
-export function AnalysisNameDialog({
+export default function AnalysisNameDialog({
   isOpen,
   setIsOpen,
   initialAnalysisName,

diff --git a/packages/libs/eda/src/lib/workspace/EDAWorkspaceHeading.tsx b/packages/libs/eda/src/lib/workspace/EDAWorkspaceHeading.tsx
@@ -6,7 +6,7 @@ import Path from 'path';
 import { H3, Table, FloatingButton } from '@veupathdb/coreui';
 
 import { safeHtml } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils';
-import { AnalysisNameDialog } from './AnalysisNameDialog';
+import AnalysisNameDialog from './AnalysisNameDialog';
 import AddIcon from '@material-ui/icons/Add';
 
 // Hooks