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.