Skip to content

Commit

Permalink
change: don't use urlSync for parameters
Browse files Browse the repository at this point in the history
It's pretty unnecessary and looks like it can cause bugs when there
are lots of the objects on the screen.
  • Loading branch information
sd2k committed Dec 4, 2024
1 parent 20cc5b0 commit 728d421
Show file tree
Hide file tree
Showing 4 changed files with 4 additions and 164 deletions.
57 changes: 1 addition & 56 deletions packages/scenes-ml/src/components/SceneBaseliner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { ButtonGroup, Checkbox, RadioButtonGroup, Slider, ToolbarButton, Tooltip
import { Duration } from 'date-fns';
import React from 'react';

import { sceneGraph, SceneComponentProps, SceneObjectState, SceneObjectUrlValues, SceneObjectBase, SceneObjectUrlSyncConfig, ExtraQueryDescriptor, ExtraQueryProvider, ExtraQueryDataProcessor } from "@grafana/scenes";
import { sceneGraph, SceneComponentProps, SceneObjectState, SceneObjectBase, ExtraQueryDescriptor, ExtraQueryProvider, ExtraQueryDataProcessor } from "@grafana/scenes";
import { of } from "rxjs";

Promise.all([
Expand Down Expand Up @@ -95,7 +95,6 @@ export class SceneBaseliner extends SceneObjectBase<SceneBaselinerState>
implements ExtraQueryProvider<SceneBaselinerState> {

public static Component = SceneBaselinerRenderer;
protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['discoverSeasonalities', 'interval', 'trainingLookbackFactor'] });
public latestData?: PanelData;

public constructor(state: Partial<SceneBaselinerState>) {
Expand Down Expand Up @@ -143,15 +142,6 @@ export class SceneBaseliner extends SceneObjectBase<SceneBaselinerState>
return false;
}

// Get the URL state for the component.
public getUrlState(): SceneObjectUrlValues {
return {
interval: this.state.interval?.toString(),
discoverSeasonalities: this.state.discoverSeasonalities?.toString(),
trainingLookbackFactor: this.state.trainingLookbackFactor?.toString(),
};
}

public onModelTypeChanged(modelType: ModelType) {
this.setState({ model: modelType });
}
Expand Down Expand Up @@ -179,51 +169,6 @@ export class SceneBaseliner extends SceneObjectBase<SceneBaselinerState>
public setLatestData(data: PanelData) {
this.latestData = data;
}

// Update the component state from the URL.
public updateFromUrl(values: SceneObjectUrlValues) {
if (!values.trainingLookbackFactor && !values.interval) {
return;
}
let factor: number | undefined;
if (typeof values.trainingLookbackFactor === 'string') {
factor = parseInt(values.trainingLookbackFactor, 10);
} else if (values.trainingLookbackFactor instanceof Array) {
factor = parseInt(values.trainingLookbackFactor[0], 10);
}
let interval: number | undefined;
if (typeof values.interval === 'string') {
interval = parseInt(values.interval, 10);
} else if (values.interval instanceof Array) {
interval = parseInt(values.interval[0], 10);
}
let discoverSeasonalities: boolean | undefined;
if (typeof values.discoverSeasonalities === 'string') {
discoverSeasonalities = values.discoverSeasonalities === 'true';
} else if (values.discoverSeasonalities instanceof Array) {
discoverSeasonalities = values.discoverSeasonalities[0] === 'true';
}
const stateUpdate: Partial<SceneBaselinerState> = {};
if (factor) {
const options = DEFAULT_TRAINING_FACTOR_OPTIONS;
if (options.find(({ value }) => value === factor)) {
stateUpdate.trainingLookbackFactor = factor;
} else {
stateUpdate.trainingLookbackFactor = DEFAULT_TRAINING_FACTOR_OPTION.value;
}
}
if (interval) {
stateUpdate.interval = interval;
} else {
stateUpdate.interval = DEFAULT_INTERVAL;
}
if (discoverSeasonalities) {
stateUpdate.discoverSeasonalities = discoverSeasonalities;
} else {
stateUpdate.discoverSeasonalities = false;
}
this.setState(stateUpdate);
}
}

// The transformation function for the baseliner.
Expand Down
44 changes: 1 addition & 43 deletions packages/scenes-ml/src/components/SceneChangepointDetector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { of } from "rxjs";

init().then(() => console.log('augurs changepoints initialized'));

import { SceneComponentProps, SceneObjectState, SceneObjectUrlValues, SceneObjectBase, SceneObjectUrlSyncConfig, ExtraQueryDataProcessor, ExtraQueryProvider, ExtraQueryDescriptor } from "@grafana/scenes";
import { SceneComponentProps, SceneObjectState, SceneObjectBase, ExtraQueryDataProcessor, ExtraQueryProvider, ExtraQueryDescriptor } from "@grafana/scenes";

export interface Changepoint {
idx: number
Expand Down Expand Up @@ -43,8 +43,6 @@ export class SceneChangepointDetector extends SceneObjectBase<SceneChangepointDe
implements ExtraQueryProvider<SceneChangepointDetectorState> {

public static Component = SceneChangepointDetectorRenderer;
protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['changepointLookbackFactor', 'changepointEnabled'] });

public constructor(state: Partial<SceneChangepointDetectorState>) {
super({ lookbackFactorOptions: DEFAULT_LOOKBACK_FACTOR_OPTIONS, ...state });
}
Expand Down Expand Up @@ -80,14 +78,6 @@ export class SceneChangepointDetector extends SceneObjectBase<SceneChangepointDe
return prev.enabled !== next.enabled;
}

