From 40a568c06094c4b9856db2737c0afea54314771f Mon Sep 17 00:00:00 2001
From: glibesyck <71762371+glibesyck@users.noreply.github.com>
Date: Sat, 14 Oct 2023 13:25:07 +0300
Subject: [PATCH] Hide Metadata in Info View (#4787)

* #4665 hides value of the corresponding metadata item by click on arrow

* #4787 return recall button back:)

* #4787 optional hide of metadata item, truncation and scrolling

* remove unused import

* #4787 recall parameters as separate tab in panel

* #4787 remove debug code

* fix(ui): undo changes to dist/locales/en.json

This file is autogenerated by our translation system and shouldn't be modified directly

* feat(ui): use scrollbar-enabled component for parameter recall tab

* fix(ui): revert unnecessary changes to DataViewer component

---------

Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
---
 invokeai/frontend/web/public/locales/en.json  |  2 ++
 .../ImageMetadataViewer.tsx                   | 20 ++++++++++++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index e0baefcf9e..dd96193d5d 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -559,8 +559,10 @@
         "negativePrompt": "Negative Prompt",
         "noImageDetails": "No image details found",
         "noMetaData": "No metadata found",
+        "noRecallParameters": "No parameters to recall found",
         "perlin": "Perlin Noise",
         "positivePrompt": "Positive Prompt",
+        "recallParameters": "Recall Parameters",
         "scheduler": "Scheduler",
         "seamless": "Seamless",
         "seed": "Seed",
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
index 8c7e69b2b1..e9cb3ffcaf 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
@@ -18,6 +18,7 @@ import ImageMetadataActions from './ImageMetadataActions';
 import { useAppSelector } from '../../../../app/store/storeHooks';
 import { configSelector } from '../../../system/store/configSelectors';
 import { useTranslation } from 'react-i18next';
+import ScrollableContent from 'features/nodes/components/sidePanel/ScrollableContent';
 
 type ImageMetadataViewerProps = {
   image: ImageDTO;
@@ -65,19 +66,32 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => {
         </Link>
       </Flex>
 
-      <ImageMetadataActions metadata={metadata} />
-
       <Tabs
         variant="line"
-        sx={{ display: 'flex', flexDir: 'column', w: 'full', h: 'full' }}
+        sx={{
+          display: 'flex',
+          flexDir: 'column',
+          w: 'full',
+          h: 'full',
+        }}
       >
         <TabList>
+          <Tab>{t('metadata.recallParameters')}</Tab>
           <Tab>{t('metadata.metadata')}</Tab>
           <Tab>{t('metadata.imageDetails')}</Tab>
           <Tab>{t('metadata.workflow')}</Tab>
         </TabList>
 
         <TabPanels>
+          <TabPanel>
+            {metadata ? (
+              <ScrollableContent>
+                <ImageMetadataActions metadata={metadata} />
+              </ScrollableContent>
+            ) : (
+              <IAINoContentFallback label={t('metadata.noRecallParameters')} />
+            )}
+          </TabPanel>
           <TabPanel>
             {metadata ? (
               <DataViewer data={metadata} label={t('metadata.metadata')} />