diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..285b020
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,30 @@
+name: CI
+
+on:
+  pull_request:
+    branches: [main]
+
+  workflow_dispatch:
+
+jobs:
+  ci:
+    name: CI
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v7
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v7
+        with:
+          node-version: '24.20.0'
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Check code formatting
+        run: npm run format:check
+
+      - name: Check code linting
+        run: npm run lint
diff --git a/.github/workflows/cross-platform-test.yml b/.github/workflows/cross-platform-test.yml
index 08a1a12..11a76df 100644
--- a/.github/workflows/cross-platform-test.yml
+++ b/.github/workflows/cross-platform-test.yml
@@ -2,9 +2,9 @@ name: Cross-Platform Compatibility Test
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
+    branches: [main]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
index 5fa492e..ffa4141 100644
--- a/.github/workflows/deploy-docs.yml
+++ b/.github/workflows/deploy-docs.yml
@@ -3,7 +3,7 @@ name: Deploy Docs to Pages
 on:
   # Runs on pushes targeting the `docs` branch and `main` branch.
   push:
-    branches: ["docs", "main"]
+    branches: ['docs', 'main']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
diff --git a/.prettierrc b/.prettierrc
index c6ace34..3608d59 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,10 +1,14 @@
 {
-  "semi": false,
+  "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
-  "printWidth": 150,
-  "trailingComma": "none",
-  "arrowParens": "avoid",
+  "useTabs": false,
+  "printWidth": 100,
+  "trailingComma": "all",
   "bracketSpacing": true,
-  "spaceAfterFunction": true
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "vueIndentScriptAndStyle": false,
+  "singleAttributePerLine": false,
+  "htmlWhitespaceSensitivity": "ignore"
 }