// Get the URL state for the component.
public getUrlState(): SceneObjectUrlValues {
return {
changepointLookbackFactor: this.state.lookbackFactor?.toString(),
changepointEnabled: this.state.enabled?.toString(),
};
}

public onEnabledChanged(enabled: boolean) {
this.setState({ enabled });
}
Expand All @@ -99,38 +89,6 @@ export class SceneChangepointDetector extends SceneObjectBase<SceneChangepointDe
public onClearFactor() {
this.setState({ lookbackFactor: undefined });
}

// Update the component state from the URL.
public updateFromUrl(values: SceneObjectUrlValues) {
if (!values.changepointLookbackFactor && !values.changepointEnabled) {
return;
}
let factor: number | undefined;
if (typeof values.changepointLookbackFactor === 'string') {
factor = parseInt(values.changepointLookbackFactor, 10);
} else if (values.changepointLookbackFactor instanceof Array) {
factor = parseInt(values.changepointLookbackFactor[0], 10);
}
let enabled: boolean | undefined;
if (typeof values.changepointEnabled === 'string') {
enabled = values.changepointEnabled === 'true';
} else if (typeof values.changepointEnabled === 'number') {
enabled = values.changepointEnabled === 1;
}
const stateUpdate: Partial<SceneChangepointDetectorState> = {};
if (factor) {
const options = DEFAULT_LOOKBACK_FACTOR_OPTIONS;
if (options.find(({ value }) => value === factor)) {
stateUpdate.lookbackFactor = factor;
} else {
stateUpdate.lookbackFactor = DEFAULT_LOOKBACK_FACTOR_OPTION.value;
}
}
if (enabled) {
stateUpdate.enabled = enabled;
}
this.setState(stateUpdate);
}
}

// The transformation function for the changepoint detector.
Expand Down
39 changes: 1 addition & 38 deletions packages/scenes-ml/src/components/SceneOutlierDetector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { DataFrame, DataQueryRequest, FieldType, GrafanaTheme2, PanelData, color
import { DataTopic, FieldColorModeId } from "@grafana/schema";
import { ButtonGroup, Checkbox, RadioButtonGroup, Slider, ToolbarButton, Tooltip, useStyles2 } from "@grafana/ui";

import { SceneComponentProps, SceneObjectState, SceneObjectUrlValues, SceneObjectBase, SceneObjectUrlSyncConfig, ExtraQueryProvider, ExtraQueryDescriptor } from "@grafana/scenes";
import { SceneComponentProps, SceneObjectState, SceneObjectBase, ExtraQueryProvider, ExtraQueryDescriptor } from "@grafana/scenes";
import { css, cx } from '@emotion/css';
import { of } from 'rxjs';

Expand Down Expand Up @@ -49,7 +49,6 @@ export class SceneOutlierDetector extends SceneObjectBase<SceneOutlierDetectorSt
implements ExtraQueryProvider<SceneOutlierDetectorState> {

public static Component = SceneOutlierDetectorRenderer;
protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['outlierSensitivity', 'outlierAddAnnotations'] });
private latestData: PanelData | undefined;

