@jbrowse/plugin-linear-genome-view 5.0.0-beta.16 → 5.0.0-beta.18

package/esm/FeatureTrack/configSchema.d.ts

@@ -37,7 +37,9 @@ import type PluginManager from '@jbrowse/core/PluginManager';
  *     type: 'Gff3TabixAdapter',
  *     uri: 'https://example.com/genes.sorted.gff.gz',
  *   },
- *   displayDefaults: { color: "jexl:feature.type=='CDS'?'red':'blue'" },
+ *   displayDefaults: {
+ *     encoding: { color: { value: "jexl:feature.type=='CDS'?'red':'blue'" } },
+ *   },
  * }
  * ```
  */

package/esm/FeatureTrack/configSchema.js

@@ -38,7 +38,9 @@ import { createBaseTrackConfig } from '@jbrowse/core/pluggableElementTypes';
  *     type: 'Gff3TabixAdapter',
  *     uri: 'https://example.com/genes.sorted.gff.gz',
  *   },
- *   displayDefaults: { color: "jexl:feature.type=='CDS'?'red':'blue'" },
+ *   displayDefaults: {
+ *     encoding: { color: { value: "jexl:feature.type=='CDS'?'red':'blue'" } },
+ *   },
  * }
  * ```
  */

package/esm/LinearGenomeView/afterAttach.js

@@ -2,8 +2,10 @@ import { getSession, isSessionModelWithWidgets, resolveNamedRegions, } from '@jb
 import { coerceHighlight } from '@jbrowse/core/util/highlights';
 import { installInitAutorun } from '@jbrowse/core/util/installInitAutorun';
 import { normalizeTrackInit, warmTrackDisplayGeneric, } from '@jbrowse/core/util/tracks';
+import { requestedDisplayType } from '@jbrowse/launch-args/displaySettings';
 import { addDisposer } from '@jbrowse/mobx-state-tree';
 import { autorun, untracked, when } from 'mobx';
+import { launchTrackInit } from '../TrackModifiers/index.js';
 import { SearchResultsNotFoundError } from '../searchUtils.js';
 // `init` is a frozen blob that often comes from hand-authored JSON, where a
 // lone entry gets written bare (`tracks: 'genes'`). A string is iterable, so
@@ -127,8 +129,7 @@ async function navigateInit(self, session, init) {
 // display's state model first when it is registered lazily
 async function showInitTracks(self, init) {
     for (const t of asArray(init.tracks)) {
-        const { trackId, trackSnapshot, displaySnapshot } = normalizeTrackInit(t);
-        await self.launchTrack(trackId, trackSnapshot, displaySnapshot);
+        await launchTrackInit(self, t);
     }
 }
 /**
@@ -219,8 +220,9 @@ function setupInitWarmup(self) {
                 }
             }
             for (const t of tracks) {
-                const { trackId, displaySnapshot } = normalizeTrackInit(t);
-                warmTrackDisplayGeneric(self, trackId, displaySnapshot, assembly);
+                const { trackId, displaySnapshot, modifiers } = normalizeTrackInit(t);
+                const type = requestedDisplayType(modifiers);
+                warmTrackDisplayGeneric(self, trackId, type ? { ...displaySnapshot, type } : displaySnapshot, assembly);
             }
         });
     }, { name: 'LGVInitWarmup' }));

package/esm/LinearGenomeView/axisConfigSchema.d.ts

@@ -0,0 +1,18 @@
+/**
+ * #config LinearGenomeViewAxis
+ * #category view
+ * The linear genome view's `axis`: the ruler along its top, whose ticks
+ * `grid` carries down through the tracks.
+ *
+ * #example
+ * ```js
+ * { type: 'LinearGenomeView', axis: { grid: false } }
+ * ```
+ */
+export declare const linearGenomeViewAxisConfigSchema: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+    readonly grid: {
+        type: "boolean";
+    } & {
+        defaultValue: boolean;
+    };
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined, undefined, import("@jbrowse/core/configuration").ConfigurationSchemaRequirement<Partial<Record<string, string[]>>, string>, any>>;

package/esm/LinearGenomeView/axisConfigSchema.js

@@ -0,0 +1,22 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+/**
+ * #config LinearGenomeViewAxis
+ * #category view
+ * The linear genome view's `axis`: the ruler along its top, whose ticks
+ * `grid` carries down through the tracks.
+ *
+ * #example
+ * ```js
+ * { type: 'LinearGenomeView', axis: { grid: false } }
+ * ```
+ */
+export const linearGenomeViewAxisConfigSchema = ConfigurationSchema('LinearGenomeViewAxis', {
+    /**
+     * #slot
+     */
+    grid: {
+        type: 'boolean',
+        defaultValue: true,
+        description: "carry the ruler's ticks down through the tracks",
+    },
+}, { closed: true });

package/esm/LinearGenomeView/components/Highlight.js

@@ -2,14 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useStyleTheme } from '@jbrowse/core/ui/PaletteContext';
 import { getSession } from '@jbrowse/core/util';
 import CloseIcon from '@mui/icons-material/Close';
