refactor: Applies formatting

Author: NeedleInAJayStack

.prettierignore

@@ -0,0 +1,6 @@
+# Ignore artifacts:
+.config
+package.json
+package-lock.json
+tsconfig.json
+yarn.lock

CHANGELOG.md

@@ -2,4 +2,4 @@
 
 ## 1.0.0 (Unreleased)
 
-Initial release.
+Initial release.

DEVELOPMENT_GUIDE.md

@@ -1,6 +1,7 @@
 # Development Guide
 
 ## Environment
+
 To get a development environment up and running, first ensure the following are installed:
 
 1. go
@@ -32,7 +33,7 @@ mage -v && docker-compose up
 ## Usage
 
 Create a new data source, select "Haystack", and provide it the details for the Haxall server
-that was started. In order to reference your host machine's network, use the url 
+that was started. In order to reference your host machine's network, use the url
 `http://host.docker.internal:8080/api/`. Click "Save and Test" and make sure that it is
 reported as working.
 
@@ -47,7 +48,7 @@ Alternatively, nearly every Axon query can be visualized using the table view.
 
 # Release
 
-To trigger a new release of the plugin, we need to push a version tag to github. This can be 
+To trigger a new release of the plugin, we need to push a version tag to github. This can be
 achieved with the following steps:
 
 1. Run `npm version <major|minor|patch>`
@@ -87,6 +88,7 @@ Grafana supports a wide range of data sources, including Prometheus, MySQL, and
    ```bash
    mage -l
    ```
+
 ### Frontend
 
 1. Install dependencies
@@ -112,7 +114,7 @@ Grafana supports a wide range of data sources, including Prometheus, MySQL, and
    ```bash
    # Runs the tests and watches for changes, requires git init first
    yarn test
-   
+
    # Exists after running all the tests
    yarn test:ci
    ```
@@ -126,9 +128,9 @@ Grafana supports a wide range of data sources, including Prometheus, MySQL, and
 6. Run the E2E tests (using Cypress)
 
    ```bash
-   # Spin up a Grafana instance first that we tests against 
+   # Spin up a Grafana instance first that we tests against
    yarn server
-   
+
    # Start the tests
    yarn e2e
    ```
@@ -137,13 +139,12 @@ Grafana supports a wide range of data sources, including Prometheus, MySQL, and
 
    ```bash
    yarn lint
-   
+
    # or
 
    yarn lint:fix
    ```
 
-
 # Distributing your plugin
 
 When distributing a Grafana plugin either within the community or privately the plugin must be signed so the Grafana application can verify its authenticity. This can be done with the `@grafana/sign-plugin` package.
@@ -183,7 +184,6 @@ To trigger the workflow we need to push a version tag to github. This can be ach
 1. Run `npm version <major|minor|patch>`
 2. Run `git push origin main --follow-tags`
 
-
 ## Learn more
 
 Below you can find source code for existing app plugins and other related documentation.

README.md

@@ -24,6 +24,6 @@ Contributions are very welcome! For details on how to develop this plugin, see t
 
 ## Continuing Work
 
-* [ ] Add alert support
-* [ ] Publish plugin
-* [ ] Consider enabling multi-point hisRead (through filters)
+- [ ] Add alert support
+- [ ] Publish plugin
+- [ ] Consider enabling multi-point hisRead (through filters)

src/README.md

@@ -24,10 +24,10 @@ one by selecting `+ New Dashboard` from the Dashboard menu in the left panel.
 Once within the panel editor, select your Haystack data source in the Data Sources menu. Next, select the type of
 Haystack query that should be performed. The supported queries are:
 
-- Eval: Evaluate a free-form Axon expression. *Note: Not all Haystack servers support this functionality*
+- Eval: Evaluate a free-form Axon expression. _Note: Not all Haystack servers support this functionality_
 - HisRead: Display the history of a single point over the selected time range.
 - Read: Display the records matching a filter. Since this is not timeseries data, it can only be viewed in Grafana's
-"Table" view.
+  "Table" view.
 
 #### Variable Usage
 
@@ -38,8 +38,8 @@ We also support injecting a few special variables from the time-range selector i
 - `$__timeRange_start`: DateTime start of the selected Grafana time range
 - `$__timeRange_end`: DateTime end of the selected Grafana time range
 - `$__maxDataPoints`: Number representing the pixel width of Grafana's display panel.
-- `$__interval`: Number representing Grafana's recommended data interval. This is the duration of the time range, 
-divided by the number of pixels, delivered in units of minutes.
+- `$__interval`: Number representing Grafana's recommended data interval. This is the duration of the time range,
+  divided by the number of pixels, delivered in units of minutes.
 
 To use them, simply enter the value in the input string. Below is an example of using the variables in an Eval query:
 
