i22 - paging

.github/workflows/test.yml

@@ -6,6 +6,9 @@ on:
       - main
   pull_request:
 
+env:
+  BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
+
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true

scripts/common

@@ -4,6 +4,7 @@ set -e
 PACKAGE_ROOT=$(realpath $HERE/..)
 PACKAGE_NAME=seroviz
 PACKAGE_ORG=seroanalytics
+SEROVIZR_VERSION=paging
 
 if [[ -v "GITHUB_SHA" ]]; then
     GIT_SHA=${GITHUB_SHA:0:7}

scripts/run

@@ -8,6 +8,6 @@ NETWORK=seroviz_nw
 
 docker network create $NETWORK
 
-docker run -d -p 8888:8888 --network=$NETWORK --name serovizr seroanalytics/serovizr:main
+docker run -d -p 8888:8888 --network=$NETWORK --name serovizr seroanalytics/serovizr:$SEROVIZR_VERSION
 docker run -d -p 80:80 -p 443:443 --network=$NETWORK --name seroviz $DOCKER_COMMIT_TAG localhost
 docker exec seroviz self-signed-certificate /run/proxy

scripts/run-dependencies.sh

@@ -1,7 +1,10 @@
 #!/usr/bin/env bash
 set -ex
+HERE=$(dirname $0)
+. $HERE/common
 
-TAG=seroanalytics/serovizr:main
 
-docker pull $TAG
+TAG=seroanalytics/serovizr:$SEROVIZR_VERSION
+
+docker pull $TAG || true
 docker run -p 8888:8888 -d --rm --name serovizr $TAG

src/components/IndividualPlots.tsx

@@ -8,6 +8,7 @@ import {dataService} from "../services/dataService";
 import {ErrorDetail} from "../generated";
 import PlotError from "./PlotError";
 import {toFilename} from "../services/utils";
+import PageNav from "./PageNav";
 
 export function IndividualPlots() {
     const state = useContext(RootContext);
@@ -17,6 +18,9 @@ export function IndividualPlots() {
     const [warnings, setWarnings] = useState<string[]>([]);
     const [layout, setLayout] = useState<any>(null);
     const [plotError, setPlotError] = useState<ErrorDetail | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [page, setPage] = useState(1);
+    const [numPages, setNumPages] = useState(1);
 
     const scale = state.datasetSettings[state.selectedDataset].scale;
     const settings = state.datasetSettings[state.selectedDataset].individualSettings
@@ -26,62 +30,70 @@ export function IndividualPlots() {
             setPlotError(null);
             setData([]);
             setWarnings([]);
+            setLoading(true);
             const result = await dataService(state.language, dispatch)
-                .getIndividualData(state.selectedDataset, scale, settings);
+                .getIndividualData(state.selectedDataset, scale, settings, page);
 
             if (result && result.data) {
                 const data = result.data.data.filter(d => d.x instanceof Array && d.y instanceof Array);
                 const warnings = [result.data.warnings];
                 const omittedPanels = result.data.data.length - data.length;
-                if (omittedPanels > 0) {
+                if (omittedPanels === 1) {
+                    warnings.push("1 trace contained single data points and was omitted.")
+                }
+                if (omittedPanels > 1) {
                     warnings.push(omittedPanels + " traces contained single data points and were omitted.")
                 }
                 setData(data);
                 setLayout(result.data.layout);
                 setWarnings(warnings.flat().filter(w => w) as string[]);
+                setNumPages(result.data.numPages);
             }
             if (result && result.errors?.length) {
                 setPlotError(result.errors[0])
             }
+            setLoading(false);
         }
 
         if (settings.pid) {
             fetchData();
         }
 
-    }, [state.language, dispatch, state.selectedDataset, scale, settings], 100);
+    }, [state.language, dispatch, state.selectedDataset, scale, settings, page], 100);
 
     const title = settings.filter || "individual trajectories";
 
     return <Row>
         <SideBar/>