+import EditIcon from '@mui/icons-material/Edit';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { observer } from 'mobx-react';
 import HighlightBand from './HighlightBand.js';
 import HighlightChip from './HighlightChip.js';
+import HighlightLabelDialog from './HighlightLabelDialog.js';
 import { getHighlightColor } from './util.js';
-// A band narrower than the link-icon chip clips it into a smudge, so below this
-// width the chip is dropped (the band itself still draws).
-const CHIP_MIN_WIDTH = 24;
 const Highlight = observer(function Highlight({ model, highlight, }) {
     const theme = useStyleTheme();
     const coords = model.getHighlightCoords(highlight);
@@ -17,7 +16,24 @@ const Highlight = observer(function Highlight({ model, highlight, }) {
     const label = getSession(model).highlightLabelsVisible
         ? highlight.label
         : undefined;
-    return coords ? (_jsx(HighlightBand, { coords: coords, background: bandColor.toRgbString(), label: label, gaps: model.nonGenomicTrackBands(), children: coords.width >= CHIP_MIN_WIDTH ? (_jsx(HighlightChip, { color: bandColor, label: label, tooltip: highlight.label ?? 'Highlighted region', menuItems: [
+    return coords ? (_jsx(HighlightBand, { coords: coords, background: bandColor.toRgbString(), label: label, gaps: model.nonGenomicTrackBands(), children: _jsx(HighlightChip, { color: bandColor, label: label, tooltip: highlight.label ?? 'Highlighted region', menuItems: [
+                {
+                    label: 'Edit label...',
+                    icon: EditIcon,
+                    onClick: () => {
+                        const session = getSession(model);
+                        session.queueDialog(handleClose => [
+                            HighlightLabelDialog,
+                            {
+                                label: highlight.label,
+                                onSubmit: (label) => {
+                                    session.updateHighlight(highlight, { label });
+                                },
+                                handleClose,
+                            },
+                        ]);
+                    },
+                },
                 {
                     label: 'Dismiss highlight',
                     icon: CloseIcon,
@@ -33,6 +49,6 @@ const Highlight = observer(function Highlight({ model, highlight, }) {
                     },
                 },
                 ...model.highlightMenuItems(highlight),
-            ] })) : null })) : null;
+            ] }) })) : null;
 });
 export default Highlight;

package/esm/LinearGenomeView/components/HighlightBand.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Typography } from '@mui/material';
 import { observer } from 'mobx-react';
@@ -16,10 +16,15 @@ const useStyles = makeStyles()(theme => ({
         zIndex: 1,
         pointerEvents: 'none',
     },
+    // a sibling of the band, so a label wider than a narrow band runs past its
+    // right edge. No `top`: its static position is the band's top edge, where
+    // the first track's TrackLabel (zIndex 200) would otherwise cover it
     overlay: {
         position: 'absolute',
-        top: 0,
         left: 3,
+        zIndex: 201,
+        pointerEvents: 'none',
+        whiteSpace: 'nowrap',
     },
     label: {
         color: theme.palette.text.primary,
@@ -35,20 +40,20 @@ export function gapMask(gaps) {
     return `linear-gradient(to bottom, ${stops.join(', ')})`;
 }
 // OverviewHighlight stays separate (different bpToPx API). A non-interactive
-// colored band with an
-// optional top label; when `children` (the highlight chip) is passed it renders
-// that instead of the plain label. Visibility is toggled from the view menu
+// colored band with an optional top label; when `children` (the highlight
+// chip) is passed it renders that instead of the plain label. Visibility is
+// toggled from the view menu
 const HighlightBand = observer(function HighlightBand({ coords, background, label, gaps, children, }) {
     const { classes } = useStyles();
     const content = children ??
         (label ? (_jsx(Typography, { variant: "caption", className: classes.label, noWrap: true, children: label })) : null);
-    return (_jsx("div", { "data-testid": "highlight-band", className: classes.highlight, style: {
-            transform: `translateX(${coords.left}px)`,
-            width: coords.width,
-            background,
-            ...(gaps?.length
-                ? { maskImage: gapMask(gaps), WebkitMaskImage: gapMask(gaps) }
-                : undefined),
-        }, children: coords.width > 3 && content ? (_jsx("div", { className: classes.overlay, children: content })) : null }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "data-testid": "highlight-band", className: classes.highlight, style: {
+                    transform: `translateX(${coords.left}px)`,
+                    width: coords.width,
+                    background,
+                    ...(gaps?.length
+                        ? { maskImage: gapMask(gaps), WebkitMaskImage: gapMask(gaps) }
+                        : undefined),
+                } }), content ? (_jsx("div", { className: classes.overlay, style: { transform: `translateX(${coords.left}px)` }, children: content })) : null] }));
 });
 export default HighlightBand;

package/esm/LinearGenomeView/components/HighlightChip.js

@@ -3,13 +3,18 @@ import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import LinkIcon from '@mui/icons-material/Link';
 import { Box, Tooltip, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-// Interactive chip drawn inside a highlight band: a link icon tinted to the
-// band color plus an optional inline label, wrapped in a context menu. Sets its
-// own pointer-events since the band is click-through.
+// Interactive chip at a highlight band's top: a link icon tinted to the band
+// color plus an optional inline label, wrapped in a context menu. Its own
+// background keeps it legible over the first track's label, and it sets its own
+// pointer-events since the band is click-through.
 const HighlightChip = observer(function HighlightChip({ color, label, tooltip, menuItems, }) {
     // hide the icon color when the band is fully transparent ("label-only"
     // highlight); otherwise bump to 0.8 alpha so the chip stays legible
     const chipAlpha = color.alpha() === 0 ? 0 : 0.8;
-    return (_jsx(Box, { sx: { pointerEvents: 'auto' }, children: _jsx(CascadingMenuButton, { "data-testid": "highlight-chip", menuItems: menuItems, children: _jsx(Tooltip, { title: tooltip, arrow: true, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(LinkIcon, { fontSize: "small", sx: { color: color.alpha(chipAlpha).toRgbString() } }), label ? (_jsx(Typography, { variant: "caption", noWrap: true, children: label })) : null] }) }) }) }));
+    return (_jsx(Box, { sx: {
+            pointerEvents: 'auto',
+            bgcolor: 'background.paper',
+            borderRadius: 1,
+        }, children: _jsx(CascadingMenuButton, { "data-testid": "highlight-chip", menuItems: menuItems, children: _jsx(Tooltip, { title: tooltip, arrow: true, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(LinkIcon, { fontSize: "small", sx: { color: color.alpha(chipAlpha).toRgbString() } }), label ? (_jsx(Typography, { variant: "caption", noWrap: true, children: label })) : null] }) }) }) }));
 });
 export default HighlightChip;

