@jbrowse/embedded-core 5.0.0-beta.1 → 5.0.0-beta.11

package/esm/EmbeddedSessionThemeMixin.js

@@ -1,4 +1,4 @@
-import { getConf, setConf } from '@jbrowse/core/configuration';
+import { getConf } from '@jbrowse/core/configuration';
 import { createJBrowseThemeFromArgs } from '@jbrowse/core/ui';
 import { resolvePalette } from '@jbrowse/core/ui/palette';
 import { resolveStyleTheme } from '@jbrowse/core/ui/styleTheme';
@@ -7,11 +7,15 @@ import { BaseSessionModel } from '@jbrowse/product-core';
  * #stateModel EmbeddedSessionThemeMixin
  * Theme getters shared by the single-view embedded sessions
  * (react-linear-genome-view, react-circular-genome-view). Embedded products
- * have no theme switching, so the active theme is always `default`; the config
- * `theme` slot still applies via `configTheme`.
+ * have no theme picker, so the palette is always `default` and the config
+ * `theme` slot supplies it; light or dark is the host's to drive, through
+ * `setThemeMode`.
  */
 export function EmbeddedSessionThemeMixin(pluginManager) {
     return BaseSessionModel(pluginManager)
+        .volatile(() => ({
+        sessionThemeMode: undefined,
+    }))
         .views(self => ({
         /**
          * #getter
@@ -25,6 +29,7 @@ export function EmbeddedSessionThemeMixin(pluginManager) {
             return {
                 configTheme: getConf(self, 'theme'),
                 themeName: 'default',
+                mode: self.sessionThemeMode,
             };
         },
         /**
@@ -64,6 +69,8 @@ export function EmbeddedSessionThemeMixin(pluginManager) {
          * preset up in `allThemes()`.
          */
         getActiveThemeOptions(_name) {
+            // the mode rides along, for the reason the comment below gives: these
+            // options are the whole of what the export path is handed
             // Its absence did not read as an unthemed export, it read as a *light*
             // one. Every view's export calls this optionally
             // (`session.getActiveThemeOptions?.(themeName)`), so a session without
@@ -72,33 +79,35 @@ export function EmbeddedSessionThemeMixin(pluginManager) {
             // colors each display bakes into its own bodies, the background rect. A
             // host following its own dark mode got a light figure out of
             // `view.exportSvg()` with nothing anywhere saying why.
-            return this.themeOptions.configTheme;
+            const configTheme = this.themeOptions.configTheme;
+            return self.sessionThemeMode
+                ? {
+                    ...configTheme,
+                    palette: {
+                        ...configTheme?.palette,
+                        mode: self.sessionThemeMode,
+                    },
+                }
+                : configTheme;
         },
     }))
         .actions(self => ({
         /**
          * #action
-         * Point the session at light or dark. One write, not two: the `theme`
-         * slot is what `themeOptions` ships to the renderer, so the labels baked
-         * in the worker follow it, and `palette` is derived from the same slot,
-         * so what React draws follows it too. An embedder who sets only a
-         * React-side palette leaves the baked labels behind.
+         * Switch the session to light or dark, leaving the host's configured
+         * colours alone. `themeOptions` carries the mode to the renderer, so
+         * labels drawn in the worker follow it, and `palette` is derived from
+         * the same args, so React-drawn elements follow it too. An embedder who
+         * sets only a React-side palette leaves the worker-drawn labels in the
+         * old mode.
          *
-         * Merges rather than replaces, at both levels. `theme` is a frozen slot,
-         * so a bare `setConf(session, 'theme', { palette: { mode } })` — the
-         * obvious form, and what the build-your-own examples each wrote — drops
-         * every other key in it. That silently discards whatever the host passed
-         * as `createViewState`'s `configuration.theme` (a brand `primary`, say)
-         * the first time their dark-mode toggle fires. `resolvePalette` spreads
-         * `configTheme.palette` over the preset shallowly, so `mode` and
-         * `primary` are siblings and both levels have to survive.
+         * This used to write `palette.mode` into the config `theme` slot, which
+         * meant merging at two levels to avoid discarding the brand the host had
+         * passed to `createViewState`. Mode is its own axis now, so there is
+         * nothing to merge and nothing to discard.
          */
         setThemeMode(mode) {
-            const theme = getConf(self, 'theme') ?? {};
-            setConf(self, 'theme', {
-                ...theme,
-                palette: { ...theme.palette, mode },
-            });
+            self.sessionThemeMode = mode;
         },
     }));
 }