pacs with sse

Author: chhsiao1981

src/api/lonk/LonkSubscriber.ts

@@ -145,21 +145,25 @@ class LonkSubscriber {
   }
 }
 
-function isSubscribed(msg: { [key: string]: any }): msg is LonkSubscription {
+export const isSubscribed = (msg: {
+  [key: string]: any;
+}): msg is LonkSubscription => {
   return "subscribed" in msg && msg.subscribed === true;
-}
+};
 
-function isDone(msg: { [key: string]: any }): msg is LonkDone {
+export const isDone = (msg: { [key: string]: any }): msg is LonkDone => {
   return "done" in msg && msg.done === true;
-}
+};
 
-function isProgress(msg: { [key: string]: any }): msg is LonkProgress {
+export const isProgress = (msg: {
+  [key: string]: any;
+}): msg is LonkProgress => {
   return "ndicom" in msg && Number.isInteger(msg.ndicom);
-}
+};
 
-function isError(msg: { [key: string]: any }): msg is LonkError {
+export const isError = (msg: { [key: string]: any }): msg is LonkError => {
   return "error" in msg;
-}
+};
 
 export default LonkSubscriber;
 export type { LonkHandlers };

src/components/Pacs/PacsApp.tsx

@@ -5,25 +5,28 @@
  */
 
 import { PageSection } from "@patternfly/react-core";
-import { App } from "antd";
-import type React from "react";
+import config from "config";
+import { access } from "fs";
 import { useEffect, useState } from "react";
 import {
+  genUUID,
   getRoot,
   getRootID,
+  getState,
   type ModuleToFunc,
+  StateType,
   useReducer,
 } from "react-reducer-utils";
-import { useLonk } from "../../api/lonk/index.ts";
+import { useLocation, useSearchParams } from "react-router-dom";
+import type { Lonk, LonkMessageData } from "../../api/lonk/types.ts";
 import type { PACSqueryCore } from "../../api/pfdcm/index.ts";
 import * as DoPacs from "../../reducers/pacs";
 import ErrorScreen from "./components/ErrorScreen.tsx";
 import PacsLoadingScreen from "./components/PacsLoadingScreen.tsx";
-import { getSeriesDescription } from "./components/utils.ts";
 import { DEFAULT_PREFERENCES } from "./defaultPreferences.ts";
 import styles from "./PacsApp.module.css";
 import PacsView from "./PacsView.tsx";
-import { type PacsState, SeriesPullState } from "./types.ts";
+import { type PacsState, QUERY_PROMPT, SearchMode } from "./types.ts";
 import { createFeedWithSeriesInstanceUID, errorCodeIsNot4xx } from "./utils.ts";
 
 type TDoPacs = ModuleToFunc<typeof DoPacs>;