package/esm/LinearGenomeView/components/HighlightLabelDialog.d.ts

@@ -0,0 +1,6 @@
+declare const HighlightLabelDialog: ({ label, onSubmit, handleClose, }: {
+    label?: string;
+    onSubmit: (label: string | undefined) => void;
+    handleClose: () => void;
+}) => import("react").JSX.Element;
+export default HighlightLabelDialog;

package/esm/LinearGenomeView/components/HighlightLabelDialog.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { SubmitDialog } from '@jbrowse/core/ui';
+import { TextField } from '@mui/material';
+import { observer } from 'mobx-react';
+// Names a highlight. The label is written on the band and in every view that
+// draws the session's highlights, such as an alignment's column or a
+// structure's residue; an empty label leaves the highlight unnamed.
+const HighlightLabelDialog = observer(function HighlightLabelDialog({ label, onSubmit, handleClose, }) {
+    const [val, setVal] = useState(label ?? '');
+    return (_jsx(SubmitDialog, { open: true, maxWidth: "xs", fullWidth: true, title: "Edit highlight label", onCancel: handleClose, onSubmit: () => {
+            onSubmit(val.trim() || undefined);
+            handleClose();
+        }, children: _jsx(TextField, { label: "Label", autoFocus: true, fullWidth: true, variant: "outlined", value: val, onChange: event => {
+                setVal(event.target.value);
+            } }) }));
+});
+export default HighlightLabelDialog;

