@perspective-dev/viewer 5.2.0 → 5.3.0

package/src/svg/lock.svg

@@ -0,0 +1,7 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="6.5" y="9.5" width="8" height="7" stroke="#666" />
+    <path d="M13 9V8.5C13 7.11929 11.8807 6 10.5 6V6C9.11929 6 8 7.11929 8 8.5V9" stroke="#666" />
+    <path
+        d="M11.4911 13C11.4911 13.5523 11.0434 14 10.4911 14C9.93878 14 9.49107 13.5523 9.49107 13C9.49107 12.4477 9.93878 12 10.4911 12C11.0434 12 11.4911 12.4477 11.4911 13Z"
+        fill="#666" />
+</svg>

package/src/themes/botanical.css

@@ -81,6 +81,16 @@ perspective-viewer [theme="Botanical"] {
     --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-datagrid--series-1--color: rgb(90, 158, 75);
+    --psp-datagrid--series-2--color: rgb(206, 176, 104);
+    --psp-datagrid--series-3--color: rgb(160, 110, 180);
+    --psp-datagrid--series-4--color: rgb(80, 170, 150);
+    --psp-datagrid--series-5--color: rgb(140, 170, 90);
+    --psp-datagrid--series-6--color: rgb(200, 120, 140);
+    --psp-datagrid--series-7--color: rgb(100, 150, 190);
+    --psp-datagrid--series-8--color: rgb(210, 140, 80);
+    --psp-datagrid--series-9--color: rgb(130, 120, 190);
+    --psp-datagrid--series-10--color: rgb(170, 200, 110);
 
     --psp-charts--gradient--background: linear-gradient(
         #e8836a 0%,

package/src/themes/defaults.css

@@ -104,6 +104,16 @@ perspective-string-column-style {
     --psp-charts--series-8--color: #7f7f7f;
     --psp-charts--series-9--color: #bcbd22;
     --psp-charts--series-10--color: #17becf;
+    --psp-datagrid--series-1--color: #0366d6;
+    --psp-datagrid--series-2--color: #ff7f0e;
+    --psp-datagrid--series-3--color: #2ca02c;
+    --psp-datagrid--series-4--color: #d62728;
+    --psp-datagrid--series-5--color: #9467bd;
+    --psp-datagrid--series-6--color: #8c564b;
+    --psp-datagrid--series-7--color: #e377c2;
+    --psp-datagrid--series-8--color: #7f7f7f;
+    --psp-datagrid--series-9--color: #bcbd22;
+    --psp-datagrid--series-10--color: #17becf;
     --psp-charts--gradient--background: linear-gradient(
         #4d342f 0%,
         #e4521b 22.5%,
@@ -167,6 +177,8 @@ perspective-string-column-style {
     --psp-openlayers--attribution--filter: initial;
     --psp-charts--series-11--color: initial;
     --psp-charts--series-12--color: initial;
+    --psp-datagrid--series-11--color: initial;
+    --psp-datagrid--series-12--color: initial;
     --psp-charts--map-tiles--url: initial;
     --psp-column-type--boolean--color: initial;
     --psp-column-type--date--color: initial;

package/src/themes/dracula.css

@@ -78,6 +78,16 @@ perspective-viewer [theme="Dracula"] {
     --psp-charts--series-8--color: rgb(221, 99, 103);
     --psp-charts--series-9--color: rgb(120, 104, 206);
     --psp-charts--series-10--color: rgb(23, 166, 123);
+    --psp-datagrid--series-1--color: rgb(71, 120, 194);
+    --psp-datagrid--series-2--color: rgb(204, 120, 48);
+    --psp-datagrid--series-3--color: rgb(158, 84, 192);
+    --psp-datagrid--series-4--color: rgb(51, 150, 153);
+    --psp-datagrid--series-5--color: rgb(102, 114, 143);
+    --psp-datagrid--series-6--color: rgb(211, 103, 189);
+    --psp-datagrid--series-7--color: rgb(109, 124, 77);
+    --psp-datagrid--series-8--color: rgb(221, 99, 103);
+    --psp-datagrid--series-9--color: rgb(120, 104, 206);
+    --psp-datagrid--series-10--color: rgb(23, 166, 123);
     --psp-charts--gradient--background: linear-gradient(
         #dd6367 0%,
         #242526 50%,
@@ -148,6 +158,13 @@ perspective-viewer [theme="Dracula"] {
     --psp-charts--series-5--color: var(--theme-purple);
     --psp-charts--series-6--color: var(--theme-pink);
     --psp-charts--series-7--color: var(--theme-orange);
+    --psp-datagrid--series-1--color: var(--theme-blue);
+    --psp-datagrid--series-2--color: var(--theme-red);
+    --psp-datagrid--series-3--color: var(--theme-green);
+    --psp-datagrid--series-4--color: var(--theme-yellow);
+    --psp-datagrid--series-5--color: var(--theme-purple);
+    --psp-datagrid--series-6--color: var(--theme-pink);
+    --psp-datagrid--series-7--color: var(--theme-orange);
 
     --psp-charts--gradient--background: linear-gradient(
         var(--theme-red),

package/src/themes/gruvbox-dark.css

@@ -78,6 +78,16 @@ perspective-viewer [theme="Gruvbox Dark"] {
     --psp-charts--series-8--color: rgb(221, 99, 103);
     --psp-charts--series-9--color: rgb(120, 104, 206);
     --psp-charts--series-10--color: rgb(23, 166, 123);
+    --psp-datagrid--series-1--color: rgb(71, 120, 194);
+    --psp-datagrid--series-2--color: rgb(204, 120, 48);
+    --psp-datagrid--series-3--color: rgb(158, 84, 192);
+    --psp-datagrid--series-4--color: rgb(51, 150, 153);
+    --psp-datagrid--series-5--color: rgb(102, 114, 143);
+    --psp-datagrid--series-6--color: rgb(211, 103, 189);
+    --psp-datagrid--series-7--color: rgb(109, 124, 77);
+    --psp-datagrid--series-8--color: rgb(221, 99, 103);
+    --psp-datagrid--series-9--color: rgb(120, 104, 206);
+    --psp-datagrid--series-10--color: rgb(23, 166, 123);
     --psp-charts--gradient--background: linear-gradient(
         #dd6367 0%,
         #242526 50%,
@@ -159,6 +169,16 @@ perspective-viewer [theme="Gruvbox Dark"] {
     --psp-charts--series-8--color: var(--theme-alt-green);
     --psp-charts--series-9--color: var(--theme-alt-purple);
     --psp-charts--series-10--color: var(--theme-alt-aqua);
+    --psp-datagrid--series-1--color: var(--theme-blue);
+    --psp-datagrid--series-2--color: var(--theme-red);
+    --psp-datagrid--series-3--color: var(--theme-green);
+    --psp-datagrid--series-4--color: var(--theme-purple);
+    --psp-datagrid--series-5--color: var(--theme-aqua);
+    --psp-datagrid--series-6--color: var(--theme-alt-blue);
+    --psp-datagrid--series-7--color: var(--theme-alt-red);
+    --psp-datagrid--series-8--color: var(--theme-alt-green);
+    --psp-datagrid--series-9--color: var(--theme-alt-purple);
+    --psp-datagrid--series-10--color: var(--theme-alt-aqua);
 
     --psp-charts--gradient--background: linear-gradient(
         var(--theme-alt-red),

package/src/themes/gruvbox.css

@@ -75,6 +75,16 @@ perspective-viewer [theme="Gruvbox Light"] {
     --psp-charts--series-8--color: var(--theme-alt-green);
     --psp-charts--series-9--color: var(--theme-alt-purple);
     --psp-charts--series-10--color: var(--theme-alt-aqua);
+    --psp-datagrid--series-1--color: var(--theme-blue);
+    --psp-datagrid--series-2--color: var(--theme-red);
+    --psp-datagrid--series-3--color: var(--theme-green);
+    --psp-datagrid--series-4--color: var(--theme-purple);
+    --psp-datagrid--series-5--color: var(--theme-aqua);
+    --psp-datagrid--series-6--color: var(--theme-alt-blue);
+    --psp-datagrid--series-7--color: var(--theme-alt-red);
+    --psp-datagrid--series-8--color: var(--theme-alt-green);
+    --psp-datagrid--series-9--color: var(--theme-alt-purple);
+    --psp-datagrid--series-10--color: var(--theme-alt-aqua);
 
     --psp-charts--gradient--background: linear-gradient(
         var(--theme-alt-red),

package/src/themes/icons.css

@@ -67,6 +67,7 @@ perspective-viewer-tab {
     --psp-icon--status-ok--mask-image: url(../svg/status_ok.svg);
     --psp-icon--export--mask-image: url("../svg/export-icon.svg");
     --psp-icon--free-scroll--mask-image: url("../svg/free-scroll-icon.svg");
+    --psp-icon--lock--mask-image: url("../svg/lock.svg");
     --psp-icon--reset--mask-image: url("../svg/revert-icon.svg");
     --psp-icon--copy--mask-image: url("../svg/duplicate-icon.svg");
     --psp-icon--theme--mask-image: url("../svg/theme-icon.svg");

package/src/themes/monokai.css

@@ -78,6 +78,16 @@ perspective-viewer [theme="Monokai"] {
     --psp-charts--series-8--color: rgb(221, 99, 103);
     --psp-charts--series-9--color: rgb(120, 104, 206);
     --psp-charts--series-10--color: rgb(23, 166, 123);
+    --psp-datagrid--series-1--color: rgb(71, 120, 194);
+    --psp-datagrid--series-2--color: rgb(204, 120, 48);
+    --psp-datagrid--series-3--color: rgb(158, 84, 192);
+    --psp-datagrid--series-4--color: rgb(51, 150, 153);
+    --psp-datagrid--series-5--color: rgb(102, 114, 143);
+    --psp-datagrid--series-6--color: rgb(211, 103, 189);
+    --psp-datagrid--series-7--color: rgb(109, 124, 77);
+    --psp-datagrid--series-8--color: rgb(221, 99, 103);
+    --psp-datagrid--series-9--color: rgb(120, 104, 206);
+    --psp-datagrid--series-10--color: rgb(23, 166, 123);
     --psp-charts--gradient--background: linear-gradient(
         #dd6367 0%,
         #242526 50%,
@@ -157,6 +167,18 @@ perspective-viewer [theme="Monokai"] {
     --psp-charts--series-10--color: #e6db74;
     --psp-charts--series-11--color: #a6e22e;
     --psp-charts--series-12--color: #ae81ff;
+    --psp-datagrid--series-1--color: #78dce8;
+    --psp-datagrid--series-2--color: #ff6188;
+    --psp-datagrid--series-3--color: #fc9867;
+    --psp-datagrid--series-4--color: #ffd866;
+    --psp-datagrid--series-5--color: #a9dc76;
+    --psp-datagrid--series-6--color: #ab9df2;
+    --psp-datagrid--series-7--color: #66d9ef;
+    --psp-datagrid--series-8--color: #f92672;
+    --psp-datagrid--series-9--color: #fd971f;
+    --psp-datagrid--series-10--color: #e6db74;
+    --psp-datagrid--series-11--color: #a6e22e;
+    --psp-datagrid--series-12--color: #ae81ff;
 
     --psp-charts--gradient--background: linear-gradient(
         #ff6188 0%,

package/src/themes/phosphor.css

@@ -98,6 +98,11 @@ perspective-viewer [theme="Phosphor"] {
     --psp-charts--series-3--color: #ff0055;
     --psp-charts--series-4--color: #ffd700;
     --psp-charts--series-5--color: #7fffd4;
+    --psp-datagrid--series-1--color: #00ff41;
+    --psp-datagrid--series-2--color: #00bfff;
+    --psp-datagrid--series-3--color: #ff0055;
+    --psp-datagrid--series-4--color: #ffd700;
+    --psp-datagrid--series-5--color: #7fffd4;
 
     --psp-charts--gradient--background: linear-gradient(
         #ff3333 0%,

package/src/themes/pro-dark.css

@@ -81,6 +81,16 @@ perspective-viewer [theme="Pro Dark"] {
     --psp-charts--series-8--color: rgb(221, 99, 103);
     --psp-charts--series-9--color: rgb(120, 104, 206);
     --psp-charts--series-10--color: rgb(23, 166, 123);
+    --psp-datagrid--series-1--color: rgb(71, 120, 194);
+    --psp-datagrid--series-2--color: rgb(204, 120, 48);
+    --psp-datagrid--series-3--color: rgb(158, 84, 192);
+    --psp-datagrid--series-4--color: rgb(51, 150, 153);
+    --psp-datagrid--series-5--color: rgb(102, 114, 143);
+    --psp-datagrid--series-6--color: rgb(211, 103, 189);
+    --psp-datagrid--series-7--color: rgb(109, 124, 77);
+    --psp-datagrid--series-8--color: rgb(221, 99, 103);
+    --psp-datagrid--series-9--color: rgb(120, 104, 206);
+    --psp-datagrid--series-10--color: rgb(23, 166, 123);
 
     --psp-charts--gradient--background: linear-gradient(
         #dd6367 0%,

package/src/themes/solarized-dark.css

@@ -53,6 +53,13 @@ perspective-viewer [theme="Solarized Dark"] {
     --psp-charts--series-5--color: #2aa198;
     --psp-charts--series-6--color: #6c71c4;
     --psp-charts--series-7--color: #d33682;
+    --psp-datagrid--series-1--color: #268bd2;
+    --psp-datagrid--series-2--color: #cb4b16;
+    --psp-datagrid--series-3--color: #b58900;
+    --psp-datagrid--series-4--color: #859900;
+    --psp-datagrid--series-5--color: #2aa198;
+    --psp-datagrid--series-6--color: #6c71c4;
+    --psp-datagrid--series-7--color: #d33682;
     /* perspective-viewer-solarized-dark--colors */
     color: #93a1a1;
     background-color: #002b36;

package/src/themes/solarized.css

@@ -57,6 +57,13 @@ perspective-viewer [theme="Solarized"] {
 
     --psp-charts--series-6--color: #6c71c4;
     --psp-charts--series-7--color: #d33682;
+    --psp-datagrid--series-1--color: #268bd2;
+    --psp-datagrid--series-2--color: #cb4b16;
+    --psp-datagrid--series-3--color: #b58900;
+    --psp-datagrid--series-4--color: #859900;
+    --psp-datagrid--series-5--color: #2aa198;
+    --psp-datagrid--series-6--color: #6c71c4;
+    --psp-datagrid--series-7--color: #d33682;
 }
 
 x {

package/src/themes/vaporwave.css

@@ -78,6 +78,16 @@ perspective-viewer [theme="Vaporwave"] {
     --psp-charts--series-8--color: rgb(221, 99, 103);
     --psp-charts--series-9--color: rgb(120, 104, 206);
     --psp-charts--series-10--color: rgb(23, 166, 123);
+    --psp-datagrid--series-1--color: rgb(71, 120, 194);
+    --psp-datagrid--series-2--color: rgb(204, 120, 48);
+    --psp-datagrid--series-3--color: rgb(158, 84, 192);
+    --psp-datagrid--series-4--color: rgb(51, 150, 153);
+    --psp-datagrid--series-5--color: rgb(102, 114, 143);
+    --psp-datagrid--series-6--color: rgb(211, 103, 189);
+    --psp-datagrid--series-7--color: rgb(109, 124, 77);
+    --psp-datagrid--series-8--color: rgb(221, 99, 103);
+    --psp-datagrid--series-9--color: rgb(120, 104, 206);
+    --psp-datagrid--series-10--color: rgb(23, 166, 123);
     --psp-charts--gradient--background: linear-gradient(
         #dd6367 0%,
         #242526 50%,
@@ -153,6 +163,16 @@ perspective-viewer [theme="Vaporwave"] {
     --psp-charts--series-8--color: hsl(192, 99%, 25%);
     --psp-charts--series-9--color: hsl(157, 100%, 25%);
     --psp-charts--series-10--color: hsl(272, 100%, 35%);
+    --psp-datagrid--series-1--color: #01cdfe;
+    --psp-datagrid--series-2--color: #ff71ce;
+    --psp-datagrid--series-3--color: #05ffa1;
+    --psp-datagrid--series-4--color: #b967ff;
+    --psp-datagrid--series-5--color: #fffb96;
+    --psp-datagrid--series-6--color: hsl(192, 99%, 25%);
+    --psp-datagrid--series-7--color: hsl(321, 100%, 36%);
+    --psp-datagrid--series-8--color: hsl(192, 99%, 25%);
+    --psp-datagrid--series-9--color: hsl(157, 100%, 25%);
+    --psp-datagrid--series-10--color: hsl(272, 100%, 35%);
 
     --psp-charts--gradient--background: linear-gradient(
         #f3d431,

package/src/ts/perspective-viewer.ts

@@ -58,6 +58,7 @@ export type * from "./ts-rs/FilterReducer.d.ts";
 export type * from "./ts-rs/PluginStaticConfig.ts";
 export type * from "./ts-rs/ExportMethod.d.ts";
 export type * from "./ts-rs/PanelOptions.d.ts";
+export type * from "./ts-rs/SaveWorkspaceOptions.d.ts";
 export type * from "./ts-rs/ClientOptions.d.ts";
 export type * from "./ts-rs/ExportOptions.d.ts";
 export type * from "./ts-rs/GetTableOptions.d.ts";

package/src/ts/plugin.ts

@@ -93,6 +93,20 @@ export interface IPerspectiveViewerPlugin {
      */
     column_style_config?: (view_type: string, group: string) => any;
 
+    /**
+     * The per-column Style-tab schema: the controls the viewer renders
+     * for one column, re-queried on every field edit so the field set
+     * may depend on `current_value`.
+     */
+    column_config_schema?(
+        view_type: string,
+        group: string | undefined,
+        column_name: string,
+        current_value: Record<string, unknown> | null,
+        viewer_config?: Record<string, unknown>,
+        column_stats?: Record<string, unknown>,
+    ): { fields: Array<Record<string, unknown> & { kind: string }> };
+
     /**
      * Render this plugin using the provided `View`.  While there is no
      * provision to cancel a render in progress per se, calling a method on

package/src/ts/ts-rs/PanelViewerConfig.ts

@@ -12,7 +12,7 @@ import type { JsonValue } from "./serde_json/JsonValue.js";
 /**
  * The per-panel state of a [`ViewerConfig`] — everything except the
  * element-level `settings` flag. This is the `panels` entry type of the
- * whole-element config format.
+ * workspace config format.
  */
 export type PanelViewerConfig<V = string> = { 
 /**

package/src/ts/ts-rs/SaveWorkspaceOptions.ts

@@ -0,0 +1,11 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+/**
+ * Options for the `saveWorkspace()` method.
+ */
+export type SaveWorkspaceOptions = { 
+/**
+ * When `true`, the emitted `palette` is the full set the element
+ * holds rather than only the values the panels reference.
+ */
+full_palette?: boolean, };

package/src/ts/ts-rs/ViewerConfig.ts

@@ -12,7 +12,7 @@ import type { JsonValue } from "./serde_json/JsonValue.js";
 /**
  * The state of an entire `custom_elements::PerspectiveViewerElement` component
  * and its `Plugin`: the element-level `settings` flag plus the per-panel
- * [`PanelViewerConfig`]. The split exists so the whole-element config format
+ * [`PanelViewerConfig`]. The split exists so the workspace config format
  * can serialize panel entries *without* a `settings` key (it is element-level
  * state there, carried by the top-level `active` field instead), while the
  * single-panel format flattens back to the legacy shape.

package/src/ts/ts-rs/WorkspaceConfig.ts

@@ -4,7 +4,7 @@ import type { Layout } from "./Layout.js";
 import type { PanelViewerConfig } from "./PanelViewerConfig.js";
 
 /**
- * The whole-element config format (`{version, active?, layout, panels}`) —
+ * The workspace config format (`{version, active?, layout, panels}`) —
  * the multi-panel counterpart of the single-panel [`ViewerConfig`] — as
  * emitted by [`PerspectiveViewerElement::save`].
  *
@@ -33,4 +33,10 @@ global_filters?: Array<Filter>,
  * which master contributed which clause does not — restored
  * `global_filters` are one unattributed bucket. Omitted when empty.
  */
-masters?: Array<string>, };
+masters?: Array<string>, 
+/**
+ * Named color-scale definitions shared by every panel: CSS custom
+ * property name (`--psp-user--<kind>-<name>`) → canonical CSS
+ * value.
+ */
+palette?: { [key in string]?: string }, };

package/src/ts/ts-rs/WorkspaceConfigUpdate.ts

@@ -4,7 +4,7 @@ import type { Layout } from "./Layout.js";
 import type { ViewerConfigInitial } from "./ViewerConfigInitial.js";
 
 /**
- * The parse target of a whole-element config in
+ * The parse target of a workspace config in
  * [`PerspectiveViewerElement::restoreWorkspace`]. Mirrors
  * [`WorkspaceConfig`], but `panels` entries are [`ViewerConfigInitial`]s —
  * every entry creates a NEW panel, so `table` is required by type (a
@@ -16,10 +16,18 @@ export type WorkspaceConfigUpdate = { active?: string, layout?: Layout, panels:
  * The element-level global (master/detail cross-) filters to re-apply as
  * a transient overlay on every DETAIL panel. Restored as one
  * unattributed bucket: the next selection on any master replaces it.
+ * `Option` so an explicit `undefined` property deserializes as
+ * `None` like an absent key (also `masters` / `palette` below).
  */
-global_filters?: Array<Filter>, 
+global_filters?: Array<Filter> | null, 
 /**
  * The master (filter-source) panels, by saved `panels` key. An id not in
  * `panels` warns and is dropped.
  */
-masters?: Array<string>, };
+masters?: Array<string> | null, 
+/**
+ * Named color-scale definitions to apply to the host (see
+ * [`WorkspaceConfig::palette`]), replacing any previously restored
+ * palette.
+ */
+palette?: { [key in string]?: string } | null, };

package/src/rust/components/form/color_range_selector.rs

@@ -1,137 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-use wasm_bindgen::JsCast;
-use web_sys::*;
-use yew::prelude::*;
-
-#[derive(Properties, PartialEq, Clone)]
-pub struct ColorRangeProps {
-    /// Extra class appended to the positive input's `class` attribute,
-    /// so callers can target the pos / neg sides independently from CSS.
-    /// Paired with `neg_class`; both default to empty.
-    #[prop_or_default]
-    pub pos_class: Classes,
-    #[prop_or_default]
-    pub neg_class: Classes,
-    pub pos_color: String,
-    pub neg_color: String,
-    pub is_gradient: bool,
-    pub on_pos_color: Callback<String>,
-    pub on_neg_color: Callback<String>,
-    pub on_reset: Callback<()>,
-    pub is_modified: bool,
-}
-
-#[function_component(ColorRangeSelector)]
-pub fn color_chooser_component(props: &ColorRangeProps) -> Html {
-    let on_pos_color = use_callback(
-        props.on_pos_color.clone(),
-        |event: InputEvent, on_pos_color| {
-            let color = event
-                .target()
-                .unwrap()
-                .unchecked_into::<HtmlInputElement>()
-                .value();
-            on_pos_color.emit(color);
-        },
-    );
-
-    let on_neg_color = use_callback(
-        props.on_neg_color.clone(),
-        |event: InputEvent, on_neg_color| {
-            let color = event
-                .target()
-                .unwrap()
-                .unchecked_into::<HtmlInputElement>()
-                .value();
-            on_neg_color.emit(color);
-        },
-    );
-
-    let fg_pos = infer_fg(&props.pos_color);
-    let fg_neg = infer_fg(&props.neg_color);
-    let style = if props.is_gradient {
-        format!(
-            "background:linear-gradient(to right, {} 0%, transparent 50%, {} 100%)",
-            props.pos_color, props.neg_color
-        )
-    } else {
-        format!(
-            "background:linear-gradient(to right, {} 0%, {} 50%, {} 50%,  {} 100%)",
-            props.pos_color, props.pos_color, props.neg_color, props.neg_color
-        )
-    };
-
-    let on_reset = use_callback(props.clone(), |_: MouseEvent, deps| deps.on_reset.emit(()));
-
-    let pos_class = classes!("parameter", "pos-color-param", props.pos_class.clone());
-    let neg_class = classes!("parameter", "neg-color-param", props.neg_class.clone());
-
-    html! {
-        <>
-            <label id="color-range-label" />
-            <div class="color-gradient-container">
-                <div style={fg_pos} class="color-selector">
-                    <input
-                        class={pos_class}
-                        type="color"
-                        value={props.pos_color.to_owned()}
-                        data-value={props.pos_color.to_owned()}
-                        oninput={on_pos_color}
-                    />
-                    <label class="color-label">{ "+" }</label>
-                </div>
-                <div class="color-thermometer" {style} />
-                <div style={fg_neg} class="color-selector">
-                    <input
-                        class={neg_class}
-                        type="color"
-                        value={props.neg_color.to_owned()}
-                        data-value={props.neg_color.to_owned()}
-                        oninput={on_neg_color}
-                    />
-                    <label class="color-label">{ "-" }</label>
-                </div>
-                if props.is_modified {
-                    <span class="reset-default-style" onclick={on_reset} />
-                } else {
-                    <span class="reset-default-style-disabled" />
-                }
-            </div>
-        </>
-    }
-}
-
-fn infer_fg(color: &str) -> &'static str {
-    if color.len() >= 7 {
-        let r = i32::from_str_radix(&color[1..3], 16).unwrap_or(255) as f64;
-        let g = i32::from_str_radix(&color[3..5], 16).unwrap_or(0) as f64;
-        let b = i32::from_str_radix(&color[5..7], 16).unwrap_or(0) as f64;
-        if (r * r * 0.299 + g * g * 0.587 + b * b * 0.114).sqrt() > 130.0 {
-            "--sign--color:var(--psp--color)"
-        } else {
-            "--sign--color:var(--psp--background-color)"
-        }
-    } else if color.len() == 4 {
-        let r = i32::from_str_radix(&color[1..2], 16).unwrap_or(15) as f64;
-        let g = i32::from_str_radix(&color[2..3], 16).unwrap_or(0) as f64;
-        let b = i32::from_str_radix(&color[3..4], 16).unwrap_or(0) as f64;
-        if (r * r * 0.299 + g * g * 0.587 + b * b * 0.114).sqrt() > 8.0 {
-            "--sign--color:var(--psp--color)"
-        } else {
-            "--sign--color:var(--psp--background-color)"
-        }
-    } else {
-        "--sign--color:var(--psp--color)"
-    }
-}