@@ -76,22 +79,25 @@ export default () => {
   // ========================================
   // CLIENTS AND MISC
   // ========================================
-  const { message } = App.useApp();
-
-  const [statePacs, doPacs] = useReducer<DoPacs.State, TDoPacs>(DoPacs);
+  const [statePacs, doPacs] = useReducer<DoPacs.State, TDoPacs>(
+    DoPacs,
+    StateType.LOCAL,
+  );
+  const [searchParams, setSearchParams] = useSearchParams();
+  const location = useLocation();
+  const [pacsID, _] = useState(genUUID());
 
-  const pacsID = getRootID(statePacs);
-  const pacs = getRoot(statePacs) ?? DoPacs.defaultState;
+  const pacs = getState(statePacs, pacsID) ?? DoPacs.defaultState;
 
   const {
     expandedStudyUids,
     expandedSeries,
     studies,
     services,
+    service,
     isGetServices,
-    seriesMap,
     isLoadingStudies,
-    wsUrl,
+    isExpandedAllDone,
   } = pacs;
 
   // ========================================
@@ -101,92 +107,22 @@ export default () => {
   /**
    * Indicates a fatal error with the WebSocket.
    */
-  const [wsError, setWsError] = useState<React.ReactNode | null>(null);
+  const [wsError, setWsError] = useState("");
   // TODO create a settings component for changing preferences
   const [preferences, setPreferences] = useState(DEFAULT_PREFERENCES);
 
   // ========================================
   // COMBINED STATE OF EVERYTHING
   // ========================================
 
+  console.info("Pacs.App: pacs:", pacs);
+
   /**
    * Combined states of PFDCM, LONK, and CUBE into one object.
    */
   const state: PacsState = { preferences, studies };
 
   const error = wsError || pacs.errmsg;
-  // ========================================
-  // LONK WEBSOCKET
-  // ========================================
-  const lonk = useLonk({
-    url: wsUrl,
-    onDone: async (pacs_name: string, SeriesInstanceUID: string) => {
-      doPacs.updateReceiveState(pacsID, pacs_name, SeriesInstanceUID, {
-        pullState: SeriesPullState.WAITING_OR_COMPLETE,
-        done: true,
-      });
-      doPacs.queryCubeSeriesStateBySeriesUID(
-        pacsID,
-        pacs_name,
-        SeriesInstanceUID,
-      );
-
-      await createFeedWithSeriesInstanceUID(SeriesInstanceUID);
-
-      return;
-    },
-    onProgress: (
-      pacs_name: string,
-      SeriesInstanceUID: string,
-      ndicom: number,
-    ) => {
-      doPacs.updateReceiveState(
-        pacsID,
-        pacs_name,
-        SeriesInstanceUID,
-        { receivedCount: ndicom },
-        (theOrig: number, theNew: number) => theOrig < theNew,
-      );
-    },
-    onLonkError: (
-      pacs_name: string,
-      SeriesInstanceUID: string,
-      error: string,
-    ) => {
-      doPacs.pushReceiveStateError(pacsID, pacs_name, SeriesInstanceUID, error);
-
-      const desc = getSeriesDescription(
-        pacs_name,
-        SeriesInstanceUID,
-        seriesMap,
-      );
-      message.error(
-        <>There was an error while receiving the series "{desc}"</>,
-      );
-    },
-    onMessageError: (data: any, error: string) => {
-      message.error(
-        <>
-          A <em>LONK</em> error occurred, please check the console.
-        </>,
-      );
-    },
-    heartbeat: false,
-    retryOnError: true,
-    reconnectAttempts: 3,
-    reconnectInterval: 3000,
-    shouldReconnect: errorCodeIsNot4xx,
-    onReconnectStop: () => {
-      console.error("PacsApp.lonk: onReconnectStop");
-      setWsError(<>The WebSocket is disconnected.</>);
-    },
-    onWebsocketError: () => {
-      console.error("PacsApp.lonk: onWebsocketError");
-      message.error(
-        <>There was an error with the WebSocket. Reconnecting&hellip;</>,
-      );
-    },
-  });
 
   // ========================================
   // CALLBACKS
@@ -216,35 +152,110 @@ export default () => {
   // ========================================
 
   // init
-  // biome-ignore lint/correctness/useExhaustiveDependencies: doPacs.init
   useEffect(() => {
+    doPacs.init(pacsID);
+
+    const service = searchParams.get("service") || "";
+    const mrn = searchParams.get(SearchMode.MRN) || "";
+    const accessionNumber = searchParams.get(SearchMode.AccessNo) || "";
+
+    if (service) {
+      doPacs.setService(pacsID, service);
+    }
+
+    if (mrn) {
+      doPacs.setQuery(pacsID, QUERY_PROMPT[SearchMode.MRN], mrn);
+    } else if (accessionNumber) {
+      doPacs.setQuery(
+        pacsID,
+        QUERY_PROMPT[SearchMode.AccessNo],
+        accessionNumber,
+      );
+    }
+  }, [pacsID, doPacs.init, doPacs.setService, doPacs.setQuery, searchParams]);
+
+  useEffect(() => {
+    if (!pacsID) {
+      return;
+    }
+
+    if (!location.pathname.startsWith("/pacs")) {
+      return;
+    }
+
     // set document title.
     const originalTitle = document.title;
     document.title = "ChRIS PACS";
 
     // doPacs
-    doPacs.init();
+    const service = searchParams.get("service") || "";
+    const mrn = searchParams.get(SearchMode.MRN) || "";
+    const accessionNumber = searchParams.get(SearchMode.AccessNo) || "";
+
+    if (service) {
+      doPacs.setService(pacsID, service);
+    }
+
+    if (mrn) {
+      doPacs.setQuery(pacsID, QUERY_PROMPT[SearchMode.MRN], mrn);
+    } else if (accessionNumber) {
+      doPacs.setQuery(
+        pacsID,
+        QUERY_PROMPT[SearchMode.AccessNo],
+        accessionNumber,
+      );
+    }
 
     return () => {
       document.title = originalTitle;
     };
-  }, []);
+  }, [
+    pacsID,
+    location.pathname,
+    searchParams,
+    doPacs.setService,
+    doPacs.setQuery,
+  ]);
 
   // Subscribe to all expanded series
   // biome-ignore lint/correctness/useExhaustiveDependencies: updateReceiveState
   useEffect(() => {
-    for (const { pacs_name, SeriesInstanceUID } of expandedSeries) {
-      lonk
-        .subscribe(pacs_name, SeriesInstanceUID)
-        .then(({ pacs_name, SeriesInstanceUID }) => {
-          doPacs.updateReceiveState(pacsID, pacs_name, SeriesInstanceUID, {
-            subscribed: true,
-          });
-        });
+    if (wsError) {
+      return;
+    }
+
+    if (isExpandedAllDone) {
+      return;
+    }
+
+    if (!expandedSeries.length) {
+      return;
     }
+
+    const series_uids = expandedSeries
+      .map((each) => each.SeriesInstanceUID)
+      .join(",");
+
+    const url = `${config.API_ROOT}/pacs/sse/?pacs_name=${service}&series_uids=${series_uids}`;
+    const eventSource = new EventSource(url);
+
+    eventSource.onmessage = (event) => {
+      const data: Lonk<LonkMessageData> = JSON.parse(event.data);
+      doPacs.processLonkMsg(pacsID, data);
+    };
+
+    eventSource.onerror = (err) => {
+      console.error("PacsApp.eventSource.onerror: err:", err);
+      setWsError(`event error: ${err}`);
+    };
+
+    return () => {
+      console.info("PacsApp.eventSource: to return");
+      eventSource.close();
+    };
     // Note: we are subscribing to series, but never unsubscribing.
     // This is mostly harmless.
-  }, [expandedSeries]);
+  }, [expandedSeries, wsError, isExpandedAllDone]);
 
   // ========================================
   // RENDER

