feat: add all tif metadata tags

* feat: add all tif metadata tags

* feat: display parsed tag values at the first level

* feat: add try/catch block for xml parsing

* chore: update react-science

* fix: fix try/catch block

* chore: remove duplicated meta tags

package.json

@@ -77,7 +77,8 @@
     "react-plot": "^1.4.2",
     "react-roi": "^1.4.0",
     "react-science": "^3.1.0",
-    "react-use": "^17.4.0"
+    "react-use": "^17.4.0",
+    "tiff": "^6.1.0"
   },
   "volta": {
     "node": "18.16.0",

src/hooks/useImageInformations.tsx

@@ -1,5 +1,15 @@
 import { Image } from 'image-js';
 import { useMemo } from 'react';
+import { tagNames } from 'tiff';
+
+function getTagName(tagCode: string): string {
+  return (
+    tagNames.standard[tagCode] ||
+    tagNames.exif[tagCode] ||
+    tagNames.gps[tagCode] ||
+    tagCode
+  );
+}
 
 export default function useImageInformations(image: Image | null) {
   return useMemo(() => {
@@ -13,7 +23,33 @@ export default function useImageInformations(image: Image | null) {
       components: image.components,
       colorModel: image.colorModel,
     };
-    const meta = image.meta?.tiff.tags || {};
+
+    const fields = Object.fromEntries(image.meta?.tiff?.fields || []);
+    let meta: Record<string, unknown> = {};
+
+    for (const [tagCode, tagValue] of Object.entries(fields)) {
+      const tagName = getTagName(tagCode);
+      if (typeof tagValue === 'string' && tagValue.startsWith('<')) {
+        try {
+          const parser = new DOMParser();
+          const xmlDoc = parser.parseFromString(tagValue, 'text/xml');
+          const dataNodes = xmlDoc.querySelectorAll('Data');
+          for (const dataNode of dataNodes) {
+            const label = dataNode.querySelector('Label')?.textContent;
+            const value = dataNode.querySelector('Value')?.textContent;
+            if (label && value) {
+              const newTagName = tagName.concat('.').concat(label);
+              meta[newTagName] = value;
+            }
+          }
+        } catch {
+          meta[tagName] = tagValue;
+        }
+      } else {
+        meta[tagName] = tagValue;
+      }
+    }
+
     return { info, meta };
   }, [image]);
 }