From a5d64eebe26c330d394540d1375e0b8d566766c4 Mon Sep 17 00:00:00 2001 From: Brian Holmes Date: Tue, 30 Apr 2024 01:27:13 -0400 Subject: [PATCH 1/2] initial commit --- .../features/custom-dashboards/Chart.svelte | 16 ++-- .../custom-dashboards/Component.svelte | 42 +++++++--- .../CustomDashboardEmbed.svelte | 37 ++++----- .../CustomDashboardPreview.svelte | 26 +++--- ...Wrapper.svelte => DashboardWrapper.svelte} | 9 +- .../{Element.svelte => PreviewElement.svelte} | 83 +++++++++---------- .../custom-dashboards/[name]/+page.svelte | 71 ++++++---------- .../routes/(viz)/custom/[name]/+page.svelte | 4 +- 8 files changed, 140 insertions(+), 148 deletions(-) rename web-common/src/features/custom-dashboards/{Wrapper.svelte => DashboardWrapper.svelte} (90%) rename web-common/src/features/custom-dashboards/{Element.svelte => PreviewElement.svelte} (53%) diff --git a/web-common/src/features/custom-dashboards/Chart.svelte b/web-common/src/features/custom-dashboards/Chart.svelte index 8c0f77fb52c..25ffebfba4f 100644 --- a/web-common/src/features/custom-dashboards/Chart.svelte +++ b/web-common/src/features/custom-dashboards/Chart.svelte @@ -1,21 +1,19 @@ - - {#each components as component, i (i)} - {#if component.component && typeof component.component === "string"} + {#each items as component, i (i)} + {@const componentName = component.component} + {#if componentName} - - - - - - - - - - + /> {/if} {/each} - + diff --git a/web-common/src/features/custom-dashboards/CustomDashboardPreview.svelte b/web-common/src/features/custom-dashboards/CustomDashboardPreview.svelte index a5cd8782d97..86a5f94f1db 100644 --- a/web-common/src/features/custom-dashboards/CustomDashboardPreview.svelte +++ b/web-common/src/features/custom-dashboards/CustomDashboardPreview.svelte @@ -1,11 +1,12 @@ - - - - - - - - - - {#if chartName && typeof chartName === "string"} - - {/if} - - +{#if componentName} + + + + - - Copy - Delete - { - await goto(`/files/charts/${chartName}`); - }} - > - Go to {chartName}.yaml - - Show details - - + + Copy + Delete + { + await goto(`/files/charts/${componentName}`); + }} + > + Go to {componentName}.yaml + + Show details + + +{/if} diff --git a/web-local/src/routes/(application)/custom-dashboards/[name]/+page.svelte b/web-local/src/routes/(application)/custom-dashboards/[name]/+page.svelte index 6b18c73c0cb..6eed03431e7 100644 --- a/web-local/src/routes/(application)/custom-dashboards/[name]/+page.svelte +++ b/web-local/src/routes/(application)/custom-dashboards/[name]/+page.svelte @@ -28,10 +28,7 @@ WorkspaceHeader, } from "@rilldata/web-common/layout/workspace"; import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient"; - import type { - V1DashboardItem, - V1DashboardSpec, - } from "@rilldata/web-common/runtime-client"; + import type { V1DashboardSpec } from "@rilldata/web-common/runtime-client"; import { createRuntimeServiceGetFile, createRuntimeServicePutFile, @@ -40,7 +37,7 @@ import { runtime } from "@rilldata/web-common/runtime-client/runtime-store"; import { slide } from "svelte/transition"; import Button from "web-common/src/components/button/Button.svelte"; - import { parse, stringify } from "yaml"; + import { parseDocument } from "yaml"; const DEFAULT_EDITOR_HEIGHT = 300; const DEFAULT_EDITOR_WIDTH = 400; @@ -59,7 +56,6 @@ let fileArtifact: FileArtifact; let filePath: string; let customDashboardName: string; - let selectedView = "split"; let showGrid = true; let snap = false; @@ -68,9 +64,9 @@ let editorWidth = DEFAULT_EDITOR_WIDTH; let chartEditorHeight = DEFAULT_EDITOR_HEIGHT; let selectedChartName: string | null = null; - let dashboard: V1DashboardSpec = { - columns: 10, - gap: 1, + let spec: V1DashboardSpec = { + columns: 20, + gap: 4, items: [], }; @@ -89,7 +85,8 @@ $: instanceId = $runtime.instanceId; - $: errors = fileArtifact.getAllErrors(queryClient, instanceId); + $: errorsQuery = fileArtifact.getAllErrors(queryClient, instanceId); + $: errors = $errorsQuery; $: fileQuery = createRuntimeServiceGetFile($runtime.instanceId, filePath, { query: { keepPreviousData: true }, }); @@ -97,25 +94,18 @@ $: yaml = $fileQuery.data?.blob ?? ""; - $: if (yaml) { - try { - const potentialDb = parse(yaml) as V1DashboardSpec; - dashboard = { - ...potentialDb, - items: potentialDb.items?.filter(isComponent) ?? [], - }; - } catch { - // Unable to parse YAML, no-op - } - } + $: parsedDocument = parseDocument(yaml); $: selectedChartFileArtifact = fileArtifacts.findFileArtifact( ResourceKind.Component, selectedChartName ?? "", ); $: selectedChartFilePath = selectedChartFileArtifact?.path; + $: resourceQuery = fileArtifact.getResource(queryClient, instanceId); - $: ({ columns, gap, items = [] } = dashboard ?? ({} as V1DashboardSpec)); + $: spec = $resourceQuery.data?.dashboard?.spec ?? spec; + + $: ({ items = [], columns = 20, gap = 4 } = spec); async function onChangeCallback( e: Event & { @@ -155,26 +145,23 @@ dimensions: Vector; }>, ) { - const newItems = [...items]; + const sequence = parsedDocument.get("items"); - newItems[e.detail.index].width = e.detail.dimensions[0]; - newItems[e.detail.index].height = e.detail.dimensions[1]; + const node = sequence.get(e.detail.index); - newItems[e.detail.index].x = e.detail.position[0]; - newItems[e.detail.index].y = e.detail.position[1]; + node.set("width", e.detail.dimensions[0]); + node.set("height", e.detail.dimensions[1]); + node.set("x", e.detail.position[0]); + node.set("y", e.detail.position[1]); - yaml = stringify({ - kind: "dashboard", - ...dashboard, - items: newItems, - }); + yaml = parsedDocument.toString(); await updateChartFile(new CustomEvent("update", { detail: yaml })); } async function addChart(e: CustomEvent<{ chartName: string }>) { - const newItems = [...items]; - newItems.push({ + const sequence = parsedDocument.get("items"); + sequence.add({ component: e.detail.chartName, height: 4, width: 4, @@ -182,20 +169,10 @@ y: 0, }); - yaml = stringify({ - kind: "dashboard", - ...dashboard, - items: newItems, - }); + yaml = parsedDocument.toString(); await updateChartFile(new CustomEvent("update", { detail: yaml })); } - - function isComponent( - component: V1DashboardItem | null | undefined, - ): component is V1DashboardItem { - return !!component; - } @@ -232,7 +209,7 @@ @@ -256,7 +233,7 @@
diff --git a/web-local/src/routes/(viz)/custom/[name]/+page.svelte b/web-local/src/routes/(viz)/custom/[name]/+page.svelte index efd698cd978..075a0eeb842 100644 --- a/web-local/src/routes/(viz)/custom/[name]/+page.svelte +++ b/web-local/src/routes/(viz)/custom/[name]/+page.svelte @@ -4,7 +4,7 @@ export let data: PageData; - $: ({ components = [], columns, gap } = data.dashboard); + $: ({ items = [], columns, gap } = data.dashboard); - + From 347d2380cec7b4af70b2a41a37a3148eb12ff7c9 Mon Sep 17 00:00:00 2001 From: Brian Holmes Date: Tue, 30 Apr 2024 01:31:55 -0400 Subject: [PATCH 2/2] prop name --- web-local/src/routes/(application)/chart/[name]/+page.svelte | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/web-local/src/routes/(application)/chart/[name]/+page.svelte b/web-local/src/routes/(application)/chart/[name]/+page.svelte index ffce597c26b..b40d64a790b 100644 --- a/web-local/src/routes/(application)/chart/[name]/+page.svelte +++ b/web-local/src/routes/(application)/chart/[name]/+page.svelte @@ -70,9 +70,7 @@ chartView gap={8} columns={10} - components={[ - { width: 10, height: 10, x: 0, y: 0, component: chartName }, - ]} + items={[{ width: 10, height: 10, x: 0, y: 0, component: chartName }]} />