[default-card][ui] Fixes to chart/css/progess bar

- pass down options in vega chart
- progress-bar min width for mf UI
- Fix bug when vega-chart spec changes.
- fix `embed` class CSS

metaflow/plugins/cards/ui/package.json

@@ -39,6 +39,8 @@
   "dependencies": {
     "@iconify/svelte": "^3.1.4",
     "svelte-markdown": "^0.4.0",
-    "svelte-vega": "^2.1.0"
+    "svelte-vega": "^2.1.0",
+    "vega": "^5.26.1",
+    "vega-lite": "^5.16.3"
   }
 }

metaflow/plugins/cards/ui/src/components/main.svelte

@@ -25,5 +25,6 @@
   /* if the embed class is present, we hide the aside, and we should center the main */
   :global(.embed main) {
     margin: 0 auto;
+    min-width: 80%
   }
 </style>

metaflow/plugins/cards/ui/src/components/progress-bar.svelte

@@ -44,7 +44,7 @@
   /* styling a progress bar is trickier than it should be. */
   progress::-webkit-progress-bar {
     background-color: white !important;
-    width: 100%;
+    min-width: 100%;
   }
   progress {
     background-color: white;

metaflow/plugins/cards/ui/src/components/vega-chart.svelte

@@ -3,12 +3,12 @@
   import { Vega } from "svelte-vega";
 
   export let componentData: VegaChartComponent
-  $:({data, spec} = componentData)
+  $:({data, spec, options} = componentData)
 </script>
 {#if data && spec}
-  <Vega data={data} spec={spec} />
+  <Vega data={data} spec={spec} options={options} />
 {:else}
-  <Vega spec={spec} />  
+  <Vega spec={spec} options={options}/>  
 {/if}
 
 

metaflow/plugins/cards/ui/src/store.ts

@@ -12,7 +12,7 @@ export const cardData: Writable<types.CardResponse | undefined> =
  * changes that have come from the parent window.
  */
 (window as any).metaflow_card_update = (
-  dataChanges: Record<string, types.CardComponent>,
+  dataChanges: Record<string, types.CardComponent>
 ) => {
   console.log("metaflow_card_update", dataChanges, cardData?.update);
 
@@ -21,7 +21,7 @@ export const cardData: Writable<types.CardResponse | undefined> =
 
     Object.values(dataChanges).forEach(
       (change) =>
-        newData?.components && findAndMutateTree(newData.components, change),
+        newData?.components && findAndMutateTree(newData.components, change)
     );
 
     return newData;
@@ -31,37 +31,37 @@ export const cardData: Writable<types.CardResponse | undefined> =
 
 const mutateChartElement = (
   chart: types.VegaChartComponent,
-  newChart: types.VegaChartComponent,
+  newChart: types.VegaChartComponent
 ) => {
   if (chart.data) {
     chart.data = JSON.parse(JSON.stringify(newChart.data)) as Record<
       string,
       unknown
     >;
   }
-  const specHasChanged =
+  const specHasNotChanged =
     JSON.stringify(newChart.spec) === JSON.stringify(chart.spec);
 
-  if (specHasChanged) {
+  if (!specHasNotChanged) {
     chart.spec = JSON.parse(JSON.stringify(newChart.spec)) as VisualizationSpec;
   }
 };
 
 // NOTE: this function mutates the object! Be careful with it.
 const findAndMutateTree = (
   components: types.CardComponent[],
-  newComponent: types.CardComponent,
+  newComponent: types.CardComponent
 ) => {
   const componentIndex = components.findIndex(
-    (fcomp) => newComponent.id === fcomp?.id,
+    (fcomp) => newComponent.id === fcomp?.id
   );
 
   if (componentIndex > -1) {
     if (components[componentIndex].type == "vegaChart") {
       // if the component is a vegaChart, we need to merge the data
       mutateChartElement(
         components[componentIndex] as types.VegaChartComponent,
-        newComponent as types.VegaChartComponent,
+        newComponent as types.VegaChartComponent
       );
     } else {
       Object.assign(components[componentIndex], newComponent);
@@ -84,7 +84,7 @@ export const setCardData: (cardDataId: string) => void = (cardDataId) => {
   try {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     const data = JSON.parse(
-      atob((window as any).__MF_DATA__[cardDataId]),
+      atob((window as any).__MF_DATA__[cardDataId])
     ) as types.CardResponse;
     cardData.set(data);
   } catch (error) {

metaflow/plugins/cards/ui/src/types.ts

@@ -1,5 +1,7 @@
 import type { VisualizationSpec } from "svelte-vega";
 
+import type { EmbedOptions } from "vega-embed";
+
 export type Route = [string, string];
 
 export type Status = "success" | "error" | "idle" | "in-progress";
@@ -188,6 +190,7 @@ export interface VegaChartComponent {
   id?: string;
   spec: VisualizationSpec;
   data: Record<string, unknown>;
+  options?: EmbedOptions;
 }
 // wrap all component options into a Component type
 export type CardComponent =

metaflow/plugins/cards/ui/tsconfig.json

@@ -5,12 +5,6 @@
     "useDefineForClassFields": true,
     "module": "ESNext",
     "resolveJsonModule": true,
-    /**
-     * Typecheck JS in `.svelte` and `.js` files by default.
-     * Disable checkJs if you'd like to use dynamic types in JS.
-     * Note that setting allowJs false does not prevent the use
-     * of JS in `.svelte` files.
-     */
     "allowJs": true,
     "checkJs": true,
     "isolatedModules": true