-        <Col sm={8}>
-            <Row className={"pt-3"}>
-                {warnings.length > 0 && <Alert className={"rounded-0 border-0 mb-1 ms-4"}
-                                      variant={"warning"}>
+        <Col sm={8} className={"mt-2"}>
+            {warnings.length > 0 &&
+                <Alert className={"rounded-0 border-0 mb-1 ms-4"}
+                       variant={"warning"}>
                     Plot generated some warnings:
                     <ul>{
                         warnings.map(w =>
                             <li key={w}>{w}</li>)}
                     </ul>
                 </Alert>}
-                {!!plotError && <PlotError title={title} error={plotError}/>}
-                {!!settings.pid && data.length > 0 && <Plot data={data}
-                                                            layout={{
-                                                                ...layout,
-                                                                autosize: true
-                                                            }}
-                                                            useResizeHandler={true}
-                                                            style={{
-                                                                minWidth: "400px",
-                                                                width: "100%",
-                                                                height: "800px"
-                                                            }}
-                                                            config={{toImageButtonOptions: {filename: toFilename(title)}}} />
-                }
-                {!settings.pid &&
-                    <p className={"mt-3"}>Please select an id column</p>}
-            </Row>
+            {loading && <h2>Loading</h2>}
+            {!!plotError && <PlotError title={title} error={plotError}/>}
+            {!!settings.pid && data.length > 0 && <Plot data={data}
+                                                        layout={{
+                                                            ...layout,
+                                                            autosize: true
+                                                        }}
+                                                        useResizeHandler={true}
+                                                        style={{
+                                                            minWidth: "400px",
+                                                            width: "100%",
+                                                            height: "800px"
+                                                        }}
+                                                        config={{toImageButtonOptions: {filename: toFilename(title)}}}/>
+            }
+            {!settings.pid &&
+                <p className={"mt-3"}>Please select an id column</p>}
+            {!!settings.pid && data.length > 0 && <PageNav currentPage={page} numPages={numPages}
+                     setPage={setPage}></PageNav>}
         </Col>
     </Row>
 }

src/components/PageNav.tsx

@@ -0,0 +1,24 @@
+import {Nav, Pagination} from "react-bootstrap";
+
+interface Props {
+    currentPage: number;
+    numPages: number;
+    setPage: (num: number) => void;
+}
+
+export default function PageNav({currentPage, numPages, setPage}: Props) {
+    let items = [];
+    for (let number = 1; number <= numPages; number++) {
+        items.push(
+            <Pagination.Item key={number} active={number === currentPage}
+                             onClick={() => setPage(number)}>
+                {number}
+            </Pagination.Item>,
+        );
+    }
+    return <Nav>
+            <Pagination size={"sm"} className={"justify-content-center"}>
+                {items}
+            </Pagination>
+        </Nav>
+}

src/generated.d.ts

@@ -41,6 +41,8 @@ export interface Plotly {
     [k: string]: unknown;
   };
   warnings: string | null | string[];
