Fixes for UI

src/lib/components/ComfyQueue.svelte

@@ -65,9 +65,11 @@
          dateStr = formatDate(date);
      }
 
+     const subgraphs: string[] | null = entry.extraData?.extra_pnginfo?.comfyBoxSubgraphs;
+
      let message = "Prompt";
-     if (entry.extraData.subgraphs)
-         message = `Prompt: ${entry.extraData.subgraphs.join(', ')}`
+     if (subgraphs?.length > 0)
+         message = `Prompt: ${subgraphs.join(', ')}`
 
      let submessage = `Nodes: ${Object.keys(entry.prompt).length}`
      if (Object.keys(entry.outputs).length > 0) {
@@ -156,12 +158,14 @@
  }
 
  let showModal = false;
+ let expandAll = false;
  let selectedPrompt = null;
  let selectedImages = [];
  function showPrompt(entry: QueueUIEntry, e: MouseEvent) {
      selectedPrompt = entry.entry.prompt;
      selectedImages = entry.images;
      showModal = true;
+     expandAll = false
  }
 
  $: if(!showModal)
@@ -180,8 +184,16 @@
         <h1 style="padding-bottom: 1rem;">Prompt Details</h1>
     </div>
     {#if selectedPrompt}
-        <PromptDisplay prompt={selectedPrompt} images={selectedImages} />
+        <PromptDisplay prompt={selectedPrompt} images={selectedImages} {expandAll} />
     {/if}
+    <div slot="buttons" let:closeDialog>
+        <Button variant="secondary" on:click={closeDialog}>
+            Close
+        </Button>
+        <Button variant="secondary" on:click={() => (expandAll = !expandAll)}>
+            Expand All
+        </Button>
+    </div>
 </Modal>
 
 <div class="queue">

src/lib/components/Modal.svelte

@@ -25,6 +25,7 @@
  }
 
  function doClose() {
+     showModal = false;
      dialog.close();
      dispatch("close")
  }
@@ -41,7 +42,7 @@
         <slot name="header" />
         <slot />
         <div class="button-row">
-            <slot name="buttons">
+            <slot name="buttons" {closeDialog}>
                 <!-- svelte-ignore a11y-autofocus -->
                 <Button variant="secondary" on:click={doClose}>Close</Button>
             </slot>

src/lib/components/PromptDisplay.svelte

@@ -6,16 +6,20 @@
  import { JSON as JSONIcon, Copy, Check } from "@gradio/icons";
  import Accordion from "$lib/components/gradio/app/Accordion.svelte";
  import Gallery from "$lib/components/gradio/gallery/Gallery.svelte";
-	import type { Styles } from "@gradio/utils";
+ import { ImageViewer } from "$lib/ImageViewer";
+ import type { Styles } from "@gradio/utils";
 
  const splitLength = 50;
 
  export let prompt: SerializedPromptInputsAll;
  export let images: string[] = [];
+ export let isMobile: boolean = false;
+ export let expandAll: boolean = false;
 
  let galleryStyle: Styles = {
      grid_cols: [2],
      object_fit: "cover",
+     height: "var(--size-96)"
  }
 
  function isInputLink(input: SerializedPromptInput): boolean {
@@ -59,6 +63,11 @@
          copyFeedback(nodeID, inputName);
      }
  }
+
+ function onGalleryImageClicked(e: CustomEvent<HTMLImageElement>) {
+     // TODO dialog renders over it
+     // ImageViewer.instance.showLightbox(e.detail)
+ }
 </script>
 
 <div class="prompt-display">
@@ -70,7 +79,7 @@
                 {#if filtered.length > 0}
                     <div class="accordion">
                         <Block padding={true}>
-                            <Accordion label="Node {i+1}: {classType}" open={false}>
+                            <Accordion label="Node {i+1}: {classType}" open={expandAll}>
                                 {#each filtered as [inputName, input]}
                                     <Block>
                                         <button class="copy-button" on:click={() => handleCopy(nodeID, inputName, input)}>
@@ -121,6 +130,7 @@
                     style={galleryStyle}
                     root={""}
                     root_url={""}
+                    on:clicked={onGalleryImageClicked}
                 />
             </Block>
         </div>

src/lib/components/gradio/gallery/Gallery.svelte

@@ -26,6 +26,7 @@
 
 	const dispatch = createEventDispatcher<{
 		select: SelectData;
+        clicked: HTMLImageElement
 	}>();
 
 	// tracks whether the value of the gallery was reset
@@ -142,6 +143,14 @@
 
 	let height = 0;
 	let window_height = 0;
+
+    let imgElem = null;
+
+    function onClick() {
+        // selected_image = next
+        if (imgElem)
+            dispatch("clicked", imgElem)
+    }
 </script>
 
 <svelte:window bind:innerHeight={window_height} />
@@ -166,7 +175,8 @@
 			<ModifyUpload on:clear={() => (selected_image = null)} />
 
 			<img
-				on:click={() => (selected_image = next)}
+				on:click={onClick}
+                bind:this={imgElem}
 				src={_value[selected_image][0].data}
 				alt={_value[selected_image][1] || ""}
 				title={_value[selected_image][1] || null}