package/esm/LinearGenomeView/components/LinearGenomeViewContainer.js

@@ -102,7 +102,9 @@ const LinearGenomeViewContainer = observer(function LinearGenomeViewContainer({
                     .flatMap(t => t.displays)
                     .map(d => d.hoveredFeature)
                     .find(Boolean);
-                session.setHovered({ hoverPosition, hoverFeature });
+                // `viewId` lets a view paired with one linear view ignore another
+                // showing the same locus
+                session.setHovered({ hoverPosition, hoverFeature, viewId: model.id });
             }, children: [_jsx(NavigationAnnouncer, { model: model }), _jsxs("div", { ref: headerRef, "data-testid": `lgv-header-${model.id}`, className: classes.header, style: { position: stickyViewHeaders ? 'sticky' : undefined }, children: [_jsx(Header, { model: model }), hideHeader ? _jsx(MiniControls, { model: model }) : null] }), _jsx("div", { ref: tracksRef, children: model.scalebarOnly ? (_jsx(Rubberband, { model: model })) : (_jsx(TracksContainer, { model: model, children: !tracks.length ? (_jsx(NoTracksActiveButton, { model: model })) : (_jsxs(_Fragment, { children: [pinnedTracks.length ? (_jsx(Paper, { elevation: 2, "data-testid": "pinned-tracks", className: classes.pinnedTracks, style: {
                                         top: stickyTops.pinnedTracks,
                                         // the scroll port this sticks in, not the window: a

package/esm/LinearGenomeView/components/SVGHighlightBand.js

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getFillProps } from '@jbrowse/core/util';
 // One full-height SVG highlight band with an optional label at the top,
-// mirroring the on-screen HighlightBand div. The label is hidden on bands too
-// narrow to fit it.
+// mirroring the on-screen HighlightBand div: a label wider than its band runs
+// past the band's right edge.
 export default function SVGHighlightBand({ coords, height, color, label, labelColor, }) {
-    return (_jsxs(_Fragment, { children: [_jsx("rect", { x: coords.left, y: 0, width: coords.width, height: height, ...getFillProps(color) }), label && coords.width > 3 ? (_jsx("text", { x: coords.left + 3, y: 2, fontSize: 11, dominantBaseline: "hanging", ...getFillProps(labelColor), children: label })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsx("rect", { x: coords.left, y: 0, width: coords.width, height: height, ...getFillProps(color) }), label ? (_jsx("text", { x: coords.left + 3, y: 2, fontSize: 11, dominantBaseline: "hanging", ...getFillProps(labelColor), children: label })) : null] }));
 }

package/esm/LinearGenomeView/components/TracksContainer.js

@@ -40,13 +40,13 @@ const TracksContainer = observer(function TracksContainer({ children, model, })
     const { classes } = useStyles();
     const { pluginManager } = getEnv(model);
     const sideScroll = useSideScroll(model);
-    const { showGridlines, showCenterLine } = model;
+    const { axisGrid: showGridlines, showCenterLine } = model;
     const ref = useRef(null);
     // shift-drag range select over the whole tracks area. This is intentionally
     // a separate range-select instance from the one inside <Rubberband> (the
     // scalebar control); don't dedupe them — they cover different regions.
     const range = useRangeSelect(ref, model, true);
-    return (_jsxs("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, onPointerDown: sideScroll.pointerDown, onClickCapture: sideScroll.clickCapture, onMouseDown: range.mouseDown, onMouseMove: event => {
+    return (_jsxs("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, ...sideScroll, onMouseDown: range.mouseDown, onMouseMove: event => {
             range.mouseMove(event);
         }, onMouseLeave: () => {
             range.mouseOut();

package/esm/LinearGenomeView/components/useSearchBoxPrefs.d.ts

@@ -22,7 +22,7 @@ export type SearchBoxPrefs = ReturnType<typeof useSearchBoxPrefs>;
 /**
  * The menu rows that drive those prefs. "Stacked" rather than "Vertical": the
  * two headers name the same state and had drifted apart on it once already.
- * A caller spreading the rows into a "Show..." submenu passes `'Search boxes'`
+ * A caller spreading the rows into a "Show" submenu passes `'Search boxes'`
  * as the toggle's label.
  */
 export declare function searchBoxMenuItems({ showSearchBoxes, setShowSearchBoxes, sideBySide, setSideBySide, }: SearchBoxPrefs, toggleLabel?: string): MenuItem[];

package/esm/LinearGenomeView/components/useSearchBoxPrefs.js

@@ -22,7 +22,7 @@ export function useSearchBoxPrefs(prefix, numViews) {
 /**
  * The menu rows that drive those prefs. "Stacked" rather than "Vertical": the
  * two headers name the same state and had drifted apart on it once already.
- * A caller spreading the rows into a "Show..." submenu passes `'Search boxes'`
+ * A caller spreading the rows into a "Show" submenu passes `'Search boxes'`
  * as the toggle's label.
  */
 export function searchBoxMenuItems({ showSearchBoxes, setShowSearchBoxes, sideBySide, setSideBySide, }, toggleLabel = 'Show search boxes') {

package/esm/LinearGenomeView/components/useSideScroll.d.ts

@@ -15,6 +15,7 @@ import type React from 'react';
  * effect, so a release that lands before React commits still finds them.
  */
 export declare function useSideScroll(model: LinearGenomeViewModel): {
-    pointerDown: (event: React.PointerEvent) => void;
-    clickCapture: (event: React.MouseEvent) => void;
+    onPointerDownCapture: (event: React.PointerEvent) => void;
+    onPointerDown: (event: React.PointerEvent) => void;
+    onClickCapture: (event: React.MouseEvent) => void;
 };

package/esm/LinearGenomeView/components/useSideScroll.js

@@ -10,7 +10,7 @@ const PAN_CLICK_THRESHOLD_PX = 4;
 // as `data-gesture-owner`. `data-pan-dragging` is present from press to
 // release; `data-pan-moved` is set once the press travels past the threshold
 // or becomes a pinch, and cleared by the next press, so it still answers for
-// the click that follows the release: `clickCapture` swallows that click
+// the click that follows the release: `onClickCapture` swallows that click
 // before any track sees it.
 const PAN_DRAGGING_ATTR = 'data-pan-dragging';
 const PAN_MOVED_ATTR = 'data-pan-moved';
@@ -36,16 +36,21 @@ export function useSideScroll(model) {
     useEffect(() => () => {
         gestureRef.current?.cancel();
     }, []);
-    function pointerDown(event) {
+    // The marker outlives the gesture that set it, so every press clears it, in
+    // the capture phase: a track that keeps its own press and stops it bubbling
+    // (multiway's lane slide, maf's drag select) would otherwise leave the last
+    // pan's marker standing to swallow its click.
+    function onPointerDownCapture(event) {
+        if (!gestureRef.current) {
+            event.currentTarget.removeAttribute(PAN_MOVED_ATTR);
+        }
+    }
+    function onPointerDown(event) {
         const host = event.currentTarget;
         if (gestureRef.current) {
             gestureRef.current.join(event);
             return;
         }
-        // Cleared for EVERY press, ahead of the returns below: the marker outlives
-        // the gesture that set it, and a stale true is what the next reader of
-        // this DOM contract would inherit.
-        host.removeAttribute(PAN_MOVED_ATTR);
         if (event.shiftKey || event.button !== 0 || !event.isPrimary) {
             return;
         }
@@ -165,10 +170,10 @@ export function useSideScroll(model) {
     // The browser fires `click` after a release on whatever the press and the
     // release share, which over a track is its canvas, so a pan that ended on a
     // gene would open that gene's details.
-    function clickCapture(event) {
+    function onClickCapture(event) {
         if (event.currentTarget.hasAttribute(PAN_MOVED_ATTR)) {
             event.stopPropagation();
         }
     }
-    return { pointerDown, clickCapture };
+    return { onPointerDownCapture, onPointerDown, onClickCapture };
 }

package/esm/LinearGenomeView/launchKeys.d.ts

@@ -1,2 +1,2 @@
 import type { InitState } from './types.ts';
-export declare const lgvLaunchKeys: import("@jbrowse/core/util/withLaunchInput").LaunchKeyRegistration<InitState, "bpPerPx" | "offsetPx" | "showCytobandsSetting">;
+export declare const lgvLaunchKeys: import("@jbrowse/core/util/withLaunchInput").LaunchKeyRegistration<InitState, "bpPerPx" | "colorByCDS" | "offsetPx" | "showCytobandsSetting">;

package/esm/LinearGenomeView/launchKeys.js

@@ -4,10 +4,11 @@ import { defineLaunchKeys } from '@jbrowse/core/util/withLaunchInput';
 // key that partitions as a typo.
 //
 // `bpPerPx`/`offsetPx` are v4's viewport spelling from before it was stored as
-// a window, and `showCytobandsSetting` its cytoband toggle. None is a declared
-// property, so the partition would read them as typos; the model's own
-// preProcessSnapshot still converts them, so a URL or saved spec naming them
-// goes on working. Share links carry all three, so they stay.
+// a window, `showCytobandsSetting` its cytoband toggle and `colorByCDS` its
+// frame coloring. None is a declared property, so the partition would read them
+// as typos; the model's own preProcessSnapshot still converts them, so a URL or
+// saved spec naming them goes on working. Share links carry all four, so they
+// stay.
 //
 // #launchKeys LinearGenomeView — the URL parameters page renders this list
 // rather than restating it; each of these keys has its own `&param=` section
@@ -23,5 +24,5 @@ export const lgvLaunchKeys = defineLaunchKeys()({
     tracks: { kind: 'trackEntries' },
     highlight: { kind: 'launch' },
 }, {
-    passThrough: ['bpPerPx', 'offsetPx', 'showCytobandsSetting'],
+    passThrough: ['bpPerPx', 'offsetPx', 'showCytobandsSetting', 'colorByCDS'],
 });

package/esm/LinearGenomeView/menuItems.js

@@ -229,9 +229,9 @@ export function buildMenuItems(self) {
             {
                 label: 'Guidelines',
                 type: 'checkbox',
-                checked: self.showGridlines,
+                checked: self.axisGrid,
                 onClick: () => {
-                    self.setShowGridlines(!self.showGridlines);
+                    self.setAxisGrid(!self.axisGrid);
                 },
             },
             {
@@ -254,9 +254,9 @@ export function buildMenuItems(self) {
             {
                 label: 'CDS reading frame colors',
                 type: 'checkbox',
-                checked: self.colorByCDS,
+                checked: self.colorByFrame,
                 onClick: () => {
-                    self.setColorByCDS(!self.colorByCDS);
+                    self.setColorByFrame(!self.colorByFrame);
                 },
             },
             {