// The most recent detector instance.
Expand Down Expand Up @@ -126,42 +125,6 @@ export class SceneOutlierDetector extends SceneObjectBase<SceneOutlierDetectorSt
}
return prev.sensitivity !== next.sensitivity || prev.addAnnotations !== next.addAnnotations || prev.pinned !== next.pinned || prev.algorithm !== next.algorithm;
}

// Get the URL state for the component.
public getUrlState(): SceneObjectUrlValues {
return {
outlierSensitivity: this.state.sensitivity?.toString(),
outlierAddAnnotations: this.state.addAnnotations?.toString(),
};
}

public updateFromUrl(values: SceneObjectUrlValues) {
if (!values.outlierSensitivity && !values.outlierAddAnnotations) {
return;
}
let sensitivity: number | undefined;
if (typeof values.outlierSensitivity === 'string') {
sensitivity = parseFloat(values.outlierSensitivity);
}

let addAnnotations: boolean | undefined;
if (typeof values.outlierAddAnnotations === 'string') {
addAnnotations = values.outlierAddAnnotations === 'true';
}

const stateUpdate: Partial<SceneOutlierDetectorState> = {};
if (sensitivity) {
stateUpdate.sensitivity = sensitivity;
} else {
stateUpdate.sensitivity = DEFAULT_SENSITIVITY;
}
if (addAnnotations) {
stateUpdate.addAnnotations = addAnnotations;
} else {
stateUpdate.addAnnotations = true;
}
this.setState(stateUpdate);
}
}

function createDetector(algorithm: OutlierDetectorAlgorithm, data: DataFrame, sensitivity: number): LoadedOutlierDetector {
Expand Down
28 changes: 1 addition & 27 deletions packages/scenes-ml/src/components/SceneTimeSeriesClusterer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { DataFrame, DataQueryRequest, FieldType, GrafanaTheme2, PanelData, outer
import { FieldColorModeId } from "@grafana/schema";
import { ButtonGroup, Checkbox, Slider, ToolbarButton, Tooltip, useStyles2 } from "@grafana/ui";

import { SceneComponentProps, SceneObjectState, SceneObjectUrlValues, SceneObjectBase, SceneObjectUrlSyncConfig, ExtraQueryProvider, ExtraQueryDescriptor } from "@grafana/scenes";
import { SceneComponentProps, SceneObjectState, SceneObjectBase, ExtraQueryProvider, ExtraQueryDescriptor } from "@grafana/scenes";
import { css, cx } from '@emotion/css';
import { of } from 'rxjs';

Expand All @@ -23,7 +23,6 @@ export class SceneTimeSeriesClusterer extends SceneObjectBase<SceneTimeSeriesClu
implements ExtraQueryProvider<SceneTimeSeriesClustererState> {

public static Component = SceneTimeSeriesClustererRenderer;
protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['clusterepsilon'] });
private latestData: PanelData | undefined;
private clusters: Record<number, Cluster> | undefined;

Expand Down Expand Up @@ -84,31 +83,6 @@ export class SceneTimeSeriesClusterer extends SceneObjectBase<SceneTimeSeriesClu
}
return prev.epsilon !== next.epsilon || prev.pinned !== next.pinned;
}

// Get the URL state for the component.
public getUrlState(): SceneObjectUrlValues {
return {
clusterepsilon: this.state.epsilon?.toString(),
};
}

public updateFromUrl(values: SceneObjectUrlValues) {
if (!values.clusterepsilon) {
return;
}
let epsilon: number | undefined;
if (typeof values.clusterepsilon === 'string') {
epsilon = parseFloat(values.clusterepsilon);
}

const stateUpdate: Partial<SceneTimeSeriesClustererState> = {};
if (epsilon) {
stateUpdate.epsilon = epsilon;
} else {
stateUpdate.epsilon = DEFAULT_EPSILON;
}
this.setState(stateUpdate);
}
}

interface Cluster {
Expand Down

0 comments on commit 728d421

Please sign in to comment.