From b43b2714cc0a48989538ab732da52d391d5d629a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 18:11:20 +1000
Subject: [PATCH] feat(ui): add `fracturedjsonjs` to pretty-serialize objects

In use on the metadata viewer - makes it sooo much easier on the eyes.
---
 invokeai/frontend/web/package.json                         | 1 +
 invokeai/frontend/web/pnpm-lock.yaml                       | 7 +++++++
 .../gallery/components/ImageMetadataViewer/DataViewer.tsx  | 5 ++++-
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json
index 78e8ca44ca..8f6f2c6038 100644
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@@ -65,6 +65,7 @@
     "chakra-react-select": "^4.7.6",
     "compare-versions": "^6.1.0",
     "dateformat": "^5.0.3",
+    "fracturedjsonjs": "^4.0.1",
     "framer-motion": "^11.1.8",
     "i18next": "^23.11.3",
     "i18next-http-backend": "^2.5.1",
diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml
index 2703477200..b5de9e6426 100644
--- a/invokeai/frontend/web/pnpm-lock.yaml
+++ b/invokeai/frontend/web/pnpm-lock.yaml
@@ -50,6 +50,9 @@ dependencies:
   dateformat:
     specifier: ^5.0.3
     version: 5.0.3
+  fracturedjsonjs:
+    specifier: ^4.0.1
+    version: 4.0.1
   framer-motion:
     specifier: ^11.1.8
     version: 11.1.8(react-dom@18.3.1)(react@18.3.1)
@@ -8691,6 +8694,10 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /fracturedjsonjs@4.0.1:
+    resolution: {integrity: sha512-KMhSx7o45aPVj4w27dwdQyKJkNU8oBqw8UiK/s3VzsQB3+pKQ/3AqG/YOEQblV2BDuYE5dKp0OMf8RDsshrjTA==}
+    dev: false
+
   /framer-motion@10.18.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==}
     peerDependencies:
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
index a6d0481b89..2cbf93b899 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
@@ -1,5 +1,6 @@
 import { Box, Flex, IconButton, Tooltip, useShiftModifier } from '@invoke-ai/ui-library';
 import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
+import { Formatter } from 'fracturedjsonjs';
 import { isString } from 'lodash-es';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties } from 'react';
@@ -7,6 +8,8 @@ import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiCopyBold, PiDownloadSimpleBold } from 'react-icons/pi';
 
+const formatter = new Formatter();
+
 type Props = {
   label: string;
   data: unknown;
@@ -20,7 +23,7 @@ const overlayscrollbarsOptions = getOverlayScrollbarsParams('scroll', 'scroll').
 
 const DataViewer = (props: Props) => {
   const { label, data, fileName, withDownload = true, withCopy = true, extraCopyActions } = props;
-  const dataString = useMemo(() => (isString(data) ? data : JSON.stringify(data, null, 2)), [data]);
+  const dataString = useMemo(() => (isString(data) ? data : formatter.Serialize(data)) ?? '', [data]);
   const shift = useShiftModifier();
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(dataString);