Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: Sync vector state to URL #488

Merged
merged 20 commits into from
Dec 14, 2024
Merged

feature: Sync vector state to URL #488

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
3df96ff
feat: Added backdrop visibility config, on/off toggle in settings
ShrimpCryptid Nov 27, 2024
731a07c
feat: Add onscreen toggle for backdrop
ShrimpCryptid Nov 27, 2024
18c59a6
feat: Added custom icons for backdrop visibility
ShrimpCryptid Nov 27, 2024
6ab9937
feat: Added link to viewer settings in backdrop tooltip
ShrimpCryptid Nov 27, 2024
3de2e28
feat: Added backdrop visibility to URL
ShrimpCryptid Nov 27, 2024
9dbadf9
refactor: Fixed linting, removed unused CSS variables
ShrimpCryptid Nov 28, 2024
b8c65aa
fix: Viewer will select the default backdrop for a dataset on load
ShrimpCryptid Nov 28, 2024
b9a6be6
refactor: Cleanup on SVG icons, changed link color and styling, comments
ShrimpCryptid Dec 2, 2024
e2911fd
fix: Backdrop visibility turns off when switching to datasets that do…
ShrimpCryptid Dec 2, 2024
83146ff
refactor: Code cleanup
ShrimpCryptid Dec 2, 2024
a125c49
refactor: Code cleanup
ShrimpCryptid Dec 2, 2024
789d041
Merge branch 'feature/vector-tooltips' into feature/vector-urls
ShrimpCryptid Dec 3, 2024
f8e7a2e
feat: Added vector state to URL, renamed some decode methods
ShrimpCryptid Dec 3, 2024
1294332
Merge branch 'main' into feature/onscreen-backdrops-toggle
ShrimpCryptid Dec 3, 2024
b9efd3b
Merge branch 'feature/onscreen-backdrops-toggle' into feature/vector-…
ShrimpCryptid Dec 3, 2024
fe3f2bb
fix: Fixed unit tests, added test for vector data
ShrimpCryptid Dec 3, 2024
4392a17
fix: Removed redundant visibility flag in URL for vectors
ShrimpCryptid Dec 3, 2024
ac5f119
refactor: Code cleanup
ShrimpCryptid Dec 3, 2024
e7074ec
Merge branch 'main' into feature/vector-urls
ShrimpCryptid Dec 6, 2024
0f392e0
fix: Fixed bug where vectors would always be saved to URL as enabled
ShrimpCryptid Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/colorizer/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,10 @@ export enum VectorTooltipMode {
COMPONENTS = "c",
}

export const isVectorTooltipMode = (mode: string): mode is VectorTooltipMode => {
return Object.values(VectorTooltipMode).includes(mode as VectorTooltipMode);
};

