From e5e870f1cf131a055e6c7e6276f540b70cf0c323 Mon Sep 17 00:00:00 2001 From: Valay Dave Date: Tue, 26 Sep 2023 23:11:20 +0000 Subject: [PATCH] [default-card][ui] default card realtime updatable - cleanup the ui component code and add naive progress-bar --- metaflow/plugins/cards/card_modules/base.html | 1 + .../plugins/cards/card_modules/bundle.css | 112 +- metaflow/plugins/cards/card_modules/main.js | 9 +- metaflow/plugins/cards/ui/.gitignore | 581 ++ metaflow/plugins/cards/ui/.prettierrc.json | 3 + metaflow/plugins/cards/ui/.yarnrc.yml | 1 + .../plugins/cards/ui/public/card-example.json | 66 +- metaflow/plugins/cards/ui/public/index.html | 22 + metaflow/plugins/cards/ui/rollup.config.js | 2 +- metaflow/plugins/cards/ui/src/App.svelte | 6 +- .../cards/ui/src/components/artifacts.svelte | 5 +- .../cards/ui/src/components/bar-chart.svelte | 4 +- .../components/card-component-renderer.svelte | 7 +- .../cards/ui/src/components/heading.svelte | 2 +- .../cards/ui/src/components/image.svelte | 3 +- .../cards/ui/src/components/line-chart.svelte | 4 +- .../cards/ui/src/components/modal.svelte | 1 + .../cards/ui/src/components/page.svelte | 7 +- .../ui/src/components/progress-bar.svelte | 14 + .../cards/ui/src/components/section.svelte | 2 +- .../cards/ui/src/components/subtitle.svelte | 2 +- .../ui/src/components/table-horizontal.svelte | 2 +- .../ui/src/components/table-vertical.svelte | 2 +- .../cards/ui/src/components/table.svelte | 2 +- .../cards/ui/src/components/text.svelte | 3 +- .../cards/ui/src/components/title.svelte | 3 +- metaflow/plugins/cards/ui/src/store.ts | 50 +- metaflow/plugins/cards/ui/src/types.ts | 38 +- metaflow/plugins/cards/ui/tsconfig.json | 24 +- metaflow/plugins/cards/ui/yarn.lock | 8686 ++++++++++------- 30 files changed, 6217 insertions(+), 3447 deletions(-) create mode 100644 metaflow/plugins/cards/ui/.gitignore create mode 100644 metaflow/plugins/cards/ui/.prettierrc.json create mode 100644 metaflow/plugins/cards/ui/.yarnrc.yml create mode 100644 metaflow/plugins/cards/ui/src/components/progress-bar.svelte diff --git a/metaflow/plugins/cards/card_modules/base.html b/metaflow/plugins/cards/card_modules/base.html index 38a066179e..91c05ca1f4 100644 --- a/metaflow/plugins/cards/card_modules/base.html +++ b/metaflow/plugins/cards/card_modules/base.html @@ -18,6 +18,7 @@
diff --git a/metaflow/plugins/cards/ui/rollup.config.js b/metaflow/plugins/cards/ui/rollup.config.js index 5d4b7502ae..c3054cd175 100644 --- a/metaflow/plugins/cards/ui/rollup.config.js +++ b/metaflow/plugins/cards/ui/rollup.config.js @@ -43,7 +43,7 @@ export default { input: "src/main.ts", output: { dir: process.env.OUTPUT_DIR ?? "public/build", - sourcemap: true, + sourcemap: !production, format: "iife", name: "app", }, diff --git a/metaflow/plugins/cards/ui/src/App.svelte b/metaflow/plugins/cards/ui/src/App.svelte index bbb390ebbc..881d3e0234 100644 --- a/metaflow/plugins/cards/ui/src/App.svelte +++ b/metaflow/plugins/cards/ui/src/App.svelte @@ -3,7 +3,7 @@ import "./prism"; import "./global.css"; import "./prism.css"; - import "./app.css" + import "./app.css"; import { cardData, setCardData, modal } from "./store"; import * as utils from "./utils"; import Aside from "./components/aside.svelte"; @@ -16,11 +16,11 @@ // Get the data from the element in `windows.__MF_DATA__` corresponding to `cardDataId`. This allows multiple sets of // data to exist on a single page - setCardData(cardDataId) + setCardData(cardDataId); // Set the `embed` class to hide the `aside` if specified in the URL const urlParams = new URLSearchParams(window?.location.search); - let embed = Boolean(urlParams.get('embed')) + let embed = Boolean(urlParams.get("embed"));
diff --git a/metaflow/plugins/cards/ui/src/components/artifacts.svelte b/metaflow/plugins/cards/ui/src/components/artifacts.svelte index 72309d4122..3e4de16f06 100644 --- a/metaflow/plugins/cards/ui/src/components/artifacts.svelte +++ b/metaflow/plugins/cards/ui/src/components/artifacts.svelte @@ -4,10 +4,9 @@ import ArtifactRow from "./artifact-row.svelte"; export let componentData: types.ArtifactsComponent; - const { data } = componentData; // we can't guarantee the data is sorted from the source, so we sort before render - const sortedData = data.sort((a, b) => { + const sortedData = componentData?.data.sort((a, b) => { // nulls first if (a.name && b.name) { if (a.name > b.name) { @@ -24,7 +23,7 @@ {#each sortedData as artifact} - + {/each}
diff --git a/metaflow/plugins/cards/ui/src/components/bar-chart.svelte b/metaflow/plugins/cards/ui/src/components/bar-chart.svelte index 7db0febe9a..0d88591fcf 100644 --- a/metaflow/plugins/cards/ui/src/components/bar-chart.svelte +++ b/metaflow/plugins/cards/ui/src/components/bar-chart.svelte @@ -17,11 +17,11 @@ BarController, LinearScale, CategoryScale, - PointElement + PointElement, ); export let componentData: types.BarChartComponent; - const { config, data, labels } = componentData; + $: ({ config, data, labels } = componentData); let el: HTMLCanvasElement; diff --git a/metaflow/plugins/cards/ui/src/components/card-component-renderer.svelte b/metaflow/plugins/cards/ui/src/components/card-component-renderer.svelte index 6d9e05f9a1..3965d5ce18 100644 --- a/metaflow/plugins/cards/ui/src/components/card-component-renderer.svelte +++ b/metaflow/plugins/cards/ui/src/components/card-component-renderer.svelte @@ -10,6 +10,7 @@ import Log from "./log.svelte"; import Markdown from "./markdown.svelte"; import Page from "./page.svelte"; + import ProgressBar from "./progress-bar.svelte"; import Section from "./section.svelte"; import Subtitle from "./subtitle.svelte"; import Table from "./table.svelte"; @@ -29,6 +30,7 @@ log: Log, markdown: Markdown, page: Page, + progressBar: ProgressBar, section: Section, subtitle: Subtitle, table: Table, @@ -36,11 +38,12 @@ title: Title, }; - let component = typesMap?.[componentData.type] + let component = typesMap?.[componentData.type]; if (!component) { - console.error("Unknown component type: ", componentData.type) + console.error("Unknown component type: ", componentData.type); } + {#if component} {#if (componentData.type === "page" || componentData.type === "section") && componentData?.contents} diff --git a/metaflow/plugins/cards/ui/src/components/heading.svelte b/metaflow/plugins/cards/ui/src/components/heading.svelte index 0398357546..b41cd0bed2 100644 --- a/metaflow/plugins/cards/ui/src/components/heading.svelte +++ b/metaflow/plugins/cards/ui/src/components/heading.svelte @@ -5,7 +5,7 @@ import Subtitle from "./subtitle.svelte"; export let componentData: types.HeadingComponent; - const { title, subtitle } = componentData; + $: ({ title, subtitle } = componentData);
diff --git a/metaflow/plugins/cards/ui/src/components/image.svelte b/metaflow/plugins/cards/ui/src/components/image.svelte index 3a24745590..e28dfac31a 100644 --- a/metaflow/plugins/cards/ui/src/components/image.svelte +++ b/metaflow/plugins/cards/ui/src/components/image.svelte @@ -4,9 +4,10 @@ import { modal } from "../store"; export let componentData: types.ImageComponent; - const { src, label, description } = componentData; + $: ({ src, label, description } = componentData); +
modal.set(componentData)} data-component="image">
{label diff --git a/metaflow/plugins/cards/ui/src/components/line-chart.svelte b/metaflow/plugins/cards/ui/src/components/line-chart.svelte index 1defb02e45..1f5173309b 100644 --- a/metaflow/plugins/cards/ui/src/components/line-chart.svelte +++ b/metaflow/plugins/cards/ui/src/components/line-chart.svelte @@ -17,11 +17,11 @@ LinearScale, LineController, CategoryScale, - PointElement + PointElement, ); export let componentData: types.LineChartComponent; - const { config, data, labels } = componentData; + $: ({ config, data, labels } = componentData); let el: HTMLCanvasElement; diff --git a/metaflow/plugins/cards/ui/src/components/modal.svelte b/metaflow/plugins/cards/ui/src/components/modal.svelte index 3dff91f914..a9adf1bbbe 100644 --- a/metaflow/plugins/cards/ui/src/components/modal.svelte +++ b/metaflow/plugins/cards/ui/src/components/modal.svelte @@ -20,6 +20,7 @@ {#if componentData && $modal} +
diff --git a/metaflow/plugins/cards/ui/src/components/page.svelte b/metaflow/plugins/cards/ui/src/components/page.svelte index 8f2736c9a3..0eb96f25ae 100644 --- a/metaflow/plugins/cards/ui/src/components/page.svelte +++ b/metaflow/plugins/cards/ui/src/components/page.svelte @@ -2,10 +2,13 @@ -
+
diff --git a/metaflow/plugins/cards/ui/src/components/progress-bar.svelte b/metaflow/plugins/cards/ui/src/components/progress-bar.svelte new file mode 100644 index 0000000000..51b8354c41 --- /dev/null +++ b/metaflow/plugins/cards/ui/src/components/progress-bar.svelte @@ -0,0 +1,14 @@ + + + +
+ {#if label} + + {/if} + {value}{unit || ""} +
diff --git a/metaflow/plugins/cards/ui/src/components/section.svelte b/metaflow/plugins/cards/ui/src/components/section.svelte index e43a6f34d3..8377e19cda 100644 --- a/metaflow/plugins/cards/ui/src/components/section.svelte +++ b/metaflow/plugins/cards/ui/src/components/section.svelte @@ -2,7 +2,7 @@ -

{componentData.text}

+

{componentData?.text || ""}