@perspective-dev/viewer 4.4.0 → 4.5.0

package/src/rust/tasks/update_and_render.rs

@@ -10,75 +10,94 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+//! Apply a [`ViewConfigUpdate`] to the active [`Session`], validate it, then
+//! draw with the active [`Renderer`].  The companion `*_callback` helpers
+//! return [`yew::Callback`]s suitable for wiring as Yew child-component
+//! props.
+
 use perspective_client::config::ViewConfigUpdate;
 use yew::prelude::*;
 
-use super::structural::*;
 use crate::renderer::Renderer;
 use crate::session::Session;
 use crate::utils::*;
 use crate::*;
 
-/// A model trait for updating both `View` state and completing a render.
-///
-/// While `Renderer` manages the plugin and thus the render call itself, the
-/// current `View` is handled by the `Session` which must be validated and
-/// locked while drawing is in progress.  `UpdateAndRender` provides methods
-/// that synchronize this behavior, so these methods should be used to initiate
-/// rendering of the current `Plugin` and `View`.
-pub trait UpdateAndRender: HasRenderer + HasSession {
-    /// Create a `Callback` that renders from the current `View` and `Plugin`.
-    fn render_callback(&self) -> Callback<()> {
-        clone!(self.session(), self.renderer());
-        Callback::from(move |_| {
-            clone!(session, renderer);
-            ApiFuture::spawn(async move {
-                renderer.draw(async { Ok(session.get_view()) }).await?;
-                Ok(())
-            })
+/// Create a [`Callback`] that renders from the current `View` and `Plugin`.
+pub fn render_callback(session: &Session, renderer: &Renderer) -> Callback<()> {
+    clone!(session, renderer);
+    Callback::from(move |_| {
+        clone!(session, renderer);
+        ApiFuture::spawn(async move {
+            renderer.draw(async { Ok(session.get_view()) }).await?;
+            Ok(())
         })
-    }
+    })
+}
 
-    /// Create a `Callback` that resizes from the current `View` and `Plugin`.
-    fn resize_callback(&self) -> Callback<()> {
-        clone!(self.renderer(), self.session());
-        Callback::from(move |_| {
-            clone!(renderer, session);
-            ApiFuture::spawn(async move {
-                if !renderer.is_plugin_activated()? {
-                    update_and_render(session, renderer).await?
-                } else {
-                    renderer.resize().await?;
-                }
+/// Create a [`Callback`] that resizes from the current `View` and `Plugin`.
+pub fn resize_callback(session: &Session, renderer: &Renderer) -> Callback<()> {
+    clone!(session, renderer);
+    Callback::from(move |_| {
+        clone!(renderer, session);
+        ApiFuture::spawn(async move {
+            if !renderer.is_plugin_activated()? {
+                update_and_render_inner(session, renderer).await?
+            } else {
+                renderer.resize().await?;
+            }
 
-                Ok(())
-            })
+            Ok(())
         })
-    }
+    })
+}
 
-    /// Apply a `ViewConfigUpdate` to the current `View` and render.
-    fn update_and_render(&self, update: ViewConfigUpdate) -> ApiResult<ApiFuture<()>> {
-        self.session().update_view_config(update)?;
-        clone!(self.session(), self.renderer());
-        Ok(ApiFuture::new(update_and_render(session, renderer)))
-    }
+/// Apply a `ViewConfigUpdate` to the current `View` and render.
+pub fn update_and_render(
+    session: &Session,
+    renderer: &Renderer,
+    update: ViewConfigUpdate,
+) -> ApiResult<ApiFuture<()>> {
+    session.update_view_config(update)?;
+    clone!(session, renderer);
+    Ok(ApiFuture::new(update_and_render_inner(session, renderer)))
+}
 
-    fn just_render(&self) -> ApiResult<ApiFuture<()>> {
-        clone!(self.session(), self.renderer());
-        Ok(ApiFuture::new(update_and_render(session, renderer)))
-    }
+/// Re-render the current `View` and `Plugin` without applying a new
+/// `ViewConfigUpdate`.
+pub fn just_render(session: &Session, renderer: &Renderer) -> ApiResult<ApiFuture<()>> {
+    clone!(session, renderer);
+    Ok(ApiFuture::new(update_and_render_inner(session, renderer)))
 }
 
 #[tracing::instrument(level = "debug", skip(session, renderer))]
-async fn update_and_render(session: Session, renderer: Renderer) -> ApiResult<()> {
+async fn update_and_render_inner(session: Session, renderer: Renderer) -> ApiResult<()> {
     // The previous call which acquired the lock errored, so skip this render
     if session.get_error().is_some() {
         return Ok(());
     }
 
-    renderer.apply_pending_plugin()?;
+    let plugin_swapped = renderer.apply_pending_plugin()?;
+    if plugin_swapped {
+        // `commit_plugin_idx` already restored the new plugin from its
+        // raw bucket; re-run with the materialized snapshot so any
+        // `include: true` schema defaults (e.g. Datagrid's
+        // `fg_gradient` when `number_fg_mode = "bar"`) make it into
+        // the plugin's state before the first draw. The Session is in
+        // scope here but not at `commit_plugin_idx`'s call sites in
+        // the column-selector tree, so we do the second restore at
+        // the caller instead of plumbing `&Session` through every
+        // `apply_pending_plugin` site.
+        let view_config_snapshot = session.get_view_config().clone();
+        let plugin_token = wasm_bindgen::JsValue::from_serde_ext(&renderer.get_plugin_config())
+            .unwrap_or(wasm_bindgen::JsValue::NULL);
+        let columns_config =
+            renderer.all_columns_configs_materialized(&view_config_snapshot, &session);
+        renderer
+            .get_active_plugin()?
+            .restore(&plugin_token, Some(&columns_config))?;
+    }
+
     let view = session.validate().await?;
     renderer.draw(view.create_view()).await
 }
-
-impl<T: HasRenderer + HasSession> UpdateAndRender for T {}

package/src/rust/{components/containers/trap_door_panel.rs → tasks/update_theme.rs}

@@ -10,41 +10,42 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use yew::*;
+//! Theme reset / set task. Replaces the inlined StatusBar callback that
+//! reached into `Session::get_view()` for the post-update restyle.
 
-#[derive(Properties)]
-pub struct TrapDoorPanelProps {
-    pub id: Option<&'static str>,
-    pub class: Option<&'static str>,
-    pub children: Children,
-}
+use perspective_js::utils::*;
 
-impl PartialEq for TrapDoorPanelProps {
-    fn eq(&self, _other: &Self) -> bool {
-        false
-    }
-}
+use crate::presentation::Presentation;
+use crate::renderer::Renderer;
+use crate::session::Session;
 
-/// A simple panel with an invisible inner `<div>` which stretches to fit the
-/// width of the container, but will not shrink (unless the state is reset).
-#[function_component(TrapDoorPanel)]
-pub fn trap_door_panel(props: &TrapDoorPanelProps) -> Html {
-    let sizer = use_node_ref();
-    let width = use_state_eq(|| 0.0);
-    use_effect_with((width.setter(), sizer.clone()), |(width, sizer)| {
-        width.set(
-            sizer
-                .cast::<web_sys::HtmlElement>()
-                .unwrap()
-                .get_bounding_client_rect()
-                .width(),
-        )
-    });
+/// Apply a theme change and restyle the active view.
+///
+/// `theme = None` resets to the first available theme; `theme = Some(name)`
+/// sets the named theme. In both cases the post-update path is the same:
+/// fetch the current view from the session and ask the renderer to
+/// re-style it. Components dispatch this task instead of reading
+/// `Session::get_view()` themselves.
+pub fn update_theme(
+    session: &Session,
+    renderer: &Renderer,
+    presentation: &Presentation,
+    theme: Option<String>,
+) {
+    let session = session.clone();
+    let renderer = renderer.clone();
+    let presentation = presentation.clone();
+    ApiFuture::spawn(async move {
+        match theme {
+            Some(name) => {
+                presentation.set_theme_name(Some(&name)).await?;
+            },
+            None => {
+                presentation.reset_theme().await?;
+            },
+        }
 
-    html! {
-        <div id={props.id} class={props.class} ref={sizer}>
-            { props.children.clone() }
-            <div class="scroll-panel-auto-width" style={format!("width:{}px", *width)} />
-        </div>
-    }
+        let view = session.get_view().into_apierror()?;
+        renderer.restyle_all(&view).await
+    });
 }

package/src/rust/tasks/validate_expression.rs

@@ -0,0 +1,61 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+//! Per-keystroke expression validation with stale-result rejection.
+//!
+//! The component owns a monotonically increasing `req_id` and increments
+//! it on each keystroke. The dispatched task echoes the `req_id` back in
+//! its result payload so the component can drop validations that
+//! resolved out-of-order.
+
+use perspective_client::ExprValidationError;
+use perspective_js::utils::*;
+use yew::prelude::*;
+
+use crate::queries::validate_expr;
+use crate::session::Session;
+
+/// Result payload from a dispatched validation task.
+#[derive(Debug, Clone)]
+pub struct ExprValidation {
+    /// Request id echoed from the dispatch site so the caller can drop
+    /// stale results from races between rapid keystrokes.
+    pub req_id: u64,
+    /// `None` if the expression validated cleanly; otherwise the
+    /// per-expression error returned by the engine.
+    pub error: Option<ExprValidationError>,
+}
+
+/// Validate `expr` against the active table; dispatch the result back
+/// through `cb` with the given `req_id`. Errors from the engine are
+/// logged to the console and surfaced as `error: None` (i.e. the
+/// expression is treated as valid, matching the prior in-line behavior
+/// from `expression_editor.rs::SetExpr`).
+pub fn validate_expression(
+    session: &Session,
+    cb: Callback<ExprValidation>,
+    req_id: u64,
+    expr: String,
+) {
+    let session = session.clone();
+    ApiFuture::spawn(async move {
+        let error = match validate_expr(&session, &expr).await {
+            Ok(x) => x,
+            Err(err) => {
+                web_sys::console::error_1(&format!("{err:?}").into());
+                None
+            },
+        };
+        cb.emit(ExprValidation { req_id, error });
+        Ok::<_, ApiError>(())
+    });
+}

package/src/rust/utils/browser/selection.rs

@@ -51,16 +51,16 @@ impl CaretPosition for web_sys::HtmlElement {
     }
 
     fn get_caret_position(&self) -> Option<u32> {
-        maybe! {
+        (|| -> ApiResult<u32> {
             let root = self.get_root_node().unchecked_into::<web_sys::Document>();
             let selection = root.get_selection()?.into_apierror()?;
             if selection.range_count() > 0 {
                 let range = selection.get_range_at(0)?;
-                range.end_offset()
+                Ok(range.end_offset()?)
             } else {
-                Err(wasm_bindgen::JsValue::UNDEFINED)
+                Err(wasm_bindgen::JsValue::UNDEFINED.into())
             }
-        }
+        })()
         .ok()
     }
 }

package/src/rust/utils/mod.rs

@@ -41,66 +41,3 @@ pub use perspective_client::clone;
 pub use ptr_eq_rc::*;
 pub use pubsub::*;
 pub use weak_scope::*;
-
-/// An implementaiton of `try_blocks` feature in a non-nightly macro.
-#[macro_export]
-macro_rules! maybe {
-    ($($exp:stmt);*) => {{
-        let x = ({
-            #[inline(always)]
-            || {
-                $($exp)*
-            }
-        })();
-        x
-    }};
-}
-
-/// As `maybe!`, but returns `()` and just logs errors.
-#[macro_export]
-macro_rules! maybe_log {
-    ($($exp:tt)+) => {{
-        let x = ({
-            #[inline(always)]
-            || {
-                {
-                    $($exp)+
-                };
-                Ok(())
-            }
-        })();
-        x.unwrap_or_else(|e| web_sys::console::warn_1(&e))
-    }};
-}
-
-#[macro_export]
-macro_rules! maybe_log_or_default {
-    ($($exp:tt)+) => {{
-        let x = ({
-            #[inline(always)]
-            || {
-                $($exp)+
-            }
-        })();
-        x.unwrap_or_else(|e| {
-            web_sys::console::warn_1(&e);
-            Default::default()
-        })
-    }};
-}
-
-#[macro_export]
-macro_rules! maybe_or_default {
-    ($($exp:tt)+) => {{
-        let x = ({
-            #[inline(always)]
-            || {
-                $($exp)+
-            }
-        })();
-        x.unwrap_or_else(|| {
-            web_sys::console::warn_1("Unwrap on Noner");
-            Default::default()
-        })
-    }};
-}

package/src/svg/datagrid-select-row-tree.svg

@@ -0,0 +1,13 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <defs></defs>
+    <rect x="3" y="4" width="15" height="1" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0px;">
+    </rect>
+    <rect x="5" y="6.973" width="13" height="4"
+        style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0px;"></rect>
+    <rect x="7" y="10" width="11" height="1" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0px;">
+    </rect>
+    <rect x="5" y="13" width="13" height="1" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0px;">
+    </rect>
+    <rect x="3" y="16" width="15" height="1" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0px;">
+    </rect>
+</svg>

package/src/svg/mega-menu-icons-density.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 80 70" style="enable-background:new 0 0 80 70;" xml:space="preserve" width="40" height="35">
+<style type="text/css">
+	.st0{fill:#042121;}
+</style>
+<g id="Layer_1">
+	<g>
+		<path class="st0" d="M11,58c-0.6,0-1-0.4-1-1V10H8v47c0,1.7,1.3,3,3,3h61v-2H11z"/>
+		<circle class="st0" cx="28" cy="38" r="2.5"/>
+		<circle class="st0" cx="28" cy="38" r="6" fill="none" stroke="#042121" stroke-width="0.9" opacity="0.7"/>
+		<circle class="st0" cx="28" cy="38" r="10" fill="none" stroke="#042121" stroke-width="0.6" opacity="0.4"/>
+		<circle class="st0" cx="28" cy="38" r="14" fill="none" stroke="#042121" stroke-width="0.45" opacity="0.22"/>
+		<circle class="st0" cx="52" cy="30" r="2.5"/>
+		<circle class="st0" cx="52" cy="30" r="6" fill="none" stroke="#042121" stroke-width="0.9" opacity="0.7"/>
+		<circle class="st0" cx="52" cy="30" r="10" fill="none" stroke="#042121" stroke-width="0.6" opacity="0.4"/>
+		<circle class="st0" cx="52" cy="30" r="14" fill="none" stroke="#042121" stroke-width="0.45" opacity="0.22"/>
+		<circle class="st0" cx="62" cy="46" r="1.6"/>
+		<circle class="st0" cx="62" cy="46" r="4" fill="none" stroke="#042121" stroke-width="0.7" opacity="0.55"/>
+		<circle class="st0" cx="62" cy="46" r="7" fill="none" stroke="#042121" stroke-width="0.45" opacity="0.3"/>
+	</g>
+</g>
+</svg>

package/src/svg/mega-menu-icons-map-density.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 80 70" style="enable-background:new 0 0 80 70;" xml:space="preserve" width="40" height="35">
+<style type="text/css">
+	.st0{fill:#042121;}
+</style>
+<g id="Layer_5">
+	<g>
+		<path class="st0" d="M71.5,57.9l-4.9-22c-0.2-0.9-1-1.6-2-1.6H50.4l3.5-6.8c2-3.8,1.8-8.5-0.4-12.2c-2.3-3.7-6.2-5.8-10.5-5.8
+			s-8.2,2.2-10.5,5.8c-2.3,3.7-2.4,8.3-0.4,12.2l3.5,6.8H15.4c-0.9,0-1.7,0.6-2,1.6l-4.9,22c-0.1,0.6,0,1.2,0.4,1.7
+			c0.4,0.5,1,0.8,1.6,0.8h59c0.6,0,1.2-0.3,1.6-0.7C71.4,59.2,71.6,58.5,71.5,57.9z M34.2,16.5c1.9-3.1,5.2-4.9,8.8-4.9
+			s6.9,1.8,8.8,4.9c1.9,3.1,2,7,0.4,10.2L43,44.2l-9.1-17.5C32.2,23.5,32.3,19.6,34.2,16.5z M10.5,58.4l4.9-22h21.2L43,48.5
+			l6.3-12.2l15.2,0l4.9,22H10.5z"/>
+		<path class="st0" d="M50,21.4c0-3.9-3.1-7-7-7s-7,3.1-7,7s3.1,7,7,7S50,25.2,50,21.4z M38,21.4c0-2.8,2.2-5,5-5s5,2.2,5,5
+			s-2.2,5-5,5S38,24.1,38,21.4z"/>
+		<circle class="st0" cx="22" cy="51" r="1.6"/>
+		<circle cx="22" cy="51" r="4" fill="none" stroke="#042121" stroke-width="0.7" opacity="0.55"/>
+		<circle cx="22" cy="51" r="6.5" fill="none" stroke="#042121" stroke-width="0.45" opacity="0.3"/>
+		<circle class="st0" cx="60" cy="49" r="1.6"/>
+		<circle cx="60" cy="49" r="4" fill="none" stroke="#042121" stroke-width="0.7" opacity="0.55"/>
+		<circle cx="60" cy="49" r="6.5" fill="none" stroke="#042121" stroke-width="0.45" opacity="0.3"/>
+	</g>
+</g>
+</svg>

package/src/svg/mega-menu-icons-map-line.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 80 70" style="enable-background:new 0 0 80 70;" xml:space="preserve" width="40" height="35">
+<style type="text/css">
+	.st0{fill:#042121;}
+</style>
+<g id="Layer_5">
+	<g>
+		<path class="st0" d="M71.5,57.9l-4.9-22c-0.2-0.9-1-1.6-2-1.6H50.4l3.5-6.8c2-3.8,1.8-8.5-0.4-12.2c-2.3-3.7-6.2-5.8-10.5-5.8
+			s-8.2,2.2-10.5,5.8c-2.3,3.7-2.4,8.3-0.4,12.2l3.5,6.8H15.4c-0.9,0-1.7,0.6-2,1.6l-4.9,22c-0.1,0.6,0,1.2,0.4,1.7
+			c0.4,0.5,1,0.8,1.6,0.8h59c0.6,0,1.2-0.3,1.6-0.7C71.4,59.2,71.6,58.5,71.5,57.9z M34.2,16.5c1.9-3.1,5.2-4.9,8.8-4.9
+			s6.9,1.8,8.8,4.9c1.9,3.1,2,7,0.4,10.2L43,44.2l-9.1-17.5C32.2,23.5,32.3,19.6,34.2,16.5z M10.5,58.4l4.9-22h21.2L43,48.5
+			l6.3-12.2l15.2,0l4.9,22H10.5z"/>
+		<path class="st0" d="M50,21.4c0-3.9-3.1-7-7-7s-7,3.1-7,7s3.1,7,7,7S50,25.2,50,21.4z M38,21.4c0-2.8,2.2-5,5-5s5,2.2,5,5
+			s-2.2,5-5,5S38,24.1,38,21.4z"/>
+		<polyline points="13,53 20,48.5 27,51 33,46.5 53,47.5 60,52.5 68,49.5" fill="none" stroke="#042121" stroke-width="1.4" stroke-linejoin="round" stroke-linecap="round"/>
+	</g>
+</g>
+</svg>

package/src/themes/botanical.css

@@ -55,64 +55,38 @@ perspective-viewer[theme="Botanical"] {
     --psp-datagrid--pos-cell--color: #7bc96f;
     --psp-datagrid--neg-cell--color: #ebac21;
 
-    /* perspective-viewer-botanical--d3fc */
-    --psp-d3fc--legend--color: #b8c9ad;
-    --psp-d3fc--treemap--labels: #e0ead8;
-    --psp-d3fc--treemap--hover-highlight: #e0ead8;
-    --psp-d3fc--tooltip--color: #e0ead8;
-    --psp-d3fc--axis-ticks--color: #b8c9ad;
-    --psp-d3fc--axis-lines--color: #526b4a;
-    --psp-d3fc--gridline--color: #2a4228;
-    --psp-d3fc--tooltip--background: rgba(30, 52, 32, 1);
-    --psp-d3fc--tooltip--border-color: #1a2e1a;
-    --psp-d3fc--legend--background: var(--psp--background-color);
-
-    --psp-d3fc--series--color: rgb(90, 158, 75);
-    --psp-d3fc--series-1--color: rgb(90, 158, 75);
-    --psp-d3fc--series-2--color: rgb(206, 176, 104);
-    --psp-d3fc--series-3--color: rgb(160, 110, 180);
-    --psp-d3fc--series-4--color: rgb(80, 170, 150);
-    --psp-d3fc--series-5--color: rgb(140, 170, 90);
-    --psp-d3fc--series-6--color: rgb(200, 120, 140);
-    --psp-d3fc--series-7--color: rgb(100, 150, 190);
-    --psp-d3fc--series-8--color: rgb(210, 140, 80);
-    --psp-d3fc--series-9--color: rgb(130, 120, 190);
-    --psp-d3fc--series-10--color: rgb(170, 200, 110);
-
-    --psp-d3fc--full-gradient--background: linear-gradient(
+    /* perspective-viewer-botanical--webgl */
+    --psp-charts--legend--color: #b8c9ad;
+    --psp-charts--treemap--labels: #e0ead8;
+    --psp-charts--treemap--hover-highlight: #e0ead8;
+    --psp-charts--tooltip--color: #e0ead8;
+    --psp-charts--axis-ticks--color: #b8c9ad;
+    --psp-charts--axis-lines--color: #526b4a;
+    --psp-charts--gridline--color: #2a4228;
+    --psp-charts--tooltip--background: rgba(30, 52, 32, 1);
+    --psp-charts--tooltip--border-color: #1a2e1a;
+    --psp-charts--legend--background: var(--psp--background-color);
+
+    --psp-charts--series--color: rgb(90, 158, 75);
+    --psp-charts--series-1--color: rgb(90, 158, 75);
+    --psp-charts--series-2--color: rgb(206, 176, 104);
+    --psp-charts--series-3--color: rgb(160, 110, 180);
+    --psp-charts--series-4--color: rgb(80, 170, 150);
+    --psp-charts--series-5--color: rgb(140, 170, 90);
+    --psp-charts--series-6--color: rgb(200, 120, 140);
+    --psp-charts--series-7--color: rgb(100, 150, 190);
+    --psp-charts--series-8--color: rgb(210, 140, 80);
+    --psp-charts--series-9--color: rgb(130, 120, 190);
+    --psp-charts--series-10--color: rgb(170, 200, 110);
+
+    --psp-charts--gradient--background: linear-gradient(
         #e8836a 0%,
         #1a2e1a 50%,
         #5a9e4b 100%
     );
 
-    --psp-d3fc--pos-gradient--background: linear-gradient(
-        #1a2e1a 0%,
-        #5a9e4b 100%
-    );
-    --psp-d3fc--neg-gradient--background: linear-gradient(
-        #e8836a 0%,
-        #1a2e1a 100%
-    );
-
-    /* perspective-viewer-botanical--openlayers */
-    --psp-openlayers--tile-url: "http://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png";
-    --psp-openlayers--attribution--filter: invert(1) hue-rotate(180deg);
-    --psp-openlayers--element--background: #1e3420;
-    --psp-openlayers--category-1--color: rgb(90, 158, 75);
-    --psp-openlayers--category-2--color: rgb(206, 176, 104);
-    --psp-openlayers--category-3--color: rgb(160, 110, 180);
-    --psp-openlayers--category-4--color: rgb(80, 170, 150);
-    --psp-openlayers--category-5--color: rgb(140, 170, 90);
-    --psp-openlayers--category-6--color: rgb(200, 120, 140);
-    --psp-openlayers--category-7--color: rgb(100, 150, 190);
-    --psp-openlayers--category-8--color: rgb(210, 140, 80);
-    --psp-openlayers--category-9--color: rgb(130, 120, 190);
-    --psp-openlayers--category-10--color: rgb(170, 200, 110);
-    --psp-openlayers--gradient--background: linear-gradient(
-        #e8836a 0%,
-        #1a2e1a 50%,
-        #5a9e4b 100%
-    );
+    --psp-charts--map-tiles--url: "http://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png";
+    --psp-charts--map-tiles--attribution-: "I <3 Open Source";
 }
 
 perspective-copy-menu[theme="Botanical"],

package/src/themes/defaults.css

@@ -22,6 +22,24 @@ perspective-date-column-style,
 perspective-datetime-column-style,
 perspective-number-column-style,
 perspective-string-column-style {
+    /* Colors */
+    --psp--color: #161616;
+
+    color: var(--psp--color);
+    background-color: transparent;
+
+    --psp-inactive--color: #ababab;
+    --psp-inactive--border-color: #dadada;
+    --psp-active--color: #2670a9;
+    --psp-error--color: #ff471e;
+    --psp--background-color: #ffffff;
+    --psp-icon-overflow-hint--color: rgba(0, 0, 0, 0.2);
+    --psp-select--background-color: none;
+    --psp-warning--background: #042121;
+    --psp-warning--color: #fdfffd;
+
+    /* TODO deprecate me */
+    --psp-icon-overflow-hint--color: #fdfffd;
     /* Colors */
     --psp-placeholder--background: #8b868045;
 
@@ -50,30 +68,30 @@ perspective-string-column-style {
         --psp-icon--select-arrow-light--mask-image
     );
 
-    /* D3FC */
-    --psp-label--d3fc-y1--content: "arrow_upward";
-    --psp-label--d3fc-y2--content: "arrow_downward";
-    --psp-d3fc--treemap-axis--lines: none;
-    --psp-d3fc--tooltip--background-color: rgba(155, 155, 155, 0.8);
-    --psp-d3fc--tooltip--color: #161616;
-    --psp-d3fc--tooltip--border-color: #fff;
-    --psp-d3fc--tooltip--box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
-    --psp-d3fc--gridline--color: #eaedef;
-    --psp-d3fc--axis-ticks--color: #161616;
-    --psp-d3fc--axis-lines--color: #c5c9d0;
-    --psp-d3fc--legend--background: var(--psp--background-color);
-    --psp-d3fc--series--color: rgba(31, 119, 180, 0.8);
-    --psp-d3fc--series-1--color: #0366d6;
-    --psp-d3fc--series-2--color: #ff7f0e;
-    --psp-d3fc--series-3--color: #2ca02c;
-    --psp-d3fc--series-4--color: #d62728;
-    --psp-d3fc--series-5--color: #9467bd;
-    --psp-d3fc--series-6--color: #8c564b;
-    --psp-d3fc--series-7--color: #e377c2;
-    --psp-d3fc--series-8--color: #7f7f7f;
-    --psp-d3fc--series-9--color: #bcbd22;
-    --psp-d3fc--series-10--color: #17becf;
-    --psp-d3fc--full-gradient--background: linear-gradient(
+    /* webgl */
+    --psp-label--webgl-y1--content: "arrow_upward";
+    --psp-label--webgl-y2--content: "arrow_downward";
+    --psp-charts--treemap-axis--lines: none;
+    --psp-charts--tooltip--background-color: rgba(155, 155, 155, 0.8);
+    --psp-charts--tooltip--color: #161616;
+    --psp-charts--tooltip--border-color: #fff;
+    --psp-charts--tooltip--box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+    --psp-charts--gridline--color: #eaedef;
+    --psp-charts--axis-ticks--color: #161616;
+    --psp-charts--axis-lines--color: #c5c9d0;
+    --psp-charts--legend--background: var(--psp--background-color);
+    --psp-charts--series--color: rgba(31, 119, 180, 0.8);
+    --psp-charts--series-1--color: #0366d6;
+    --psp-charts--series-2--color: #ff7f0e;
+    --psp-charts--series-3--color: #2ca02c;
+    --psp-charts--series-4--color: #d62728;
+    --psp-charts--series-5--color: #9467bd;
+    --psp-charts--series-6--color: #8c564b;
+    --psp-charts--series-7--color: #e377c2;
+    --psp-charts--series-8--color: #7f7f7f;
+    --psp-charts--series-9--color: #bcbd22;
+    --psp-charts--series-10--color: #17becf;
+    --psp-charts--gradient--background: linear-gradient(
         #4d342f 0%,
         #e4521b 22.5%,
         #feeb65 42.5%,
@@ -82,18 +100,6 @@ perspective-string-column-style {
         #42b3d5 67.5%,
         #1a237e 100%
     );
-    --psp-d3fc--pos-gradient--background: linear-gradient(
-        #f0f0f0 0%,
-        #dcedc8 10%,
-        #42b3d5 50%,
-        #1a237e 100%
-    );
-    --psp-d3fc--neg-gradient--background: linear-gradient(
-        #4d342f 0%,
-        #e4521b 50%,
-        #feeb65 90%,
-        #f0f0f0 100%
-    );
 
     /* Datagrid */
     --psp-datagrid--pos-cell--color: #338dcd;