[@card] Realtime cards (2/N) #1551

valayDave · 2023-09-26T22:21:44Z

[card-ui] default card real-time updatable

cleanup the ui component code and add naive progress-bar
add Vega chart support in default card
Remove Chartjs dependency from the code.

seethroughdev

LGTM! Changes are optional and purely cosmetic. Really nice job @valayDave .

seethroughdev · 2023-09-27T17:12:34Z

metaflow/plugins/cards/card_modules/base.html

@@ -18,6 +18,7 @@
 <body>
  <div class="card_app"></div>
  <script>
+    var METAFLOW_RELOAD_TOKEN = "[METAFLOW_RELOAD_TOKEN]"


total nit, but we use let/const these days to be more explicit on if the value is immutable.

seethroughdev · 2023-09-27T17:14:40Z

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

  );

  export let componentData: types.BarChartComponent;
-  const { config, data, labels } = componentData;
+  $: ({ config, data, labels } = componentData);


Fun sidenote, svelte just announced they're changing this api for the same confusion we got caught up in here. Glad its fixed for now.

seethroughdev · 2023-09-27T17:15:32Z

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

@@ -0,0 +1,14 @@
+<!-- A simple text component to render a paragraph wherever needed.App


This comment should be updated, totally my fault.

seethroughdev · 2023-09-27T17:16:26Z

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