src/components/Pacs/PacsView.tsx

@@ -1,6 +1,6 @@
 import { Empty, Flex, Spin, Typography } from "antd";
 import type { CSSProperties } from "react";
-import type { DispatchFuncMap } from "react-reducer-utils";
+import type { DispatchFuncMap, ModuleToFunc } from "react-reducer-utils";
 import type { PACSqueryCore } from "../../api/pfdcm";
 import type * as DoPacs from "../../reducers/pacs";
 import PacsInput, {
@@ -11,6 +11,8 @@ import PacsStudiesView, {
 } from "./components/PacsStudiesView.tsx";
 import type { PacsState } from "./types.ts";
 
+type TDoPacs = ModuleToFunc<typeof DoPacs>;
+
 type Props = Pick<PacsInputProps, "services" | "onSubmit"> &
   Pick<PacsStudiesViewProps, "expandedStudyUids"> & {
     onRetrieve: (service: string, query: PACSqueryCore) => void;
@@ -23,7 +25,7 @@ type Props = Pick<PacsInputProps, "services" | "onSubmit"> &
 
     pacsID: string;
     pacs: DoPacs.State;
-    doPacs: DispatchFuncMap;
+    doPacs: DispatchFuncMap<DoPacs.State, TDoPacs>;
   };
 
 /**
@@ -48,6 +50,7 @@ export default (props: Props) => {
   } = props;
 
   const service = pacs.service;
+
   const setService = (service: string) => {
     doPacs.setService(pacsID, service);
   };

src/components/Pacs/components/PacsInput.tsx

@@ -3,20 +3,14 @@ import { Col, Row, Segmented } from "antd";
 import type { ReadonlyNonEmptyArray } from "fp-ts/ReadonlyNonEmptyArray";
 import { useEffect, useState } from "react";
 import { useLocation, useSearchParams } from "react-router-dom";
-import type { PACSqueryCore } from "../../../api/pfdcm";
 import OperationButton from "../../NewLibrary/components/operations/OperationButton";
-import type { PacsStudyState } from "../types";
+import { type PacsStudyState, QUERY_PROMPT, SearchMode } from "../types";
 import PacsInputText from "./PacsInputText";
 import ScreenSizeSpan from "./ScreenSizeSpan";
 import ServiceDropdown from "./ServiceDropdown";
 
 import { downloadStudiesToCSV } from "./utils";
 
-enum SearchMode {
-  MRN = "mrn",
-  AccessNo = "accno",
-}
-
 export type Props = {
   services: ReadonlyNonEmptyArray<string>;
   service: string;
@@ -92,8 +86,7 @@ export default (props: Props) => {
       return;
     }
 
-    const prompt =
-      searchMode === SearchMode.MRN ? "PatientID" : "AccessionNumber";
+    const prompt = QUERY_PROMPT[searchMode];
 
     console.info(
       "PacsInput: to onSubmit: service:",