Merge pull request #8 from seroanalytics/session

handle expired sessions

src/RootContext.ts

@@ -7,7 +7,7 @@ export const initialState: AppState = {
     selectedDataset: "",
     datasetSettings: {},
     uploadError: null,
-    genericError: null,
+    genericErrors: [],
     language: "en"
 }
 

src/components/App.tsx

@@ -26,16 +26,18 @@ export default function App() {
 
     useEffect(() => {
         setInterval(() => {
-            dataService("en", () => {})
+            dataService("en", () => {
+            })
                 .refreshSession()
-        }, 60*1000);
+        }, 60 * 1000);
     }, []);
 
     return <RootContext.Provider value={state}>
         <RootDispatchContext.Provider value={dispatch}>
             <TopNav theme={theme as string}
                     setTheme={setTheme as (newState: string) => void}></TopNav>
-            <AppError/>
+            {state.genericErrors.map((e, index) => <AppError error={e}
+                                                              key={"error" + index}/>)}
             <Container fluid>
                 {!state.selectedDataset && <ChooseOrUploadDataset/>}
                 {state.selectedDataset && <ExploreDataset/>}

src/components/AppError.tsx

@@ -1,17 +1,21 @@
 import {Alert, Button} from "react-bootstrap";
 import React, {useContext} from "react";
-import {ActionType, RootContext, RootDispatchContext} from "../RootContext";
+import {ActionType, RootDispatchContext} from "../RootContext";
+import {ErrorDetail} from "../generated";
 
-export default function AppError() {
-    const state = useContext(RootContext);
+interface Props {
+    error: ErrorDetail
+}
+
+export default function AppError({error}: Props) {
     const dispatch = useContext(RootDispatchContext);
+    const message = error.detail ?? `API returned an error: ${error.error}`;
     const remove = () => {
-        dispatch({type: ActionType.ERROR_DISMISSED, payload: null});
+        dispatch({type: ActionType.ERROR_DISMISSED, payload: error});
     }
-    if (state.genericError) {
-        return <Alert variant={"danger"} className={"rounded-0 border-0"}>
-            <Button variant={"close"} role={"close"} onClick={remove} className={"mx-2 float-end"}></Button>
-            {state.genericError.detail ?? `API returned an error: ${state.genericError.error}`}
-        </Alert>
-    } else return null
+    return <Alert variant={"danger"} className={"rounded-0 border-0 mb-1"}>
+        <Button variant={"close"} role={"close"} onClick={remove}
+                className={"mx-2 float-end"}></Button>
+        {message} {error.error === "SESSION_EXPIRED" && <a href={"/"}>Re-upload your data to continue.</a>}
+    </Alert>
 }

src/components/ChooseOrUploadDataset.tsx

@@ -106,9 +106,8 @@ export function ChooseOrUploadDataset() {
                         <Form.Text muted>File must be in CSV format. Required
                             columns: biomarker, value, day. Files you upload are
                             only accessible to you and
-                            will persist for one hour or until you close your
-                            browser,
-                            whichever is longer.</Form.Text>
+                            will be deleted when you close your
+                            browser.</Form.Text>
                         <div className={"d-block mt-2"}>
                             <button className="btn btn-link p-0"
                                     onClick={toggleShowOptions}>Advanced options

src/components/LinePlot.tsx

@@ -53,6 +53,10 @@ export default function LinePlot({
             if (result && result.data) {
                 setSeries(result.data)
             }
+
+            else {
+                setSeries(null)
+            }
         }
         fetchData();
     }, [state.language, dispatch, state.selectedDataset, biomarker, facetDefinition, covariateSettings, scale]);
@@ -81,6 +85,8 @@ export default function LinePlot({
                 showlegend: false,
                 marker: {color: colors[index], opacity: 0.5}
             }]))
+    } else {
+        series = []
     }
 
     return <Plot

src/components/SideBar.tsx