diff --git a/README.md b/README.md
index 7e1a144..77eee78 100644
--- a/README.md
+++ b/README.md
@@ -18,29 +18,35 @@ Demo the site functionality of this app [here](https://plotvuer-demo.herokuapp.c
 **Don't feel like coding? See how to copy and paste plotvuer as an HTML widget [here](https://github.com/ABI-Software/plotvuer/blob/master/README.md#copy-and-paste-as-an-html-widget)**
 
 ## Project installation
+
 ```
 npm i @abi-software/plotvuer
 ```
 
-
 ## Project setup
+
 ```
 npm install
 npm run serve
 ```
 
 ### Compiles and minifies for production
+
 ```
 npm run build-bundle
 ```
 
 ## How to use
+
 Include the package in your script.
+
 ```javascript
-import { PlotVuer } from '@abi-software/plotvuer'
-import '@abi-software/plotvuer/dist/plotvuer.css'
+import { PlotVuer } from '@abi-software/plotvuer';
+import '@abi-software/plotvuer/dist/plotvuer.css';
 ```
+
 Local registration in vue component:
+
 ```javascript
 export default {
   ...
@@ -94,39 +100,40 @@ let metadata = {
 }
 
 ```
+
 Note that these are the same inputs for data and layout as plotly normally takes in [`Plotly.newPlot()`](https://plotly.com/javascript/plotlyjs-function-reference/)
 
 ##### Sending plotly a csv file url
 
 ```javascript
 let data = {
-  url : 'https://example.com/myfile.csv'
-}
+  url: 'https://example.com/myfile.csv',
+};
 
-
-let metadata= {
+let metadata = {
   version: '1.1.0',
   type: 'plot',
   attrs: {
     'x-axis-column': 2, // **Optional**
     style: 'timeseries',
     'y-axes-columns': [3, 4, 5, 6, 7, 8, 9, 10], // **Optional**
-    'plot-layout': { // **Optional**
+    'plot-layout': {
+      // **Optional**
       height: '700px',
       margin: {
         t: 35,
         l: 85,
         r: 55,
         b: 190,
-        pad: 4
-      }
-    }
-  }
-}
+        pad: 4,
+      },
+    },
+  },
+};
 
 let supplementalData = {
-  url : 'https://example.com/mySupplementalFile.json'
-}
+  url: 'https://example.com/mySupplementalFile.json',
+};
 ```
 
 ## CSV file formatting
@@ -135,25 +142,24 @@ let supplementalData = {
 
 ### Example 1. Heatmap data
 
-|               | Gene 1  | Gene 2 |
-| :------------ |:--------|  ------|
-| Sample 1      | -1.54 | -3.40 |
-| Sample 2      | 0.68       |   1.22 |
-| Sample 3      | 0.05      |    0.66 |
-
+|          | Gene 1 | Gene 2 |
+| :------- | :----- | ------ |
+| Sample 1 | -1.54  | -3.40  |
+| Sample 2 | 0.68   | 1.22   |
+| Sample 3 | 0.05   | 0.66   |
 
 ### Example 2. Timeseries data
 
-
-| time (seconds)| Sweep 0_Membrane Potential (mV) |
-| :------------ |:--------|
-| 0     | -70.12939453 |
-| 0.0002    | -70.12939453     |
-| 0.0004      | -70.34301758      |
-
+| time (seconds) | Sweep 0_Membrane Potential (mV) |
+| :------------- | :------------------------------ |
+| 0              | -70.12939453                    |
+| 0.0002         | -70.12939453                    |
+| 0.0004         | -70.34301758                    |
 
 ## Copy and paste as an HTML widget
+
 Paste the following lines in the `<body>` of you HTML
+
 ```HTML
  <!-- Modify the 'file' input to point to a csv file you wish to show -->
  <plot-vuer-widget file="https://mapcore-bucket1.s3-us-west-2.amazonaws.com/ISAN/csv-data/use-case-4/RNA_Seq.csv"></plot-vuer-widget>
@@ -162,8 +168,11 @@ Paste the following lines in the `<body>` of you HTML
  <!-- widget source js from cdn -->
  <script src="https://cdn.jsdelivr.net/npm/@tehsurfer/plotvuer-widget/dist/plotVuer.js"></script>
 ```
+
 ### Modifying input file for widget
+
 Change this line to point at a csv file for display
+
 ```HTML
  <!-- Modify the 'file' input to point to a csv file you wish to show -->
  <plot-vuer-widget file="./path/to/file.csv"></plot-vuer-widget>
@@ -174,6 +183,7 @@ Change this line to point at a csv file for display
 The documentation is developed with `vitepress` and `vuese`. Documentation pages are in the `docs` folder.
 
 ### To run in local development mode
+
 ```bash
 npm run docs:watch
 ```
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 8576292..94b6652 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -1,15 +1,15 @@
-import { resolve } from "node:path";
-import { defineConfig } from 'vitepress'
-import Components from 'unplugin-vue-components/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { resolve } from 'node:path';
+import { defineConfig } from 'vitepress';
+import Components from 'unplugin-vue-components/vite';
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 
 // Version number
-const versionNumber = process.env.npm_package_version
+const versionNumber = process.env.npm_package_version;
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  title: "PlotVuer",
-  description: "API documentation for PlotVuer",
+  title: 'PlotVuer',
+  description: 'API documentation for PlotVuer',
   base: '/plotvuer/',
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
@@ -17,41 +17,42 @@ export default defineConfig({
       { text: 'Home', link: '/' },
       {
         text: 'API Reference',
-        link: '/components/PlotVuer'
-      }
+        link: '/components/PlotVuer',
+      },
     ],
 
     sidebar: [
       {
         text: 'Live Demo',
-        link: '/demo'
+        link: '/demo',
       },
       {
         text: 'API Reference',
-        link: '/components/PlotVuer'
+        link: '/components/PlotVuer',
       },
       {
         text: 'Version',
         items: [
           {
-            text: `${versionNumber}`
-          }
-        ]
-      }
+            text: `${versionNumber}`,
+          },
+        ],
+      },
     ],
 
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/ABI-Software/plotvuer' }
-    ]
+    socialLinks: [{ icon: 'github', link: 'https://github.com/ABI-Software/plotvuer' }],
   },
   markdown: { attrs: { disable: true } },
   vite: {
     resolve: {
-      alias: [{ find: "@", replacement: resolve(__dirname, "../../src") }, {
-        // this is required for the SCSS modules
-        find: /^~(.*)$/,
-        replacement: '$1',
-      }],
+      alias: [
+        { find: '@', replacement: resolve(__dirname, '../../src') },
+        {
+          // this is required for the SCSS modules
+          find: /^~(.*)$/,
+          replacement: '$1',
+        },
+      ],
     },
     css: {
       preprocessorOptions: {
@@ -75,6 +76,6 @@ export default defineConfig({
 
       // https://github.com/antfu/unocss
       // see unocss.config.ts for config
-    ]
-  }
-})
+    ],
+  },
+});
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 11b41cb..67c0898 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -20,7 +20,8 @@
       }
 
       & table tr {
-        th, td {
+        th,
+        td {
           vertical-align: top;
         }
 
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 1118b56..149273e 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -1,4 +1,4 @@
-import DefaultTheme from "vitepress/theme"
-import './custom.css'
+import DefaultTheme from 'vitepress/theme';
+import './custom.css';
 
-export default DefaultTheme
+export default DefaultTheme;
diff --git a/docs/index.md b/docs/index.md
index 19971da..4e480aa 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -3,8 +3,8 @@
 layout: home
 
 hero:
-  name: "PlotVuer"
-  text: "API documentation"
+  name: 'PlotVuer'
+  text: 'API documentation'
   tagline: PlotVuer is a Vue component used in the SPARC portal.
   actions:
     - theme: brand
diff --git a/eslint.config.js b/eslint.config.js
index 91e47a4..9c49248 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,31 +1,52 @@
-import js from "@eslint/js";
-import prettier from "eslint-plugin-prettier";
-import prettierConfig from "eslint-config-prettier";
-import vue from "eslint-plugin-vue";
-import globals from "globals";
+import js from '@eslint/js';
+import { includeIgnoreFile } from 'eslint/config';
+import prettier from 'eslint-plugin-prettier';
+import prettierConfig from 'eslint-config-prettier';
+import vue from 'eslint-plugin-vue';
+import globals from 'globals';
+import { fileURLToPath } from 'node:url';
+
+const gitignorePath = fileURLToPath(new URL('.gitignore', import.meta.url));
 
 export default [
+  includeIgnoreFile(gitignorePath, { gitignoreResolution: true }),
   {
-    ignores: ["dist/**", "docs/.vitepress/**", "docs/components/**"],
+    ignores: ['dist/**', 'docs/.vitepress/**', 'docs/components/**'],
   },
   js.configs.recommended,
-  ...vue.configs["flat/essential"],
+  ...vue.configs['flat/essential'],
   prettierConfig,
   {
-    files: ["**/*.{js,vue}"],
+    files: ['**/*.{js,vue}'],
     plugins: {
       prettier,
     },
     languageOptions: {
-      ecmaVersion: "latest",
-      sourceType: "module",
+      ecmaVersion: 'latest',
+      sourceType: 'module',
       globals: {
         ...globals.node,
         ...globals.browser,
       },
     },
     rules: {
-      "prettier/prettier": "error",
+      'prettier/prettier': [
+        'error',
+        {
+          singleQuote: true,
+          trailingComma: 'all',
+        },
+      ],
+      'arrow-body-style': 'off',
+      'prefer-arrow-callback': 'off',
+      'no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+        },
+      ],
+      'vue/multi-word-component-names': 'off',
     },
   },
 ];
diff --git a/index.html b/index.html
index ab944a0..5b00edd 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,21 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="favicon.ico">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="favicon.ico" />
     <title>plotvuer</title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but plotvuer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>
+        We're sorry but plotvuer doesn't work properly without JavaScript enabled. Please enable it
+        to continue.
+      </strong>
     </noscript>
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
     <!-- built files will be auto injected -->
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/package-lock.json b/package-lock.json
index b1fe62a..f35918e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,8 +30,9 @@
         "eslint-plugin-prettier": "^5.5.6",
         "eslint-plugin-vue": "^10.10.0",
         "globals": "^17.11.0",
-        "prettier": "^3.9.6",
+        "prettier": "3.9.6",
         "sass": "^1.103.1",
+        "unplugin-auto-import": "^21.1.0",
         "unplugin-vue-components": "^32.1.0",
         "vite": "^8.2.1",
         "vite-plugin-node-polyfills": "^0.28.0",
@@ -6208,6 +6209,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/js-tokens": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-10.0.0.tgz",
+      "integrity": "sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -7719,16 +7727,22 @@
       }
     },
     "node_modules/pkg-types": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.1.tgz",
-      "integrity": "sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==",
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.3.tgz",
+      "integrity": "sha512-j/lCFdcppV0JxWpCEITdbDltBxPP6cHT+yNJ6Go2OgoSA9518X847X9z0p6LtA4Nc16+eQzCZjRrWanTGvHJ5w==",
       "license": "MIT",
       "dependencies": {
-        "confbox": "^0.2.4",
-        "exsolve": "^1.0.8",
+        "confbox": "^0.3.1",
+        "exsolve": "^1.1.1",
         "pathe": "^2.0.3"
       }
     },
+    "node_modules/pkg-types/node_modules/confbox": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.3.1.tgz",
+      "integrity": "sha512-cKUSoKa8YxFZZSmraVi7onONx3amu77ngK3kGpsYHDH7drPwCRkQE1RYMPlLRrMtnciRj274XNRxcHxnKmDSnA==",
+      "license": "MIT"
+    },
     "node_modules/plotly.js": {
       "version": "2.35.3",
       "resolved": "https://registry.npmjs.org/plotly.js/-/plotly.js-2.35.3.tgz",
@@ -9243,6 +9257,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-literal": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-4.0.0.tgz",
+      "integrity": "sha512-PaqAvfUZKBwc/SLmNZtHmzK+v19Z4O4eS3cKPeGvbIv/U3pnyEq4Tuw3/4v/FwfM8VQaEawsyCcOQ0P+kpwWWw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^10.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/strongly-connected-components": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/strongly-connected-components/-/strongly-connected-components-1.0.1.tgz",
@@ -9635,6 +9662,77 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/unimport": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-6.5.0.tgz",
+      "integrity": "sha512-t0KLJLRbebz3f7NrQe+vy2ObeugVeM1XqI2oeYnauddmHSglYj3U6bxOJ65IbXmOFkcAGFJK2OyGH7aqHPM6Ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.18.0",
+        "escape-string-regexp": "^5.0.0",
+        "estree-walker": "^3.0.3",
+        "local-pkg": "^1.2.1",
+        "magic-string": "^1.2.3",
+        "mlly": "^1.8.2",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.7",
+        "pkg-types": "^2.3.3",
+        "scule": "^1.3.0",
+        "strip-literal": "^4.0.0",
+        "tinyglobby": "^0.2.17",
+        "unplugin": "^3.3.0",
+        "unplugin-utils": "^0.3.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "oxc-parser": "*",
+        "rolldown": "^1.0.0"
+      },
+      "peerDependenciesMeta": {
+        "oxc-parser": {
+          "optional": true
+        },
+        "rolldown": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unimport/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/unimport/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/unimport/node_modules/magic-string": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-1.3.2.tgz",
+      "integrity": "sha512-rZJrVxZ8cnWz3Mlor980ckHFN60rm/eyjVOpeDAH2z1DsRNbve2o4AB7bGafQvGSdCK90gEfUdiMct4BCKSZTw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.6.0"
+      }
+    },
     "node_modules/unist-util-is": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
@@ -9762,6 +9860,49 @@
         }
       }
     },
+    "node_modules/unplugin-auto-import": {
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/unplugin-auto-import/-/unplugin-auto-import-21.1.0.tgz",
+      "integrity": "sha512-EzrSqWIBulEqCuP7idADXH+tVKYrbwKlR5+r/lOWik0o+Ksny1kitmtryHGNSv7puzzORlcIwT/x2JStiszlHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "local-pkg": "^1.2.1",
+        "magic-string": "^1.1.0",
+        "picomatch": "^4.0.5",
+        "unimport": "^6.4.0",
+        "unplugin": "^3.3.0",
+        "unplugin-utils": "^0.3.2"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": "^4.0.0",
+        "@vueuse/core": "*"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "@vueuse/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-auto-import/node_modules/magic-string": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-1.3.2.tgz",
+      "integrity": "sha512-rZJrVxZ8cnWz3Mlor980ckHFN60rm/eyjVOpeDAH2z1DsRNbve2o4AB7bGafQvGSdCK90gEfUdiMct4BCKSZTw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.6.0"
+      }
+    },
     "node_modules/unplugin-utils": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.2.tgz",
diff --git a/package.json b/package.json
index 532cca8..5346158 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
     "serve": "vite --host",
     "build": "vite build",
     "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "build-bundle": "vite build",
     "start": "vite --host --port 8081",
     "version": "npm run build-bundle",
@@ -66,8 +68,9 @@
     "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-vue": "^10.10.0",
     "globals": "^17.11.0",
-    "prettier": "^3.9.6",
+    "prettier": "3.9.6",
     "sass": "^1.103.1",
+    "unplugin-auto-import": "^21.1.0",
     "unplugin-vue-components": "^32.1.0",
     "vite": "^8.2.1",
     "vite-plugin-node-polyfills": "^0.28.0",
diff --git a/public/index.html b/public/index.html
index 9d59ac0..f14a6c1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -9,7 +9,10 @@
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but plotvuer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>
+        We're sorry but plotvuer doesn't work properly without JavaScript enabled. Please enable it
+        to continue.
+      </strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
diff --git a/src/App-original.vue b/src/App-original.vue
index 3d13700..7a5dc7b 100644
--- a/src/App-original.vue
+++ b/src/App-original.vue
@@ -3,80 +3,90 @@
     <button @click="helpMode = !helpMode">Help Mode</button>
     <button @click="changeInput">Change input</button>
 
-    <div style="height: 400px; width: 400px; overflow: scroll;">
+    <div style="height: 400px; width: 400px; overflow: scroll">
       <PlotVuer :title="'plot title'" :url="urlList[0]" :plotType="'heatmap'"></PlotVuer>
     </div>
-    <vue-draggable-resizable :w="500" :h="500" @dragging="onDrag" @resizing="onResize" :parent="true">
-      <PlotVuer :title="'plotly only'" :data-input="exampleInput" :plotType="'plotly-only'"></PlotVuer>
+    <vue-draggable-resizable
+      :w="500"
+      :h="500"
+      @dragging="onDrag"
+      @resizing="onResize"
+      :parent="true"
+    >
+      <PlotVuer
+        :title="'plotly only'"
+        :data-input="exampleInput"
+        :plotType="'plotly-only'"
+      ></PlotVuer>
     </vue-draggable-resizable>
     <el-input class="element" placeholder="Enter url" v-model="urlList[0]"></el-input>
     <el-button @click="changeInput">Change data</el-button>
-    <div class="plot-container" style="height: 800px; width: 800px;"></div>
+    <div class="plot-container" style="height: 800px; width: 800px"></div>
   </div>
 </template>
 
 <script>
-import Input from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
-import Vue from 'vue'
-import VueDraggableResizable from 'vue-draggable-resizable'
+import Input from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import Vue from 'vue';
+import VueDraggableResizable from 'vue-draggable-resizable';
 
 // optionally import default styles
-import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
-Vue.component('vue-draggable-resizable', VueDraggableResizable)
-Vue.use(Input)
-import PlotVuer from './components/PlotVuer'
+import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
+Vue.component('vue-draggable-resizable', VueDraggableResizable);
+Vue.use(Input);
+import PlotVuer from './components/PlotVuer';
 
 var input = [
   {
     x: [0, 1, 2, 3, 4, 5],
     y: [100, 10, 130, 70, 80, 90],
-    type: 'scatter'
-  }
-]
+    type: 'scatter',
+  },
+];
 
 export default {
   name: 'app',
   components: {
     PlotVuer,
-    VueDraggableResizable
+    VueDraggableResizable,
   },
-  data: function() {
+  data: function () {
     return {
       urlList: [
         'https://api.sparc.science/s3-resource/29/6/files/derivative/HB-ICN-NegDDCT-data.csv',
-        'https://mapcore-bucket1.s3-us-west-2.amazonaws.com/ISAN/csv-data/use-case-2/Sample_1_18907001_channel_1.csv'
+        'https://mapcore-bucket1.s3-us-west-2.amazonaws.com/ISAN/csv-data/use-case-2/Sample_1_18907001_channel_1.csv',
       ],
       width: 700,
       height: 700,
       plotTypeList: ['heatmap', 'barchart'],
       y: 0,
       helpMode: false,
-      exampleInput: input
-    }
+      exampleInput: input,
+    };
   },
   methods: {
-    changeInput: function() {
+    changeInput: function () {
       this.exampleInput = [
         {
           x: [0, 1, 2, 3, 4, 5],
           y: [1.5, 1, 1.3, 0.7, 0.8, 0.9],
-          type: 'scatter'
-        }
-      ]
+          type: 'scatter',
+        },
+      ];
     },
-    onResize: function(x, y, width, height) {
-      this.x = x
-      this.y = y
-      this.width = width
-      this.height = height
+    onResize: function (x, y, width, height) {
+      this.x = x;
+      this.y = y;
+      this.width = width;
+      this.height = height;
     },
-    onDrag: function(x, y) {
-      this.x = x
-      this.y = y
-    }
-  }
-}
+    onDrag: function (x, y) {
+      this.x = x;
+      this.y = y;
+    },
+  },
+};
 </script>
 
 <style>
diff --git a/src/App.vue b/src/App.vue
index 767fee0..7d9f300 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,7 +19,8 @@
   width: 250px;
 }
 
-html, body {
+html,
+body {
   height: 100%;
   width: 100%;
   margin: 0;
diff --git a/src/components/HeatmapPlot.vue b/src/components/HeatmapPlot.vue
index acde9ae..b100f90 100644
--- a/src/components/HeatmapPlot.vue
+++ b/src/components/HeatmapPlot.vue
@@ -1,7 +1,7 @@
 <template>
   <div ref="plotContainer" class="container">
     <div ref="plotlyplot" class="vue-plotly" />
-    <div v-if="selectorUi" class="chooser-container" :class="{inactive: loading}">
+    <div v-if="selectorUi" class="chooser-container" :class="{ inactive: loading }">
       <span>
         <el-select
           v-model="filterX"
@@ -12,7 +12,12 @@
           default-first-option
           placeholder="select"
         >
-          <el-option v-for="item in columnHeaders" :key="item" :label="item" :value="item"></el-option>
+          <el-option
+            v-for="item in columnHeaders"
+            :key="item"
+            :label="item"
+            :value="item"
+          ></el-option>
         </el-select>
       </span>
       <span>
@@ -39,23 +44,13 @@
 </template>
 
 <script>
-import { markRaw } from 'vue'
-import DataManager from '@/js/data_manager'
-import PlotCommon from '@/mixins/plot_common'
-import Plotly from '@/js/custom_plotly'
-
-import { ElSelect, ElOption, ElCollapse, ElCollapseItem, ElButton, ElPopover } from 'element-plus';
+import { markRaw } from 'vue';
+import DataManager from '@/js/data_manager';
+import PlotCommon from '@/mixins/plot_common';
+import Plotly from '@/js/custom_plotly';
 
 export default {
   name: 'HeatmapPlot',
-  components: {
-    ElSelect,
-    ElOption,
-    ElCollapse,
-    ElCollapseItem,
-    ElButton,
-    ElPopover
-  },
   mixins: [PlotCommon],
   data: function () {
     return {
@@ -68,128 +63,128 @@ export default {
       logScale: false,
       logDataValues: markRaw([]),
       resizeObserver: null,
-    }
+    };
   },
   computed: {
     fullMetadata() {
-      let metadata = JSON.parse(JSON.stringify(this.metadata))
+      let metadata = JSON.parse(JSON.stringify(this.metadata));
       if (!metadata.columnHeaderSize) {
-        metadata.columnHeaderSize = 1
+        metadata.columnHeaderSize = 1;
       }
       if (!metadata.columnHeaderIndex) {
-        metadata.columnHeaderIndex = 0
+        metadata.columnHeaderIndex = 0;
       }
       if (!metadata.rowHeaderSize) {
-        metadata.rowHeaderSize = 1
+        metadata.rowHeaderSize = 1;
       }
       if (!metadata.rowHeaderIndex) {
-        metadata.rowHeaderIndex = 0
+        metadata.rowHeaderIndex = 0;
       }
-      return metadata
+      return metadata;
     },
     logScaleEnabled() {
-      let metadata = JSON.parse(JSON.stringify(this.metadata))
-      return metadata.logScale ? true : false
+      let metadata = JSON.parse(JSON.stringify(this.metadata));
+      return metadata.logScale ? true : false;
     },
     plotTitle() {
-      return this.logScale ? this.title + ' (Log scale)' : this.title
-    }
+      return this.logScale ? this.title + ' (Log scale)' : this.title;
+    },
   },
   watch: {
     sourceData: function () {
-      this.loadData(this.sourceData)
-    }
+      this.loadData(this.sourceData);
+    },
   },
   mounted: function () {
-    this.loadData(this.sourceData)
+    this.loadData(this.sourceData);
     this.resizeObserver = new ResizeObserver(() => {
       if (this.$refs.plotlyplot) {
-        Plotly.Plots.resize(this.$refs.plotlyplot)
+        Plotly.Plots.resize(this.$refs.plotlyplot);
       }
-    })
-    this.resizeObserver.observe(this.$refs.plotContainer)
+    });
+    this.resizeObserver.observe(this.$refs.plotContainer);
   },
   beforeUnmount: function () {
     if (this.resizeObserver) {
-      this.resizeObserver.disconnect()
+      this.resizeObserver.disconnect();
     }
   },
   methods: {
     loadData(sourceData) {
       if (sourceData.url) {
-        this.loading = true
-        DataManager.loadFile(sourceData.url, this.dataReady) // Use url
+        this.loading = true;
+        DataManager.loadFile(sourceData.url, this.dataReady); // Use url
       } else {
-        const layout = this.sourceData.layout ? this.sourceData.layout : this.layout
-        Plotly.react(this.$refs.plotlyplot, this.sourceData.data, layout, this.options) // Use plolty input
+        const layout = this.sourceData.layout ? this.sourceData.layout : this.layout;
+        Plotly.react(this.$refs.plotlyplot, this.sourceData.data, layout, this.options); // Use plolty input
       }
     },
     dataReady(data) {
-      this.loading = false
-      const parsedData = data
-      this.populateColumnHeaders(parsedData)
-      this.populateRowHeaders(parsedData)
-      this.populateDataValues(parsedData)
+      this.loading = false;
+      const parsedData = data;
+      this.populateColumnHeaders(parsedData);
+      this.populateRowHeaders(parsedData);
+      this.populateDataValues(parsedData);
       if (this.logScaleEnabled) {
-        this.logValues()
-        this.logScale = true
-        this.createPlot(this.columnHeaders, this.rowHeaders, this.logDataValues, 'heatmap')
+        this.logValues();
+        this.logScale = true;
+        this.createPlot(this.columnHeaders, this.rowHeaders, this.logDataValues, 'heatmap');
       } else {
-        this.createPlot(this.columnHeaders, this.rowHeaders, this.dataValues, 'heatmap')
+        this.createPlot(this.columnHeaders, this.rowHeaders, this.dataValues, 'heatmap');
       }
     },
     logValues() {
       this.dataValues.forEach((r, i) => {
-        this.logDataValues.push([])
-        r.forEach(c => {
-          this.logDataValues[i].push(Math.log10(c))
-        })
-      })
+        this.logDataValues.push([]);
+        r.forEach((c) => {
+          this.logDataValues[i].push(Math.log10(c));
+        });
+      });
     },
     logToggle() {
       if (this.logScale) {
-        this.logScale = false
-        this.createPlot(this.columnHeaders, this.rowHeaders, this.dataValues, 'heatmap')
+        this.logScale = false;
+        this.createPlot(this.columnHeaders, this.rowHeaders, this.dataValues, 'heatmap');
       } else {
-        this.logScale = true
-        this.createPlot(this.columnHeaders, this.rowHeaders, this.logDataValues, 'heatmap')
+        this.logScale = true;
+        this.createPlot(this.columnHeaders, this.rowHeaders, this.logDataValues, 'heatmap');
       }
     },
     filterPlot() {
-      let xHeaders = this.filterX
-      let yHeaders = this.filterY
+      let xHeaders = this.filterX;
+      let yHeaders = this.filterY;
       if (xHeaders.length === 0 && yHeaders.length === 0) {
-        this.createPlot(this.columnHeaders, this.rowHeaders, this.dataValues, 'heatmap')
-        return
+        this.createPlot(this.columnHeaders, this.rowHeaders, this.dataValues, 'heatmap');
+        return;
       }
       if (xHeaders.length === 0) {
-        xHeaders = this.columnHeaders
+        xHeaders = this.columnHeaders;
       }
       if (yHeaders.length === 0) {
-        yHeaders = this.rowHeaders
+        yHeaders = this.rowHeaders;
       }
-      let colIndeces = []
+      let colIndeces = [];
       for (let i of xHeaders) {
-        colIndeces.push(this.columnHeaders.indexOf(i))
+        colIndeces.push(this.columnHeaders.indexOf(i));
       }
-      let rowIndexes = []
+      let rowIndexes = [];
       for (let i of yHeaders) {
-        rowIndexes.push(this.rowHeaders.indexOf(i))
+        rowIndexes.push(this.rowHeaders.indexOf(i));
       }
-      let datat = []
+      let datat = [];
       for (let col of colIndeces) {
-        const filteredCol = this.dataValues.map(row => {
-          return row[col]
-        })
-        let filteredRow = []
+        const filteredCol = this.dataValues.map((row) => {
+          return row[col];
+        });
+        let filteredRow = [];
         for (let row of rowIndexes) {
-          filteredRow.push(filteredCol[row])
+          filteredRow.push(filteredCol[row]);
         }
-        datat.push(filteredRow)
+        datat.push(filteredRow);
       }
       // Transpose the data values.
-      datat = datat[0].map((col, i) => datat.map(row => row[i]))
-      this.createPlot(xHeaders, yHeaders, datat, 'heatmap')
+      datat = datat[0].map((col, i) => datat.map((row) => row[i]));
+      this.createPlot(xHeaders, yHeaders, datat, 'heatmap');
     },
     createPlot(xValues, yValues, zValues, plotType) {
       var tdata = [
@@ -197,34 +192,36 @@ export default {
           x: xValues,
           y: yValues,
           z: zValues,
-          type: plotType
-        }
-      ]
-      const heatmapLayout = {title: {text: this.plotTitle}}
-      const layout = {...this.layout, ...heatmapLayout, ...this.plotLayout}
-      Plotly.react(this.$refs.plotlyplot, tdata, layout, this.options) //this.getOptions())
+          type: plotType,
+        },
+      ];
+      const heatmapLayout = { title: { text: this.plotTitle } };
+      const layout = { ...this.layout, ...heatmapLayout, ...this.plotLayout };
+      Plotly.react(this.$refs.plotlyplot, tdata, layout, this.options); //this.getOptions())
     },
     populateColumnHeaders(parsedData) {
-      let all_data = parsedData.data
-      let headers = [...all_data[this.fullMetadata.columnHeaderIndex]]
-      this.columnHeaders = headers.slice(this.fullMetadata.rowHeaderSize)
+      let all_data = parsedData.data;
+      let headers = [...all_data[this.fullMetadata.columnHeaderIndex]];
+      this.columnHeaders = headers.slice(this.fullMetadata.rowHeaderSize);
     },
     populateRowHeaders(parsedData) {
-      let all_data = parsedData.data
-      const col = all_data.map(row => {
-          return row[this.fullMetadata.rowHeaderIndex]
-        })
-      this.rowHeaders = col.slice(this.fullMetadata.columnHeaderSize)
+      let all_data = parsedData.data;
+      const col = all_data.map((row) => {
+        return row[this.fullMetadata.rowHeaderIndex];
+      });
+      this.rowHeaders = col.slice(this.fullMetadata.columnHeaderSize);
     },
     populateDataValues(parsedData) {
-      let all_data = parsedData.data
-      const headers_removed = all_data.slice(this.fullMetadata.columnHeaderSize)
-      this.dataValues = markRaw(headers_removed.map((row) => {
-        return row.slice(this.fullMetadata.rowHeaderSize)
-      }))
-    }
-  }
-}
+      let all_data = parsedData.data;
+      const headers_removed = all_data.slice(this.fullMetadata.columnHeaderSize);
+      this.dataValues = markRaw(
+        headers_removed.map((row) => {
+          return row.slice(this.fullMetadata.rowHeaderSize);
+        }),
+      );
+    },
+  },
+};
 </script>
 
 <style scoped>
diff --git a/src/components/PlotControls.vue b/src/components/PlotControls.vue
index fde536f..17b51fd 100644
--- a/src/components/PlotControls.vue
+++ b/src/components/PlotControls.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="controls-container">
     <map-svg-sprite-color />
-    <div ref="zoomControls" :class="{inactive: !controlsEnabled}" class="bottom-right-control">
+    <div ref="zoomControls" :class="{ inactive: !controlsEnabled }" class="bottom-right-control">
       <el-popover
         v-model="hoverVisibilities[0].value"
         content="Zoom in"
         placement="left"
-        :teleported=false
+        :teleported="false"
         trigger="manual"
         popper-class="plot-popper"
       >
@@ -24,7 +24,7 @@
         v-model="hoverVisibilities[1].value"
         content="Zoom out"
         placement="top-end"
-        :teleported=false
+        :teleported="false"
         trigger="manual"
         popper-class="plot-popper popper-zoomout"
       >
@@ -50,15 +50,15 @@
           v-for="item in zoomSelect"
           :key="item.value"
           :label="item.label"
-          :value="item.label">
-        </el-option>
+          :value="item.label"
+        ></el-option>
       </el-select>
       <!-- The commented part remains unchanged -->
       <el-popover
         v-model="hoverVisibilities[2].value"
         content="Reset"
         placement="top"
-        :teleported=false
+        :teleported="false"
         trigger="manual"
         popper-class="plot-popper"
       >
@@ -77,7 +77,6 @@
 </template>
 
 <script>
-import { ElSelect, ElOption, ElCollapse, ElCollapseItem, ElButton, ElPopover } from 'element-plus';
 import { MapSvgSpriteColor, MapSvgIcon } from '@abi-software/svg-sprite';
 
 export default {
@@ -85,155 +84,154 @@ export default {
   components: {
     MapSvgSpriteColor,
     MapSvgIcon,
-    ElSelect,
-    ElOption,
-    ElCollapse,
-    ElCollapseItem,
-    ElButton,
-    ElPopover
   },
   props: {
     parentElement: {
       type: Object,
-      required: true
+      required: true,
     },
     controlsEnabled: {
       type: Boolean,
-      required: true
-    }
+      required: true,
+    },
   },
   data: function () {
     return {
-      hoverVisibilities: [{value: false}, {value: false}, {value: false}, {value: false}, {value: false}],
+      hoverVisibilities: [
+        { value: false },
+        { value: false },
+        { value: false },
+        { value: false },
+        { value: false },
+      ],
       zoomSelect: [
         {
           value: '1',
-          label: '100%'
-        }
+          label: '100%',
+        },
       ],
       selectZoom: '100%',
       zoom: 100,
       maxZoom: 800,
       zoomInDisabled: false,
-      zoomOutDisabled: true
-    }
+      zoomOutDisabled: true,
+    };
   },
   methods: {
     // zoomIn: Find and click the plotly modebar 'zoom in'
     zoomIn: function () {
-      this.zoom += 100
-      this.parentElement.element.querySelector('a[data-attr="zoom"][data-val="in"]').click()
-      this.setDisabledButtons(this.zoom)
-      this.updateZoomSelect(this.zoom)
+      this.zoom += 100;
+      this.parentElement.element.querySelector('a[data-attr="zoom"][data-val="in"]').click();
+      this.setDisabledButtons(this.zoom);
+      this.updateZoomSelect(this.zoom);
     },
     // zoomOut: Find and click the plotly modebar 'zoom out'
     zoomOut: function () {
-      this.zoom -= 100
-      this.parentElement.element.querySelector('a[data-attr="zoom"][data-val="out"]').click()
-      this.setDisabledButtons(this.zoom)
-      this.updateZoomSelect(this.zoom)
+      this.zoom -= 100;
+      this.parentElement.element.querySelector('a[data-attr="zoom"][data-val="out"]').click();
+      this.setDisabledButtons(this.zoom);
+      this.updateZoomSelect(this.zoom);
     },
     // setDisabledButtons(zoomLevel): Disable buttons once they hit max zoom
     setDisabledButtons(zoom) {
       if (zoom >= this.maxZoom) {
-        this.zoomInDisabled = true
+        this.zoomInDisabled = true;
       } else {
-        this.zoomInDisabled = false
+        this.zoomInDisabled = false;
       }
       if (zoom <= 0) {
-        this.zoomOutDisabled = true
+        this.zoomOutDisabled = true;
       } else {
-        this.zoomOutDisabled = false
+        this.zoomOutDisabled = false;
       }
-      return
+      return;
     },
     resetView: function () {
-      this.zoom = 100
-      this.parentElement.element.querySelector('a[data-attr="zoom"][data-val="reset"]').click()
-      this.setDisabledButtons(this.zoom)
-      this.updateZoomSelect(this.zoom)
+      this.zoom = 100;
+      this.parentElement.element.querySelector('a[data-attr="zoom"][data-val="reset"]').click();
+      this.setDisabledButtons(this.zoom);
+      this.updateZoomSelect(this.zoom);
     },
     percentToNum(percentage) {
-      return Number(percentage.slice(0, -1))
+      return Number(percentage.slice(0, -1));
     },
     selectZoomChange: function (requestedZoomPercentage) {
       if (requestedZoomPercentage === '100%') {
-        this.resetView()
-        return
+        this.resetView();
+        return;
       }
-      let newZoom = this.percentToNum(requestedZoomPercentage)
-      let zoomDiff = Math.round((newZoom - this.zoom) / 100)
+      let newZoom = this.percentToNum(requestedZoomPercentage);
+      let zoomDiff = Math.round((newZoom - this.zoom) / 100);
       for (let i = 0; i < Math.abs(zoomDiff); i++) {
         if (zoomDiff > 0) {
-          this.zoomIn()
+          this.zoomIn();
         } else {
-          this.zoomOut()
+          this.zoomOut();
         }
       }
-      this.updateZoomSelect(newZoom)
+      this.updateZoomSelect(newZoom);
     },
     updateZoomSelect(percentage) {
-      this.selectZoom = String(percentage) + '%'
+      this.selectZoom = String(percentage) + '%';
     },
     createZoomPercentages: function () {
-      this.zoomSelect = []
+      this.zoomSelect = [];
       for (let i = 0; i <= this.maxZoom / 100; i++) {
         this.zoomSelect.push({
           value: i,
-          label: (i + 1) * 100 + '%'
-        })
+          label: (i + 1) * 100 + '%',
+        });
       }
     },
     setHelpMode: function (helpMode) {
       if (helpMode) {
-        this.inHelp = true
-        this.hoverVisibilities.forEach(item => {
-          item.value = true
-        })
+        this.inHelp = true;
+        this.hoverVisibilities.forEach((item) => {
+          item.value = true;
+        });
       } else {
-        this.inHelp = false
-        this.hoverVisibilities.forEach(item => {
-          item.value = false
-        })
+        this.inHelp = false;
+        this.hoverVisibilities.forEach((item) => {
+          item.value = false;
+        });
       }
     },
     showToolitip: function (tooltipNumber) {
       if (!this.inHelp) {
-        this.hoverVisibilities[tooltipNumber].value = true
+        this.hoverVisibilities[tooltipNumber].value = true;
         this.tooltipWait = setTimeout(() => {
-          this.hoverVisibilities[tooltipNumber].value = true
-        }, 1000)
+          this.hoverVisibilities[tooltipNumber].value = true;
+        }, 1000);
       }
     },
     hideToolitip: function (tooltipNumber) {
       if (!this.inHelp) {
-        this.hoverVisibilities[tooltipNumber].value = false
-        clearInterval(this.tooltipWait)
+        this.hoverVisibilities[tooltipNumber].value = false;
+        clearInterval(this.tooltipWait);
       }
     },
     handleWheel: function (event) {
-      let change = Math.round(event.deltaY / 7)
-      this.zoom = this.zoom - change
-      this.updateZoomSelect(this.zoom)
-    }
+      let change = Math.round(event.deltaY / 7);
+      this.zoom = this.zoom - change;
+      this.updateZoomSelect(this.zoom);
+    },
   },
   mounted: function () {
-    this.createZoomPercentages()
+    this.createZoomPercentages();
     setTimeout(() => {
       if (this.parentElement?.element) {
-        this.parentElement.element.addEventListener('wheel', this.handleWheel)
+        this.parentElement.element.addEventListener('wheel', this.handleWheel);
       }
-    }, 1000)
+    }, 1000);
   },
   beforeUnmount: function () {
     if (this.parentElement?.element) {
-      this.parentElement.element.removeEventListener('wheel', this.handleWheel)
+      this.parentElement.element.removeEventListener('wheel', this.handleWheel);
     }
-  }
-}
+  },
+};
 </script>
 
-
 <style scoped>
 @import '../assets/bottom-right-control.scss';
 
@@ -341,10 +339,9 @@ export default {
   max-height: 24px !important;
   margin-left: 8px;
   margin-bottom: 12px;
-
 }
 
-.zoomSelect :deep( .el-input__inner ){
+.zoomSelect :deep(.el-input__inner) {
   padding: 0px;
   height: 24px;
   padding-left: 4px;
@@ -352,7 +349,7 @@ export default {
   margin-left: 8px;
 }
 
-.zoomSelect :deep( .el-select__caret ){
+.zoomSelect :deep(.el-select__caret) {
   width: 8px;
   margin-right: 2px;
   margin-top: 2px;
diff --git a/src/components/PlotVuer-original.vue b/src/components/PlotVuer-original.vue
index 6ef551d..968735a 100644
--- a/src/components/PlotVuer-original.vue
+++ b/src/components/PlotVuer-original.vue
@@ -17,7 +17,12 @@
             :popper-append-to-body="false"
             :placeholder="ui.placeholderx"
           >
-            <el-option v-for="item in allChannelsX" :key="item" :label="item" :value="item"></el-option>
+            <el-option
+              v-for="item in allChannelsX"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
           </el-select>
         </span>
         <span v-if="ui.showSecondSelector">
@@ -32,7 +37,12 @@
             :popper-append-to-body="false"
             :placeholder="ui.placeholdery"
           >
-            <el-option v-for="item in allChannelsY" :key="item" :label="item" :value="item"></el-option>
+            <el-option
+              v-for="item in allChannelsY"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
           </el-select>
         </span>
         <span>
@@ -51,14 +61,15 @@
         trigger="manual"
         popper-class="plot-popper"
       >
-        <map-svg-icon
-          slot="reference"
-          icon="zoomIn"
-          class="icon-button zoomIn"
-          @click.native="zoomIn()"
-          @mouseover.native="showToolitip(0)"
-          @mouseout.native="hideToolitip(0)"
-        />
+        <template v-slot:reference>
+          <map-svg-icon
+            icon="zoomIn"
+            class="icon-button zoomIn"
+            @click="zoomIn()"
+            @mouseover="showToolitip(0)"
+            @mouseout="hideToolitip(0)"
+          />
+        </template>
       </el-popover>
       <el-popover
         v-model="hoverVisibilities[1].value"
@@ -68,17 +79,29 @@
         trigger="manual"
         popper-class="plot-popper popper-zoomout"
       >
-        <map-svg-icon
-          slot="reference"
-          icon="zoomOut"
-          class="icon-button zoomOut"
-          @click.native="zoomOut()"
-          @mouseover.native="showToolitip(1)"
-          @mouseout.native="hideToolitip(1)"
-        />
+        <template v-slot:reference>
+          <map-svg-icon
+            icon="zoomOut"
+            class="icon-button zoomOut"
+            @click="zoomOut()"
+            @mouseover="showToolitip(1)"
+            @mouseout="hideToolitip(1)"
+          />
+        </template>
       </el-popover>
-      <el-select v-model="selectZoom" size="mini" placeholder="100%" class="zoomSelect" @change="selectZoomChange">
-        <el-option v-for="item in zoomSelect" :key="item.value" :label="item.label" :value="item.label"> </el-option>
+      <el-select
+        v-model="selectZoom"
+        size="mini"
+        placeholder="100%"
+        class="zoomSelect"
+        @change="selectZoomChange"
+      >
+        <el-option
+          v-for="item in zoomSelect"
+          :key="item.value"
+          :label="item.label"
+          :value="item.label"
+        ></el-option>
       </el-select>
       <el-popover
         v-model="hoverVisibilities[2].value"
@@ -88,75 +111,66 @@
         trigger="manual"
         popper-class="plot-popper"
       >
-        <map-svg-icon
-          slot="reference"
-          icon="resetZoom"
-          class="icon-button resetView"
-          @click.native="resetView()"
-          @mouseover.native="showToolitip(2)"
-          @mouseout.native="hideToolitip(2)"
-        />
+        <template v-slot:reference>
+          <map-svg-icon
+            icon="resetZoom"
+            class="icon-button resetView"
+            @click="resetView()"
+            @mouseover="showToolitip(2)"
+            @mouseout="hideToolitip(2)"
+          />
+        </template>
       </el-popover>
     </div>
   </div>
 </template>
 <script>
-/* eslint-disable no-alert, no-console */
-import Plotly from '../js/custom_plotly'
-import Vue from 'vue'
-import {Select, Option, Collapse, CollapseItem, Button, Popover} from 'element-ui'
-import {MapSvgSpriteColor, MapSvgIcon} from '@abi-software/svg-sprite'
-import CsvManager from './csv_manager'
-import ReziseSensor from 'css-element-queries/src/ResizeSensor'
-
-Vue.use(Select)
-Vue.use(Option)
-Vue.use(Collapse)
-Vue.use(CollapseItem)
-Vue.use(Button)
-Vue.use(Popover)
+import Plotly from '../js/custom_plotly';
+import { MapSvgSpriteColor, MapSvgIcon } from '@abi-software/svg-sprite';
+import CsvManager from './csv_manager';
+import ReziseSensor from 'css-element-queries/src/ResizeSensor';
 
 export default {
   name: 'PlotVuer',
   components: {
     MapSvgSpriteColor,
-    MapSvgIcon
+    MapSvgIcon,
   },
   props: {
     title: {
       type: String,
-      default: ''
+      default: '',
     },
     url: {
       type: String,
-      default: ''
+      default: '',
     },
     dataInput: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     plotType: {
       type: String,
-      default: 'heatmap'
+      default: 'heatmap',
     },
     yAxisFilter: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     xAxisFilter: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     helpMode: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data: function () {
     return {
       allChannelsX: [],
       allChannelsY: [],
-      data: [{x: [], y: [], type: 'scatter'}],
+      data: [{ x: [], y: [], type: 'scatter' }],
       layout: {
         paper_bgcolor: 'rgba(0,0,0,0)',
         plot_bgcolor: 'rgba(0,0,0,0)',
@@ -165,19 +179,25 @@ export default {
           l: 55,
           r: 55,
           b: 90,
-          pad: 4
+          pad: 4,
         },
-        dragmode: 'pan'
+        dragmode: 'pan',
       },
       options: {
-        type: Object
+        type: Object,
       },
-      hoverVisibilities: [{value: false}, {value: false}, {value: false}, {value: false}, {value: false}],
+      hoverVisibilities: [
+        { value: false },
+        { value: false },
+        { value: false },
+        { value: false },
+        { value: false },
+      ],
       zoomSelect: [
         {
           value: '1',
-          label: '100%'
-        }
+          label: '100%',
+        },
       ],
       selectZoom: '100%',
       zoom: 100,
@@ -193,13 +213,13 @@ export default {
       selected: [],
       internalLayout: {
         ...this.layout,
-        datarevision: 1
-      }
-    }
+        datarevision: 1,
+      },
+    };
   },
   computed: {
     ui: function () {
-      var ui = {}
+      let ui;
       if (this.plotType === 'heatmap') {
         ui = {
           button: 'View Heatmap',
@@ -207,8 +227,8 @@ export default {
           placeholderx: 'Select gene',
           placeholdery: 'Select cell/sample',
           showFirstSelector: true,
-          showSecondSelector: true
-        }
+          showSecondSelector: true,
+        };
       } else {
         ui = {
           button: 'View Plot',
@@ -216,128 +236,130 @@ export default {
           placeholderx: 'Select channel',
           placeholdery: 'Select gene',
           showFirstSelector: true,
-          showSecondSelector: false
-        }
+          showSecondSelector: false,
+        };
       }
-      return ui
-    }
+      return ui;
+    },
   },
   watch: {
     dataInput: function () {
-      this.loadData(this.dataInput)
+      this.loadData(this.dataInput);
     },
     helpMode: function (val) {
-      this.setHelpMode(val)
-    }
+      this.setHelpMode(val);
+    },
   },
   mounted() {
-    this.$refs.container.addEventListener('wheel', this.handleWheel)
-    this.createZoomPercentages()
+    this.$refs.container.addEventListener('wheel', this.handleWheel);
+    this.createZoomPercentages();
     if (this.url != '') {
-      this.loadURL(this.url)
-      this.react()
+      this.loadURL(this.url);
+      this.react();
     } else if (this.dataInput.length != 0) {
-      this.loadData(this.dataInput)
+      this.loadData(this.dataInput);
     }
-    this.handleResize()
+    this.handleResize();
     this.$watch(
       'data',
       () => {
-        this.internalLayout.datarevision++
-        this.react()
+        this.internalLayout.datarevision++;
+        this.react();
       },
-      {deep: !this.watchShallow}
-    )
+      { deep: !this.watchShallow },
+    );
 
-    this.$watch('options', this.react, {deep: !this.watchShallow})
-    this.$watch('layout', this.relayout, {deep: !this.watchShallow})
+    this.$watch('options', this.react, { deep: !this.watchShallow });
+    this.$watch('layout', this.relayout, { deep: !this.watchShallow });
   },
-  destroyed() {
+  unmounted() {
     if (this.$refs.container) {
-      this.$refs.container.removeEventListener('wheel', this.handleWheel)
+      this.$refs.container.removeEventListener('wheel', this.handleWheel);
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.__generalListeners) {
-      this.__generalListeners.forEach(obj => this.$refs.container.removeAllListeners(obj.fullName))
+      this.__generalListeners.forEach((obj) =>
+        this.$refs.container.removeAllListeners(obj.fullName),
+      );
     }
-    Plotly.purge(this.$refs.container)
+    Plotly.purge(this.$refs.container);
   },
   methods: {
     loadData: function (data) {
       // Send data to plotly directly if 'plotly-only' is specified
       if (this.plotType === 'plotly-only') {
-        Plotly.newPlot(this.$refs.container, this.dataInput, this.layout, this.getOptions())
-        return
+        Plotly.newPlot(this.$refs.container, this.dataInput, this.layout, this.getOptions());
+        return;
       } else {
         // Else we treat the data as if it was in csv format
         this.csv.loadData(data).then(() => {
-          this.findTypeThenPlot()
-        })
+          this.findTypeThenPlot();
+        });
       }
     },
     // loadURL: Takes a url pointing to a csv file as input and plots it
     loadURL: function (url) {
       this.csv.loadFile(url).then(() => {
-        this.findTypeThenPlot()
-      })
+        this.findTypeThenPlot();
+      });
     },
     // findTypeThenPlot: Check the inputs (props) to Plotvuer and plot accordingly
     findTypeThenPlot: function () {
-      this.allChannelsX = this.csv.getHeadersExceptForFirst()
-      this.allChannelsY = this.csv.getColoumnByIndex(0)
+      this.allChannelsX = this.csv.getHeadersExceptForFirst();
+      this.allChannelsY = this.csv.getColoumnByIndex(0);
       // Check if plot type is provided
       if (this.plotType === 'heatmap') {
         // Check if filters are definded
         if (this.yAxisFilter.length > 1) {
-          this.channelx = this.yAxisFilter
-          this.channely = this.xAxisFilter
-          this.heatmapPlotWithFilters()
+          this.channelx = this.yAxisFilter;
+          this.channely = this.xAxisFilter;
+          this.heatmapPlotWithFilters();
         }
         // Plot all data if no filters are defined
         else {
-          this.heatmapPlotAll()
+          this.heatmapPlotAll();
         }
       } else {
         // If no plot type is defined, we attempt to deduce it with 'getDataType'
-        this.data[0].x = this.csv.getColoumnByIndex(0)
-        this.data[0].y = this.csv.getColoumnByIndex(1)
-        this.data[0].type = this.csv.getDataType()
-        this.plot_channel(this.csv.getHeaderByIndex(1))
-        Plotly.newPlot(this.$refs.container, this.data, this.layout, this.getOptions())
+        this.data[0].x = this.csv.getColoumnByIndex(0);
+        this.data[0].y = this.csv.getColoumnByIndex(1);
+        this.data[0].type = this.csv.getDataType();
+        this.plot_channel(this.csv.getHeaderByIndex(1));
+        Plotly.newPlot(this.$refs.container, this.data, this.layout, this.getOptions());
       }
     },
     // plot_channel: plot a singular channel from a given coloumn name
     plot_channel: function (channel = false) {
       if (channel) {
-        this.data[0].x = this.csv.getColoumnByIndex(0)
-        this.data[0].y = this.csv.getColoumnByName(channel)
-        this.data[0].type = this.csv.getDataType()
+        this.data[0].x = this.csv.getColoumnByIndex(0);
+        this.data[0].y = this.csv.getColoumnByName(channel);
+        this.data[0].type = this.csv.getDataType();
       }
     },
     // timeseriesSelectedChannelsPlot: Plot all selected channels
     timeseriesSelectedChannelsPlot: function () {
-      this.data = []
+      this.data = [];
       for (let i in this.channelx) {
-        this.data.push([])
-        this.data[i].x = this.csv.getColoumnByIndex(0)
-        this.data[i].y = this.csv.getColoumnByName(this.channelx[i])
-        this.data[i].type = this.csv.getDataType()
+        this.data.push([]);
+        this.data[i].x = this.csv.getColoumnByIndex(0);
+        this.data[i].y = this.csv.getColoumnByName(this.channelx[i]);
+        this.data[i].type = this.csv.getDataType();
       }
-      Plotly.react(this.$refs.container, this.data, this.layout, this.getOptions())
+      Plotly.react(this.$refs.container, this.data, this.layout, this.getOptions());
     },
     // heatmapPlotWithFilters: Plot a heatmap with given x and y filters
     heatmapPlotWithFilters: function () {
-      var data = this.csv.getByAxes(this.channelx, this.channely)
+      var data = this.csv.getByAxes(this.channelx, this.channely);
       var tdata = [
         {
           z: data,
           x: this.channelx,
           y: this.channely,
-          type: 'heatmap'
-        }
-      ]
-      Plotly.react(this.$refs.container, tdata, this.layout, this.getOptions())
+          type: 'heatmap',
+        },
+      ];
+      Plotly.react(this.$refs.container, tdata, this.layout, this.getOptions());
     },
     // heatmapPlotAll: plot all data avialable for heatmap
     heatmapPlotAll: function () {
@@ -346,10 +368,10 @@ export default {
           z: this.csv.getDataValuesOnly(),
           x: this.csv.getHeadersExceptForFirst(),
           y: this.csv.getColoumnByIndex(0),
-          type: 'heatmap'
-        }
-      ]
-      Plotly.react(this.$refs.container, tdata, this.layout, this.getOptions())
+          type: 'heatmap',
+        },
+      ];
+      Plotly.react(this.$refs.container, tdata, this.layout, this.getOptions());
     },
     // handleResize: listener to resize plotly canvas and redraw
     handleResize: function () {
@@ -358,130 +380,132 @@ export default {
         //   "Width now:" + this.$el.clientWidth + " Height now: " + (this.$el.parentElement.clientHeight - this.$refs.selectBox.$el.clientHeight)
         Plotly.relayout(this.$refs.container, {
           width: this.$el.clientWidth,
-          height: String(this.$el.parentElement.clientHeight - this.$refs.controls.clientHeight - 10)
-        })
-      })
+          height: String(
+            this.$el.parentElement.clientHeight - this.$refs.controls.clientHeight - 10,
+          ),
+        });
+      });
     },
     // zoomIn: Find and click the plotly modebar 'zoom in'
     zoomIn: function () {
-      this.zoom += 100
-      this.$el.querySelector('a[data-attr="zoom"][data-val="in"]').click()
-      this.setDisabledButtons(this.zoom)
-      this.updateZoomSelect(this.zoom)
+      this.zoom += 100;
+      this.$el.querySelector('a[data-attr="zoom"][data-val="in"]').click();
+      this.setDisabledButtons(this.zoom);
+      this.updateZoomSelect(this.zoom);
     },
     // zoomOut: Find and click the plotly modebar 'zoom out'
     zoomOut: function () {
-      this.zoom -= 100
-      this.$el.querySelector('a[data-attr="zoom"][data-val="out"]').click()
-      this.setDisabledButtons(this.zoom)
-      this.updateZoomSelect(this.zoom)
+      this.zoom -= 100;
+      this.$el.querySelector('a[data-attr="zoom"][data-val="out"]').click();
+      this.setDisabledButtons(this.zoom);
+      this.updateZoomSelect(this.zoom);
     },
     // setDisabledButtons(zoomLevel): Disable buttons once they hit max zoom
     setDisabledButtons(zoom) {
       if (zoom === this.maxZoom) {
-        this.zoomInDisabled = true
+        this.zoomInDisabled = true;
       } else {
-        this.zoomInDisabled = false
+        this.zoomInDisabled = false;
       }
       if (zoom === 0) {
-        this.zoomOutDisabled = true
+        this.zoomOutDisabled = true;
       } else {
-        this.zoomOutDisabled = false
+        this.zoomOutDisabled = false;
       }
-      return
+      return;
     },
     resetView: function () {
-      this.zoom = 100
-      this.$el.querySelector('a[data-attr="zoom"][data-val="reset"]').click()
-      this.setDisabledButtons(this.zoom)
-      this.updateZoomSelect(this.zoom)
+      this.zoom = 100;
+      this.$el.querySelector('a[data-attr="zoom"][data-val="reset"]').click();
+      this.setDisabledButtons(this.zoom);
+      this.updateZoomSelect(this.zoom);
     },
     percentToNum(percentage) {
-      return Number(percentage.slice(0, -1))
+      return Number(percentage.slice(0, -1));
     },
     selectZoomChange: function (requestedZoomPercentage) {
       if (requestedZoomPercentage === '100%') {
-        this.resetView()
-        return
+        this.resetView();
+        return;
       }
-      let newZoom = this.percentToNum(requestedZoomPercentage)
-      let zoomDiff = Math.round((newZoom - this.zoom) / 100)
+      let newZoom = this.percentToNum(requestedZoomPercentage);
+      let zoomDiff = Math.round((newZoom - this.zoom) / 100);
       for (let i = 0; i < Math.abs(zoomDiff); i++) {
         if (zoomDiff > 0) {
-          this.zoomIn()
+          this.zoomIn();
         } else {
-          this.zoomOut()
+          this.zoomOut();
         }
       }
-      this.updateZoomSelect(newZoom)
+      this.updateZoomSelect(newZoom);
     },
     updateZoomSelect(percentage) {
-      this.selectZoom = String(percentage) + '%'
+      this.selectZoom = String(percentage) + '%';
     },
     createZoomPercentages: function () {
-      this.zoomSelect = []
+      this.zoomSelect = [];
       for (let i = 0; i <= this.maxZoom / 100; i++) {
         this.zoomSelect.push({
           value: i,
-          label: (i + 1) * 100 + '%'
-        })
+          label: (i + 1) * 100 + '%',
+        });
       }
     },
     setHelpMode: function (helpMode) {
       if (helpMode) {
-        this.inHelp = true
-        this.hoverVisibilities.forEach(item => {
-          item.value = true
-        })
+        this.inHelp = true;
+        this.hoverVisibilities.forEach((item) => {
+          item.value = true;
+        });
       } else {
-        this.inHelp = false
-        this.hoverVisibilities.forEach(item => {
-          item.value = false
-        })
+        this.inHelp = false;
+        this.hoverVisibilities.forEach((item) => {
+          item.value = false;
+        });
       }
     },
     showToolitip: function (tooltipNumber) {
       if (!this.inHelp) {
-        this.hoverVisibilities[tooltipNumber].value = true
+        this.hoverVisibilities[tooltipNumber].value = true;
         this.tooltipWait = setTimeout(() => {
-          this.hoverVisibilities[tooltipNumber].value = true
-        }, 1000)
+          this.hoverVisibilities[tooltipNumber].value = true;
+        }, 1000);
       }
     },
     hideToolitip: function (tooltipNumber) {
       if (!this.inHelp) {
-        this.hoverVisibilities[tooltipNumber].value = false
-        clearInterval(this.tooltipWait)
+        this.hoverVisibilities[tooltipNumber].value = false;
+        clearInterval(this.tooltipWait);
       }
     },
     handleWheel: function (event) {
-      let change = Math.round(event.deltaY / 7)
-      this.zoom = this.zoom - change
-      this.updateZoomSelect(this.zoom)
+      let change = Math.round(event.deltaY / 7);
+      this.zoom = this.zoom - change;
+      this.updateZoomSelect(this.zoom);
     },
     plot() {
-      return Plotly.plot(this.$refs.container, this.data, this.layout, this.getOptions())
+      return Plotly.plot(this.$refs.container, this.data, this.layout, this.getOptions());
     },
     getOptions() {
-      let el = this.$refs.container
-      let opts = this.options
+      let el = this.$refs.container;
+      let opts = this.options;
 
       // if width/height is not specified for toImageButton, default to el.clientWidth/clientHeight
-      if (!opts) opts = {}
-      if (!opts.toImageButtonOptions) opts.toImageButtonOptions = {}
-      if (!opts.toImageButtonOptions.width) opts.toImageButtonOptions.width = el.clientWidth
-      if (!opts.toImageButtonOptions.height) opts.toImageButtonOptions.height = el.clientHeight
-      opts.scrollZoom = true
-      return opts
+      if (!opts) opts = {};
+      if (!opts.toImageButtonOptions) opts.toImageButtonOptions = {};
+      if (!opts.toImageButtonOptions.width) opts.toImageButtonOptions.width = el.clientWidth;
+      if (!opts.toImageButtonOptions.height) opts.toImageButtonOptions.height = el.clientHeight;
+      opts.scrollZoom = true;
+      return opts;
     },
     newPlot() {
-      return Plotly.newPlot(this.$refs.container, this.data, this.layout, this.getOptions())
+      return Plotly.newPlot(this.$refs.container, this.data, this.layout, this.getOptions());
     },
     react() {
-      return Plotly.react(this.$refs.container, this.data, this.layout, this.getOptions())
-    }
-  }
-}
+      return Plotly.react(this.$refs.container, this.data, this.layout, this.getOptions());
+    },
+  },
+};
 </script>
 
 <style scoped src="element-ui/lib/theme-chalk/index.css"></style>
@@ -584,7 +608,7 @@ export default {
   font-family: Arial, Helvetica, sans-serif;
 }
 
-.zoomSelect :deep( .el-input__inner ){
+.zoomSelect :deep(.el-input__inner) {
   padding: 0px;
   height: 24px;
   padding-left: 4px;
@@ -592,7 +616,7 @@ export default {
   margin-left: 8px;
 }
 
-.zoomSelect :deep( .el-select__caret ){
+.zoomSelect :deep(.el-select__caret) {
   width: 8px;
   margin-right: 2px;
   margin-top: 2px;
diff --git a/src/components/PlotVuer.vue b/src/components/PlotVuer.vue
index 8221d4c..1f7b1db 100644
--- a/src/components/PlotVuer.vue
+++ b/src/components/PlotVuer.vue
@@ -15,9 +15,9 @@
 </template>
 
 <script>
-import TimeseriesPlot from './TimeseriesPlot.vue'
-import HeatmapPlot from './HeatmapPlot.vue'
-const KNOWN_VERSIONS = ['1.2.0', '1.1.0']
+import TimeseriesPlot from './TimeseriesPlot.vue';
+import HeatmapPlot from './HeatmapPlot.vue';
+const KNOWN_VERSIONS = ['1.2.0', '1.1.0'];
 
 export default {
   name: 'PlotVuer',
@@ -33,7 +33,7 @@ export default {
     dataSource: {
       type: Object,
       required: true,
-      default: () => {}
+      default: () => {},
     },
     /**
      * The metadata object
@@ -43,8 +43,8 @@ export default {
       type: Object,
       required: true,
       validator: function (value) {
-        return KNOWN_VERSIONS.includes(value.version) && value.type === 'plot'
-      }
+        return KNOWN_VERSIONS.includes(value.version) && value.type === 'plot';
+      },
     },
     /**
      * The plotLayout for UI.
@@ -80,41 +80,41 @@ export default {
             l: 55,
             r: 55,
             b: 90,
-            pad: 4
+            pad: 4,
           },
           loading: false,
           options: {
             responsive: true,
-            scrollZoom: true
-         }
-        }
-      }
+            scrollZoom: true,
+          },
+        };
+      },
     },
     /**
      * The supplemental data to load.
      */
     supplementalData: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     /**
      * The option to choose helpMode.
      */
     helpMode: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /**
      * The option to show the selector UI.
      */
     selectorUi: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   computed: {
     plotType: function () {
-      return this.metadata.attrs.style + '-plot'
+      return this.metadata.attrs.style + '-plot';
     },
     layout: function () {
       // return layout in metadat if it exists. If not use the prop
@@ -124,14 +124,13 @@ export default {
             ? this.metadata.attrs.layout
             : this.plotLayout
           : this.plotLayout
-        : this.plotLayout
-      return layout
-    }
+        : this.plotLayout;
+      return layout;
+    },
   },
-}
+};
 </script>
 
-
 <style scoped>
 .plotvuer_parent {
   height: 100%;
diff --git a/src/components/TimeseriesPlot.vue b/src/components/TimeseriesPlot.vue
index d58a427..832bf2f 100644
--- a/src/components/TimeseriesPlot.vue
+++ b/src/components/TimeseriesPlot.vue
@@ -1,7 +1,7 @@
 <template>
   <div ref="plotContainer" class="container">
     <div ref="plotlyplot" class="vue-plotly" />
-    <div v-if="selectorUi" class="chooser-container" :class="{inactive: loading}">
+    <div v-if="selectorUi" class="chooser-container" :class="{ inactive: loading }">
       <span>
         <el-select
           ref="selectBox"
@@ -12,7 +12,7 @@
           filterable
           collapse-tags
           default-first-option
-          :teleported=false
+          :teleported="false"
           placeholder="select"
         >
           <el-option v-for="item in traceNames" :key="item" :label="item" :value="item"></el-option>
@@ -26,16 +26,13 @@
 </template>
 
 <script>
-import { markRaw, toRaw } from 'vue'
-import Plotly from '@/js/custom_plotly'
-import DataManager from '@/js/data_manager'
-import PlotCommon from '@/mixins/plot_common'
-import { ElSelect, ElButton, ElOption } from 'element-plus';
-
+import { markRaw, toRaw } from 'vue';
+import Plotly from '@/js/custom_plotly';
+import DataManager from '@/js/data_manager';
+import PlotCommon from '@/mixins/plot_common';
 
 export default {
   name: 'TimeseriesPlot',
-  components: { ElSelect, ElButton, ElOption},
   mixins: [PlotCommon],
   data: function () {
     return {
@@ -47,175 +44,176 @@ export default {
       traceNames: [],
       xAxisLabel: 'time',
       resizeObserver: null,
-    }
+    };
   },
   computed: {
     fullMetadata() {
-      let metadata = JSON.parse(JSON.stringify(this.metadata))
+      let metadata = JSON.parse(JSON.stringify(this.metadata));
       if (!metadata['y-axes-columns']) {
-        metadata['y-axes-columns'] = []
+        metadata['y-axes-columns'] = [];
       }
       if (!metadata['x-axis-column']) {
-        metadata['x-axis-column'] = 0
+        metadata['x-axis-column'] = 0;
       }
       if (!metadata['no-header']) {
-        metadata['no-header'] = false
+        metadata['no-header'] = false;
       }
       if (!metadata['row-major']) {
-        metadata['row-major'] = false
+        metadata['row-major'] = false;
       }
-      return metadata
-    }
+      return metadata;
+    },
   },
   watch: {
     sourceData: function () {
-      this.loadData(this.sourceData)
-    }
+      this.loadData(this.sourceData);
+    },
   },
   mounted: function () {
-    this.loadData(this.sourceData)
+    this.loadData(this.sourceData);
     this.resizeObserver = new ResizeObserver(() => {
       if (this.$refs.plotlyplot) {
-        Plotly.Plots.resize(this.$refs.plotlyplot)
+        Plotly.Plots.resize(this.$refs.plotlyplot);
       }
-    })
-    this.resizeObserver.observe(this.$refs.plotContainer)
+    });
+    this.resizeObserver.observe(this.$refs.plotContainer);
   },
   beforeUnmount: function () {
     if (this.resizeObserver) {
-      this.resizeObserver.disconnect()
+      this.resizeObserver.disconnect();
     }
   },
   methods: {
     loadData(sourceData) {
       if (sourceData.url) {
-        this.loading = true
-        DataManager.loadFile(sourceData.url, this.dataReady) // Use url
+        this.loading = true;
+        DataManager.loadFile(sourceData.url, this.dataReady); // Use url
       } else {
-        const layout = this.plotLayout ? this.plotLayout : this.layout
-        Plotly.react(this.$refs.plotlyplot, this.sourceData.data, layout, this.options) // Use plolty input
+        const layout = this.plotLayout ? this.plotLayout : this.layout;
+        Plotly.react(this.$refs.plotlyplot, this.sourceData.data, layout, this.options); // Use plolty input
       }
     },
     dataReady(data) {
       const start = Date.now();
       if (this.fullMetadata['no-header']) {
-        DataManager.loadFile(this.supplementalData[0].url, this.headerDataReady)
+        DataManager.loadFile(this.supplementalData[0].url, this.headerDataReady);
       }
-      this.loading = false
+      this.loading = false;
       // this.handleResize()
-      this.parsedData = markRaw(data)
-      this.findYaxesCols()
-      this.populateTime()
-      this.populateDataValues()
+      this.parsedData = markRaw(data);
+      this.findYaxesCols();
+      this.populateTime();
+      this.populateDataValues();
       if (!this.fullMetadata['no-header']) {
-        this.populateXaxisLabel()
-        this.populateTraceNames()
+        this.populateXaxisLabel();
+        this.populateTraceNames();
       }
-      this.createPlot(this.time, this.xAxisLabel, this.dataValues, this.traceNames)
-      console.log(Date.now() - start)
+      this.createPlot(this.time, this.xAxisLabel, this.dataValues, this.traceNames);
+      console.log(Date.now() - start);
     },
     headerDataReady(data) {
-      this.traceData = markRaw(data)
-      this.populateXaxisLabel()
-      this.populateTraceNames()
+      this.traceData = markRaw(data);
+      this.populateXaxisLabel();
+      this.populateTraceNames();
       if (!this.loading) {
-        this.createPlot(this.time, this.xAxisLabel, this.dataValues, this.traceNames)
+        this.createPlot(this.time, this.xAxisLabel, this.dataValues, this.traceNames);
       }
     },
     filterPlot() {
-      let xTraceNames = this.filterX
+      let xTraceNames = this.filterX;
       if (xTraceNames.length === 0) {
-        this.createPlot(this.time, this.xAxisLabel, this.dataValues, this.traceNames)
-        return
+        this.createPlot(this.time, this.xAxisLabel, this.dataValues, this.traceNames);
+        return;
       }
-      let colIndeces = []
+      let colIndeces = [];
       for (let i of xTraceNames) {
-        colIndeces.push(this.fullMetadata['y-axes-columns'][this.traceNames.indexOf(i)])
+        colIndeces.push(this.fullMetadata['y-axes-columns'][this.traceNames.indexOf(i)]);
       }
-      let all_data = this.parsedData.data
+      let all_data = this.parsedData.data;
       if (!this.fullMetadata['no-header']) {
-        all_data = all_data.slice(1)
+        all_data = all_data.slice(1);
       }
-      let datat = []
+      let datat = [];
       for (let col of colIndeces) {
-        const filteredCol = all_data.map(row => {
-          return row[col]
-        })
-        datat.push(filteredCol)
+        const filteredCol = all_data.map((row) => {
+          return row[col];
+        });
+        datat.push(filteredCol);
       }
-      this.createPlot(this.time, this.xAxisLabel, datat, xTraceNames)
+      this.createPlot(this.time, this.xAxisLabel, datat, xTraceNames);
     },
     createPlot(xValues, xValuesLabel, yValues, traceNames) {
-      let tdata = []
+      let tdata = [];
       for (let i = 0; i < yValues.length; i++) {
         tdata.push({
           type: 'scatter',
           mode: 'lines',
           name: traceNames[i],
           x: xValues,
-          y: yValues[i]
-        })
+          y: yValues[i],
+        });
       }
-      let currentLayout = this.plotLayout ? this.plotLayout : this.layout
-      let newContent = {title: {text: this.title}, xaxis: {title: {text: xValuesLabel}}}
-      let tlayout = {...toRaw(currentLayout), ...newContent}
-      Plotly.react(this.$refs.plotlyplot, tdata, tlayout, this.options) //this.getOptions())
+      let currentLayout = this.plotLayout ? this.plotLayout : this.layout;
+      let newContent = { title: { text: this.title }, xaxis: { title: { text: xValuesLabel } } };
+      let tlayout = { ...toRaw(currentLayout), ...newContent };
+      Plotly.react(this.$refs.plotlyplot, tdata, tlayout, this.options); //this.getOptions())
     },
     findYaxesCols() {
       if (this.fullMetadata['y-axes-columns'].length === 0) {
-        let yCols = Array(this.parsedData.data[0].length).keys() // count up to number of coloumns
-        yCols.shift()
-        yCols.shift() // remove first two values
-        this.fullMetadata['y-axes-columns'] = yCols
+        let yCols = Array(this.parsedData.data[0].length).keys(); // count up to number of coloumns
+        yCols.shift();
+        yCols.shift(); // remove first two values
+        this.fullMetadata['y-axes-columns'] = yCols;
       }
     },
     populateXaxisLabel() {
       if (this.fullMetadata['no-header']) {
-        this.xAxisLabel = this.traceData.data[0][this.fullMetadata['x-axis-column']]
+        this.xAxisLabel = this.traceData.data[0][this.fullMetadata['x-axis-column']];
       } else {
-        this.xAxisLabel = this.parsedData.data[0][this.fullMetadata['x-axis-column']]
+        this.xAxisLabel = this.parsedData.data[0][this.fullMetadata['x-axis-column']];
       }
     },
     populateTraceNames() {
       if (this.fullMetadata['no-header']) {
-        this.traceNames.splice(0, this.traceNames.length)
+        this.traceNames.splice(0, this.traceNames.length);
         for (let col of this.fullMetadata['y-axes-columns']) {
-          this.traceNames.push(this.traceData.data[0][col])
+          this.traceNames.push(this.traceData.data[0][col]);
         }
-        this.$set(this.traceNames, 0, this.traceNames[0])
       } else {
-        this.traceNames = []
+        this.traceNames = [];
         for (let col of this.fullMetadata['y-axes-columns']) {
-          this.traceNames.push(this.parsedData.data[0][col])
+          this.traceNames.push(this.parsedData.data[0][col]);
         }
       }
     },
     populateTime() {
-      const this_ = this
-      let all_data = this.parsedData.data
+      const this_ = this;
+      let all_data = this.parsedData.data;
       if (!this.fullMetadata['no-header']) {
-        all_data = all_data.slice(1)
+        all_data = all_data.slice(1);
       }
-      this.time = markRaw(all_data.map(function (row) {
-        return row[this_.fullMetadata['x-axis-column']]
-      }))
+      this.time = markRaw(
+        all_data.map(function (row) {
+          return row[this_.fullMetadata['x-axis-column']];
+        }),
+      );
     },
     populateDataValues() {
-      let all_data = this.parsedData.data
+      let all_data = this.parsedData.data;
       if (!this.fullMetadata['no-header']) {
-        all_data = all_data.slice(1)
+        all_data = all_data.slice(1);
       }
-      let datat = []
+      let datat = [];
       for (let col of this.fullMetadata['y-axes-columns']) {
-        const filteredRow = all_data.map(row => {
-          return row[col]
-        })
-        datat.push(filteredRow)
+        const filteredRow = all_data.map((row) => {
+          return row[col];
+        });
+        datat.push(filteredRow);
       }
-      this.dataValues = markRaw(datat)
-    }
-  }
-}
+      this.dataValues = markRaw(datat);
+    },
+  },
+};
 </script>
 
 <style scoped>
diff --git a/src/components/csv_manager.js b/src/components/csv_manager.js
index 388361f..9d15c22 100644
--- a/src/components/csv_manager.js
+++ b/src/components/csv_manager.js
@@ -1,180 +1,180 @@
-var Papa = require('papaparse')
+var Papa = require('papaparse');
 
 class Sparccsv {
   constructor() {}
 
   loadFile(file_url) {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       fetch(file_url)
-        .then(response => response.text())
-        .then(data => {
-          this.csv_data = Papa.parse(data)
-          resolve()
-        })
-    })
+        .then((response) => response.text())
+        .then((data) => {
+          this.csv_data = Papa.parse(data);
+          resolve();
+        });
+    });
   }
 
   loadData(data) {
-    return new Promise(resolve => {
-      this.csv_data = {}
-      this.csv_data.data = data
-      resolve()
-    })
+    return new Promise((resolve) => {
+      this.csv_data = {};
+      this.csv_data.data = data;
+      resolve();
+    });
   }
 
   transposeSelf() {
-    var tempData = this.transpose(this.csv_data.data)
-    this.csv_data.data = tempData
+    var tempData = this.transpose(this.csv_data.data);
+    this.csv_data.data = tempData;
   }
 
   getDataType() {
-    var first = this.getHeaders()[0]
+    var first = this.getHeaders()[0];
     if (first.toLowerCase().includes('time')) {
-      return 'scatter'
+      return 'scatter';
     } else if (first.toLowerCase().includes('name')) {
-      return 'bar'
+      return 'bar';
     }
-    var first_col = this.getColoumnByIndex(0)
+    var first_col = this.getColoumnByIndex(0);
     if (Number(first_col[4]) > Number(first_col[3])) {
-      return 'scatter'
+      return 'scatter';
     } else {
-      return 'bar'
+      return 'bar';
     }
   }
 
   getXaxis() {
-    var firstHeader = this.csv_data.data[0][0]
-    return firstHeader.split('-').join(' ').split('_').join(' ')
+    var firstHeader = this.csv_data.data[0][0];
+    return firstHeader.split('-').join(' ').split('_').join(' ');
   }
 
   getTitle(url) {
-    var title = url.split('/').pop() //grab file from url
-    title = title.split('-').join(' ').split('_').join(' ').split('.')[0] //Process file name into title
-    return title
+    var title = url.split('/').pop(); //grab file from url
+    title = title.split('-').join(' ').split('_').join(' ').split('.')[0]; //Process file name into title
+    return title;
   }
 
   // Return all headers
   getHeaders() {
-    return this.csv_data.data[0]
+    return this.csv_data.data[0];
   }
 
   // Returns all headers except for first cell
   getHeadersExceptForFirst() {
-    var headers = this.csv_data.data[0]
-    headers.shift()
-    return headers
+    var headers = this.csv_data.data[0];
+    headers.shift();
+    return headers;
   }
 
   getCSVData() {
-    return [...this.csv_data.data]
+    return [...this.csv_data.data];
   }
 
   // Remove header and first row to pass data values only
   getDataValuesOnly() {
-    let all_data = [...this.csv_data.data]
-    let headers_removed = all_data.slice(1)
+    let all_data = [...this.csv_data.data];
+    let headers_removed = all_data.slice(1);
     let headers_and_col_removed = headers_removed.map(function (row) {
-      return row.slice(1)
-    })
-    return headers_and_col_removed
+      return row.slice(1);
+    });
+    return headers_and_col_removed;
   }
 
   getSampleRate() {
-    return 1 / (this.csv_data.data[1][1] - this.csv_data.data[1][0])
+    return 1 / (this.csv_data.data[1][1] - this.csv_data.data[1][0]);
   }
 
   getColoumnByIndex(index) {
-    let col = this.csv_data.data.map(row => {
-      return row[index]
-    })
-    col.shift()
-    return col
+    let col = this.csv_data.data.map((row) => {
+      return row[index];
+    });
+    col.shift();
+    return col;
   }
 
   getHeaderByIndex(index) {
-    return this.csv_data.data[0][index]
+    return this.csv_data.data[0][index];
   }
 
   getColoumnByName(column_name) {
-    var column_index = 0
+    var column_index = 0;
     for (let i in this.csv_data.data[0]) {
       if (this.csv_data.data[0][i] === column_name) {
-        column_index = i
+        column_index = i;
       }
     }
     if (column_index === 0) {
-      return false // if coloumn not found
+      return false; // if coloumn not found
     }
-    return this.getColoumnByIndex(column_index)
+    return this.getColoumnByIndex(column_index);
   }
 
   getByAxes(channelx, channely) {
-    var dx = []
-    var c1 = this.getColoumnByIndex(0)
-    var index = []
+    var dx;
+    var c1 = this.getColoumnByIndex(0);
+    var index = [];
     for (let i in channely) {
       for (let j in c1) {
         if (c1[j] === channely[i]) {
-          index.push(j)
-          continue
+          index.push(j);
+          continue;
         }
       }
     }
-    var datat = []
+    var datat = [];
     for (let i in channelx) {
-      var col = []
-      dx = this.getColoumnByName(channelx[i])
+      var col = [];
+      dx = this.getColoumnByName(channelx[i]);
       for (let j in index) {
-        col.push(dx[index[j]])
+        col.push(dx[index[j]]);
       }
-      datat.push(col)
+      datat.push(col);
     }
-    return [...this.transpose(datat)]
+    return [...this.transpose(datat)];
   }
 
   export(selectedChannels) {
-    var headerList = []
-    var selectedData = []
-    headerList.push(this.getHeaderByIndex(0))
-    selectedData.push(this.getColoumnByIndex(0))
+    var headerList = [];
+    var selectedData = [];
+    headerList.push(this.getHeaderByIndex(0));
+    selectedData.push(this.getColoumnByIndex(0));
     for (let i in selectedChannels) {
-      headerList.push(selectedChannels[i])
-      selectedData.push(this.getColoumnByName(selectedChannels[i]))
+      headerList.push(selectedChannels[i]);
+      selectedData.push(this.getColoumnByName(selectedChannels[i]));
     }
-    var filename = 'sparc-export-' + Math.random().toString(36).slice(-5) + '.csv'
+    var filename = 'sparc-export-' + Math.random().toString(36).slice(-5) + '.csv';
     this.downloadCSV({
       filename: filename,
       data: this.transpose(selectedData),
-      columns: headerList
-    })
+      columns: headerList,
+    });
   }
 
   transpose(array) {
-    return array[0].map((col, i) => array.map(row => row[i]))
+    return array[0].map((col, i) => array.map((row) => row[i]));
   }
 
-  downloadCSV = args => {
-    /* Use like so: 
-     downloadCSV({ 
+  downloadCSV = (args) => {
+    /* Use like so:
+     downloadCSV({
       filename: 'filename.csv',
       data: [{'a': '1', 'b': '2'}],
       columns: ['a','b']
       });
      */
 
-    let filename = args.filename || 'export.csv'
+    let filename = args.filename || 'export.csv';
 
-    let csv = Papa.unparse(args.data)
-    if (csv == null) return
+    let csv = Papa.unparse(args.data);
+    if (csv == null) return;
 
-    var blob = new Blob([csv])
-    var a = window.document.createElement('a')
-    a.href = window.URL.createObjectURL(blob, {type: 'text/plain'})
-    a.download = filename
-    document.body.appendChild(a)
-    a.click() // IE: "Access is denied"; see: https://connect.microsoft.com/IE/feedback/details/797361/ie-10-treats-blob-url-as-cross-origin-and-denies-access
-    document.body.removeChild(a)
-  }
+    var blob = new Blob([csv]);
+    var a = window.document.createElement('a');
+    a.href = window.URL.createObjectURL(blob, { type: 'text/plain' });
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click(); // IE: "Access is denied"; see: https://connect.microsoft.com/IE/feedback/details/797361/ie-10-treats-blob-url-as-cross-origin-and-denies-access
+    document.body.removeChild(a);
+  };
 }
 
-module.exports = Sparccsv
+module.exports = Sparccsv;
diff --git a/src/components/index.js b/src/components/index.js
index f703642..60339ca 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,5 +1,5 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import PlotVuer from './PlotVuer.vue'
+import PlotVuer from './PlotVuer.vue';
 
-export {PlotVuer}
+export { PlotVuer };
diff --git a/src/js/custom_plotly.js b/src/js/custom_plotly.js
index 202cfd4..6538324 100644
--- a/src/js/custom_plotly.js
+++ b/src/js/custom_plotly.js
@@ -1,9 +1,9 @@
 // in custom-plotly.js
-import Plotly from 'plotly.js/lib/core'
-import scatter from 'plotly.js/lib/scatter'
-import bar from 'plotly.js/lib/bar'
-import heatmap from 'plotly.js/lib/heatmap'
+import Plotly from 'plotly.js/lib/core';
+import scatter from 'plotly.js/lib/scatter';
+import bar from 'plotly.js/lib/bar';
+import heatmap from 'plotly.js/lib/heatmap';
 
 // Load in the trace types for pie, and choropleth
-Plotly.register([scatter, bar, heatmap])
-export default Plotly
+Plotly.register([scatter, bar, heatmap]);
+export default Plotly;
diff --git a/src/js/data_manager.js b/src/js/data_manager.js
index 5f6bdc0..18529c5 100644
--- a/src/js/data_manager.js
+++ b/src/js/data_manager.js
@@ -1,9 +1,9 @@
-import Papa from 'papaparse'
+import Papa from 'papaparse';
 
 const loadFile = (file_url, callback) => {
-  return Papa.parse(file_url, {download: true, complete: callback})
-}
+  return Papa.parse(file_url, { download: true, complete: callback });
+};
 
 export default {
-  loadFile
-}
+  loadFile,
+};
diff --git a/src/main.js b/src/main.js
index ee0df1f..7d97b6c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,5 +6,4 @@ const app = createApp(App);
 
 app.config.productionTip = false;
 
-app.use(router)
-   .mount('#app');
\ No newline at end of file
+app.use(router).mount('#app');
diff --git a/src/mixins/plot_common.js b/src/mixins/plot_common.js
index fe26f48..095324d 100644
--- a/src/mixins/plot_common.js
+++ b/src/mixins/plot_common.js
@@ -1,32 +1,32 @@
-import PlotControls from '@/components/PlotControls.vue'
+import PlotControls from '@/components/PlotControls.vue';
 
 export default {
-  components: {PlotControls},
+  components: { PlotControls },
   props: {
     metadata: {
       type: Object,
-      required: true
+      required: true,
     },
     sourceData: {
       type: Object,
-      required: true
+      required: true,
     },
     plotLayout: {
       type: Object,
-      required: true
+      required: true,
     },
     supplementalData: {
       type: Array,
-      required: true
+      required: true,
     },
     version: {
       type: String,
-      required: true
+      required: true,
     },
     selectorUi: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   data: function () {
     return {
@@ -39,20 +39,20 @@ export default {
           l: 55,
           r: 55,
           b: 90,
-          pad: 4
-        }
+          pad: 4,
+        },
       },
       loading: false,
       options: {
         responsive: true,
-        scrollZoom: true
-      }
-    }
+        scrollZoom: true,
+      },
+    };
   },
   computed: {
     title() {
-      const filename = this.sourceData.url.split('\\').pop().split('/').pop()
-      return filename.split('.')[0]
-    }
-  }
-}
+      const filename = this.sourceData.url.split('\\').pop().split('/').pop();
+      return filename.split('.')[0];
+    },
+  },
+};
diff --git a/src/router/index.js b/src/router/index.js
index a38546f..7a67691 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,7 +5,7 @@ const routes = [
   {
     path: '/',
     name: 'Home',
-    component: Home
+    component: Home,
   },
   {
     path: '/about',
@@ -13,7 +13,7 @@ const routes = [
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
   },
   {
     path: '/heatmap',
@@ -21,7 +21,7 @@ const routes = [
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "heatmap" */ '../views/Heatmap.vue')
+    component: () => import(/* webpackChunkName: "heatmap" */ '../views/Heatmap.vue'),
   },
   {
     path: '/timeseries',
@@ -29,13 +29,13 @@ const routes = [
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "timeseries" */ '../views/Timeseries.vue')
-  }
+    component: () => import(/* webpackChunkName: "timeseries" */ '../views/Timeseries.vue'),
+  },
 ];
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
-  routes
+  routes,
 });
 
-export default router;
\ No newline at end of file
+export default router;
diff --git a/src/views/Heatmap.vue b/src/views/Heatmap.vue
index 3adccee..02fed09 100644
--- a/src/views/Heatmap.vue
+++ b/src/views/Heatmap.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="plot-container">
     <h1>Plot of heatmap data</h1>
-    <plot-vuer :data-source="{url: urlList[0]}" :metadata="metadata" />
+    <plot-vuer :data-source="{ url: urlList[0] }" :metadata="metadata" />
   </div>
 </template>
 
 <script>
-import PlotVuer from '@/components/PlotVuer.vue'
+import PlotVuer from '@/components/PlotVuer.vue';
 
 export default {
   name: 'Heatmap',
   components: {
-    PlotVuer
+    PlotVuer,
   },
   data: function () {
     return {
@@ -23,20 +23,26 @@ export default {
         'https://mapcore-bucket1.s3-us-west-2.amazonaws.com/ISAN/csv-data/use-case-2/Sample_1_18907001_channel_1.csv',
         'https://api.sparc.science/s3-resource/141/3/files/derivative/pool-1/RAGP_4subs_raw_Ct.csv',
         'https://prd-sparc-storage-use1.s3.amazonaws.com/599/7c3c9e1a-15a8-4d5b-ab1d-35996be5a8f5/PR1705_Negddct.csv?X-Amz-Security-Token=IQoJb3JpZ2luX2VjEPn%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLWVhc3QtMSJIMEYCIQC8%2BrzQLp6rIRSPjrnbZX9ONj2j41H%2FafkjbgnlVoKrLAIhANCKSCT9sCnuHISt4PyP%2FnDkfc%2Bv4nDAjpu0Psx3LmOjKooECLL%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQARoMNzQwNDYzMzM3MTc3Igw%2Bzfu7jO5yZ4OCmvMq3gP5lrjaXlWv9gvI1FslIuHqnoMt1b1Hd0a6lLMiRgBhqUvogpNpsss3Tzt0YlTgGChfIek13lnUZlkZbs72L3lj4BbDYd0hMLEwNT1t417e7POs22TY0aVS0WuYJDV2%2FdFaA9spZxk5%2Ffg7u0FsgYQ7xJwJbszeODx0aBItNRDl41sztbK0TJq%2B%2BaH%2FCtIk4A6KUnamPLX8c3F89FK2RCNrcESe%2B6M6PjMMiqbH%2BqXepd%2F3JuFGPtzvgagb8iCLsz4KsjAUgu3Y%2BCkfqJzwJH552A2vU57BkWamBK5%2FTdBdmy%2BX9v1IVaUx16AjO3RWTt%2F9J0dugGhy6iGbZNbmxio5ufieIQ9qElsR8vEhVCS9dHGEBQQbRPXjqhZkghN1sUmcMQUcMp23ATfIpkKfnHiI8HWVgI3f9Lf1Fip3%2B9dtm3IjiNr9%2F4UK%2BgdjfsHirh%2BmvmCx8ORLApQelfR9Qk5NpuOR4tfskj%2FhriJ0yMBjgcJAo1PbfyMXDWkr5zF9SObrJlGq%2F%2FhRS9rnKEe76uOtfZ%2F%2Fj6LbIE4BhKiqHp2jBq9qxWSI1Ya20jiPscKIAuRwwuKklGnJhbT4WQS3RkT09ciG%2FpNfY9gAE0pKdVcy844e%2FlJVckvEFd%2B8IDOMMKzK1owGOqQBp15sYTEJCxdkh0GoqRjfFOj%2FD19aEC0v3z8d8DaeZPHax9brX2GWSBn0viGFN%2FKWNhVDSL9Amiuc%2FbaZqF6FR7gsVt%2F2IcPrp3ux1SSmV8UA%2B07bNK%2F0byGWYKHSRsqle4KCl4KpODcMcaimNVe%2ByWeLY%2FOrrosHhSh5xK0RNIf25CJLjRBesRmT15OD5nCHg3%2BB2wvQxE9Lt8s446iHcR%2BXq5w%3D&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20211118T024301Z&X-Amz-SignedHeaders=host&X-Amz-Expires=21600&X-Amz-Credential=ASIA2YZYN33M6R2SRXHO%2F20211118%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Signature=5559563b189f1c054382609b37e0f5de6e0f4068e370896b27f29b484cb468ea',
-        'https://prd-sparc-storage-use1.s3.amazonaws.com/394/c1d4094e-dd76-489c-9708-b443d3f67d18/Average_per_strain.csv?X-Amz-Security-Token=IQoJb3JpZ2luX2VjEBgaCXVzLWVhc3QtMSJGMEQCIHj5ILE%2BC%2Fl9cFsCU6UcI1Rr9QO7uv9yZc9nG%2BnmpqIgAiAws7bEG3Z8nQhF%2Bn95kmqYkSmc98a8Y%2BCSSG7DHVjfmCqKBAjh%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAEaDDc0MDQ2MzMzNzE3NyIMaO%2FMTqGX%2FqWPFAfXKt4DMF5kCl7c%2BDbWa3nW2WYkz290dXQ8ZaQISnF%2BiTFNBx0h9egqkIH34OWPoe8o0GzBG5TcY84aNut%2B6dZWrpEjFheWt2U70gpKl6E2Z4WAO6Vw1nHmmzYD18xCZ5h3gZvOxcanGM7aJkfOq%2FTAsoMjVRZFIw2ePtpovZVPOq5Y85qC6Mxygi9W2%2FVn9dQ2NPKyCPSEKV5thP%2Fdpquk9%2FQZDmYNrQERlszlW8FFUM5lXNju66aZ6ZgkqBqSbgeYsibjvIF0gVOUZ43g%2FzDdjUlNMaGfxDXdlqxbEflmpFw8M9azqqsMwebdy4ZXeamV0z5P9IsVu8r%2FYjQTs%2B9HvN3l0ZG60Xfkwa%2B%2BLRA%2B2b7n64rGuv2zHm7bmcZQXauQLkQeM8XgfqKYEFIg6g%2FRlRgu4xtUSfLArc%2BfAVkHDMnjOVQZsM0v%2FkTUWwyY7g4C827dRV%2FBWvCEe57Tnq8K888EkaEl6QgQZV5dtw3YngPcAGSiOQ07PCb%2BkrCuLfryoMuqND%2BE8BOBIV95jJVXRzXwI3Bh0nPtmsbjXnYwMuwnqxuUopgiIpJuhUaySPdi7nemsqivxHEbL04qThdIr7oG5bAJp4M%2B5sydsc6HLWbyEmkk0CPzCh%2BkalhokFY2IDCd0JWNBjqmAaq5DaCQULIDYdWvGK6ErxNi%2FdDIBPFRpQuU8e2mxGFnHUe2XjB65kMmIHR%2Bx4aRwlv9KIHVH0oDEBCLLLeWWqpUy7tSWe4iwUCNTombWMbANn8QyK6zT8aFtfwSM1bD%2B72nPIrMH6JUJ2nPyLq9rVT%2B6B4YNRlk5Zp6oYxWQ0ejBXihybpwFpXSK5urS8HbpxGKO4%2FuV79kWdOxHscZFI6ekv8L7e8%3D&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20211130T003314Z&X-Amz-SignedHeaders=host&X-Amz-Expires=21600&X-Amz-Credential=ASIA2YZYN33MQXBHDE4J%2F20211130%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Signature=a0899e4932df4c3de4a337af53124f827e3f642109f734900452f9550e1f6156'
-      ]
-    }
+        'https://prd-sparc-storage-use1.s3.amazonaws.com/394/c1d4094e-dd76-489c-9708-b443d3f67d18/Average_per_strain.csv?X-Amz-Security-Token=IQoJb3JpZ2luX2VjEBgaCXVzLWVhc3QtMSJGMEQCIHj5ILE%2BC%2Fl9cFsCU6UcI1Rr9QO7uv9yZc9nG%2BnmpqIgAiAws7bEG3Z8nQhF%2Bn95kmqYkSmc98a8Y%2BCSSG7DHVjfmCqKBAjh%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAEaDDc0MDQ2MzMzNzE3NyIMaO%2FMTqGX%2FqWPFAfXKt4DMF5kCl7c%2BDbWa3nW2WYkz290dXQ8ZaQISnF%2BiTFNBx0h9egqkIH34OWPoe8o0GzBG5TcY84aNut%2B6dZWrpEjFheWt2U70gpKl6E2Z4WAO6Vw1nHmmzYD18xCZ5h3gZvOxcanGM7aJkfOq%2FTAsoMjVRZFIw2ePtpovZVPOq5Y85qC6Mxygi9W2%2FVn9dQ2NPKyCPSEKV5thP%2Fdpquk9%2FQZDmYNrQERlszlW8FFUM5lXNju66aZ6ZgkqBqSbgeYsibjvIF0gVOUZ43g%2FzDdjUlNMaGfxDXdlqxbEflmpFw8M9azqqsMwebdy4ZXeamV0z5P9IsVu8r%2FYjQTs%2B9HvN3l0ZG60Xfkwa%2B%2BLRA%2B2b7n64rGuv2zHm7bmcZQXauQLkQeM8XgfqKYEFIg6g%2FRlRgu4xtUSfLArc%2BfAVkHDMnjOVQZsM0v%2FkTUWwyY7g4C827dRV%2FBWvCEe57Tnq8K888EkaEl6QgQZV5dtw3YngPcAGSiOQ07PCb%2BkrCuLfryoMuqND%2BE8BOBIV95jJVXRzXwI3Bh0nPtmsbjXnYwMuwnqxuUopgiIpJuhUaySPdi7nemsqivxHEbL04qThdIr7oG5bAJp4M%2B5sydsc6HLWbyEmkk0CPzCh%2BkalhokFY2IDCd0JWNBjqmAaq5DaCQULIDYdWvGK6ErxNi%2FdDIBPFRpQuU8e2mxGFnHUe2XjB65kMmIHR%2Bx4aRwlv9KIHVH0oDEBCLLLeWWqpUy7tSWe4iwUCNTombWMbANn8QyK6zT8aFtfwSM1bD%2B72nPIrMH6JUJ2nPyLq9rVT%2B6B4YNRlk5Zp6oYxWQ0ejBXihybpwFpXSK5urS8HbpxGKO4%2FuV79kWdOxHscZFI6ekv8L7e8%3D&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20211130T003314Z&X-Amz-SignedHeaders=host&X-Amz-Expires=21600&X-Amz-Credential=ASIA2YZYN33MQXBHDE4J%2F20211130%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Signature=a0899e4932df4c3de4a337af53124f827e3f642109f734900452f9550e1f6156',
+      ],
+    };
   },
   computed: {
     metadata() {
       return {
         version: '1.2.0',
         type: 'plot',
-        attrs: {style: 'heatmap', layout: {l: 200, height: '900px', title: 'okokok'}, logScale: true, columnHeaderIndex: 1, columnHeaderSize: 3}
-      }
-    }
-  }
-}
+        attrs: {
+          style: 'heatmap',
+          layout: { l: 200, height: '900px', title: 'okokok' },
+          logScale: true,
+          columnHeaderIndex: 1,
+          columnHeaderSize: 3,
+        },
+      };
+    },
+  },
+};
 </script>
 
 <style></style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index ac5e842..3209481 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -8,6 +8,6 @@
 
 <script>
 export default {
-  name: 'Home'
-}
+  name: 'Home',
+};
 </script>
diff --git a/src/views/Timeseries.vue b/src/views/Timeseries.vue
index 5353bfd..bf8bf7f 100644
--- a/src/views/Timeseries.vue
+++ b/src/views/Timeseries.vue
@@ -1,29 +1,29 @@
 <template>
-  <Vue3DraggableResizable
-    :initW="410"
-    :initH="420"
-    :draggable="true"
-    :resizable="true"
-  >
+  <Vue3DraggableResizable :initW="410" :initH="420" :draggable="true" :resizable="true">
     <div class="plot-container">
       <h1>Plot of timeseries data</h1>
-      <plot-vuer :data-source="{url: urlList[1]}" :metadata="metadata" :supplemental-data="[{url: urlList[4]}]" :selectorUi="true" :plotLayout="plotLayout" />
+      <plot-vuer
+        :data-source="{ url: urlList[1] }"
+        :metadata="metadata"
+        :supplemental-data="[{ url: urlList[4] }]"
+        :selectorUi="true"
+        :plotLayout="plotLayout"
+      />
     </div>
   </Vue3DraggableResizable>
 </template>
 
 <script>
-import PlotVuer from '@/components/PlotVuer.vue'
-import Vue3DraggableResizable from 'vue3-draggable-resizable'
+import PlotVuer from '@/components/PlotVuer.vue';
+import Vue3DraggableResizable from 'vue3-draggable-resizable';
 //default styles
-import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
-
+import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css';
 
 export default {
   name: 'Timeseries',
   components: {
     Vue3DraggableResizable,
-    PlotVuer
+    PlotVuer,
   },
   data: function () {
     return {
@@ -32,23 +32,25 @@ export default {
         'https://mapcore-bucket1.s3-us-west-2.amazonaws.com/ISAN/csv-data/use-case-2/Sample_1_18907001_channel_1.csv',
         'https://api.sparc.science/s3-resource/141/2/files/derivative/sub-1/sam-1/subject1_header.txt',
       ],
-      directDataInput: {'data': [
-        {
-          x: [0, 1, 2, 3, 4, 5],
-          y: [100, 10, 130, 70, 80, 90],
-          type: 'scatter'
-        }
-      ]},
+      directDataInput: {
+        data: [
+          {
+            x: [0, 1, 2, 3, 4, 5],
+            y: [100, 10, 130, 70, 80, 90],
+            type: 'scatter',
+          },
+        ],
+      },
       plotLayout: {
         margin: {
           t: 80,
           l: 80,
           r: 80,
           b: 80,
-          pad: 4
-        }
-      }
-    }
+          pad: 4,
+        },
+      },
+    };
   },
   computed: {
     metadata() {
@@ -66,14 +68,14 @@ export default {
               l: 85,
               r: 55,
               b: 190,
-              pad: 4
-            }
-          }
-        }
-      }
-    }
-  }
-}
+              pad: 4,
+            },
+          },
+        },
+      };
+    },
+  },
+};
 </script>
 
 <style>
diff --git a/static.json b/static.json
index 28da7d1..8a257f6 100644
--- a/static.json
+++ b/static.json
@@ -1,7 +1,7 @@
 {
-    "root": "dist",
-    "clean_urls": true,
-    "routes": {
-      "/**": "index.html"
-    }
-  }
\ No newline at end of file
+  "root": "dist",
+  "clean_urls": true,
+  "routes": {
+    "/**": "index.html"
+  }
+}
diff --git a/vite.config.js b/vite.config.js
index a2af333..ae31c60 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,15 +1,13 @@
-import path from "path";
-import { resolve } from "node:path";
-const pathSrc = path.resolve(import.meta.dirname, "./src");
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import Components from 'unplugin-vue-components/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
-import { nodePolyfills } from 'vite-plugin-node-polyfills'
-
+import path from 'path';
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import AutoImport from 'unplugin-auto-import/vite';
+import Components from 'unplugin-vue-components/vite';
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
 // https://vitejs.dev/config/
-export default defineConfig(({ command, mode }) => {
+export default defineConfig(({ command }) => {
   const config = {
     css: {
       preprocessorOptions: {
@@ -19,59 +17,60 @@ export default defineConfig(({ command, mode }) => {
       },
     },
     resolve: {
-      alias: [{ find: "@", replacement: resolve(import.meta.dirname, "./src") }, {
-        // this is required for the SCSS modules
-        find: /^~(.*)$/,
-        replacement: '$1',
-      }],
+      alias: [
+        { find: '@', replacement: path.resolve(import.meta.dirname, './src') },
+        {
+          // this is required for the SCSS modules
+          find: /^~(.*)$/,
+          replacement: '$1',
+        },
+      ],
     },
     plugins: [
-        vue(),
-        nodePolyfills(),
-        Components({
-          // allow auto load markdown components under `./src/components/`
-          extensions: ['vue', 'md'],
-          // allow auto import and register components used in markdown
-          include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
-          resolvers: [
-            ElementPlusResolver({
-              importStyle: 'sass',
-            }),
-          ],
-          dts: 'src/components.d.ts',
-        }),
-
-        // https://github.com/antfu/unocss
-        // see unocss.config.ts for config
+      vue(),
+      nodePolyfills(),
+      AutoImport({
+        resolvers: [ElementPlusResolver()],
+      }),
+      Components({
+        // allow auto load markdown components under `./src/components/`
+        extensions: ['vue', 'md'],
+        // allow auto import and register components used in markdown
+        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+        resolvers: [
+          ElementPlusResolver({
+            importStyle: 'sass',
+          }),
+        ],
+        dts: 'src/components.d.ts',
+      }),
     ],
     build: {
       lib: {
-        entry: path.resolve(import.meta.dirname, "./src/components/index.js"),
-        name: "PlotVuer",
+        entry: path.resolve(import.meta.dirname, './src/components/index.js'),
+        name: 'PlotVuer',
         fileName: 'plotvuer',
       },
       build: {
-        commonjsOptions: { transformMixedEsModules: true } // Change
+        commonjsOptions: { transformMixedEsModules: true }, // Change
       },
       rollupOptions: {
-      external: ["vue", /^plotly.*/, "papaparse", /^@plotly.*/, /^d3-.*/],
+        external: ['vue', /^plotly.*/, 'papaparse', /^@plotly.*/, /^d3-.*/],
         output: {
           globals: {
-            vue: "Vue",
-            "papaparse": "papaparse"
+            vue: 'Vue',
+            papaparse: 'papaparse',
           },
           // keep css output name stable for the "./dist/style.css" export/import paths
           assetFileNames: (assetInfo) =>
-            assetInfo.name?.endsWith(".css")
-              ? "style.css"
-              : "assets/[name][extname]",
+            assetInfo.name?.endsWith('.css') ? 'style.css' : 'assets/[name][extname]',
         },
       },
     },
   };
 
   if (command === 'serve') {
-    config.server =  {
+    config.server = {
       port: 8081,
     };
     config.define = {
@@ -80,6 +79,6 @@ export default defineConfig(({ command, mode }) => {
       // If you want to exposes all env variables, which is not recommended
       // 'process.env': env
     };
-  };
+  }
   return config;
-})
+});
diff --git a/vuese-generator.js b/vuese-generator.js
index 7be5a56..7db4966 100644
--- a/vuese-generator.js
+++ b/vuese-generator.js
@@ -5,120 +5,112 @@
  * To watch components changes for Vitepress on Dev Mode
  */
 
-import fs from 'fs'
-import path from 'path'
-import chokidar from 'chokidar'
+import fs from 'fs';
+import path from 'path';
+import chokidar from 'chokidar';
 // import { parser } from '@vuese/parser'
-import { parseSource } from 'vue-docgen-api'
-import { Render } from '@vuese/markdown-render'
+import { parseSource } from 'vue-docgen-api';
+import { Render } from '@vuese/markdown-render';
 
-const watchMode = process.argv.find((argv) => argv === 'watch')
+const watchMode = process.argv.find((argv) => argv === 'watch');
 
-const componentsDir = 'src/components'
-const components = ['PlotVuer.vue']
-const outputDir = 'docs/components'
+const componentsDir = 'src/components';
+const components = ['PlotVuer.vue'];
+const outputDir = 'docs/components';
 
 function generateMarkdown(file) {
-  const fileWithPath = `${componentsDir}/${file}`
-  const fileContent = fs.readFileSync(fileWithPath, 'utf-8')
+  const fileWithPath = `${componentsDir}/${file}`;
+  const fileContent = fs.readFileSync(fileWithPath, 'utf-8');
 
   try {
     // const parserResult = parser(fileContent)
-    const parserResult = parseSource(fileContent, fileWithPath)
+    const parserResult = parseSource(fileContent, fileWithPath);
     parserResult.then((result) => {
-      const {
-        displayName: name,
-        description: desc,
-        props,
-        events,
-        methods
-      } = result
+      const { displayName: name, description: desc, props, events, methods } = result;
 
       // transform props to vuese styles
       const parseResult = {
         name: name,
         componentDesc: {
-          default: [desc]
+          default: [desc],
         },
         props: transformData(props),
         events: transformData(events),
         methods: transformData(methods),
-      }
-      const r = new Render(parseResult)
-      const renderResult = r.render()
-      const markdownResult = r.renderMarkdown()
-      const markdownContent = markdownResult.content
-      const componentName = path.basename(fileWithPath, '.vue')
+      };
+      const r = new Render(parseResult);
+      // const renderResult = r.render();
+      const markdownResult = r.renderMarkdown();
+      const markdownContent = markdownResult.content;
+      const componentName = path.basename(fileWithPath, '.vue');
 
       if (!fs.existsSync(outputDir)) {
-        fs.mkdirSync(outputDir)
+        fs.mkdirSync(outputDir);
       }
 
       fs.writeFile(`${outputDir}/${componentName}.md`, markdownContent, (err) => {
         if (err) {
-          console.error(`Error writing markdown file for ${componentName}`, err)
+          console.error(`Error writing markdown file for ${componentName}`, err);
         } else {
-          console.log(`Markdown file for ${componentName} is generated!`)
+          console.log(`Markdown file for ${componentName} is generated!`);
         }
-      })
-    })
-  } catch(e) {
-    console.error(e)
+      });
+    });
+  } catch (e) {
+    console.error(e);
   }
 }
 
 function transformData(data) {
   data.forEach((prop) => {
-    prop.name = prop.name
-
     if (prop.description) {
-      prop.describe = [prop.description.replaceAll('\n', ' ')]
+      prop.describe = [prop.description.replaceAll('\n', ' ')];
     }
 
     if (prop.type) {
-      prop.type = prop.type.name
+      prop.type = prop.type.name;
     }
 
     if (prop.defaultValue) {
-      prop.default = prop.defaultValue.value.replaceAll('\n', ' ')
+      prop.default = prop.defaultValue.value.replaceAll('\n', ' ');
     }
 
     // events
     if (prop.properties) {
-      prop.argumentsDesc = []
+      prop.argumentsDesc = [];
       prop.properties.forEach((param) => {
-        const argName = param.name || param.description
-        prop.argumentsDesc.push(argName)
-      })
+        const argName = param.name || param.description;
+        prop.argumentsDesc.push(argName);
+      });
     }
 
     // methods
     if (prop.params) {
-      prop.argumentsDesc = []
+      prop.argumentsDesc = [];
       prop.params.forEach((param) => {
-        const argName = param.name || param.description
-        prop.argumentsDesc.push(argName)
-      })
+        const argName = param.name || param.description;
+        prop.argumentsDesc.push(argName);
+      });
     }
-  })
-  return data
+  });
+  return data;
 }
 
 // To generate markdown files - one time
 components.forEach((component) => {
-  console.log(`Write markdown file for ${component} on first load.`)
-  generateMarkdown(component)
-})
+  console.log(`Write markdown file for ${component} on first load.`);
+  generateMarkdown(component);
+});
 
 // To watch component changes and generate markdown files
 if (watchMode) {
   const watcher = chokidar.watch(components, {
     cwd: componentsDir,
     ignoreInitial: true,
-  })
+  });
 
   watcher.on('change', (file) => {
-    console.log(`The component ${file} has changed!`)
-    generateMarkdown(file)
-  })
-}
\ No newline at end of file
+    console.log(`The component ${file} has changed!`);
+    generateMarkdown(file);
+  });
+}