Providing fileName string directly to DataViewer as suggested

Author: jstnlowe

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

@@ -32,9 +32,8 @@ const DataViewer = (props: Props) => {
   const handleDownload = useCallback(() => {
     const blob = new Blob([dataString]);
     const a = document.createElement('a');
-    const imageName = fileName ? fileName.replace('.png', '') : null;
     a.href = URL.createObjectURL(blob);
-    a.download = imageName ? `${ imageName }_${ label }.json` : `${ label }.json`;
+    a.download = `${ fileName || label }.json`;
     document.body.appendChild(a);
     a.click();
     a.remove();

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

@@ -28,7 +28,7 @@ const ImageMetadataGraphTabContent = ({ image }: Props) => {
     return <IAINoContentFallback label={t('nodes.noGraph')} />;
   }
 
-  return <DataViewer fileName={image.image_name} data={graph} label={t('nodes.graph')} />;
+  return <DataViewer fileName={`${image.image_name.replace('.png','')}_${t('nodes.graph')}`} data={graph} label={t('nodes.graph')} />;
 };
 
 export default memo(ImageMetadataGraphTabContent);

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

@@ -68,14 +68,14 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => {
           </TabPanel>
           <TabPanel>
             {metadata ? (
-              <DataViewer fileName={image.image_name} data={metadata} label={t('metadata.metadata')} />
+              <DataViewer fileName={`${image.image_name.replace('.png','')}_${t('metadata.metadata')}`} data={metadata} label={t('metadata.metadata')} />
             ) : (
               <IAINoContentFallback label={t('metadata.noMetaData')} />
             )}
           </TabPanel>
           <TabPanel>
             {image ? (
-              <DataViewer fileName={image.image_name} data={image} label={t('metadata.imageDetails')} />
+              <DataViewer fileName={`${image.image_name.replace('.png','')}_${t('metadata.imageDetails')}`} data={image} label={t('metadata.imageDetails')} />
             ) : (
               <IAINoContentFallback label={t('metadata.noImageDetails')} />
             )}

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

@@ -28,7 +28,7 @@ const ImageMetadataWorkflowTabContent = ({ image }: Props) => {
     return <IAINoContentFallback label={t('nodes.noWorkflow')} />;
   }
 
-  return <DataViewer fileName={image.image_name} data={workflow} label={t('metadata.workflow')} />;
+  return <DataViewer fileName={`${image.image_name.replace('.png','')}_${t('metadata.workflow')}`} data={workflow} label={t('metadata.workflow')} />;
 };
 
 export default memo(ImageMetadataWorkflowTabContent);