Fix marimo theme detection

Author: FlorentinD

changelog.md

@@ -18,7 +18,7 @@
 - Allow setting the theme manually in `VG.render(theme="light")` and `VG.render_widget(theme="dark")`.
 - Use typed nodes and relationship traitlets in GraphWidget, i.e., list of Node and Relationship instead of dictionaries.
 - `render` now allows to pass `layout` as a string as well. Previously expected to be a typed `neo4j_viz.Layout`. 
-- Fixed rendering in Marimo notebooks. Note, you still have to manually pass the marimo theme `VG.render_widget(theme=marimo.app_meta().theme)`
+- Fixed rendering in Marimo notebooks
 
 
 ## Other changes

examples/.gitignore

@@ -1,4 +1,4 @@
 .ipynb_checkpoints
-
+__marimo__
 out/*
-/__marimo__/session/*
+

examples/marimo-example.py

@@ -66,11 +66,11 @@ def _(mo):
 
 
 @app.cell
-def _(VisualizationGraph, mo, nodes, relationships):
+def _(VisualizationGraph, nodes, relationships):
     # Create and render the visualization
     VG = VisualizationGraph(nodes=nodes, relationships=relationships)
     # Note, we need to pass the theme explicitly in Marimo.
-    widget = VG.render_widget(theme=mo.app_meta().theme, renderer="canvas")
+    widget = VG.render_widget(renderer="canvas")
     widget
     return VG, widget
 

js-applet/src/graph-widget.tsx

@@ -37,10 +37,10 @@ export type WidgetData = {
 };
 
 function detectTheme(): "light" | "dark" {
-  if (document.body.classList.contains("vscode-light")) {
+  if (document.body.classList.contains("vscode-light") || document.body.classList.contains("light-theme")) {
     return "light";
   }
-  if (document.body.classList.contains("vscode-dark")) {
+  if (document.body.classList.contains("vscode-dark") || document.body.classList.contains("dark-theme")) {
     return "dark";
   }
 

python-wrapper/src/neo4j_viz/resources/nvl_entrypoint/index.html

@@ -82204,9 +82204,9 @@ class Hdr extends kr.Component {
   }
 }
 function Vdr() {
-  if (document.body.classList.contains("vscode-light"))
+  if (document.body.classList.contains("vscode-light") || document.body.classList.contains("light-theme"))
     return "light";
-  if (document.body.classList.contains("vscode-dark"))
+  if (document.body.classList.contains("vscode-dark") || document.body.classList.contains("dark-theme"))
     return "dark";
   const r = window.getComputedStyle(document.body, null).getPropertyValue("background-color").match(/\d+/g);
   if (!r || r.length < 3)

python-wrapper/src/neo4j_viz/resources/nvl_entrypoint/widget.js

@@ -7,5 +7,4 @@ set -o pipefail
 (
     cd "${GIT_ROOT}/js-applet"
     rm -rf node_modules
-    rm -f yarn.lock
 )