From ccc96791c3b74d74ed480b49b8afe8728189472b Mon Sep 17 00:00:00 2001
From: Salim Kanoun <salim.kanoun@gmail.com>
Date: Mon, 25 Nov 2024 10:05:54 +0000
Subject: [PATCH] set metadata tree

---
 src/content/series/Tags.tsx | 50 ++++++++++++++++++++++---------------
 src/services/instances.ts   |  6 ++---
 src/utils/types.ts          |  7 +++++-
 3 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/src/content/series/Tags.tsx b/src/content/series/Tags.tsx
index b6e9001..92a5855 100644
--- a/src/content/series/Tags.tsx
+++ b/src/content/series/Tags.tsx
@@ -3,10 +3,12 @@ import { getInstancesOfSeries } from "../../services/orthanc";
 import { Input, Spinner } from "../../ui";
 import { useCustomQuery } from "../../utils";
 import { instanceHeader, instanceTags } from "../../services/instances";
-
+import { Metadata, Tag } from "../../utils/types";
+import { Meta } from "@storybook/react";
 type TagsProps = {
   seriesId: string;
 };
+
 const Tags = ({ seriesId }: TagsProps) => {
   const { data: instances } = useCustomQuery(
     ["series", seriesId, "instances"],
@@ -19,7 +21,7 @@ const Tags = ({ seriesId }: TagsProps) => {
       ? instances[instanceNumber - 1].id
       : null;
 
-  const { data: header } = useCustomQuery(
+  const { data: header } = useCustomQuery<Metadata>(
     ["instances", currentInstanceId, "metadata"],
     () => instanceHeader(currentInstanceId),
     {
@@ -27,7 +29,7 @@ const Tags = ({ seriesId }: TagsProps) => {
     }
   );
 
-  const { data: tags } = useCustomQuery(
+  const { data: tags } = useCustomQuery<Metadata>(
     ["instances", currentInstanceId, "tags"],
     () => instanceTags(currentInstanceId),
     {
@@ -43,27 +45,33 @@ const Tags = ({ seriesId }: TagsProps) => {
     };
   }, [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);
-        });
+  const getComponent = (tagAddress: string, tag: Tag) => {
+    if (Array.isArray(tag.Value)) {
+      return tag.Value.map((metadata) => {
+        return (
+          <li>
+            {tag.Name}
+            <ul className="list-disc">
+              {Object.entries(metadata).map(([adressTag, tag]) =>
+                getComponent(adressTag, tag)
+              )}
+            </ul>
+          </li>
+        );
       });
     } else {
       return (
-        <span>
-          <strong>{tagName}:</strong> {tag}
-        </span>
+        <li className="ml-4 px-2" key={tag.Name}>
+          {tag.Name} - {tag.Value}
+        </li>
       );
     }
   };
 
   if (!instances) return <Spinner />;
 
+  console.log(metadata);
+
   return (
     <>
       <Input
@@ -73,11 +81,13 @@ const Tags = ({ seriesId }: TagsProps) => {
         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>
+      <div>
+        <ul className="list-disc">
+          {Object.entries(metadata).map(([tagAdress, tag]) =>
+            getComponent(tagAdress, tag)
+          )}
+        </ul>
+      </div>
     </>
   );
 };
diff --git a/src/services/instances.ts b/src/services/instances.ts
index 6773f00..dc70ca8 100644
--- a/src/services/instances.ts
+++ b/src/services/instances.ts
@@ -1,5 +1,5 @@
 import axios from "./axios";
-import { OrthancImportDicom, Tags } from "../utils/types";
+import { Metadata, OrthancImportDicom, Tags } from "../utils/types";
 
 export const sendDicom = (payload: Uint8Array): Promise<OrthancImportDicom> => {
   return axios
@@ -73,7 +73,7 @@ export const previewFrame = (
 
 export const instanceTags = (
   instanceId: string
-): Promise<Tags> => {
+): Promise<Metadata> => {
   return axios
     .get("/api/instances/" + instanceId + "/tags?simplfy")
     .then((response) => {
@@ -89,7 +89,7 @@ export const instanceTags = (
 
 export const instanceHeader = (
   instanceId: string
-): Promise<Tags> => {
+): Promise<Metadata> => {
   return axios
     .get("/api/instances/" + instanceId + "/header?simplfy")
     .then((response) => {
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 90d79f2..2b5028d 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -399,4 +399,9 @@ export type Queue = {
   userId: number;
 };
 
-export type Tags = Record<string, string | Record<string, string>[]>;
+export type Tag = {
+  Name : string,
+  Type : string,
+  Value : string | Metadata[]
+}
+export type Metadata = Record<string, Tag>;