+/**
+ * This function is used to update the cardData object from the window.
+ * It is used to update the cardData object with
+ * changes that have come from the parent window.


If you're updating comments, probably helpful here to call out that we're intentionally assigning it to the window object as well.

romain-intel · 2023-10-03T06:41:04Z

Not reviewing this one :). I'll assume it works :).

The base branch was changed.

romain-intel · 2024-01-09T08:48:17Z

As mentioned -- am fine with this (didn't review). My only comment is somewhat orthogonal (I think I had mentioned before): it would be nice to remove things that are actually not packaged with Metaflow to outside the metaflow directory to be a bit cleaner.

- cleanup the ui component code and add naive progress-bar

- Chart support within tables and anywhere across the page - Chart mutation done based on spec/data changes.

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

* [card-components] internal MetaflowCard classes support realtime behavior - Markdown and Artifact Component made realtime. - default/blank cards made realtime - default component ids to realtime-updatable UserComponents * [default-card-python] add runtime check - Add a variable in the HTML template to enable/disable `metaflow_card_update` function * [card-components] progressbar / vegacharts * [card-components] customize updates for Tables/Images - Set options that allows disabling realtime updates for components that may have lots of data like `Image` / `Table`. This can be useful when we are calling refresh often and don't want to update data which maybe static. * [card-components] address comments on Image class - Image.update supports multi-type object - remove `disable_updates` from public api * [card-components][vega-chart][bug-fix] - property in vega chart to show controls - remove `data` argument from Vega Chart. - It only takes `spec` as an argument. - VegaChart default width set to `container` * [@card] Realtime cards (4/N) (#1553) * [card-server] cli command to expose a card server - Server helps view realtime updates - Added a card viewer html file - Created a simple HTTP based card server that will help showcase the realtime cards from querying the server - The API response contains the task status for the data api - reload on run change : A background thread checks if there are new runs created via the latest_run file. - pass down poll_interval to card viewer - card server is also resiliant to no runs - You can set `METAFLOW_DEBUG_CARD_SERVER` to debug card server logs, Logging is off by default - clean url parsing for requests : needed to ensure calls to card server are resiliant to query params in requests. - also need clean url parsing for setting `embed` query param in the card iframe - run-info API sends task finished information which is useful when switching cards automatically when new tasks start. - it Always logs when run-ids change * [card-viewer-html] UI + Structure - Cleanup HTML template - Handles edge case where no runs are available - Shows errors when things are not working - leverages a configurable poll interval - set `embed` query param in the card iframe source. - it automatically switches to new card when tasks finish and other tasks are running. - Fix bug when card data is not available - checks for `final` reload token to stop polling updates * [@card] [card-core] always call `refresh` after first `render_runtime` (5/N) (#1670) * [card-core] always call `refresh` after first `render_runtime` - Added a `sync` argument to the card creator [@card][bug fixes] Address comments and squashing bugs (6/N) (#1678) * [card-components] type-hints + doc string Fix. * [card-core] fix function signature in tests. * [card-server] address comments on debug mode and hygiene * [card-components] vega charts special case inside table --------- Co-authored-by: adam <[email protected]> --------- Co-authored-by: adam <[email protected]>

metaflow/plugins/cards/card_viewer/viewer.html

+         * Setup a new card and start the watcher
+         */
+        function handleLoadCard(name, value) {
+          document.getElementsByTagName("title").innerHTML = name;


metaflow/plugins/cards/card_viewer/viewer.html

+        function handleLoadCard(name, value) {
+          document.getElementsByTagName("title").innerHTML = name;
+          const iframe = document.getElementById("card-frame");
+          iframe.src = `/card/${value}?embed=true`;


* [default-card][ui] default card realtime updatable - cleanup the ui component code and add naive progress-bar * [default-card][ui] Add custom progress bar * [default-card][ui] vegachart component - Chart support within tables and anywhere across the page - Chart mutation done based on spec/data changes. * [default-card][ui] remove chart.js deps. * [default-card][ui] migrate to vite * [default-card][ui] update progress bar styles * [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 * [@card] Realtime cards (3/N) (Netflix#1552) * [card-components] internal MetaflowCard classes support realtime behavior - Markdown and Artifact Component made realtime. - default/blank cards made realtime - default component ids to realtime-updatable UserComponents * [default-card-python] add runtime check - Add a variable in the HTML template to enable/disable `metaflow_card_update` function * [card-components] progressbar / vegacharts * [card-components] customize updates for Tables/Images - Set options that allows disabling realtime updates for components that may have lots of data like `Image` / `Table`. This can be useful when we are calling refresh often and don't want to update data which maybe static. * [card-components] address comments on Image class - Image.update supports multi-type object - remove `disable_updates` from public api * [card-components][vega-chart][bug-fix] - property in vega chart to show controls - remove `data` argument from Vega Chart. - It only takes `spec` as an argument. - VegaChart default width set to `container` * [@card] Realtime cards (4/N) (Netflix#1553) * [card-server] cli command to expose a card server - Server helps view realtime updates - Added a card viewer html file - Created a simple HTTP based card server that will help showcase the realtime cards from querying the server - The API response contains the task status for the data api - reload on run change : A background thread checks if there are new runs created via the latest_run file. - pass down poll_interval to card viewer - card server is also resiliant to no runs - You can set `METAFLOW_DEBUG_CARD_SERVER` to debug card server logs, Logging is off by default - clean url parsing for requests : needed to ensure calls to card server are resiliant to query params in requests. - also need clean url parsing for setting `embed` query param in the card iframe - run-info API sends task finished information which is useful when switching cards automatically when new tasks start. - it Always logs when run-ids change * [card-viewer-html] UI + Structure - Cleanup HTML template - Handles edge case where no runs are available - Shows errors when things are not working - leverages a configurable poll interval - set `embed` query param in the card iframe source. - it automatically switches to new card when tasks finish and other tasks are running. - Fix bug when card data is not available - checks for `final` reload token to stop polling updates * [@card] [card-core] always call `refresh` after first `render_runtime` (5/N) (Netflix#1670) * [card-core] always call `refresh` after first `render_runtime` - Added a `sync` argument to the card creator [@card][bug fixes] Address comments and squashing bugs (6/N) (Netflix#1678) * [card-components] type-hints + doc string Fix. * [card-core] fix function signature in tests. * [card-server] address comments on debug mode and hygiene * [card-components] vega charts special case inside table --------- Co-authored-by: adam <[email protected]> --------- Co-authored-by: adam <[email protected]> --------- Co-authored-by: adam <[email protected]>

valayDave mentioned this pull request Sep 26, 2023

[@card] Realtime cards (1/N) #1550

Merged

2 tasks

valayDave marked this pull request as ready for review September 26, 2023 23:00

valayDave requested review from saikonen and seethroughdev September 26, 2023 23:01

valayDave force-pushed the valay/rtc-stack-1 branch from 9a27a2b to eba36be Compare September 26, 2023 23:22

seethroughdev previously approved these changes Sep 27, 2023

View reviewed changes

valayDave force-pushed the valay/rtc-stack-0 branch from befd689 to cfb7bbf Compare October 11, 2023 18:56

valayDave force-pushed the valay/rtc-stack-1 branch from eba36be to 4bb9032 Compare October 11, 2023 18:56

valayDave force-pushed the valay/rtc-stack-0 branch 2 times, most recently from 21d21fb to fd1502d Compare October 18, 2023 00:44

valayDave force-pushed the valay/rtc-stack-1 branch from 4bb9032 to e5e870f Compare October 18, 2023 01:49

valayDave force-pushed the valay/rtc-stack-0 branch from fd1502d to a1c154d Compare October 18, 2023 17:10

valayDave force-pushed the valay/rtc-stack-1 branch from e5e870f to d5f8c75 Compare October 18, 2023 17:10

valayDave force-pushed the valay/rtc-stack-0 branch from a1c154d to 6890054 Compare October 18, 2023 17:24

valayDave force-pushed the valay/rtc-stack-1 branch from d5f8c75 to fa23ad4 Compare October 18, 2023 17:24

valayDave force-pushed the valay/rtc-stack-0 branch from 6890054 to ec58dd0 Compare October 19, 2023 21:48

valayDave force-pushed the valay/rtc-stack-1 branch from fa23ad4 to 272346a Compare October 19, 2023 21:48

valayDave force-pushed the valay/rtc-stack-0 branch from ec58dd0 to 83d7347 Compare October 31, 2023 19:36

valayDave force-pushed the valay/rtc-stack-1 branch from 272346a to 57e3a7e Compare October 31, 2023 19:36

valayDave force-pushed the valay/rtc-stack-1 branch from 087fe3e to 2a8501a Compare November 21, 2023 06:40

valayDave force-pushed the valay/rtc-stack-0 branch from 993d6f0 to a719a43 Compare November 21, 2023 07:03

valayDave force-pushed the valay/rtc-stack-1 branch from 2a8501a to be176e3 Compare November 21, 2023 07:03

Base automatically changed from valay/rtc-stack-0 to master December 5, 2023 09:26

valayDave force-pushed the valay/rtc-stack-1 branch from be176e3 to 78c7154 Compare December 6, 2023 04:56

valayDave force-pushed the valay/rtc-stack-1 branch 2 times, most recently from 615ffe4 to 947c2ec Compare January 8, 2024 14:47

romain-intel previously approved these changes Jan 9, 2024

View reviewed changes

valayDave dismissed romain-intel’s stale review via fc430d4 January 11, 2024 16:09

valayDave and others added 8 commits January 11, 2024 08:13

[default-card][ui] default card realtime updatable

fb9ff38

- cleanup the ui component code and add naive progress-bar

[default-card][ui] Add custom progress bar

06a0b58

[default-card][ui] vegachart component

b2ebc70

- Chart support within tables and anywhere across the page - Chart mutation done based on spec/data changes.

[default-card][ui] remove chart.js deps.

89355d2

[default-card][ui] migrate to vite

bbd1042

[default-card][ui] update progress bar styles

c19e473

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

cb2ad08

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

valayDave force-pushed the valay/rtc-stack-1 branch from fc430d4 to 623cd86 Compare January 11, 2024 16:13

github-advanced-security bot found potential problems Jan 11, 2024

View reviewed changes

savingoyal merged commit 08eb1e6 into master Jan 11, 2024
22 checks passed

savingoyal deleted the valay/rtc-stack-1 branch January 11, 2024 16:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[@card] Realtime cards (2/N) #1551

[@card] Realtime cards (2/N) #1551

valayDave commented Sep 26, 2023 •

edited

Loading

seethroughdev left a comment

seethroughdev Sep 27, 2023

seethroughdev Sep 27, 2023

seethroughdev Sep 27, 2023

seethroughdev Sep 27, 2023

romain-intel commented Oct 3, 2023

romain-intel commented Jan 9, 2024

		@@ -0,0 +1,14 @@
		<!-- A simple text component to render a paragraph wherever needed.App

[@card] Realtime cards (2/N) #1551

[@card] Realtime cards (2/N) #1551

Conversation

valayDave commented Sep 26, 2023 • edited Loading

[card-ui] default card real-time updatable

seethroughdev left a comment

Choose a reason for hiding this comment

seethroughdev Sep 27, 2023

Choose a reason for hiding this comment

seethroughdev Sep 27, 2023

Choose a reason for hiding this comment

seethroughdev Sep 27, 2023

Choose a reason for hiding this comment

seethroughdev Sep 27, 2023

Choose a reason for hiding this comment

romain-intel commented Oct 3, 2023

romain-intel commented Jan 9, 2024

valayDave commented Sep 26, 2023 •

edited

Loading