fix(wasm): check if wasm enabled and no errors

L2D2Grafana · L2D2Grafana · commit e6eee2f23dac · 2026-02-23T13:24:51.000-08:00
diff --git a/src/Components/ServiceScene/Breakdowns/FieldValuesBreakdownScene.tsx b/src/Components/ServiceScene/Breakdowns/FieldValuesBreakdownScene.tsx
@@ -29,7 +29,6 @@ import { logger } from '../../../services/logger';
 import { LokiQuery } from '../../../services/lokiQuery';
 import { getQueryRunner } from '../../../services/panel';
 import { buildDataQuery, renderLogQLFieldFilters, renderLogQLMetadataFilters } from '../../../services/query';
-import { DEFAULT_SORT_BY } from '../../../services/sorting';
 import { getSortByPreference } from '../../../services/store';
 import {
   getFieldGroupByVariable,
@@ -50,6 +49,7 @@ import { LayoutSwitcher } from './LayoutSwitcher';
 import { ValueSummaryPanelScene } from './Panels/ValueSummary';
 import { QueryErrorAlert } from './QueryErrorAlert';
 import { getLabelValue } from './SortByScene';
+import { DEFAULT_SORT_DIRECTION, getDefaultSortBy } from 'services/sorting';
 
 export interface FieldValuesBreakdownSceneState extends SceneObjectState {
   $data?: SceneDataProvider;
@@ -377,7 +377,7 @@ export class FieldValuesBreakdownScene extends SceneObjectBase<FieldValuesBreakd
    */
   private buildBody(query: LokiQuery) {
     const { optionValue, parser } = this.getParserForThisField();
-    const { direction, sortBy } = getSortByPreference('fields', DEFAULT_SORT_BY, 'desc');
+    const { direction, sortBy } = getSortByPreference('fields', getDefaultSortBy(), DEFAULT_SORT_DIRECTION);
     const fieldsBreakdownScene = sceneGraph.getAncestor(this, FieldsBreakdownScene);
     const getFilter = () => fieldsBreakdownScene.state.search.state.filter ?? '';
 
diff --git a/src/Components/ServiceScene/Breakdowns/FieldsBreakdownScene.tsx b/src/Components/ServiceScene/Breakdowns/FieldsBreakdownScene.tsx
@@ -21,7 +21,6 @@ import { CustomConstantVariable, CustomConstantVariableState } from '../../../se
 import { ValueSlugs } from '../../../services/enums';
 import { navigateToValueBreakdown } from '../../../services/navigate';
 import { getRouteParams, getUILabelName } from '../../../services/routing';
-import { DEFAULT_SORT_BY } from '../../../services/sorting';
 import { getFieldGroupByVariable, getLabelsVariable } from '../../../services/variableGetters';
 import { clearVariables, getVariablesThatCanBeCleared } from '../../../services/variableHelpers';
 import { IndexScene } from '../../IndexScene/IndexScene';
@@ -39,6 +38,7 @@ import { SortByScene, SortCriteriaChanged } from './SortByScene';
 import { StatusWrapper } from './StatusWrapper';
 import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from 'services/analytics';
 import { getFieldOptions } from 'services/filters';
+import { DEFAULT_SORT_DIRECTION, getDefaultSortBy } from 'services/sorting';
 import { getSortByPreference } from 'services/store';
 import { ALL_VARIABLE_VALUE, VAR_FIELD_GROUP_BY, VAR_FIELDS, VAR_LABELS } from 'services/variables';
 
@@ -269,7 +269,7 @@ export class FieldsBreakdownScene extends SceneObjectBase<FieldsBreakdownSceneSt
     }
 
     const variable = getFieldGroupByVariable(this);
-    const { direction, sortBy } = getSortByPreference('fields', DEFAULT_SORT_BY, 'desc');
+    const { direction, sortBy } = getSortByPreference('fields', getDefaultSortBy(), DEFAULT_SORT_DIRECTION);
 
     reportAppInteraction(
       USER_EVENTS_PAGES.service_details,
diff --git a/src/Components/ServiceScene/Breakdowns/LabelBreakdownScene.tsx b/src/Components/ServiceScene/Breakdowns/LabelBreakdownScene.tsx
@@ -21,7 +21,6 @@ import { areArraysEqual } from '../../../services/comparison';
 import { CustomConstantVariable, CustomConstantVariableState } from '../../../services/CustomConstantVariable';
 import { ValueSlugs } from '../../../services/enums';
 import { navigateToValueBreakdown } from '../../../services/navigate';
-import { DEFAULT_SORT_BY } from '../../../services/sorting';
 import { getLabelGroupByVariable, getLabelsVariable } from '../../../services/variableGetters';
 import { clearVariables, getVariablesThatCanBeCleared } from '../../../services/variableHelpers';
 import { IndexScene } from '../../IndexScene/IndexScene';
@@ -38,6 +37,7 @@ import { StatusWrapper } from './StatusWrapper';
 import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from 'services/analytics';
 import { getLabelOptions } from 'services/filters';
 import { getRouteParams } from 'services/routing';
+import { DEFAULT_SORT_DIRECTION, getDefaultSortBy } from 'services/sorting';
 import { getSortByPreference } from 'services/store';
 import { ALL_VARIABLE_VALUE, SERVICE_NAME, SERVICE_UI_LABEL, VAR_LABEL_GROUP_BY, VAR_LABELS } from 'services/variables';
 
@@ -273,7 +273,7 @@ export class LabelBreakdownScene extends SceneObjectBase<LabelBreakdownSceneStat
     const variable = getLabelGroupByVariable(this);
     variable.changeValueTo(value);
 
-    const { direction, sortBy } = getSortByPreference('labels', DEFAULT_SORT_BY, 'desc');
+    const { direction, sortBy } = getSortByPreference('labels', getDefaultSortBy(), DEFAULT_SORT_DIRECTION);
     reportAppInteraction(
       USER_EVENTS_PAGES.service_details,
       USER_EVENTS_ACTIONS.service_details.select_field_in_breakdown_clicked,
diff --git a/src/Components/ServiceScene/Breakdowns/LabelValuesBreakdownScene.tsx b/src/Components/ServiceScene/Breakdowns/LabelValuesBreakdownScene.tsx
@@ -25,7 +25,6 @@ import { buildLabelsQuery, LABEL_BREAKDOWN_GRID_TEMPLATE_COLUMNS } from '../../.
 import { logger } from '../../../services/logger';
 import { getQueryRunner, setLevelColorOverrides } from '../../../services/panel';
 import { renderLevelsFilter, renderLogQLLabelFilters } from '../../../services/query';
-import { DEFAULT_SORT_BY } from '../../../services/sorting';
 import { getSortByPreference } from '../../../services/store';
 import {
   getFieldsVariable,
@@ -53,6 +52,7 @@ import { LayoutSwitcher } from './LayoutSwitcher';
 import { NoMatchingLabelsScene } from './NoMatchingLabelsScene';
 import { ValueSummaryPanelScene } from './Panels/ValueSummary';
 import { getLabelValue } from './SortByScene';
+import { DEFAULT_SORT_DIRECTION, getDefaultSortBy } from 'services/sorting';
 
 type DisplayError = DataQueryError & { displayed: boolean };
 type DisplayErrors = Record<string, DisplayError>;
@@ -373,7 +373,7 @@ export class LabelValuesBreakdownScene extends SceneObjectBase<LabelValueBreakdo
       .setMenu(new PanelMenu({}))
       .setTitle(tagKey);
 
-    const { direction, sortBy } = getSortByPreference('labels', DEFAULT_SORT_BY, 'desc');
+    const { direction, sortBy } = getSortByPreference('labels', getDefaultSortBy(), DEFAULT_SORT_DIRECTION);
 
     const getFilter = () => labelBreakdownScene.state.search.state.filter ?? '';
 
diff --git a/src/Components/ServiceScene/Breakdowns/SortByScene.test.tsx b/src/Components/ServiceScene/Breakdowns/SortByScene.test.tsx
@@ -4,22 +4,35 @@ import { render, screen, waitFor } from '@testing-library/react';
 import { select } from 'react-select-event';
 
 import { SortByScene, SortCriteriaChanged } from './SortByScene';
+import { setWasmInit } from 'services/sorting';
 import { setSortByPreference } from 'services/store';
 
 describe('SortByScene', () => {
   let scene: SortByScene;
   beforeEach(() => {
     localStorage.clear();
+    setWasmInit(true);
     scene = new SortByScene({ target: 'fields' });
   });
 
-  test('Sorts by standard deviation by default', () => {
+  test('Shows changepoint as default when WASM init succeeded', () => {
     render(<scene.Component model={scene} />);
 
     expect(screen.getByText('Most relevant')).toBeInTheDocument();
     expect(screen.getByText('Desc')).toBeInTheDocument();
   });
 
+  test('Hides changepoint and outliers when WASM init failed', () => {
+    setWasmInit(false);
+    scene = new SortByScene({ target: 'fields' });
+    render(<scene.Component model={scene} />);
+
+    expect(screen.queryByText('Most relevant')).not.toBeInTheDocument();
+    expect(screen.queryByText('Outlying values')).not.toBeInTheDocument();
+    expect(screen.getByText('Widest spread')).toBeInTheDocument();
+    expect(screen.getByText('Desc')).toBeInTheDocument();
+  });
+
   test('Retrieves stored sorting preferences', () => {
     setSortByPreference('fields', 'alphabetical', 'asc');
 
diff --git a/src/Components/ServiceScene/Breakdowns/SortByScene.tsx b/src/Components/ServiceScene/Breakdowns/SortByScene.tsx
@@ -4,12 +4,18 @@ import { BusEventBase, DataFrame, FieldReducerInfo, fieldReducers, ReducerID, Se
 import { SceneComponentProps, SceneObjectBase, SceneObjectState } from '@grafana/scenes';
 import { InlineField, Select } from '@grafana/ui';
 
-import { DEFAULT_SORT_BY } from '../../../services/sorting';
-import { testIds } from '../../../services/testIds';
 import { getLabelValueFromDataFrame } from 'services/levels';
+import {
+  DEFAULT_SORT_BY,
+  DEFAULT_SORT_DIRECTION,
+  getDefaultSortBy,
+  isWasmInit,
+  SORT_BY_OUTLIERS,
+  SortBy,
+} from 'services/sorting';
 import { getSortByPreference, setSortByPreference } from 'services/store';
+import { testIds } from 'services/testIds';
 
-export type SortBy = 'changepoint' | 'outliers' | ReducerID | '';
 export type SortDirection = 'asc' | 'desc';
 export interface SortBySceneState extends SceneObjectState {
   direction: SortDirection;
@@ -32,12 +38,12 @@ export class SortByScene extends SceneObjectBase<SortBySceneState> {
         {
           description: 'Smart ordering of graphs based on the most significant spikes in the data',
           label: 'Most relevant',
-          value: 'changepoint',
+          value: DEFAULT_SORT_BY,
         },
         {
           description: 'Order by the amount of outlying values in the data',
           label: 'Outlying values',
-          value: 'outliers',
+          value: SORT_BY_OUTLIERS,
         },
         {
           description: 'Sort graphs by deviation from the average value',
@@ -73,10 +79,13 @@ export class SortByScene extends SceneObjectBase<SortBySceneState> {
   ];
 
   constructor(state: Pick<SortBySceneState, 'target'>) {
-    const { direction, sortBy } = getSortByPreference(state.target, DEFAULT_SORT_BY, 'desc');
+    const defaultSortBy = getDefaultSortBy();
+    const { direction, sortBy } = getSortByPreference(state.target, defaultSortBy, DEFAULT_SORT_DIRECTION);
+    const finalSortBy: SortBy =
+      (sortBy === DEFAULT_SORT_BY || sortBy === SORT_BY_OUTLIERS) && !isWasmInit() ? defaultSortBy : sortBy;
     super({
       direction,
-      sortBy,
+      sortBy: finalSortBy,
       target: state.target,
     });
   }
@@ -101,8 +110,17 @@ export class SortByScene extends SceneObjectBase<SortBySceneState> {
 
   public static Component = ({ model }: SceneComponentProps<SortByScene>) => {
     const { direction, sortBy } = model.useState();
-    const group = model.sortingOptions.find((group) =>
-      group.options.find((option: SelectableValue<SortBy>) => option.value === sortBy)
+    const wasmInit = isWasmInit();
+    const defaultOptions = wasmInit
+      ? model.sortingOptions
+      : model.sortingOptions.map((group) => ({
+          ...group,
+          options: group.options.filter(
+            (opt: SelectableValue<SortBy>) => opt.value !== DEFAULT_SORT_BY && opt.value !== SORT_BY_OUTLIERS
+          ),
+        }));
+    const group = defaultOptions.find((g) =>
+      g.options.find((option: SelectableValue<SortBy>) => option.value === sortBy)
     );
     const sortByValue: SelectableValue<SortBy> | undefined = group?.options.find(
       (option: SelectableValue<SortBy>) => option.value === sortBy
@@ -119,7 +137,7 @@ export class SortByScene extends SceneObjectBase<SortBySceneState> {
             value={sortByValue}
             width={20}
             isSearchable={true}
-            options={model.sortingOptions}
+            options={defaultOptions}
             placeholder={'Choose criteria'}
             onChange={model.onCriteriaChange}
             inputId="sort-by-criteria"
@@ -139,7 +157,7 @@ export class SortByScene extends SceneObjectBase<SortBySceneState> {
               },
               {
                 label: 'Desc',
-                value: 'desc',
+                value: DEFAULT_SORT_DIRECTION,
               },
             ]}
           ></Select>
diff --git a/src/Components/ServiceScene/OnExploreLinkClick.tsx b/src/Components/ServiceScene/OnExploreLinkClick.tsx
@@ -20,7 +20,7 @@ export const onExploreLinkClick = (indexScene: IndexScene, expr?: string, open =
   const displayedFields = getDisplayedFieldsInStorage(indexScene);
   const visualisationType = getLogsVisualizationType();
   const columns = getUrlColumns();
-  /* eslint-disable sort/object-properties */
+
   const exploreState = JSON.stringify({
     ['loki-explore']: {
       range: toURLRange(timeRange.raw),
diff --git a/src/module.tsx b/src/module.tsx
@@ -17,7 +17,7 @@ const App = lazy(async () => {
   // Initialize i18n before loading any components
   await initPluginTranslations(pluginJson.id);
 
-  const { wasmSupported } = await import('services/sorting');
+  const { setWasmInit, wasmSupported } = await import('services/sorting');
 
   const { default: initRuntimeDs } = await import('services/datasource');
   const { default: initChangepoint } = await import('@bsull/augurs/changepoint');
@@ -28,8 +28,10 @@ const App = lazy(async () => {
   if (wasmSupported()) {
     try {
       await Promise.all([initChangepoint(), initOutlier()]);
+      setWasmInit(true);
     } catch (e) {
       console.warn('grafana-lokiexplore-app: WebAssembly init failed, ML sorting disabled.', e);
+      setWasmInit(false);
     }
   }
 
diff --git a/src/services/fields.ts b/src/services/fields.ts
@@ -12,7 +12,7 @@ import {
 import { DrawStyle, StackingMode } from '@grafana/ui';
 
 import { PanelMenu, TimeSeriesQueryType } from '../Components/Panels/PanelMenu';
-import { SortBy, SortByScene } from '../Components/ServiceScene/Breakdowns/SortByScene';
+import { SortByScene } from '../Components/ServiceScene/Breakdowns/SortByScene';
 import { getDetectedFieldsFrame, getLogsPanelFrame, ServiceScene } from '../Components/ServiceScene/ServiceScene';
 import { LabelType } from './fieldsTypes';
 import { logger } from './logger';
@@ -25,6 +25,7 @@ import {
 } from './logsFrame';
 import { getLabelTypeFromFrame } from './lokiQuery';
 import { setLevelColorOverrides } from './panel';
+import { SortBy } from './sorting';
 import {
   getFieldsVariable,
   getJSONFieldsVariable,
diff --git a/src/services/logsSyntaxMatches.ts b/src/services/logsSyntaxMatches.ts
@@ -1,5 +1,5 @@
 // Synced with https://github.com/grafana/grafana/blob/ca730935733d86339177ed5d014b9343831df98b/public/app/features/logs/components/panel/grammar.ts
-/* eslint-disable sort/object-properties */
+
 export const logsSyntaxMatches: Record<string, RegExp> = {
   // Levels regex
   'log-token-critical': /(\b)(CRITICAL|CRIT)($|\s)/gi,
diff --git a/src/services/sorting.ts b/src/services/sorting.ts
@@ -9,23 +9,37 @@ import { getLabelValueFromDataFrame } from './levels';
 import { logger } from './logger';
 
 export const DEFAULT_SORT_BY = 'changepoint';
+export const SORT_BY_OUTLIERS = 'outliers';
+export const DEFAULT_SORT_DIRECTION = 'desc' as const;
+
+export type SortBy = typeof DEFAULT_SORT_BY | typeof SORT_BY_OUTLIERS | ReducerID | '';
+
+let wasmInitSucceeded = false;
+
+export const setWasmInit = (succeeded: boolean) => {
+  wasmInitSucceeded = succeeded;
+};
+
+export const isWasmInit = () => wasmInitSucceeded;
+
+export const getDefaultSortBy = (): SortBy => (isWasmInit() ? DEFAULT_SORT_BY : ReducerID.stdDev);
 
 export const sortSeries = memoize(
   (series: DataFrame[], sortBy: string, direction: string) => {
     if (sortBy === 'alphabetical') {
       return sortSeriesByName(series, direction);
     }
 
-    if (sortBy === 'outliers') {
+    if (sortBy === SORT_BY_OUTLIERS) {
       initOutlierDetector(series);
     }
 
     const reducer = (dataFrame: DataFrame) => {
       // ML & Wasm sorting options
       try {
-        if (sortBy === 'changepoint') {
+        if (sortBy === DEFAULT_SORT_BY) {
           return calculateDataFrameChangepoints(dataFrame);
-        } else if (sortBy === 'outliers') {
+        } else if (sortBy === SORT_BY_OUTLIERS) {
           return calculateOutlierValue(series, dataFrame);
         }
       } catch (e) {
@@ -78,7 +92,7 @@ export const sortSeries = memoize(
 );
 
 export const calculateDataFrameChangepoints = (data: DataFrame) => {
-  if (!wasmSupported()) {
+  if (!isWasmInit()) {
     throw new Error('WASM not supported, fall back to stdDev');
   }
 
@@ -117,7 +131,7 @@ export const sortSeriesByName = (series: DataFrame[], direction: string) => {
 };
 
 const initOutlierDetector = (series: DataFrame[]) => {
-  if (!wasmSupported()) {
+  if (!isWasmInit()) {
     return;
   }
 
@@ -142,7 +156,7 @@ const initOutlierDetector = (series: DataFrame[]) => {
 let outliers: OutlierOutput | undefined = undefined;
 
 export const calculateOutlierValue = (series: DataFrame[], data: DataFrame): number => {
-  if (!wasmSupported()) {
+  if (!isWasmInit()) {
     throw new Error('WASM not supported, fall back to stdDev');
   }
   if (!outliers) {
diff --git a/src/services/store.ts b/src/services/store.ts
@@ -5,13 +5,14 @@ import { Options } from '@grafana/schema/dist/esm/raw/composable/logs/panelcfg/x
 
 import { CollapsablePanelText, TimeSeriesPanelType } from '../Components/Panels/PanelMenu';
 import { FieldsPanelsType } from '../Components/ServiceScene/Breakdowns/FieldsAggregatedBreakdownScene';
-import { SortBy, SortDirection } from '../Components/ServiceScene/Breakdowns/SortByScene';
+import { SortDirection } from '../Components/ServiceScene/Breakdowns/SortByScene';
 import pluginJson from '../plugin.json';
 import { replaceSlash } from './extensions/links';
 import { isDedupStrategy } from './guards';
 import { logger } from './logger';
 import { unknownToStrings } from './narrowing';
 import { getRouteParams } from './routing';
+import { SortBy } from './sorting';
 import { getDataSourceName } from './variableGetters';
 import { SERVICE_NAME, SERVICE_UI_LABEL } from './variables';
 import { IndexScene } from 'Components/IndexScene/IndexScene';
