Merge remote-tracking branch 'origin/metadata-tags' into dev

src/content/series/Tags.tsx

@@ -1,52 +1,85 @@
-import { useMemo, useState } from "react"
-import { getInstancesOfSeries } from "../../services/orthanc"
-import { Input, Spinner } from "../../ui"
-import { useCustomQuery } from "../../utils"
-import { instanceHeader, instanceTags } from "../../services/instances"
+import { useMemo, useState } from "react";
+import { getInstancesOfSeries } from "../../services/orthanc";
+import { Input, Spinner } from "../../ui";
+import { useCustomQuery } from "../../utils";
+import { instanceHeader, instanceTags } from "../../services/instances";
 
 type TagsProps = {
-    seriesId: string
-}
+  seriesId: string;
+};
 const Tags = ({ seriesId }: TagsProps) => {
+  const { data: instances } = useCustomQuery(
+    ["series", seriesId, "instances"],
+    () => getInstancesOfSeries(seriesId)
+  );
+  const [instanceNumber, setInstanceNumber] = useState<number>(1);
 
-    const { data: instances } = useCustomQuery(['series', seriesId, 'instances'], () => getInstancesOfSeries(seriesId))
-    const [instanceNumber, setInstanceNumber] = useState<number>(0)
+  const currentInstanceId =
+    instanceNumber != null && instances != null
+      ? instances[instanceNumber - 1].id
+      : null;
 
-    const currentInstanceId = useMemo(()=>{
-        if(!instances ) return null
-        return instances[instanceNumber].id
+  const { data: header } = useCustomQuery(
+    ["instances", currentInstanceId, "metadata"],
+    () => instanceHeader(currentInstanceId),
+    {
+      enabled: currentInstanceId !== null,
+    }
+  );
 
+  const { data: tags } = useCustomQuery(
+    ["instances", currentInstanceId, "tags"],
+    () => instanceTags(currentInstanceId),
+    {
+      enabled: currentInstanceId !== null,
+    }
+  );
 
-    }, [instances, instanceNumber])
+  const metadata = useMemo(() => {
+    if (!header || !tags) return {};
+    return {
+      ...header,
+      ...tags,
+    };
+  }, [header, tags]);
 
+  const getComponent = (
+    tagName: string,
+    tag: string | Record<string, string>[]
+  ) => {
+    if (Array.isArray(tag)) {
+      return tag.map((tagItem) => {
+        return Object.entries(tagItem).map(([key, tag]) => {
+          return getComponent(key, tag);
+        });
+      });
+    } else {
+      return (
+        <span>
+          <strong>{tagName}:</strong> {tag}
+        </span>
+      );
+    }
+  };
 
-    const { data: header } = useCustomQuery(
-        ['instances', currentInstanceId, 'metadata'],
-        () => instanceHeader(currentInstanceId),
-        {
-            enabled: (currentInstanceId  != null)
-        }
-    )
+  if (!instances) return <Spinner />;
 
-    const { data: tags } = useCustomQuery(
-        ['instances', currentInstanceId, 'tags'],
-        () => instanceTags(currentInstanceId),
-        {
-            enabled: (currentInstanceId !== null)
-        }
-    )
+  return (
+    <>
+      <Input
+        label="Instance Number"
+        min={1}
+        max={instances.length}
+        value={instanceNumber ?? 1}
+        onChange={(event) => setInstanceNumber(Number(event.target?.value))}
+      />
+      <ul>
+        {Object.entries(metadata).map(([key, tag]) => (
+          <li key={key}>{getComponent(key, tag)}</li>
+        ))}
+      </ul>
+    </>
+  );
+};
 
-    if (!instances) return <Spinner />
-
-    return (
-        <>
-            <Input label="Instance Number" min={1} max={instances.length} value={instanceNumber} onChange={(event) => setInstanceNumber(Number(event.target?.value) - 1)} />
-            <pre>
-                {JSON.stringify(header, null, 2)}
-                {JSON.stringify(tags, null, 2)}
-            </pre>
-        </>
-    )
-}
-
-export default Tags
+export default Tags;

src/services/instances.ts

@@ -1,5 +1,5 @@
 import axios from "./axios";
-import { OrthancImportDicom } from "../utils/types";
+import { OrthancImportDicom, Tags } from "../utils/types";
 
 export const sendDicom = (payload: Uint8Array): Promise<OrthancImportDicom> => {
   return axios
@@ -71,24 +71,34 @@ export const previewFrame = (
     });
 };
 
-export const instanceTags = (instanceId: string): Promise<any> => {
+export const instanceTags = (
+  instanceId: string
+): Promise<Tags> => {
   return axios
-    .get("/api/instances/" + instanceId + "/tags")
+    .get("/api/instances/" + instanceId + "/tags?simplfy")
     .then((response) => {
       return response.data;
     })
     .catch((error) => {
-      console.error(error);
+      if (error.response) {
+        throw error.response;
+      }
+      throw error;
     });
 };
 
-export const instanceHeader = (instanceId: string): Promise<any> => {
+export const instanceHeader = (
+  instanceId: string
+): Promise<Tags> => {
   return axios
-    .get("/api/instances/" + instanceId + "/header")
+    .get("/api/instances/" + instanceId + "/header?simplfy")
     .then((response) => {
       return response.data;
     })
     .catch((error) => {
-      console.error(error);
+      if (error.response) {
+        throw error.response;
+      }
+      throw error;
     });
 };

src/utils/types.ts

@@ -139,7 +139,7 @@ export type ProcessingJob = {
   progress: number;
   state: string;
   id: string;
-  results: Record<string, any>
+  results: Record<string, any>;
 };
 
 export type Peer = {
@@ -372,12 +372,12 @@ export type AnonPatient = {
 }
 
 export type AnonStudy = {
-  newPatientName: string,
-  newPatientId: string,
-  newStudyDescription: string,
-  newAccessionNumber: string,
+  newPatientName: string;
+  newPatientId: string;
+  newStudyDescription: string;
+  newAccessionNumber: string;
   originalStudy: Study;
-}
+};
 
 export type StudyModifyPayload = {
   replace: Partial<StudyMainDicomTags & PatientMainDicomTags>;
@@ -425,4 +425,4 @@ export type AnonItem = {
 
 export type AnonymizePayload = {
   Anonymizes: AnonItem[]
-}
+}