Merge pull request #1378 from phac-nml/fix-analysis-layout

fix: Updated analysis layouts to flex to 100% with scrolling
phac-nml · Oct 7, 2022 · 2e3524a · 2e3524a
2 parents 43b8c6e + cb6196c
commit 2e3524a
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -31,6 +31,7 @@
 * [UI]: Updated analysis results manage results page to not allow a project collaborator to view the save results back to a sample section. See [PR 1377](https://github.com/phac-nml/irida/pull/1377)
 * [UI]: Updated phylogenetic tree visualization on the analysis details using Ant Design and the new phylocanvas.gl. See [PR 1280](https://github.com/phac-nml/irida/pull/1280)
 * [Developer]: Added security scanning of GitHub pull-requests with [CodeQL](https://codeql.github.com/) (scans for code vulnerabilities) and [Grype](https://github.com/anchore/grype) (scans for Java package dependency vulnerabilities). See [PR 1282](https://github.com/phac-nml/irida/pull/1282).
+* [UI]: Updated layout of the analysis view to allow for scrollable sections. See[PR 1378](https://github.com/phac-nml/irida/pull/1378)
 
 ## [22.05.5] - 2022/06/28
 * [UI]: Fixed bug preventing export of project samples table due to invalid url. [PR 1331](https://github.com/phac-nml/irida/pull/1331)

diff --git a/src/main/webapp/resources/js/pages/analysis/components/AnalysisBioHansel.jsx b/src/main/webapp/resources/js/pages/analysis/components/AnalysisBioHansel.jsx
@@ -3,17 +3,15 @@
  */
 
 import React, { useContext, useEffect, useState } from "react";
-import { Layout } from "antd";
-import { SPACE_MD } from "../../../styles/spacing";
 import { AnalysisContext } from "../../../contexts/AnalysisContext";
 import { getDataViaChunks } from "../../../apis/analysis/analysis";
-import { grey1 } from "../../../styles/colors";
 import { AnalysisOutputsContext } from "../../../contexts/AnalysisOutputsContext";
 
 import { TabPanelContent } from "../../../components/tabs";
 import { Error, Success } from "../../../components/icons";
 import { Warning } from "../../../components/icons/Warning";
 import { BasicList } from "../../../components/lists";
+import ScrollableSection from "./ScrollableSection";
 
 export default function AnalysisBioHansel() {
   const { analysisIdentifier } = useContext(AnalysisContext);
@@ -131,10 +129,10 @@ export default function AnalysisBioHansel() {
   }
 
   return (
-    <Layout style={{ paddingLeft: SPACE_MD, backgroundColor: grey1 }}>
+    <ScrollableSection>
       <TabPanelContent title={i18n("AnalysisBioHansel.bioHanselInformation")}>
         <BasicList dataSource={biohanselResults}></BasicList>
       </TabPanelContent>
-    </Layout>
+    </ScrollableSection>
   );
 }
diff --git a/src/main/webapp/resources/js/pages/analysis/components/AnalysisOutputFiles.jsx b/src/main/webapp/resources/js/pages/analysis/components/AnalysisOutputFiles.jsx
@@ -9,6 +9,7 @@ import { grey1 } from "../../../styles/colors";
 import { ANALYSIS, OUTPUT } from "../routes";
 import { setBaseUrl } from "../../../utilities/url-utilities";
 import { AnalysisContext } from "../../../contexts/AnalysisContext";
+import ScrollableSection from "./ScrollableSection";
 
 const OutputFilePreview = React.lazy(() =>
   import("./outputs/OutputFilePreview")
@@ -17,13 +18,14 @@ const { Content } = Layout;
 
 export default function AnalysisOutputFiles() {
   const { analysisIdentifier } = useContext(AnalysisContext);
-  const BASE_URL =
-    setBaseUrl(`/analysis/${analysisIdentifier}/` + ANALYSIS.OUTPUT);
+  const BASE_URL = setBaseUrl(
+    `/analysis/${analysisIdentifier}/` + ANALYSIS.OUTPUT
+  );
   return (
-    <Layout style={{ paddingLeft: SPACE_MD, backgroundColor: grey1 }}>
+    <ScrollableSection>
       <Content>
         <OutputFilePreview path={`${BASE_URL}/${OUTPUT.FILE_PREVIEW}`} />
       </Content>
-    </Layout>
+    </ScrollableSection>
   );
 }
diff --git a/src/main/webapp/resources/js/pages/analysis/components/AnalysisProvenance.jsx b/src/main/webapp/resources/js/pages/analysis/components/AnalysisProvenance.jsx
@@ -25,6 +25,7 @@ import { AnalysisContext } from "../../../contexts/AnalysisContext";
 import { AnalysisOutputsContext } from "../../../contexts/AnalysisOutputsContext";
 import { WarningAlert } from "../../../components/alerts";
 import { ContentLoading } from "../../../components/loader";
+import ScrollableSection from "./ScrollableSection";
 
 const { Panel } = Collapse;
 
@@ -211,7 +212,7 @@ export default function AnalysisProvenance() {
   }
 
   return (
-    <Layout style={{ paddingLeft: SPACE_MD, backgroundColor: grey1 }}>
+    <ScrollableSection>
       <TabPanelContent title={i18n("Analysis.provenance")}>
         {analysisOutputsContext.outputs !== null ? (
           analysisOutputsContext.outputs.length > 0 ? (
@@ -225,6 +226,6 @@ export default function AnalysisProvenance() {
           <ContentLoading />
         )}
       </TabPanelContent>
-    </Layout>
+    </ScrollableSection>
   );
 }
diff --git a/src/main/webapp/resources/js/pages/analysis/components/AnalysisSettings.jsx b/src/main/webapp/resources/js/pages/analysis/components/AnalysisSettings.jsx
@@ -21,6 +21,7 @@ import { ContentLoading } from "../../../components/loader/ContentLoading";
 import { grey1 } from "../../../styles/colors";
 import { ANALYSIS, SETTINGS } from "../routes";
 import { setBaseUrl } from "../../../utilities/url-utilities";
+import ScrollableSection from "./ScrollableSection";
 
 const { Content, Sider } = Layout;
 
@@ -58,7 +59,7 @@ export default function AnalysisSettings() {
    * tab is clicked
    */
   return (
-    <Layout>
+    <Layout style={{ height: `100%` }}>
       <Sider width={200} style={{ backgroundColor: grey1 }}>
         <Menu mode="vertical" selectedKeys={[current]}>
           <Menu.Item key="details">
@@ -88,9 +89,11 @@ export default function AnalysisSettings() {
 
       <Layout style={{ paddingLeft: SPACE_MD, backgroundColor: grey1 }}>
         <Content>
-          <Suspense fallback={<ContentLoading />}>
-            <Outlet />
-          </Suspense>
+          <ScrollableSection>
+            <Suspense fallback={<ContentLoading />}>
+              <Outlet />
+            </Suspense>
+          </ScrollableSection>
         </Content>
       </Layout>
     </Layout>

diff --git a/src/main/webapp/resources/js/pages/analysis/components/AnalysisSistr.jsx b/src/main/webapp/resources/js/pages/analysis/components/AnalysisSistr.jsx
@@ -17,6 +17,7 @@ import { SPACE_MD } from "../../../styles/spacing";
 
 import { setBaseUrl } from "../../../utilities/url-utilities";
 import { ANALYSIS, SISTR } from "../routes";
+import ScrollableSection from "./ScrollableSection";
 
 const SistrInfo = React.lazy(() => import("./sistr/SistrInfo"));
 const CgMlst = React.lazy(() => import("./sistr/CgMlst"));
@@ -30,14 +31,15 @@ export default function AnalysisSistr({ baseUrl }) {
   const { analysisIdentifier } = useContext(AnalysisContext);
   const [sistrResults, setSistrResults] = useState(null);
 
-  const DEFAULT_URL =
-    setBaseUrl(`/analysis/${analysisIdentifier}/` + ANALYSIS.SISTR);
+  const DEFAULT_URL = setBaseUrl(
+    `/analysis/${analysisIdentifier}/` + ANALYSIS.SISTR
+  );
   const pathRegx = new RegExp(/([a-zA-Z_]+)$/);
   const keyname = location.pathname.match(pathRegx);
 
   // On load gets the SISTR results by causing the SistResult Object generation and conversion to Ajax Ojbect
   useEffect(() => {
-    getSistrResults(analysisIdentifier).then(data => {
+    getSistrResults(analysisIdentifier).then((data) => {
       setSistrResults(data);
     });
   }, []);
@@ -47,7 +49,7 @@ export default function AnalysisSistr({ baseUrl }) {
    */
   return sistrResults !== null ? (
     !sistrResults.parse_results_error ? (
-      <Layout>
+      <Layout style={{ height: `100%` }}>
         <Sider width={200} style={{ backgroundColor: grey1 }}>
           <Menu
             mode="vertical"
@@ -78,31 +80,33 @@ export default function AnalysisSistr({ baseUrl }) {
 
         <Layout style={{ paddingLeft: SPACE_MD, backgroundColor: grey1 }}>
           <Content>
-            <Suspense fallback={<ContentLoading />}>
-              <Routes>
-                <Route
-                  index
-                  element={
-                    <SistrInfo
-                      sistrResults={sistrResults.result}
-                      sampleName={sistrResults.sampleName}
-                    />
-                  }
-                />
-                <Route
-                  path={SISTR.CGMLST}
-                  element={<CgMlst sistrResults={sistrResults.result} />}
-                />
-                <Route
-                  path={SISTR.MASH}
-                  element={<Mash sistrResults={sistrResults.result} />}
-                />
-                <Route
-                  path={SISTR.CITATION}
-                  element={<Citation sistrResults={sistrResults.result} />}
-                />
-              </Routes>
-            </Suspense>
+            <ScrollableSection>
+              <Suspense fallback={<ContentLoading />}>
+                <Routes>
+                  <Route
+                    index
+                    element={
+                      <SistrInfo
+                        sistrResults={sistrResults.result}
+                        sampleName={sistrResults.sampleName}
+                      />
+                    }
+                  />
+                  <Route
+                    path={SISTR.CGMLST}
+                    element={<CgMlst sistrResults={sistrResults.result} />}
+                  />
+                  <Route
+                    path={SISTR.MASH}
+                    element={<Mash sistrResults={sistrResults.result} />}
+                  />
+                  <Route
+                    path={SISTR.CITATION}
+                    element={<Citation sistrResults={sistrResults.result} />}
+                  />
+                </Routes>
+              </Suspense>
+            </ScrollableSection>
           </Content>
         </Layout>
       </Layout>

diff --git a/src/main/webapp/resources/js/pages/analysis/components/ScrollableSection.tsx b/src/main/webapp/resources/js/pages/analysis/components/ScrollableSection.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { SPACE_MD } from "../../../styles/spacing";
+
+/**
+ * React component to allow children to scroll on th y axis.
+ * @param children
+ * @constructor
+ */
+export default function ScrollableSection({
+  children,
+}: {
+  children: JSX.Element;
+}): JSX.Element {
+  return (
+    <section
+      style={{
+        paddingLeft: SPACE_MD,
+        height: "100%",
+        overflowY: "auto",
+      }}
+    >
+      {children}
+    </section>
+  );
+}