feat(ui): add copy graph button to queue item detail view

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

@@ -1,4 +1,4 @@
-import { Box, Flex, IconButton, Tooltip } from '@invoke-ai/ui-library';
+import { Box, Flex, IconButton, Tooltip, useShiftModifier } from '@invoke-ai/ui-library';
 import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import { isString } from 'lodash-es';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
@@ -9,18 +9,19 @@ import { PiCopyBold, PiDownloadSimpleBold } from 'react-icons/pi';
 
 type Props = {
   label: string;
-  data: object | string;
+  data: unknown;
   fileName?: string;
   withDownload?: boolean;
   withCopy?: boolean;
+  extraCopyActions?: { label: string; getData: (data: unknown) => unknown }[];
 };
 
 const overlayscrollbarsOptions = getOverlayScrollbarsParams('scroll', 'scroll').options;
 
 const DataViewer = (props: Props) => {
-  const { label, data, fileName, withDownload = true, withCopy = true } = props;
+  const { label, data, fileName, withDownload = true, withCopy = true, extraCopyActions } = props;
   const dataString = useMemo(() => (isString(data) ? data : JSON.stringify(data, null, 2)), [data]);
-
+  const shift = useShiftModifier();
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(dataString);
   }, [dataString]);
@@ -67,6 +68,10 @@ const DataViewer = (props: Props) => {
             />
           </Tooltip>
         )}
+        {shift &&
+          extraCopyActions?.map(({ label, getData }) => (
+            <ExtraCopyAction label={label} getData={getData} data={data} key={label} />
+          ))}
       </Flex>
     </Flex>
   );
@@ -78,3 +83,27 @@ const overlayScrollbarsStyles: CSSProperties = {
   height: '100%',
   width: '100%',
 };
+
+type ExtraCopyActionProps = {
+  label: string;
+  data: unknown;
+  getData: (data: unknown) => unknown;
+};
+const ExtraCopyAction = ({ label, data, getData }: ExtraCopyActionProps) => {
+  const { t } = useTranslation();
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(JSON.stringify(getData(data), null, 2));
+  }, [data, getData]);
+
+  return (
+    <Tooltip label={`${t('gallery.copy')} ${label} JSON`}>
+      <IconButton
+        aria-label={`${t('gallery.copy')} ${label} JSON`}
+        icon={<PiCopyBold size={16} />}
+        variant="ghost"
+        opacity={0.7}
+        onClick={handleCopy}
+      />
+    </Tooltip>
+  );
+};

invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx

@@ -3,6 +3,7 @@ import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataView
 import { useCancelBatch } from 'features/queue/hooks/useCancelBatch';
 import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem';
 import { getSecondsFromTimestamps } from 'features/queue/util/getSecondsFromTimestamps';
+import { get } from 'lodash-es';
 import type { ReactNode } from 'react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -92,7 +93,15 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
         </Flex>
       )}
       <Flex layerStyle="second" h={512} w="full" borderRadius="base" alignItems="center" justifyContent="center">
-        {queueItem ? <DataViewer label="Queue Item" data={queueItem} /> : <Spinner opacity={0.5} />}
+        {queueItem ? (
+          <DataViewer
+            label="Queue Item"
+            data={queueItem}
+            extraCopyActions={[{ label: 'Graph', getData: (data) => get(data, 'session.graph') }]}
+          />
+        ) : (
+          <Spinner opacity={0.5} />
+        )}
       </Flex>
     </Flex>
   );