fix: panel crash when selected variable value is undefined

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to the "Range Slider Panel" plugin will be documented in thi
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.12] - 2024-04-29
+
+- Fix panel crashing when selected variable value is undefined
+- Fix plugin chosing "TO" as default delimiter, when delimiter field is empty
+
 ## [1.1.11] - 2024-02-12
 
 - Add sign plugin step in github workflow

package.json

@@ -1,6 +1,6 @@
 {
   "name": "anyline-rangeslider-panelt-plugin",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "description": "Ui for textbox input variable",
   "scripts": {
     "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",

src/components/SimplePanel.tsx

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
-import { PanelProps, TypedVariableModel } from '@grafana/data';
+import { PanelProps } from '@grafana/data';
 import MultiRangeSlider from 'multi-range-slider-react';
 import { getTemplateSrv, locationService } from '@grafana/runtime';
 import { SimpleOptions } from '../types';
 import findMinAndMaxValues from './utils/findMinAndMaxValues';
 
-const DEFAULT_PREFIX = '[';
+const DEFAULT_PREFIX = '';
 const DEFAUT_DELIMITER = 'TO';
-const DEFAULT_SUFFIX = ']';
+const DEFAULT_SUFFIX = '';
 
 type RangeChangeEvent = {
   minValue: number;
@@ -17,19 +17,28 @@ type RangeChangeEvent = {
 interface Props extends PanelProps<SimpleOptions> {}
 
 const SimplePanel: React.FC<Props> = ({ options }) => {
-  const selectedVariable = getTemplateSrv()
-    .getVariables()
-    .filter((variable) => {
-      return variable.name === options.variableName;
-    });
+  const selectedVariable =
+    getTemplateSrv()
+      .getVariables()
+      .filter((variable) => {
+        return variable.name === options.variableName;
+      }) || '';
 
-  let selectedVariableValue = null;
+  let selectedVariableValue = '';
 
   if (selectedVariable.length > 0 && 'current' in selectedVariable[0]) {
     selectedVariableValue = selectedVariable[0].current.value as string;
   }
 
-  const { minValue, maxValue } = findMinAndMaxValues(selectedVariableValue);
+  let minValue;
+  let maxValue;
+
+  try {
+    ({ minValue, maxValue } = findMinAndMaxValues(selectedVariableValue));
+  } catch (err) {
+    minValue = '';
+    maxValue = '';
+  }
 
   const [_minValue, setMinValue] = useState<string>(minValue);
   const [_maxValue, setMaxValue] = useState<string>(maxValue);
@@ -60,8 +69,13 @@ const SimplePanel: React.FC<Props> = ({ options }) => {
     locationService.partial({ [`var-${options.variableName}`]: variableValue }, true);
   };
 
-  if (!selectedVariable) {
-    return <div style={{ padding: '8px' }}>No variable selected yet</div>;
+  if (!selectedVariable || !selectedVariableValue || (minValue === '' && maxValue === '')) {
+    return (
+      <div style={{ padding: '8px' }}>
+        No variable selected yet or variable value has incorrect syntax. Please check panel settings to defined range
+        prefix, range suffix and range delimiter.
+      </div>
+    );
   }
 
   return (

src/components/utils/findMinAndMaxValues.ts

@@ -1,10 +1,10 @@
-export default function findMinAndMaxValues(variableValue: string | null) {
-    const regex = /^.*?(\d+).*?(\d+)[^\d]*$/;
-    const matches = variableValue?.match(regex);
+export default function findMinAndMaxValues(variableValue: string) {
+  const regex = /^.*?(-?\d+).*?(-?\d+)[^\d]*$/;
+  const matches = variableValue?.match(regex);
 
-    if (matches && matches.length >= 3) {
-        return { minValue: matches[1].toString(), maxValue: matches[2].toString() };
-    } else {
-        return { minValue: "25", maxValue: "75" };
-    }
+  if (matches && matches.length >= 3) {
+    return { minValue: matches[1].toString(), maxValue: matches[2].toString() };
+  } else {
+    throw new Error('Could not find min and max values');
+  }
 }

src/module.ts

@@ -4,19 +4,21 @@ import SimplePanel from './components/SimplePanel';
 import { getTemplateSrv } from '@grafana/runtime';
 
 export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOptions((builder) => {
-
   return builder
     .addSelect({
       path: 'variableName',
       name: 'Variable Name',
       description: 'The name of the variable to update',
       settings: {
-        options: getTemplateSrv().getVariables().filter(e => e.type === "textbox").map(e => {
-          return {
-            label: e.name,
-            value: e.name
-          }
-        }),
+        options: getTemplateSrv()
+          .getVariables()
+          .filter((e) => e.type === 'textbox')
+          .map((e) => {
+            return {
+              label: e.name,
+              value: e.name,
+            };
+          }),
       },
     })
     .addTextInput({
@@ -39,24 +41,21 @@ export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOption
       path: 'rangePrefix',
       name: 'Range Prefix',
       description: 'Prefix for the range (e.g., "[" for lucene queries)',
-      defaultValue: '[',
     })
     .addTextInput({
       path: 'rangeSuffix',
       name: 'Range Suffix',
       description: 'Suffix for the range (e.g., "]" for lucene queries)',
-      defaultValue: ']',
     })
     .addTextInput({
       path: 'rangeDelimiter',
       name: 'Range Delimiter',
       description: 'Delimiter for the range (e.g., "TO" for lucene queries)',
-      defaultValue: 'TO',
     })
     .addBooleanSwitch({
       path: 'delimiterSpace',
       name: 'Space before and after the delimiter',
       description: 'Toggle to add/remove space before and after the delimiter',
-      defaultValue: true
-    })
+      defaultValue: true,
+    });
 });

src/plugin.json

@@ -25,7 +25,7 @@
         "path": "img/Anyline-Range-Slider.png"
       }
     ],
-    "version": "1.1.11",
+    "version": "1.1.12",
     "updated": "2024-04-17"
   },
   "dependencies": {