@@ -28,7 +28,7 @@ export default function SideBar() {
 
     return <Col xs="3" className="pt-3 border-1 border-end border-secondary"
                 data-testid="sidebar">
-        <Form method="post">
+        <Form>
             <fieldset>
                 <ChooseDataset selectedDataset={state.selectedDataset}
                                selectDataset={selectDataset}/>

src/reducers/rootReducer.ts

@@ -6,9 +6,15 @@ export const rootReducer = (state: AppState, action: RootAction): AppState => {
     console.log(action.type);
     switch (action.type) {
         case ActionType.ERROR_ADDED:
-            return {...state, genericError: action.payload}
+            return {
+                ...state,
+                genericErrors: [...state.genericErrors, action.payload]
+            }
         case ActionType.ERROR_DISMISSED:
-            return {...state, genericError: null}
+            return {
+                ...state,
+                genericErrors: state.genericErrors.filter(e => e.detail !== action.payload.detail || e.error !== action.payload.error)
+            }
         case ActionType.UPLOAD_ERROR_ADDED:
             return {...state, uploadError: action.payload}
         case ActionType.UPLOAD_ERROR_DISMISSED:

src/services/apiService.ts

@@ -56,9 +56,9 @@ export class APIService implements API<ActionType> {
         return failure.errors[0];
     };
 
-    static createError(detail: string) {
+    static createError(detail: string| null, error: string = "MALFORMED_RESPONSE") {
         return {
-            error: "MALFORMED_RESPONSE",
+            error: error,
             detail: detail
         }
     }
@@ -106,11 +106,14 @@ export class APIService implements API<ActionType> {
 
     private _handleError = (e: AxiosError) => {
         console.log(e.response && (e.response.data || e));
-        if (this._ignoreErrors) {
-            return
+
+        if (!this._ignoreErrors) {
+            this._handleDispatchError(e.response && e.response.data)
         }
 
-        this._handleDispatchError(e.response && e.response.data)
+        if (e.response && e.response.status === 404) {
+            this._dispatchError(APIService.createError("Your session may have expired.", "SESSION_EXPIRED"));
+        }
     };
 
     private _dispatchError = (error: ErrorDetail) => {

src/types.ts

@@ -34,6 +34,6 @@ export interface AppState {
     selectedDataset: string
     datasetSettings: Dict<DatasetSettings>
     uploadError: ErrorDetail | null
-    genericError: ErrorDetail | null
+    genericErrors: ErrorDetail[]
     language: string
 }

test/components/App.test.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import {render, screen, waitFor} from "@testing-library/react";
+import {
+    mockAppState,
+    mockAxios,
+    mockDatasetMetadata,
+    mockError, mockFailure, mockSeriesData,
+    mockSuccess
+} from "../mocks";
+import {RootContext, RootDispatchContext} from "../../src/RootContext";
+import App from "../../src/components/App";
+import {userEvent} from "@testing-library/user-event";
+
+describe("<App />", () => {
+
+    beforeEach(() => {
+        mockAxios.reset();
+    });
+
+    test("should display any generic errors", async () => {
+        mockAxios.onGet("/datasets/")
+            .reply(404, mockFailure("bad"));
+
+        render(<App/>);
+        const errors = await screen.findAllByRole("alert");
+        expect(errors.length).toBe(2);
+    });
+
+    test("should fetch dataset metadata if dataset selected", async () => {
+        mockAxios.onGet("/datasets/")
+            .reply(200, mockSuccess(["d1"]));
+
+        mockAxios.onGet("/dataset/d1/")
+            .reply(200, mockSuccess(mockDatasetMetadata()));
+
+        mockAxios.onGet("/dataset/d1/trace/ab/?scale=natural")
+            .reply(200, mockSuccess(mockSeriesData()));
+
+        render(<App/>);
+
+        const go = await screen.findByText("Go");
+        await userEvent.click(go);
+
+        await screen.findByText("Detected biomarkers");
+    });
+});

test/components/AppError.test.tsx

@@ -1,57 +1,53 @@
 import React from "react";
 import {fireEvent, render, screen} from "@testing-library/react";
 import AppError from "../../src/components/AppError";
-import {mockAppState, mockError} from "../mocks";
-import {ActionType, RootContext, RootDispatchContext} from "../../src/RootContext";
+import {mockError} from "../mocks";
+import {ActionType, RootDispatchContext} from "../../src/RootContext";
 
 describe("<AppError />", () => {
 
-    test("should be null if no error present", () => {
-        const state = mockAppState();
-        const dispatch = jest.fn();
-        const {container} = render(<RootContext.Provider value={state}>
-            <RootDispatchContext.Provider
-                value={dispatch}><AppError/>
-            </RootDispatchContext.Provider>
-        </RootContext.Provider>);
-        expect(container.firstChild).toBe(null);
-    });
-
     test("should display error detail if present", () => {
-        const state = mockAppState({genericError: mockError("custom message")});
-        const dispatch = jest.fn();
-       render(<RootContext.Provider value={state}>
-            <RootDispatchContext.Provider value={dispatch}>
-                <AppError/>
-            </RootDispatchContext.Provider>
-        </RootContext.Provider>);
+       const error = mockError("custom message");
+       const dispatch = jest.fn();
+       render(<RootDispatchContext.Provider value={dispatch}>
+                <AppError error={error}/>
+       </RootDispatchContext.Provider>);
        const alert = screen.getByRole("alert");
-       expect(alert.lastChild?.textContent).toBe("custom message");
+       expect(alert.textContent).toBe("custom message ");
     });
 
     test("should display error type if no detail present", () => {
-        const state = mockAppState({genericError: mockError(null as any)});
+        const error = mockError(null as any);
+        const dispatch = jest.fn();
+        render(<RootDispatchContext.Provider value={dispatch}>
+            <AppError error={error}/>
+        </RootDispatchContext.Provider>);
+        const alert = screen.getByRole("alert");
+        expect(alert.textContent).toBe("API returned an error: OTHER_ERROR ");
+    });
+
+    test("should display home link if type is SESSION_EXPIRED", () => {
+        const error = mockError("Session expired.", "SESSION_EXPIRED");
         const dispatch = jest.fn();
-        render(<RootContext.Provider value={state}>
-            <RootDispatchContext.Provider
-                value={dispatch}><AppError/>
-            </RootDispatchContext.Provider>
-        </RootContext.Provider>);
+        render(<RootDispatchContext.Provider value={dispatch}>
+            <AppError error={error}/>
+        </RootDispatchContext.Provider>);
         const alert = screen.getByRole("alert");
-        expect(alert.lastChild?.textContent).toBe("API returned an error: OTHER_ERROR");
+        expect(alert.textContent).toBe("Session expired. Re-upload your data to continue.");
+        const link = screen.getByRole("link") as HTMLAnchorElement;
+        expect(link.href).toBe("http://localhost/");
     });
 
     test("should dispatch ERROR_DISMISSED action when closed", () => {
-        const state = mockAppState({genericError: mockError("custom message")});
+        const error = mockError("custom message");
         const dispatch = jest.fn();
-        render(<RootContext.Provider value={state}>
-            <RootDispatchContext.Provider
-                value={dispatch}><AppError/>
-            </RootDispatchContext.Provider>
-        </RootContext.Provider>);
+        render(<RootDispatchContext.Provider value={dispatch}>
+            <AppError error={error}/>
+        </RootDispatchContext.Provider>);
         const closeButton = screen.getByRole("close");
         fireEvent.click(closeButton);
         expect(dispatch.mock.calls.length).toBe(1);
         expect(dispatch.mock.calls[0][0].type).toBe(ActionType.ERROR_DISMISSED);
+        expect(dispatch.mock.calls[0][0].payload).toEqual(error);
     });
 });

test/components/LinePlot.test.tsx

@@ -1,7 +1,7 @@
 import {
     mockAppState,
     mockAxios, mockDatasetMetadata,
-    mockDatasetSettings,
+    mockDatasetSettings, mockFailure,
     mockSuccess
 } from "../mocks";
 import {render, waitFor} from "@testing-library/react";
@@ -183,4 +183,66 @@ describe("<LinePlot />", () => {
                     y: [3, 4]
                 }])
     });
+
+    test("clears plot data if request to API fails", async () => {
+        mockAxios.onGet("/dataset/d1/trace/ab/?scale=natural")
+            .reply(200, mockSuccess<DataSeries>([{
+                name: "all",
+                model: {
+                    x: [1.1, 2.2],
+                    y: [3.3, 4.4]
+                },
+                raw: {
+                    x: [1, 2],
+                    y: [3, 4]
+                }
+            }]));
+
+        mockAxios.onGet("/dataset/d1/trace/ab/?filter=sex%3AF&scale=natural")
+            .reply(404, mockFailure("bad"));
+
+        const dispatch = jest.fn();
+        const state = mockAppState({
+            selectedDataset: "d1",
+            datasetMetadata: mockDatasetMetadata(),
+            datasetSettings: {
+                "d1": mockDatasetSettings()
+            }
+        });
+        const {rerender} = render(<RootContext.Provider value={state}>
+                <RootDispatchContext.Provider value={dispatch}>
+                    <LinePlot biomarker={"ab"}
+                              facetLevels={[]}
+                              facetVariables={[]}/>
+                </RootDispatchContext.Provider>
+            </RootContext.Provider>);
+
+        await waitFor(() => expect(mockAxios.history.get.length)
+            .toBe(1));
+
+        await waitFor(() => expect((Plot as Mock))
+            .toBeCalledTimes(2));
+
+        let plot = Plot as Mock
+        expect(plot.mock.calls[1][0].data.length).toBeGreaterThan(0);
+
+        rerender(<RootContext.Provider value={state}>
+            <RootDispatchContext.Provider value={dispatch}>
+                <LinePlot biomarker={"ab"}
+                          facetLevels={["F"]}
+                          facetVariables={["sex"]}/>
+            </RootDispatchContext.Provider>
+        </RootContext.Provider>);
+
+        await waitFor(() => expect(mockAxios.history.get.length)
+            .toBe(2));
+
+        await waitFor(() => expect((Plot as Mock))
+            .toBeCalledTimes(4));
+
+        plot = Plot as Mock
+        expect(plot.mock.calls[2][0].data.length).toBe(2);
+        expect(plot.mock.calls[3][0].data.length).toBe(0);
+    });
+
 });

test/mocks.ts

@@ -20,7 +20,7 @@ export function mockAppState(state: Partial<AppState> = {}): AppState {
         selectedDataset: "",
         datasetSettings: {},
         uploadError: null,
-        genericError: null,
+        genericErrors: [],
         language: "en",
         ...state
     }
@@ -103,8 +103,8 @@ export const mockFailure = (errorMessage: string): ResponseFailure => {
     }
 };
 
-export const mockError = (errorMessage: string): ErrorDetail => {
-    return {error: "OTHER_ERROR", detail: errorMessage};
+export const mockError = (detail: string, error: string =  "OTHER_ERROR"): ErrorDetail => {
+    return {error: error, detail: detail};
 };
 
 export const mockAxios = new MockAdapter(axios);