+  numPages: number;
+  page: number;
 }
 export interface ResponseFailure {
   status: "failure";

src/index.css

@@ -47,3 +47,12 @@ body {
     --bs-btn-disabled-bg: var(--bs-secondary-bg);
     --bs-btn-disabled-border-color: var(--bs-secondary-bg);
 }
+
+.pagination {
+    --bs-pagination-active-bg: var(--primary-color);
+    --bs-pagination-active-border-color: var(--primary-color-darken);
+    --bs-pagination-border-color: var(--primary-color-darken);
+    --bs-pagination-color: var(--primary-color);
+    --bs-pagination-focus-color: var(--primary-color);
+    --bs-pagination-hover-color: var(--primary-color);
+}

src/index.tsx

@@ -11,7 +11,7 @@ const root = ReactDOM.createRoot(
 
 const getApiUrl = () => {
     if (process.env.NODE_ENV === "development") {
-        return "http://localhost:8888";
+        return "http://localhost:8888/api";
     }
     return `https://${window.location.host}/api`;
 };

src/services/dataService.ts

@@ -82,10 +82,12 @@ export class DataService {
 
     async getIndividualData(selectedDataset: string,
                             scale: "log" | "natural" | "log2",
-                            individualSettings: IndividualSettings) {
+                            individualSettings: IndividualSettings,
+                            page: number) {
 
         let queryString = `?color=${encodeURIComponent(individualSettings.color)}&`
         queryString += `linetype=${encodeURIComponent(individualSettings.linetype)}&`
+        queryString += `page=${page}&`
         if (individualSettings.filter) {
             queryString += `filter=${encodeURIComponent(individualSettings.filter)}&`
         }

test/components/IndividualPlots.test.tsx

@@ -7,6 +7,7 @@ import {
 import {render, waitFor, screen} from "@testing-library/react";
 import {RootContext} from "../../src/RootContext";
 import {IndividualPlots} from "../../src/components/IndividualPlots";
+import {userEvent} from "@testing-library/user-event";
 
 describe("<IndividualPlots/>", () => {
 
@@ -204,5 +205,73 @@ describe("<IndividualPlots/>", () => {
         await waitFor(() => expect(mockAxios.history.get.length)
             .toBe(1));
 
+        const alert = screen.getByRole("alert");
+        expect(alert).toHaveClass("alert-warning");
+        expect(alert.textContent)
+            .toBe("Plot generated some warnings:1 trace contained single data points and was omitted.");
+    });
+
+    test("can select page", async () => {
+        mockAxios.onGet()
+            .reply(200, mockSuccess(mockPlotlyData({
+                data: [
+                    {
+                        x: [1, 2],
+                        y: [3, 4]
+                    }
+                ],
+                numPages: 3,
+                page: 1
+            })));
+
+        const state = mockAppState({
+            selectedPlot: "individual",
+            selectedDataset: "d1",
+            datasetSettings: {
+                "d1": mockDatasetSettings({
+                    individualSettings: mockIndividualSettings({
+                        pid: "pid"
+                    })
+                })
+            },
+            datasetMetadata: mockDatasetMetadata({
+                biomarkers: ["ab", "ba"]
+            })
+        });
+        render(<RootContext.Provider value={state}>
+            <IndividualPlots/>
+        </RootContext.Provider>);
+
+        await waitFor(() => expect(mockAxios.history.get.length)
+            .toBe(1));
+
+        let pagination = screen.getAllByRole("listitem");
+        expect(pagination.length).toBe(3);
+
+        expect(pagination[0]).toHaveClass("active");
+        expect(pagination[0].textContent).toBe("1(current)");
+        expect(pagination[1]).not.toHaveClass("active");
+        expect(pagination[1].textContent).toBe("2");
+        expect(pagination[2]).not.toHaveClass("active");
+        expect(pagination[2].textContent).toBe("3");
+
+        const paginationButtons = screen.getAllByRole("button") as HTMLButtonElement[];
+        expect(paginationButtons.length).toBe(2);
+
+        expect(paginationButtons[0].textContent).toBe("2");
+
+        await userEvent.click(paginationButtons[0]);
+
+        await waitFor(() => expect(mockAxios.history.get.length)
+            .toBe(2));
+
+        expect(mockAxios.history.get[1].url).toContain("page=2");
+        pagination = screen.getAllByRole("listitem");
+        expect(pagination[0]).not.toHaveClass("active");
+        expect(pagination[0].textContent).toBe("1");
+        expect(pagination[1]).toHaveClass("active");
+        expect(pagination[1].textContent).toBe("2(current)");
+        expect(pagination[2]).not.toHaveClass("active");
+        expect(pagination[2].textContent).toBe("3");
     });
 });

test/integration/dataService.itest.ts

@@ -121,7 +121,7 @@ describe("DataService", () => {
                 linetype: "biomarker",
                 pid: "day",
                 filter: "sex:M"
-            }) as GenericResponse<Plotly>;
+            }, 1) as GenericResponse<Plotly>;
 
         expect(res.data!!.data.length).toBe(4);
         expect(res.data!!.data.map(d => d.name)).toEqual([

test/mocks.ts

@@ -115,6 +115,8 @@ export function mockPlotlyData(data: Partial<Plotly> = {}): Plotly {
         data: [],
         layout: {},
         warnings: null,
+        page: 1,
+        numPages: 2,
         ...data
     }
 }

test/setupIntegrationTests.ts

@@ -1,2 +1,2 @@
-export const apiUrl = 'http://localhost:8888';
+export const apiUrl = 'http://localhost:8888/api';
 (global as any).apiUrl = apiUrl;