feat: node editor

squashed rebase on main after backendd refactor

invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataJSON.tsx

@@ -1,26 +1,40 @@
 import { Box, Flex, IconButton, Tooltip } from '@chakra-ui/react';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
-import { useMemo } from 'react';
-import { FaCopy } from 'react-icons/fa';
+import { useCallback, useMemo } from 'react';
+import { FaCopy, FaSave } from 'react-icons/fa';
 
 type Props = {
-  copyTooltip: string;
+  label: string;
   jsonObject: object;
+  fileName?: string;
 };
 
 const ImageMetadataJSON = (props: Props) => {
-  const { copyTooltip, jsonObject } = props;
+  const { label, jsonObject, fileName } = props;
   const jsonString = useMemo(
     () => JSON.stringify(jsonObject, null, 2),
     [jsonObject]
   );
 
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(jsonString);
+  }, [jsonString]);
+
+  const handleSave = useCallback(() => {
+    const blob = new Blob([jsonString]);
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = `${fileName || label}.json`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+  }, [jsonString, label, fileName]);
+
   return (
     <Flex
+      layerStyle="second"
       sx={{
         borderRadius: 'base',
-        bg: 'whiteAlpha.500',
-        _dark: { bg: 'blackAlpha.500' },
         flexGrow: 1,
         w: 'full',
         h: 'full',
@@ -36,6 +50,7 @@ const ImageMetadataJSON = (props: Props) => {
           bottom: 0,
           overflow: 'auto',
           p: 4,
+          fontSize: 'sm',
         }}
       >
         <OverlayScrollbarsComponent
@@ -44,7 +59,7 @@ const ImageMetadataJSON = (props: Props) => {
           options={{
             scrollbars: {
               visibility: 'auto',
-              autoHide: 'move',
+              autoHide: 'scroll',
               autoHideDelay: 1300,
               theme: 'os-theme-dark',
             },
@@ -54,12 +69,22 @@ const ImageMetadataJSON = (props: Props) => {
         </OverlayScrollbarsComponent>
       </Box>
       <Flex sx={{ position: 'absolute', top: 0, insetInlineEnd: 0, p: 2 }}>
-        <Tooltip label={copyTooltip}>
+        <Tooltip label={`Save ${label} JSON`}>
           <IconButton
-            aria-label={copyTooltip}
+            aria-label={`Save ${label} JSON`}
+            icon={<FaSave />}
+            variant="ghost"
+            opacity={0.7}
+            onClick={handleSave}
+          />
+        </Tooltip>
+        <Tooltip label={`Copy ${label} JSON`}>
+          <IconButton
+            aria-label={`Copy ${label} JSON`}
             icon={<FaCopy />}
             variant="ghost"
-            onClick={() => navigator.clipboard.writeText(jsonString)}
+            opacity={0.7}
+            onClick={handleCopy}
           />
         </Tooltip>
       </Flex>

invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx

@@ -10,7 +10,8 @@ import {
   Text,
 } from '@chakra-ui/react';
 import { skipToken } from '@reduxjs/toolkit/dist/query';
-import { memo, useMemo } from 'react';
+import { IAINoContentFallback } from 'common/components/IAIImageFallback';
+import { memo } from 'react';
 import { useGetImageMetadataQuery } from 'services/api/endpoints/images';
 import { ImageDTO } from 'services/api/types';
 import { useDebounce } from 'use-debounce';
@@ -41,48 +42,15 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => {
   const metadata = currentData?.metadata;
   const graph = currentData?.graph;
 
-  const tabData = useMemo(() => {
-    const _tabData: { label: string; data: object; copyTooltip: string }[] = [];
-
-    if (metadata) {
-      _tabData.push({
-        label: 'Core Metadata',
-        data: metadata,
-        copyTooltip: 'Copy Core Metadata JSON',
-      });
-    }
-
-    if (image) {
-      _tabData.push({
-        label: 'Image Details',
-        data: image,
-        copyTooltip: 'Copy Image Details JSON',
-      });
-    }
-
-    if (graph) {
-      _tabData.push({
-        label: 'Graph',
-        data: graph,
-        copyTooltip: 'Copy Graph JSON',
-      });
-    }
-    return _tabData;
-  }, [metadata, graph, image]);
-
   return (
     <Flex
+      layerStyle="first"
       sx={{
         padding: 4,
         gap: 1,
         flexDirection: 'column',
         width: 'full',
         height: 'full',
-        backdropFilter: 'blur(20px)',
-        bg: 'baseAlpha.200',
-        _dark: {
-          bg: 'blackAlpha.600',
-        },
         borderRadius: 'base',
         position: 'absolute',
         overflow: 'hidden',
@@ -103,32 +71,33 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => {
         sx={{ display: 'flex', flexDir: 'column', w: 'full', h: 'full' }}
       >
         <TabList>
-          {tabData.map((tab) => (
-            <Tab
-              key={tab.label}
-              sx={{
-                borderTopRadius: 'base',
-              }}
-            >
-              <Text sx={{ color: 'base.700', _dark: { color: 'base.300' } }}>
-                {tab.label}
-              </Text>
-            </Tab>
-          ))}
+          <Tab>Core Metadata</Tab>
+          <Tab>Image Details</Tab>
+          <Tab>Graph</Tab>
         </TabList>
 
-        <TabPanels sx={{ w: 'full', h: 'full' }}>
-          {tabData.map((tab) => (
-            <TabPanel
-              key={tab.label}
-              sx={{ w: 'full', h: 'full', p: 0, pt: 4 }}
-            >
-              <ImageMetadataJSON
-                jsonObject={tab.data}
-                copyTooltip={tab.copyTooltip}
-              />
-            </TabPanel>
-          ))}
+        <TabPanels>
+          <TabPanel>
+            {metadata ? (
+              <ImageMetadataJSON jsonObject={metadata} label="Core Metadata" />
+            ) : (
+              <IAINoContentFallback label="No core metadata found" />
+            )}
+          </TabPanel>
+          <TabPanel>
+            {image ? (
+              <ImageMetadataJSON jsonObject={image} label="Image Details" />
+            ) : (
+              <IAINoContentFallback label="No image details found" />
+            )}
+          </TabPanel>
+          <TabPanel>
+            {graph ? (
+              <ImageMetadataJSON jsonObject={graph} label="Graph" />
+            ) : (
+              <IAINoContentFallback label="No graph found" />
+            )}
+          </TabPanel>
         </TabPanels>
       </Tabs>
     </Flex>