@@ -56,4 +56,4 @@ column is specified, the first one is used.
 The value injected by the variable exactly matches the displayed value, with the exception of Ref types, where the
 injected value is only the ID portion (i.e. the dis name is not included in the interpolation). Multiple-select values
 are combined with commas, (`red,blue`), but this may be customized using the
-[advanced variable format options](https://grafana.com/docs/grafana/latest/dashboards/variables/variable-syntax/#advanced-variable-format-options).
+[advanced variable format options](https://grafana.com/docs/grafana/latest/dashboards/variables/variable-syntax/#advanced-variable-format-options).

src/components/QueryEditor.tsx

@@ -24,72 +24,90 @@ export function QueryEditor({ query, onChange, onRunQuery }: Props) {
   const queryTypes = [
     { label: 'Eval', value: 0, description: 'Evaluate an Axon expression' },
     { label: 'HisRead', value: 1, description: 'Read the history of a point' },
-    { label: 'Read', value: 2, description: 'Read the records matched by a filter' }
+    { label: 'Read', value: 2, description: 'Read the records matched by a filter' },
   ];
   const queryTypeDefault = queryTypes[0];
   function queryTypeFromLabel(label: string) {
-    return queryTypes.find(queryType => queryType.label === label) ?? queryTypeDefault
+    return queryTypes.find((queryType) => queryType.label === label) ?? queryTypeDefault;
   }
 
   const SelectComponent = () => {
     return (
-    <Field>
-      <Select
-        options={queryTypes}
-        value={queryTypeFromLabel(query.type)}
-        defaultValue={queryTypeDefault}
-        width={30}
-        onChange={ queryType => {
-          onTypeChange(queryType);
-        }}
-      />
-    </Field>
+      <Field>
+        <Select
+          options={queryTypes}
+          value={queryTypeFromLabel(query.type)}
+          defaultValue={queryTypeDefault}
+          width={30}
+          onChange={(queryType) => {
+            onTypeChange(queryType);
+          }}
+        />
+      </Field>
     );
   };
 
   function renderQuery(): ReactNode {
     let queryType = queryTypeFromLabel(query.type);
-    switch(queryType.value) {
+    switch (queryType.value) {
       case 0: // Eval
         return (
-        <Field>
-          <Input width={100} prefix={<Icon name="angle-right" />} onChange={onEvalChange} value={query.eval} placeholder={DEFAULT_QUERY.eval} />
-        </Field>
+          <Field>
+            <Input
+              width={100}
+              prefix={<Icon name="angle-right" />}
+              onChange={onEvalChange}
+              value={query.eval}
+              placeholder={DEFAULT_QUERY.eval}
+            />
+          </Field>
         );
       case 1: // HisRead
         return (
-        <Field>
-          <Input width={30} prefix={"@"} onChange={onHisReadChange} value={query.hisRead} placeholder={DEFAULT_QUERY.hisRead} />
-        </Field>
+          <Field>
+            <Input
+              width={30}
+              prefix={'@'}
+              onChange={onHisReadChange}
+              value={query.hisRead}
+              placeholder={DEFAULT_QUERY.hisRead}
+            />
+          </Field>
         );
       case 2: // Read
         return (
-        <Field>
-          <Input width={75} prefix={<Icon name="filter" />} onChange={onReadChange} value={query.read} placeholder={DEFAULT_QUERY.read} />
-        </Field>
+          <Field>
+            <Input
+              width={75}
+              prefix={<Icon name="filter" />}
+              onChange={onReadChange}
+              value={query.read}
+              placeholder={DEFAULT_QUERY.read}
+            />
+          </Field>
         );
     }
-    return <p>Select a query type</p>
+    return <p>Select a query type</p>;
   }
 
   function onSubmit(newQuery: Partial<HaystackQuery>) {
-    query = { ...query, ...newQuery }
+    query = { ...query, ...newQuery };
     onRunQuery();
   }
 
   return (
     <div className="gf-form">
-      <Form
-        onSubmit={onSubmit}
-      >{({register, errors}) => {
-        return (
-          <div>
-            <SelectComponent/>
-            {renderQuery()}
-            <Button type="submit">Run</Button>
-          </div>
-        )
-      }}</Form>
+      <Form onSubmit={onSubmit}>
+        {({ register, errors }) => {
+          return (
+            <div>
+              <SelectComponent />
+              {renderQuery()}
+              <Button type="submit">Run</Button>
+            </div>
+          );
+        }}
+      </Form>
     </div>
   );
 }

src/components/VariableQueryEditor.tsx

@@ -23,13 +23,7 @@ export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, qu
     <>
       <div className="gf-form">
         <span className="gf-form-label width-10">Eval</span>
-        <input
-          name="eval"
-          className="gf-form-input"
-          onBlur={saveQuery}
-          onChange={handleChange}
-          value={state.eval}
-        />
+        <input name="eval" className="gf-form-input" onBlur={saveQuery} onChange={handleChange} value={state.eval} />
       </div>
       <div className="gf-form">
         <span className="gf-form-label width-10">Column</span>

src/datasource.ts

@@ -1,4 +1,12 @@
-import { DataSourceInstanceSettings, CoreApp, ScopedVars, DataQueryRequest, DataFrame, Field, MetricFindValue } from '@grafana/data';
+import {
+  DataSourceInstanceSettings,
+  CoreApp,
+  ScopedVars,
+  DataQueryRequest,
+  DataFrame,
+  Field,
+  MetricFindValue,
+} from '@grafana/data';
 import { DataSourceWithBackend, getTemplateSrv } from '@grafana/runtime';
 
 import { HaystackQuery, HaystackDataSourceOptions, DEFAULT_QUERY, HaystackVariableQuery } from './types';
@@ -11,51 +19,50 @@ export class DataSource extends DataSourceWithBackend<HaystackQuery, HaystackDat
   applyTemplateVariables(query: HaystackQuery, scopedVars: ScopedVars): Record<string, any> {
     return {
       ...query,
-      eval: getTemplateSrv().replace(query.eval, scopedVars, "csv"),
-      hisRead: getTemplateSrv().replace(query.hisRead, scopedVars, "csv"),
-      read: getTemplateSrv().replace(query.read, scopedVars, "csv"),
+      eval: getTemplateSrv().replace(query.eval, scopedVars, 'csv'),
+      hisRead: getTemplateSrv().replace(query.hisRead, scopedVars, 'csv'),
+      read: getTemplateSrv().replace(query.read, scopedVars, 'csv'),
     };
   }
 
   // This is called when the user is selecting a variable value
   async metricFindQuery(query: HaystackVariableQuery, options?: any) {
     let request: HaystackQuery = {
-      refId: "VariableQuery",
-      type: "Eval",
+      refId: 'VariableQuery',
+      type: 'Eval',
       eval: query.eval,
-      hisRead: "",
-      read: ""
+      hisRead: '',
+      read: '',
     };
-    let response = await this.query({ targets: [request] } as DataQueryRequest<HaystackQuery>).toPromise()
+    let response = await this.query({ targets: [request] } as DataQueryRequest<HaystackQuery>).toPromise();
 
     if (response === undefined || response.data === undefined) {
       return [];
     }
 
     return response.data.reduce((acc: MetricFindValue[], frame: DataFrame) => {
       let field = frame.fields[0];
-      if (query.column !== undefined && query.column !== "") {
+      if (query.column !== undefined && query.column !== '') {
         // If a column was input, match the column name
         field = frame.fields.find((field: Field) => field.name === query.column) ?? field;
       }
 
       let fieldVals = field.values.toArray().map((value) => {
-        if (value.startsWith("@")) {
+        if (value.startsWith('@')) {
           // Detect ref using @ prefix, and adjust value to just the Ref
-          let spaceIndex = value.indexOf(" ");
+          let spaceIndex = value.indexOf(' ');
           let id = value.substring(0, spaceIndex);
-          return {text: value, value: id};
+          return { text: value, value: id };
         } else {
           // Otherwise, just use the value directly
-          return {text: value, value: value};
+          return { text: value, value: value };
         }
       });
       return acc.concat(fieldVals);
     }, []);
   }
-  
 
   getDefaultQuery(_: CoreApp): Partial<HaystackQuery> {
-    return DEFAULT_QUERY
+    return DEFAULT_QUERY;
   }
 }

src/types.ts

@@ -13,10 +13,10 @@ export interface HaystackVariableQuery {
 }
 
 export const DEFAULT_QUERY: Partial<HaystackQuery> = {
-  type: "Eval",
-  eval: "[{ts: $__timeRange_start, v0: 0}, {ts: $__timeRange_end, v0: 10}].toGrid",
-  hisRead: "abcdef-123456",
-  read: "point and temp and air and outside"
+  type: 'Eval',
+  eval: '[{ts: $__timeRange_start, v0: 0}, {ts: $__timeRange_end, v0: 10}].toGrid',
+  hisRead: 'abcdef-123456',
+  read: 'point and temp and air and outside',
 };
 
 /**