Template raw JSON view

src/lib/components/modal/EditTemplateModal.svelte

@@ -2,14 +2,18 @@
  import type { ComfyBoxTemplate, SerializedComfyBoxTemplate } from "$lib/ComfyBoxTemplate";
  import type { SerializedDragEntry, SerializedLayoutState } from "$lib/stores/layoutStates";
  import { Block, BlockTitle } from "@gradio/atoms";
+ import { Tabs, TabItem } from "@gradio/tabs";
+ import { JSON as JSONIcon } from "@gradio/icons";
+ import JsonView from '$lib/components/JsonView.svelte'
  import SerializedLayoutPreviewNode from "./SerializedLayoutPreviewNode.svelte";
  import Row from "../gradio/app/Row.svelte";
  import createDOMPurify from "dompurify"
-	import Column from "../gradio/app/Column.svelte";
-	import Accordion from "../gradio/app/Accordion.svelte";
-	import Textbox from "@gradio/form/src/Textbox.svelte";
-	import type { ModalData } from "$lib/stores/modalState";
-	import { writable, type Writable } from "svelte/store";
+ import Column from "../gradio/app/Column.svelte";
+ import Accordion from "../gradio/app/Accordion.svelte";
+ import Textbox from "@gradio/form/src/Textbox.svelte";
+ import type { ModalData } from "$lib/stores/modalState";
+ import { writable, type Writable } from "svelte/store";
+	import { negmod } from "$lib/utils";
  const DOMPurify = createDOMPurify(window);
 
  export let templateAndSvg: SerializedComfyBoxTemplate;
@@ -18,6 +22,45 @@
  let layout: SerializedLayoutState | null
  let root: SerializedDragEntry | null
  let state: Writable<any> = writable({})
+ let rawTemplate: SerializedComfyBoxTemplate | null
+ let showJSON = false;
+ let showAllJSON: number = 0;
+ let createdAt = "";
+
+ $: {
+     rawTemplate = { ...templateAndSvg };
+     rawTemplate.svg = undefined;
+ }
+
+ function collapseByDefault(json: any): boolean {
+     switch (showAllJSON) {
+             case 0:
+             return typeof json["id"] === "string";
+             case 1:
+             return typeof json["nodes"] === "object"
+             case 2:
+             default:
+             return false;
+     }
+ }
+
+ function expandJSON() {
+     showAllJSON = negmod(showAllJSON + 1, 3)
+ }
+
+ $: {
+     let options: Intl.DateTimeFormatOptions = {
+         weekday: 'short',
+         year: 'numeric',
+         month: 'short',
+         day: 'numeric',
+         hour: 'numeric',
+         minute: 'numeric',
+         second: 'numeric'
+     };
+     const date = new Date(templateAndSvg.metadata.createdAt);
+     createdAt = date.toLocaleString('en-US', options);
+ }
 
  $: {
      state = _modal.state;
@@ -31,9 +74,9 @@
  let saneSvg: string = "";
 
  $: saneSvg = templateAndSvg
-              ? DOMPurify.sanitize(templateAndSvg.svg, { USE_PROFILES: { svg: true, svgFilters: true } })
-                         .replace("<svg", "<svg style='background: url(\"image/graph-bg.png\")'")
-              : "";
+            ? DOMPurify.sanitize(templateAndSvg.svg, { USE_PROFILES: { svg: true, svgFilters: true } })
+                       .replace("<svg", "<svg style='background: url(\"image/graph-bg.png\")'")
+            : "";
 
  $: if (templateAndSvg) {
      layout = templateAndSvg.layout;
@@ -58,6 +101,7 @@
                     <BlockTitle>Metadata</BlockTitle>
                     <div>
                         <Textbox label="Name" disabled={!editable} bind:value={$state.name} lines={1} max_lines={1} />
+                        <Textbox label="Created At" disabled={true} bind:value={createdAt} lines={1} max_lines={1} />
                         <Textbox label="Author" disabled={!editable} bind:value={$state.author} lines={1} max_lines={1} />
                         <Textbox label="Description" disabled={!editable} bind:value={$state.description} lines={5} max_lines={5} />
                     </div>
@@ -76,15 +120,31 @@
         {/if}
     </Row>
     <div class="template-graph-preview">
-        <Block>
-            <Accordion label="Graph">
+        <Tabs selected="graph">
+            <TabItem name="Graph" id="graph">
                 <Block>
-                    <div class="template-graph-wrapper">
-                        {@html saneSvg}
-                    </div>
+                    <Accordion label="Graph">
+                        <Block>
+                            <div class="template-graph-wrapper">
+                                {@html saneSvg}
+                            </div>
+                        </Block>
+                    </Accordion>
                 </Block>
-            </Accordion>
-        </Block>
+            </TabItem>
+            <TabItem name="Raw JSON" id="json" on:select={() => (showJSON = true)}>
+                {#key showAllJSON}
+                    {#if showJSON}
+                    <button class="json-button" on:click={expandJSON}>
+                        <JSONIcon />
+                    </button>
+                    <div class="json">
+                        <JsonView json={rawTemplate} {collapseByDefault} />
+                    </div>
+                    {/if}
+                {/key}
+            </TabItem>
+        </Tabs>
     </div>
 </div>
 
@@ -120,10 +180,34 @@
      :global(> .block) {
          background: var(--panel-background-fill);
      }
+
+     .json {
+         @include json-view;
+     }
  }
 
  .template-graph-wrapper {
      overflow: auto;
      margin: auto;
  }
+
+
+ .json-button {
+     display: flex;
+     position: absolute;
+     top: var(--block-label-margin);
+     right: var(--block-label-margin);
+     align-items: center;
+     box-shadow: var(--shadow-drop);
+     border: 1px solid var(--border-color-primary);
+     border-radius: var(--block-label-right-radius);
+     background: var(--block-label-background-fill);
+     padding: 5px;
+     width: 30px;
+     height: 30px;
+     overflow: hidden;
+     color: var(--block-label-text-color);
+     font: var(--font);
+     font-size: var(--button-small-text-size);
+ }
 </style>