From 889a5821793ce104e850eb0fbb5c5bf6a077c5e6 Mon Sep 17 00:00:00 2001
From: Josh Adam <josh.adam@phac-aspc.gc.ca>
Date: Fri, 7 Oct 2022 12:10:55 -0500
Subject: [PATCH 1/3] fix: Updated analysis layouts to flex to 100% with
 scrolling

---
 .../analysis/components/AnalysisBioHansel.jsx |  8 +--
 .../components/AnalysisOutputFiles.jsx        | 10 +--
 .../components/AnalysisProvenance.jsx         |  5 +-
 .../analysis/components/AnalysisSettings.jsx  | 11 ++--
 .../analysis/components/AnalysisSistr.jsx     | 62 ++++++++++---------
 .../phylocanvas/ScrollableSection.tsx         | 25 ++++++++
 6 files changed, 77 insertions(+), 44 deletions(-)
 create mode 100644 src/main/webapp/resources/js/pages/analysis/components/phylocanvas/ScrollableSection.tsx

diff --git a/src/main/webapp/resources/js/pages/analysis/components/AnalysisBioHansel.jsx b/src/main/webapp/resources/js/pages/analysis/components/AnalysisBioHansel.jsx
index 9c07b1ea3c2..3afbfe1192f 100644
--- 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 "./phylocanvas/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
index 26876088428..c14e59c3520 100644
--- 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 "./phylocanvas/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
index 3c808eec4bc..bf1b7ec97c0 100644
--- 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 "./phylocanvas/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
index 0369508801a..709a40da039 100644
--- 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 "./phylocanvas/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
index 787dc3d039e..4c2c42762e1 100644
--- 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 "./phylocanvas/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/phylocanvas/ScrollableSection.tsx b/src/main/webapp/resources/js/pages/analysis/components/phylocanvas/ScrollableSection.tsx
new file mode 100644
index 00000000000..338c432cd01
--- /dev/null
+++ b/src/main/webapp/resources/js/pages/analysis/components/phylocanvas/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>
+  );
+}

From d154eaef407fcf9edb56dbe1ea21646327209a9f Mon Sep 17 00:00:00 2001
From: Josh Adam <josh.adam@phac-aspc.gc.ca>
Date: Fri, 7 Oct 2022 12:13:27 -0500
Subject: [PATCH 2/3] chore: Updated CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e3c0daf9aeb..90e954de91c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@
 * [Developer/UI]: Updated sample details view to use Ant Design and moved into a modal which can be launched from anywhere the sample name is listed. See [PR 1370](https://github.com/phac-nml/irida/pull/1370)
 * [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)
+* [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)

From 10bec949172fd7feb75117054f159f27cf28cc2f Mon Sep 17 00:00:00 2001
From: Josh Adam <josh.adam@phac-aspc.gc.ca>
Date: Fri, 7 Oct 2022 13:12:10 -0500
Subject: [PATCH 3/3] chore: Moved ScrollableSection.tsx to the components
 directory

---
 .../js/pages/analysis/components/AnalysisBioHansel.jsx          | 2 +-
 .../js/pages/analysis/components/AnalysisOutputFiles.jsx        | 2 +-
 .../js/pages/analysis/components/AnalysisProvenance.jsx         | 2 +-
 .../resources/js/pages/analysis/components/AnalysisSettings.jsx | 2 +-
 .../resources/js/pages/analysis/components/AnalysisSistr.jsx    | 2 +-
 .../analysis/components/{phylocanvas => }/ScrollableSection.tsx | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)
 rename src/main/webapp/resources/js/pages/analysis/components/{phylocanvas => }/ScrollableSection.tsx (88%)