export type VectorConfig = {
visible: boolean;
key: string;
Expand Down
114 changes: 79 additions & 35 deletions src/colorizer/utils/url_utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ import {
getKeyFromPalette,
KNOWN_CATEGORICAL_PALETTES,
} from "../colors/categorical_palettes";
import { getDefaultViewerConfig } from "../constants";
import { isTabType, isThresholdCategorical } from "../types";
import { getDefaultVectorConfig, getDefaultViewerConfig } from "../constants";
import { isTabType, isThresholdCategorical, isVectorTooltipMode, VectorConfig } from "../types";
import {
DrawSettings,
FeatureThreshold,
Expand All @@ -26,6 +26,9 @@ import { nanToNull } from "./data_load_utils";
import { AnyManifestFile } from "./dataset_utils";
import { numberToStringDecimal } from "./math_utils";

// TODO: This file needs to be split up for easier reading and unit testing.
// This could also be a great opportunity to reconsider how we store and manage state.

enum UrlParam {
TRACK = "track",
DATASET = "dataset",
Expand Down Expand Up @@ -56,6 +59,12 @@ enum UrlParam {
SCATTERPLOT_Y_AXIS = "scatter-y",
SCATTERPLOT_RANGE_MODE = "scatter-range",
OPEN_TAB = "tab",
SHOW_VECTOR = "vc",
VECTOR_KEY = "vc-key",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this the "feature name"?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, it's the equivalent!

VECTOR_COLOR = "vc-color",
VECTOR_SCALE = "vc-scale",
VECTOR_TOOLTIP_MODE = "vc-tooltip",
VECTOR_TIME_INTERVALS = "vc-time-int",
}

const ALLEN_FILE_PREFIX = "/allen/";
Expand Down Expand Up @@ -302,6 +311,10 @@ function serializeViewerConfig(config: Partial<ViewerConfig>): string[] {
parameters.push(`${UrlParam.OPEN_TAB}=${config.openTab}`);
}

if (config.vectorConfig) {
parameters.push(...serializeVectorConfig(config.vectorConfig));
}

tryAddBooleanParam(parameters, config.backdropVisible, UrlParam.SHOW_BACKDROP);
tryAddBooleanParam(parameters, config.showScaleBar, UrlParam.SHOW_SCALEBAR);
tryAddBooleanParam(parameters, config.showTimestamp, UrlParam.SHOW_TIMESTAMP);
Expand All @@ -316,6 +329,19 @@ export function isHexColor(value: string | null): value is HexColorString {
return value !== null && hexRegex.test(value);
}

function decodeHexColor(value: string | null): Color | undefined {
value = value?.startsWith("#") ? value : "#" + value;
return isHexColor(value) ? new Color(value) : undefined;
}

function decodeFloat(value: string | null): number | undefined {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how do we not already have these functions in this codebase? surprising!

return value === null ? undefined : parseFloat(value);
}

function decodeInt(value: string | null): number | undefined {
return value === null ? undefined : parseInt(value, 10);
}

function parseDrawSettings(color: string | null, mode: string | null, defaultSettings: DrawSettings): DrawSettings {
const modeInt = parseInt(mode || "-1", 10);
const hexColor = "#" + color;
Expand All @@ -325,7 +351,7 @@ function parseDrawSettings(color: string | null, mode: string | null, defaultSet
};
}

function getBooleanParam(value: string | null): boolean | undefined {
function decodeBoolean(value: string | null): boolean | undefined {
if (value === null) {
return undefined;
}
Expand All @@ -334,15 +360,10 @@ function getBooleanParam(value: string | null): boolean | undefined {

function deserializeViewerConfig(params: URLSearchParams): Partial<ViewerConfig> | undefined {
const newConfig: Partial<ViewerConfig> = {};
if (params.get(UrlParam.BACKDROP_SATURATION)) {
newConfig.backdropSaturation = parseInt(params.get(UrlParam.BACKDROP_SATURATION)!, 10);
}
if (params.get(UrlParam.BACKDROP_BRIGHTNESS)) {
newConfig.backdropBrightness = parseInt(params.get(UrlParam.BACKDROP_BRIGHTNESS)!, 10);
}
if (params.get(UrlParam.FOREGROUND_ALPHA)) {
newConfig.objectOpacity = parseInt(params.get(UrlParam.FOREGROUND_ALPHA)!, 10);
}
newConfig.backdropSaturation = decodeInt(params.get(UrlParam.BACKDROP_SATURATION));
newConfig.backdropBrightness = decodeInt(params.get(UrlParam.BACKDROP_BRIGHTNESS));
newConfig.objectOpacity = decodeInt(params.get(UrlParam.FOREGROUND_ALPHA));

if (params.get(UrlParam.OUTLIER_COLOR) || params.get(UrlParam.OUTLIER_MODE)) {
newConfig.outlierDrawSettings = parseDrawSettings(
params.get(UrlParam.OUTLIER_COLOR),
Expand All @@ -357,22 +378,23 @@ function deserializeViewerConfig(params: URLSearchParams): Partial<ViewerConfig>
getDefaultViewerConfig().outOfRangeDrawSettings
);
}
if (params.get(UrlParam.OUTLINE_COLOR)) {
const outlineColor = "#" + params.get(UrlParam.OUTLINE_COLOR);
if (isHexColor(outlineColor)) {
newConfig.outlineColor = new Color(outlineColor);
}
}
newConfig.outlineColor = decodeHexColor(params.get(UrlParam.OUTLINE_COLOR));

const openTab = params.get(UrlParam.OPEN_TAB);
if (openTab && isTabType(openTab)) {
newConfig.openTab = openTab;
}

newConfig.backdropVisible = getBooleanParam(params.get(UrlParam.SHOW_BACKDROP));
newConfig.showScaleBar = getBooleanParam(params.get(UrlParam.SHOW_SCALEBAR));
newConfig.showTimestamp = getBooleanParam(params.get(UrlParam.SHOW_TIMESTAMP));
newConfig.showTrackPath = getBooleanParam(params.get(UrlParam.SHOW_PATH));
newConfig.keepRangeBetweenDatasets = getBooleanParam(params.get(UrlParam.KEEP_RANGE));
newConfig.backdropVisible = decodeBoolean(params.get(UrlParam.SHOW_BACKDROP));
newConfig.showScaleBar = decodeBoolean(params.get(UrlParam.SHOW_SCALEBAR));
newConfig.showTimestamp = decodeBoolean(params.get(UrlParam.SHOW_TIMESTAMP));
newConfig.showTrackPath = decodeBoolean(params.get(UrlParam.SHOW_PATH));
newConfig.keepRangeBetweenDatasets = decodeBoolean(params.get(UrlParam.KEEP_RANGE));

const vectorConfig = deserializeVectorConfig(params);
if (vectorConfig && Object.keys(vectorConfig).length > 0) {
newConfig.vectorConfig = { ...getDefaultVectorConfig(), ...vectorConfig };
}

const finalConfig = removeUndefinedProperties(newConfig);
return Object.keys(finalConfig).length === 0 ? undefined : finalConfig;
Expand Down Expand Up @@ -407,18 +429,40 @@ function deserializeScatterPlotConfig(params: URLSearchParams): Partial<ScatterP
if (rangeString && urlParamToRangeType[rangeString]) {
newConfig.rangeType = urlParamToRangeType[rangeString];
}
const xAxis = decodePossiblyNullString(params.get(UrlParam.SCATTERPLOT_X_AXIS));
const yAxis = decodePossiblyNullString(params.get(UrlParam.SCATTERPLOT_Y_AXIS));
if (xAxis) {
newConfig.xAxis = xAxis;
}
if (yAxis) {
newConfig.yAxis = yAxis;
}
newConfig.xAxis = decodeString(params.get(UrlParam.SCATTERPLOT_X_AXIS));
newConfig.yAxis = decodeString(params.get(UrlParam.SCATTERPLOT_Y_AXIS));

const finalConfig = removeUndefinedProperties(newConfig);
return Object.keys(finalConfig).length === 0 ? undefined : finalConfig;
}

function serializeVectorConfig(config: Partial<VectorConfig>): string[] {
const parameters: string[] = [];
tryAddBooleanParam(parameters, config.visible, UrlParam.SHOW_VECTOR);
config.color !== undefined && parameters.push(`${UrlParam.VECTOR_COLOR}=${config.color.getHexString()}`);
config.key !== undefined && parameters.push(`${UrlParam.VECTOR_KEY}=${encodeURIComponent(config.key)}`);
config.scaleFactor !== undefined && parameters.push(`${UrlParam.VECTOR_SCALE}=${config.scaleFactor}`);
config.timeIntervals !== undefined && parameters.push(`${UrlParam.VECTOR_TIME_INTERVALS}=${config.timeIntervals}`);
config.tooltipMode !== undefined && parameters.push(`${UrlParam.VECTOR_TOOLTIP_MODE}=${config.tooltipMode}`);
return parameters;
}

function deserializeVectorConfig(params: URLSearchParams): Partial<VectorConfig> | undefined {
const newConfig: Partial<VectorConfig> = {};
newConfig.visible = decodeBoolean(params.get(UrlParam.SHOW_VECTOR));
newConfig.color = decodeHexColor(params.get(UrlParam.VECTOR_COLOR));
newConfig.key = decodeString(params.get(UrlParam.VECTOR_KEY));
newConfig.scaleFactor = decodeFloat(params.get(UrlParam.VECTOR_SCALE));
newConfig.timeIntervals = decodeInt(params.get(UrlParam.VECTOR_TIME_INTERVALS));

const tooltip = params.get(UrlParam.VECTOR_TOOLTIP_MODE);
if (tooltip && isVectorTooltipMode(tooltip)) {
newConfig.tooltipMode = tooltip;
}

return removeUndefinedProperties(newConfig);
}

/**
* Creates a url query string from parameters that can be appended onto the base URL.
*
Expand Down Expand Up @@ -549,8 +593,8 @@ export function convertAllenPathToHttps(input: string): string | null {
/**
* Decodes strings using `decodeURIComponent`, handling null inputs.
*/
function decodePossiblyNullString(input: string | null): string | null {
return input === null ? null : decodeURIComponent(input);
function decodeString(input: string | null): string | undefined {
return input === null ? undefined : decodeURIComponent(input);
}

/**
Expand Down Expand Up @@ -608,7 +652,7 @@ export function loadFromUrlSearchParams(urlParams: URLSearchParams): Partial<Url
const thresholdsParam = deserializeThresholds(urlParams.get(UrlParam.THRESHOLDS));

let rangeParam: [number, number] | undefined = undefined;
const rawRangeParam = decodePossiblyNullString(urlParams.get(UrlParam.RANGE));
const rawRangeParam = decodeString(urlParams.get(UrlParam.RANGE));
if (rawRangeParam) {
const [min, max] = rawRangeParam.split(",");
rangeParam = [parseFloat(min), parseFloat(max)];
Expand Down Expand Up @@ -652,7 +696,7 @@ export function loadFromUrlSearchParams(urlParams: URLSearchParams): Partial<Url
}

const config = deserializeViewerConfig(urlParams);
const selectedBackdropKey = decodePossiblyNullString(urlParams.get(UrlParam.BACKDROP_KEY)) ?? undefined;
const selectedBackdropKey = decodeString(urlParams.get(UrlParam.BACKDROP_KEY));
const scatterPlotConfig = deserializeScatterPlotConfig(urlParams);

// Remove undefined entries from the object for a cleaner return value
Expand Down
27 changes: 25 additions & 2 deletions tests/url_utils.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,14 @@ import { describe, expect, it } from "vitest";

import { DEFAULT_CATEGORICAL_PALETTE_KEY, KNOWN_CATEGORICAL_PALETTES, KNOWN_COLOR_RAMPS } from "../src/colorizer";
import { getDefaultViewerConfig } from "../src/colorizer/constants";
import { DrawMode, DrawSettings, PlotRangeType, TabType, ThresholdType } from "../src/colorizer/types";
import {
DrawMode,
DrawSettings,
PlotRangeType,
TabType,
ThresholdType,
VectorTooltipMode,
} from "../src/colorizer/types";
import {
isAllenPath,
isHexColor,
Expand Down Expand Up @@ -109,6 +116,7 @@ describe("Loading + saving from URL query strings", () => {
expect(parsedParams).deep.equals(originalParams);
});

// TODO: Make a copy of this test to test alternate values for each parameter
it("Saves and retrieves URL params correctly", () => {
// This will need to be updated for any new URL params.
// The use of `Required` makes sure that we don't forget to update this test :)
Expand Down Expand Up @@ -152,6 +160,14 @@ describe("Loading + saving from URL query strings", () => {
openTab: TabType.FILTERS,
outOfRangeDrawSettings: { mode: DrawMode.HIDE, color: new Color("#ff0000") } as DrawSettings,
outlierDrawSettings: { mode: DrawMode.USE_COLOR, color: new Color("#00ff00") } as DrawSettings,
vectorConfig: {
visible: true,
key: "key",
timeIntervals: 18,
color: new Color("#ff00ff"),
scaleFactor: 5,
tooltipMode: VectorTooltipMode.COMPONENTS,
},
},
selectedBackdropKey: "some_backdrop",
scatterPlotConfig: {
Expand All @@ -162,7 +178,14 @@ describe("Loading + saving from URL query strings", () => {
};
const queryString = paramsToUrlQueryString(originalParams);
const expectedQueryString =
"?collection=collection&dataset=dataset&feature=feature&track=25&t=14&filters=f1%3Am%3A0%3A0%2Cf2%3Aum%3ANaN%3ANaN%2Cf3%3Akm%3A0%3A1%2Cf4%3Amm%3A0.501%3A1000.485%2Cf5%3A%3Afff%2Cf6%3A%3A11&range=21.433%2C89.400&color=myMap-1!&palette-key=adobe&bg-sat=50&bg-brightness=75&fg-alpha=25&outlier-color=00ff00&outlier-mode=1&filter-color=ff0000&filter-mode=0&tab=filters&bg=1&scalebar=1&timestamp=0&path=1&keep-range=1&bg-key=some_backdrop&scatter-range=all&scatter-x=x%20axis%20name&scatter-y=y%20axis%20name";
"?collection=collection&dataset=dataset&feature=feature&track=25&t=14" +
"&filters=f1%3Am%3A0%3A0%2Cf2%3Aum%3ANaN%3ANaN%2Cf3%3Akm%3A0%3A1%2Cf4%3Amm%3A0.501%3A1000.485%2Cf5%3A%3Afff%2Cf6%3A%3A11" +
"&range=21.433%2C89.400&color=myMap-1!&palette-key=adobe&bg-sat=50&bg-brightness=75&fg-alpha=25" +
"&outlier-color=00ff00&outlier-mode=1&filter-color=ff0000&filter-mode=0" +
"&tab=filters" +
"&vc=1&vc-color=ff00ff&vc-key=key&vc-scale=5&vc-time-int=18&vc-tooltip=c" +
"&bg=1&scalebar=1&timestamp=0&path=1&keep-range=1&bg-key=some_backdrop" +
"&scatter-range=all&scatter-x=x%20axis%20name&scatter-y=y%20axis%20name";
expect(queryString).equals(expectedQueryString);

const parsedParams = loadFromUrlSearchParams(new URLSearchParams(queryString));
Expand Down
Loading