rename troubleshooting to debugging

Fixes thes grafana review comment by renaming troubleshooting to
debugging.

Plus removed the older versioned zips.

src/components/TroubleshootingEditor.tsx → src/components/DebuggingEditor.tsx

@@ -11,7 +11,7 @@ function displayDocs() {
 }
 
 function displayUnits() {
-  console.log(`Troubleshooting TimeSeries Unit Map of Category -> Subcategory -> {text, value}
+  console.log(`Debugging TimeSeries Unit Map of Category -> Subcategory -> {text, value}
   where 'text' is the unit displayed and 'value' is the 'id' you enter in the yaml config.`,
   getValueFormats());
 }
@@ -23,8 +23,8 @@ function displayData(context: any, onChange: any) {
 }
 
 export function displayDataInner(rawSeries: any, tsData: TimeSeriesData) {
-  console.log('Troubleshooting Data enriched:', tsData);
-  console.log('Troubleshooting Data raw:', rawSeries);
+  console.log('Debugging Data enriched:', tsData);
+  console.log('Debugging Data raw:', rawSeries);
 }
 
 function displayMappings(context: any, onChange: any) {
@@ -57,10 +57,10 @@ export function displayMappingsInner(panelConfig: PanelConfig, svgHolder: SvgHol
     unmappedSvgIds.delete(v.cellId);
   });
 
-  console.log('Troubleshooting Mappings: abstract:', abstract);
-  console.log('Troubleshooting Mappings: verbose:', svgHolder.attribs);
-  console.log('Troubleshooting Mappings: unmapped config ids:', unmappedConfigIds);
-  console.log('Troubleshooting Mappings: unmapped svg ids:', unmappedSvgIds);
+  console.log('Debugging Mappings: abstract:', abstract);
+  console.log('Debugging Mappings: verbose:', svgHolder.attribs);
+  console.log('Debugging Mappings: unmapped config ids:', unmappedConfigIds);
+  console.log('Debugging Mappings: unmapped svg ids:', unmappedSvgIds);
 }
 
 function displayColors(context: any, onChange: any) {
@@ -70,10 +70,10 @@ function displayColors(context: any, onChange: any) {
 }
 
 export function displayColorsInner(colors: any) {
-  console.log('Troubleshooting Colors:', colors);
+  console.log('Debugging Colors:', colors);
 }
 
-export const TroubleshootingEditor = ({context, onChange}: StandardEditorProps<number>) => {
+export const DebuggingEditor = ({context, onChange}: StandardEditorProps<number>) => {
   return <div>
     <div className={cx(
       css`

src/components/FlowPanel.tsx

@@ -3,13 +3,13 @@ import { css, cx } from '@emotion/css';
 import { useStyles2, useTheme2 } from '@grafana/ui';
 import { getTemplateSrv } from '@grafana/runtime';
 import { GrafanaTheme2, PanelProps, toDataFrame } from '@grafana/data';
-import { FlowOptions, TroubleshootingCtrs } from '../types';
+import { FlowOptions, DebuggingCtrs } from '../types';
 import { configInit, Link, panelConfigFactory, PanelConfig, siteConfigFactory, SiteConfig } from 'components/Config';
 import { loadSvg, loadYaml } from 'components/Loader';
 import { svgInit, svgUpdate, SvgHolder } from 'components/SvgUpdater';
 import { seriesExtend, seriesInterpolate , seriesTransform } from 'components/TimeSeries';
 import { TimeSliderFactory } from 'components/TimeSlider';
-import { displayColorsInner, displayDataInner, displayMappingsInner } from 'components/TroubleshootingEditor';
+import { displayColorsInner, displayDataInner, displayMappingsInner } from 'components/DebuggingEditor';
 import { primeColorCache, appendUrlParams } from 'components/Utils';
 import { addHook, sanitize } from 'dompurify';
 
@@ -81,7 +81,7 @@ export const FlowPanel: React.FC<Props> = ({ options, data, width, height, timeZ
   const [initialized, setInitialized] = useState<boolean>(false);
   const [timeSliderLabel, setTimeSliderLabel] = useState<string>();
   const timeSliderScalarRef = useRef<number>(1);
-  const troubleshootingCtrRef = useRef<TroubleshootingCtrs>({...options.troubleshootingCtr});
+  const debuggingCtrRef = useRef<DebuggingCtrs>({...options.debuggingCtr});
   const svgHolderRef = useRef<SvgHolder>();
   const clickHandlerRef = useRef<any>(null);
   const svgDocBlankRef = useRef<Document>(new DOMParser().parseFromString('<svg/>', "text/xml"));
@@ -137,32 +137,32 @@ export const FlowPanel: React.FC<Props> = ({ options, data, width, height, timeZ
   seriesInterpolate(tsData, timeSliderScalarRef.current);
 
   //---------------------------------------------------------------------------
-  // Troubleshooting data exports
+  // Debugging data exports
 
   useEffect(() => {
-    if (svgHolderRef.current && troubleshootingCtrRef.current) {
-      if (options.troubleshootingCtr.colorsCtr) {
-        if (options.troubleshootingCtr.colorsCtr !== troubleshootingCtrRef.current.colorsCtr) {
-          troubleshootingCtrRef.current.colorsCtr = options.troubleshootingCtr.colorsCtr;
+    if (svgHolderRef.current && debuggingCtrRef.current) {
+      if (options.debuggingCtr.colorsCtr) {
+        if (options.debuggingCtr.colorsCtr !== debuggingCtrRef.current.colorsCtr) {
+          debuggingCtrRef.current.colorsCtr = options.debuggingCtr.colorsCtr;
           displayColorsInner(grafanaTheme.current.visualization.hues);
         }
       }
 
-      if (options.troubleshootingCtr.mappingsCtr && panelConfig) {
-        if (options.troubleshootingCtr.mappingsCtr !== troubleshootingCtrRef.current.mappingsCtr) {
-          troubleshootingCtrRef.current.mappingsCtr = options.troubleshootingCtr.mappingsCtr;
+      if (options.debuggingCtr.mappingsCtr && panelConfig) {
+        if (options.debuggingCtr.mappingsCtr !== debuggingCtrRef.current.mappingsCtr) {
+          debuggingCtrRef.current.mappingsCtr = options.debuggingCtr.mappingsCtr;
           displayMappingsInner(panelConfig, svgHolderRef.current);
         }
       }
 
-      if (options.troubleshootingCtr.dataCtr) {
-        if (options.troubleshootingCtr.dataCtr !== troubleshootingCtrRef.current.dataCtr) {
-          troubleshootingCtrRef.current.dataCtr = options.troubleshootingCtr.dataCtr;
+      if (options.debuggingCtr.dataCtr) {
+        if (options.debuggingCtr.dataCtr !== debuggingCtrRef.current.dataCtr) {
+          debuggingCtrRef.current.dataCtr = options.debuggingCtr.dataCtr;
           displayDataInner(data.series, tsData);
         }
       }
     }
-  }, [options.troubleshootingCtr, data.series, tsData, panelConfig]);
+  }, [options.debuggingCtr, data.series, tsData, panelConfig]);
 
   //---------------------------------------------------------------------------
   // Update the SVG Attributes with the interpolated time-series data 

src/module.ts

@@ -1,7 +1,7 @@
 import { PanelPlugin } from '@grafana/data';
 import { FlowOptions } from './types';
 import { FlowPanel } from './components/FlowPanel';
-import { TroubleshootingEditor } from './components/TroubleshootingEditor';
+import { DebuggingEditor } from './components/DebuggingEditor';
 import {config} from '@grafana/runtime';
 
 export const plugin = new PanelPlugin<FlowOptions>(FlowPanel).setPanelOptions((builder) => {
@@ -55,13 +55,13 @@ export const plugin = new PanelPlugin<FlowOptions>(FlowPanel).setPanelOptions((b
     defaultValue: true,
   })
   .addCustomEditor({
-    category: ['Troubleshooting'],
-    id: 'troubleshootingCtr',
-    path: 'troubleshootingCtr',
+    category: ['Debugging'],
+    id: 'debuggingCtr',
+    path: 'debuggingCtr',
     name: `These buttons log relevant output to the browser console.
     Press '<CTRL><SHFT>J to view the console in Chrome.
     For details on how to use, refer to the docs.`,
-    editor: TroubleshootingEditor,
+    editor: DebuggingEditor,
     defaultValue: {dataCtr: 0, mappingsCtr: 0},
   });
 });

src/types.ts

@@ -1,4 +1,4 @@
-export type TroubleshootingCtrs = {
+export type DebuggingCtrs = {
   colorsCtr: number;
   mappingsCtr: number;
   dataCtr: number;
@@ -9,7 +9,6 @@ export interface FlowOptions {
   panelConfig: string;
   siteConfig: string;
   timeSliderEnabled: boolean;
-  troubleshootingDataCtr: number;
-  troubleshootingCtr: TroubleshootingCtrs;
+  debuggingCtr: DebuggingCtrs;
   testDataEnabled: boolean;
 };