diff --git a/src/main/webapp/resources/js/pages/analysis/components/AnalysisBioHansel.jsx b/src/main/webapp/resources/js/pages/analysis/components/AnalysisBioHansel.jsx
index 3afbfe1192f..e20214af149 100644
--- a/src/main/webapp/resources/js/pages/analysis/components/AnalysisBioHansel.jsx
+++ b/src/main/webapp/resources/js/pages/analysis/components/AnalysisBioHansel.jsx
@@ -11,7 +11,7 @@ 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 "./phylocanvas/ScrollableSection";
+import ScrollableSection from "./ScrollableSection";
 
 export default function AnalysisBioHansel() {
   const { analysisIdentifier } = useContext(AnalysisContext);
diff --git a/src/main/webapp/resources/js/pages/analysis/components/AnalysisOutputFiles.jsx b/src/main/webapp/resources/js/pages/analysis/components/AnalysisOutputFiles.jsx
index c14e59c3520..08b50628147 100644
--- a/src/main/webapp/resources/js/pages/analysis/components/AnalysisOutputFiles.jsx
+++ b/src/main/webapp/resources/js/pages/analysis/components/AnalysisOutputFiles.jsx
@@ -9,7 +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 "./phylocanvas/ScrollableSection";
+import ScrollableSection from "./ScrollableSection";
 
 const OutputFilePreview = React.lazy(() =>
   import("./outputs/OutputFilePreview")
diff --git a/src/main/webapp/resources/js/pages/analysis/components/AnalysisProvenance.jsx b/src/main/webapp/resources/js/pages/analysis/components/AnalysisProvenance.jsx
index bf1b7ec97c0..350e824bc1a 100644
--- a/src/main/webapp/resources/js/pages/analysis/components/AnalysisProvenance.jsx
+++ b/src/main/webapp/resources/js/pages/analysis/components/AnalysisProvenance.jsx
@@ -25,7 +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 "./phylocanvas/ScrollableSection";
+import ScrollableSection from "./ScrollableSection";
 
 const { Panel } = Collapse;
 
diff --git a/src/main/webapp/resources/js/pages/analysis/components/AnalysisSettings.jsx b/src/main/webapp/resources/js/pages/analysis/components/AnalysisSettings.jsx
index 709a40da039..d794b806466 100644
--- a/src/main/webapp/resources/js/pages/analysis/components/AnalysisSettings.jsx
+++ b/src/main/webapp/resources/js/pages/analysis/components/AnalysisSettings.jsx
@@ -21,7 +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 "./phylocanvas/ScrollableSection";
+import ScrollableSection from "./ScrollableSection";
 
 const { Content, Sider } = 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
index 4c2c42762e1..d636c9aeb3a 100644
--- a/src/main/webapp/resources/js/pages/analysis/components/AnalysisSistr.jsx
+++ b/src/main/webapp/resources/js/pages/analysis/components/AnalysisSistr.jsx
@@ -17,7 +17,7 @@ import { SPACE_MD } from "../../../styles/spacing";
 
 import { setBaseUrl } from "../../../utilities/url-utilities";
 import { ANALYSIS, SISTR } from "../routes";
-import ScrollableSection from "./phylocanvas/ScrollableSection";
+import ScrollableSection from "./ScrollableSection";
 
 const SistrInfo = React.lazy(() => import("./sistr/SistrInfo"));
 const CgMlst = React.lazy(() => import("./sistr/CgMlst"));
diff --git a/src/main/webapp/resources/js/pages/analysis/components/phylocanvas/ScrollableSection.tsx b/src/main/webapp/resources/js/pages/analysis/components/ScrollableSection.tsx
similarity index 88%
rename from src/main/webapp/resources/js/pages/analysis/components/phylocanvas/ScrollableSection.tsx
rename to src/main/webapp/resources/js/pages/analysis/components/ScrollableSection.tsx
index 338c432cd01..fdd17912062 100644
--- a/src/main/webapp/resources/js/pages/analysis/components/phylocanvas/ScrollableSection.tsx
+++ b/src/main/webapp/resources/js/pages/analysis/components/ScrollableSection.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { SPACE_MD } from "../../../../styles/spacing";
+import { SPACE_MD } from "../../../styles/spacing";
 
 /**
  * React component to allow children to scroll on th y axis.