diff --git a/src/APIInterface.mjs b/src/APIInterface.mjs
index 4e7b86ef..29c2e7f6 100644
--- a/src/APIInterface.mjs
+++ b/src/APIInterface.mjs
@@ -1,42 +1,46 @@
-
 // Interface for handling function called from the tubemap frontend
 // Abstract class expecting different implmentations of the following functions
-// Substituting different subclasses should allow the functions to give the same result 
+// Substituting different subclasses should allow the functions to give the same result
 export class APIInterface {
-    // Takes in and process a tube map view(viewTarget) from the tubemap container
-    // Expects a object to be returned with the necessary information to draw a tubemap from vg
-    // object should contain keys: graph, gam, region, coloredNodes
-    async getChunkedData(viewTarget) {
-        throw new Error("getChunkedData function not implemented");
-    }
+  // Takes in and process a tube map view(viewTarget) from the tubemap container.
+  // Expects a object to be returned with the necessary information to draw a tubemap from vg
+  // object should contain keys: graph, gam, region, coloredNodes.
+  // cancelSignal is an AbortSignal that can be used to cancel the request.
+  async getChunkedData(viewTarget, cancelSignal) {
+    throw new Error("getChunkedData function not implemented");
+  }
 
-    // Returns files used to determine what options are available in the track picker
-    // Returns object with keys: files, bedFiles
-    async getFilenames() {
-        throw new Error("getFilenames function not implemented");
-    }
+  // Returns files used to determine what options are available in the track picker.
+  // Returns object with keys: files, bedFiles.
+  // cancelSignal is an AbortSignal that can be used to cancel the request.
+  async getFilenames(cancelSignal) {
+    throw new Error("getFilenames function not implemented");
+  }
 
-    // Takes in a bedfile path or a url pointing to a raw bed file
-    // Returns object with key: bedRegions
-    // bedRegions contains information extrapolated from each line of the bedfile
-    async getBedRegions(bedFile) {
-        throw new Error("getBedRegions function not implemented");
-    }
+  // Takes in a bedfile path or a url pointing to a raw bed file.
+  // Returns object with key: bedRegions.
+  // bedRegions contains information extrapolated from each line of the bedfile.
+  // cancelSignal is an AbortSignal that can be used to cancel the request.
+  async getBedRegions(bedFile, cancelSignal) {
+    throw new Error("getBedRegions function not implemented");
+  }
 
-    // Takes in a graphFile path
-    // Returns object with key: pathNames
-    // Returns pathnames available in a graphfile
-    async getPathNames(graphFile) {
-        throw new Error("getPathNames function not implemented");
-    }
+  // Takes in a graphFile path.
+  // Returns object with key: pathNames.
+  // Returns pathnames available in a graphfile.
+  // cancelSignal is an AbortSignal that can be used to cancel the request.
+  async getPathNames(graphFile, cancelSignal) {
+    throw new Error("getPathNames function not implemented");
+  }
 
-    // Expects a bed file(or url) and a chunk name
-    // Attempts to download tracks associated with the chunk name from the bed file if it is a URL
-    // Returns object with key: tracks
-    // Returns tracks found from local directories as a tracks object
-    async getChunkTracks(bedFile, chunk) {
-        throw new Error("getChunkTracks function not implemented");
-    }
+  // Expects a bed file(or url) and a chunk name.
+  // Attempts to download tracks associated with the chunk name from the bed file if it is a URL.
+  // Returns object with key: tracks.
+  // Returns tracks found from local directories as a tracks object.
+  // cancelSignal is an AbortSignal that can be used to cancel the request.
+  async getChunkTracks(bedFile, chunk, cancelSignal) {
+    throw new Error("getChunkTracks function not implemented");
+  }
 }
 
-export default APIInterface;
\ No newline at end of file
+export default APIInterface;
diff --git a/src/App.css b/src/App.css
index ae8188bd..aad9f671 100644
--- a/src/App.css
+++ b/src/App.css
@@ -126,7 +126,6 @@ input[type="file"] {
   border-color: #b61515;
 }
 
-
 .btn-secondary {
   background-color: #868e96;
   border-color: #868e96;
@@ -218,7 +217,7 @@ input[type="file"] {
 
 /* Close Popup */
 
-.closePopup{
+.closePopup {
   align-items: center;
   scale: 0.7;
   border-radius: 50%;
diff --git a/src/App.js b/src/App.js
index d46f0dc5..2ebe9404 100644
--- a/src/App.js
+++ b/src/App.js
@@ -19,12 +19,11 @@ import ServerAPI from "./ServerAPI.mjs";
 const EXAMPLE_TRACKS = [
   // Fake tracks for the generated examples.
   // TODO: Move over there.
-  {"files": [{"type": "graph", "name": "fakeGraph"}]},
-  {"files": [{"type": "read", "name": "fakeReads"}]}
+  { files: [{ type: "graph", name: "fakeGraph" }] },
+  { files: [{ type: "read", name: "fakeReads" }] },
 ];
 
 function getColorSchemesFromTracks(tracks) {
-  
   let schemes = [];
 
   for (const key in tracks) {
@@ -33,13 +32,13 @@ function getColorSchemesFromTracks(tracks) {
       if (tracks[key].trackColorSettings !== undefined) {
         schemes[key] = tracks[key].trackColorSettings;
       } else if (tracks[key].trackType === "read") {
-        schemes[key] = {...config.defaultReadColorPalette};
+        schemes[key] = { ...config.defaultReadColorPalette };
       } else {
-        schemes[key] = {...config.defaultHaplotypeColorPalette};
+        schemes[key] = { ...config.defaultHaplotypeColorPalette };
       }
     }
   }
-  
+
   return schemes;
 }
 
@@ -49,7 +48,7 @@ class App extends Component {
 
     this.APIInterface = new ServerAPI(props.apiUrl);
 
-    console.log('App component starting up with API URL: ' + props.apiUrl)
+    console.log("App component starting up with API URL: " + props.apiUrl);
 
     // Set defaultViewTarget to either URL params (if present) or the first example
     this.defaultViewTarget =
@@ -100,23 +99,21 @@ class App extends Component {
       !isEqual(this.state.viewTarget, newViewTarget) ||
       this.state.dataOrigin !== dataOriginTypes.API
     ) {
-      
-      console.log("Adopting view target: ", newViewTarget)
+      console.log("Adopting view target: ", newViewTarget);
 
       this.setState((state) => {
         // Make sure we have color schemes.
         let newColorSchemes = getColorSchemesFromTracks(newViewTarget.tracks);
 
-
-        console.log("Adopting color schemes: ", newColorSchemes)
+        console.log("Adopting color schemes: ", newColorSchemes);
 
         return {
           viewTarget: newViewTarget,
           dataOrigin: dataOriginTypes.API,
           visOptions: {
             ...state.visOptions,
-            colorSchemes: newColorSchemes, 
-          }
+            colorSchemes: newColorSchemes,
+          },
         };
       });
     }
@@ -150,21 +147,21 @@ class App extends Component {
   // index is the index in the tracks array of the track to operate on. For now,
   // haplotypes and paths are lumped together as track 0 here, with up to two
   // tracks of reads afterward; eventually this will follow the indexing of the real
-  // tracks array. 
+  // tracks array.
   //
   // value is the value to set. For "mainPalette" and "auxPalette" this is the name
   // of a color palette, such as "reds".
   setColorSetting = (key, index, value) => {
     this.setState((state) => {
-      let newcolors = [...state.visOptions.colorSchemes]
+      let newcolors = [...state.visOptions.colorSchemes];
       if (newcolors[index] === undefined) {
         // Handle the set call from example data maybe coming before we set up any nonempty real tracks.
         // TODO: Come up with a better way to do this.
-        newcolors[index] = {...config.defaultReadColorPalette};
+        newcolors[index] = { ...config.defaultReadColorPalette };
       }
-      newcolors[index] = {...newcolors[index], [key]: value};
-      console.log('Set index ' + index + ' key ' + key + ' to ' + value);
-      console.log('New colors: ', newcolors);
+      newcolors[index] = { ...newcolors[index], [key]: value };
+      console.log("Set index " + index + " key " + key + " to " + value);
+      console.log("New colors: ", newcolors);
       return {
         visOptions: {
           ...state.visOptions,
@@ -175,7 +172,7 @@ class App extends Component {
   };
 
   setDataOrigin = (dataOrigin) => {
-    this.setState({dataOrigin});
+    this.setState({ dataOrigin });
   };
 
   render() {
@@ -200,14 +197,18 @@ class App extends Component {
         />
         <CustomizationAccordion
           visOptions={this.state.visOptions}
-          tracks={this.state.dataOrigin === dataOriginTypes.API ? this.state.viewTarget.tracks : EXAMPLE_TRACKS}
+          tracks={
+            this.state.dataOrigin === dataOriginTypes.API
+              ? this.state.viewTarget.tracks
+              : EXAMPLE_TRACKS
+          }
           toggleFlag={this.toggleVisOptionFlag}
           handleMappingQualityCutoffChange={
             this.handleMappingQualityCutoffChange
           }
           setColorSetting={this.setColorSetting}
         />
-        <Footer/>
+        <Footer />
       </div>
     );
   }
diff --git a/src/App.test.js b/src/App.test.js
index c17ded16..8ec0a41c 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -8,7 +8,6 @@ import App from "./App";
 
 import { fetchAndParse } from "./fetchAndParse";
 
-
 // We want to be able to replace the `fetchAndParse` that *other* files see,
 // and we want to use *different* implementations for different tests in this
 // file. We can mock it with Jest, but Jest will move this call before the
@@ -17,12 +16,12 @@ import { fetchAndParse } from "./fetchAndParse";
 
 // Register the given replacement function to be called instead of fetchAndParse.
 function setFetchAndParseMock(replacement) {
-  globalThis["__App.test.js_fetchAndParse_mock"] = replacement 
+  globalThis["__App.test.js_fetchAndParse_mock"] = replacement;
 }
 
 // Remove any replacement function and go back to the real fetchAndParse.
 function clearFetchAndParseMock() {
-  globalThis["__App.test.js_fetchAndParse_mock"] = undefined 
+  globalThis["__App.test.js_fetchAndParse_mock"] = undefined;
 }
 
 jest.mock("./fetchAndParse", () => {
@@ -31,14 +30,15 @@ jest.mock("./fetchAndParse", () => {
     // Ge tthe real fetchAndParse
     const { fetchAndParse } = jest.requireActual("./fetchAndParse");
     // Grab the replacement or the real one if no replacement is set
-    let functionToUse = globalThis["__App.test.js_fetchAndParse_mock"] ?? fetchAndParse;
+    let functionToUse =
+      globalThis["__App.test.js_fetchAndParse_mock"] ?? fetchAndParse;
     // Give it any arguments we got and return its return value.
     return functionToUse.apply(this, arguments);
-  };
+  }
   // When someone asks for this module, hand them these contents instead.
   return {
     __esModule: true,
-    fetchAndParse: fetchAndParseDispatcher
+    fetchAndParse: fetchAndParseDispatcher,
   };
 });
 
diff --git a/src/ServerAPI.mjs b/src/ServerAPI.mjs
index cf7467ef..199aeede 100644
--- a/src/ServerAPI.mjs
+++ b/src/ServerAPI.mjs
@@ -1,72 +1,75 @@
 import { fetchAndParse } from "./fetchAndParse.js";
 import { APIInterface } from "./APIInterface.mjs";
 
+/**
+ * API implementation that uses vg running on the server to manipulate files.
+ */
 export class ServerAPI extends APIInterface {
-    constructor(apiUrl) {
-        super();
-        this.apiUrl = apiUrl;
-    }
+  constructor(apiUrl) {
+    super();
+    this.apiUrl = apiUrl;
+  }
 
-    // Each function takes a cancelSignal to cancel the fetch request if we will unmount component
+  // Each function takes a cancelSignal to cancel the fetch request if we will unmount component
 
-    async getChunkedData(viewTarget, cancelSignal) {
-        const json = await fetchAndParse(`${this.apiUrl}/getChunkedData`, {
-            signal: cancelSignal,
-            method: "POST",
-            headers: {
-            "Content-Type": "application/json",
-            },
-            body: JSON.stringify(viewTarget),
-        });
-        return json;
-    }
+  async getChunkedData(viewTarget, cancelSignal) {
+    const json = await fetchAndParse(`${this.apiUrl}/getChunkedData`, {
+      signal: cancelSignal,
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(viewTarget),
+    });
+    return json;
+  }
 
-    async getFilenames(cancelSignal) {
-        const json = await fetchAndParse(`${this.apiUrl}/getFilenames`, {
-            signal: cancelSignal,
-            method: "GET",
-            headers: {
-            "Content-Type": "application/json",
-            },
-        });
-        return json;
-    }
+  async getFilenames(cancelSignal) {
+    const json = await fetchAndParse(`${this.apiUrl}/getFilenames`, {
+      signal: cancelSignal,
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    return json;
+  }
 
-    async getBedRegions(bedFile, cancelSignal) {
-        const json = await fetchAndParse(`${this.apiUrl}/getBedRegions`, {
-            signal: cancelSignal,
-            method: "POST",
-            headers: {
-            "Content-Type": "application/json",
-            },
-            body: JSON.stringify({ bedFile }),
-        });
-        return json;
-    }
+  async getBedRegions(bedFile, cancelSignal) {
+    const json = await fetchAndParse(`${this.apiUrl}/getBedRegions`, {
+      signal: cancelSignal,
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ bedFile }),
+    });
+    return json;
+  }
 
-    async getPathNames(graphFile, cancelSignal) {
-        const json = await fetchAndParse(`${this.apiUrl}/getPathNames`, {
-            signal: cancelSignal,
-            method: "POST",
-            headers: {
-            "Content-Type": "application/json",
-            },
-            body: JSON.stringify({ graphFile }),
-        });
-        return json
-    }
+  async getPathNames(graphFile, cancelSignal) {
+    const json = await fetchAndParse(`${this.apiUrl}/getPathNames`, {
+      signal: cancelSignal,
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ graphFile }),
+    });
+    return json;
+  }
 
-    async getChunkTracks(bedFile, chunk, cancelSignal) {
-        const json = await fetchAndParse(`${this.apiUrl}/getChunkTracks`, {
-            signal: cancelSignal,
-            method: "POST",
-            headers: {
-            "Content-Type": "application/json",
-            },
-            body: JSON.stringify({ bedFile: bedFile, chunk: chunk }),
-        });
-        return json;
-    }
+  async getChunkTracks(bedFile, chunk, cancelSignal) {
+    const json = await fetchAndParse(`${this.apiUrl}/getChunkTracks`, {
+      signal: cancelSignal,
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ bedFile: bedFile, chunk: chunk }),
+    });
+    return json;
+  }
 }
 
-export default ServerAPI;
\ No newline at end of file
+export default ServerAPI;
diff --git a/src/common.mjs b/src/common.mjs
index 233a9260..4b429d1c 100644
--- a/src/common.mjs
+++ b/src/common.mjs
@@ -4,12 +4,12 @@
 // client, we CANNOT import config.json. It would require syntax on Node which
 // is not allowed by the transpiler.
 // So we get the cinfig a fancy way instead. But you *must* import config-client.js or config-server.,js before this file!
-import {config} from "./config-global.mjs";
+import { config } from "./config-global.mjs";
 
 // function to remove commas from coordinate input
 const removeCommas = (input) => {
   let parts = input.split(":");
-  if (parts.length < 2){
+  if (parts.length < 2) {
     return input;
   }
   // get coordinate - numerical range after last colon
@@ -49,7 +49,7 @@ export function parseRegion(region) {
   let start_end = region_col[region_col.length - 1].split("-");
   let pos_dist = region_col[region_col.length - 1].split("+");
 
-  let contig = region_col.slice(0, -1).join(':');
+  let contig = region_col.slice(0, -1).join(":");
 
   if (start_end.length === 2) {
     let start = Number(start_end[0]);
@@ -58,11 +58,10 @@ export function parseRegion(region) {
   } else if (pos_dist.length === 2) {
     let start = Number(pos_dist[0]);
     let distance = Number(pos_dist[1]);
-    return {contig, start, distance };
+    return { contig, start, distance };
   } else {
     throw new Error("Coordinates must be in the form 'X:Y-Z' or 'X:Y+Z'.");
   }
-  
 }
 
 /// Return a version of region that is {contig, start, end} even if region is {contig, start, distance}
@@ -72,7 +71,7 @@ export function convertRegionToRangeRegion(region) {
     return {
       contig: region.contig,
       start: region.start,
-      end: region.start + region.distance
+      end: region.start + region.distance,
     };
   } else {
     // Should already have an end.
@@ -82,15 +81,15 @@ export function convertRegionToRangeRegion(region) {
 
 // Take a { contig, start, end} region and turn it into a
 // string compatible with parseRegion() or with vg.
-export function stringifyRangeRegion({contig, start, end}) {
-  return contig.concat(':', start, '-', end);
+export function stringifyRangeRegion({ contig, start, end }) {
+  return contig.concat(":", start, "-", end);
 }
 
 // Take a {contig, start, end} or {contig, start, distance} region and turn it into a string compatible with parseRegion
 export function stringifyRegion(region) {
   if (region.distance !== undefined) {
     // It is a distance-based region
-    return region.contig.concat(':', region.start, '+', region.distance);
+    return region.contig.concat(":", region.start, "+", region.distance);
   } else {
     // It is a range region
     return stringifyRangeRegion(region);
@@ -99,22 +98,22 @@ export function stringifyRegion(region) {
 
 /* This function accepts a track type input and returns the default color scheme for that track type if the 
 track type is valid */
-export function defaultTrackColors(trackType){
-  if (trackType === "graph"){
+export function defaultTrackColors(trackType) {
+  if (trackType === "graph") {
     return config.defaultGraphColorPalette;
-  } else if (trackType === "read"){
+  } else if (trackType === "read") {
     return config.defaultReadColorPalette;
-  } else if (trackType === "haplotype"){
+  } else if (trackType === "haplotype") {
     return config.defaultHaplotypeColorPalette;
   } else {
-    throw new Error("Invalid track type: " + trackType); 
+    throw new Error("Invalid track type: " + trackType);
   }
 }
 
 /* Function to determine if any of the tracks are reads, where the tracks parameter is an object of track types */
-export function readsExist(tracks){
-  for (let key in tracks){
-    if (tracks[key].trackType === "read"){
+export function readsExist(tracks) {
+  for (let key in tracks) {
+    if (tracks[key].trackType === "read") {
       return true;
     }
   }
@@ -129,8 +128,8 @@ export function isValidURL(string) {
 
   let url;
   try {
-    url = new URL(string)
-  } catch(error) {
+    url = new URL(string);
+  } catch (error) {
     return false;
   }
 
@@ -140,4 +139,3 @@ export function isValidURL(string) {
 export function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
-
diff --git a/src/components/BedFileDropdown.demo.js b/src/components/BedFileDropdown.demo.js
index d69a23b6..1af4731c 100644
--- a/src/components/BedFileDropdown.demo.js
+++ b/src/components/BedFileDropdown.demo.js
@@ -1,28 +1,32 @@
-import Demo, {props as P} from 'react-demo'
+import Demo, { props as P } from "react-demo";
 // See https://github.com/rpominov/react-demo for how to make a demo
 
 import BedFileDropdown from "./BedFileDropdown";
 
 // We want to two-way-bind the demo region prop so we use advanced mode and pass the render function.
-export default (<Demo
-  props={{
-    id: P.string('theDropdown'),
-    inputId: P.string('theTextBox'),
-    className: P.string('someCSSClass'),
-    value: P.string('one thing'),
-    options: P.json(['one thing', 'another thing', 'yet a third thing']),
-  }}
->
-  {
-    (props, update) => {
+export default (
+  <Demo
+    props={{
+      id: P.string("theDropdown"),
+      inputId: P.string("theTextBox"),
+      className: P.string("someCSSClass"),
+      value: P.string("one thing"),
+      options: P.json(["one thing", "another thing", "yet a third thing"]),
+    }}
+  >
+    {(props, update) => {
       // We need to render the component under test using the props in props, and
       // call update when the component wants to adjust the props.
-      return <BedFileDropdown {...props} onChange={(fakeEvent) => {
-        // Bind new value back up to value.
-        // Remember: we get a fake event object with a "target" that has an "id" and a "value"
-        update({value: fakeEvent.target.value})
-      }}/>
-    }
-  }
-</Demo>)
-
+      return (
+        <BedFileDropdown
+          {...props}
+          onChange={(fakeEvent) => {
+            // Bind new value back up to value.
+            // Remember: we get a fake event object with a "target" that has an "id" and a "value"
+            update({ value: fakeEvent.target.value });
+          }}
+        />
+      );
+    }}
+  </Demo>
+);
diff --git a/src/components/BedFileDropdown.js b/src/components/BedFileDropdown.js
index 02ab703f..d480dd40 100644
--- a/src/components/BedFileDropdown.js
+++ b/src/components/BedFileDropdown.js
@@ -1,19 +1,19 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 //import Select from "react-select";
-import CreatableSelect from 'react-select/creatable';
+import CreatableSelect from "react-select/creatable";
 
 /**
  * A searchable selection dropdown component.
  * Expects a two-way-binding where "value" is the selected value (out of the
  * array in "options"), and calling "onChange" with an event-like object
  * updates the value.
- * 
+ *
  * The onChange argument is meant to look enough like a DOM change event on a
  * "real" <select> to fool most people. It is an object with a "target"
  * property, which then has an "id" property with this component's "id" prop,
  * and a "value" property with the new value.
- * 
+ *
  * So for example:
  * <SelectionDropdown id="box1" value="a" options={["a", "b"]} onChange={(e) => {
  *   // Here e is {"target": {"id": "box1", "value": "b"}}
@@ -78,7 +78,9 @@ export class BedFileDropdown extends Component {
         inputId={this.props.inputId}
         className={this.props.className}
         value={
-          dropdownOptions.find((option) => option.value === this.props.value) || {label: getFilename(this.props.value) , value: this.props.value}
+          dropdownOptions.find(
+            (option) => option.value === this.props.value
+          ) || { label: getFilename(this.props.value), value: this.props.value }
         }
         styles={styles}
         isSearchable={true}
diff --git a/src/components/ColorPicker.demo.js b/src/components/ColorPicker.demo.js
index 71cf2ef2..a42af629 100644
--- a/src/components/ColorPicker.demo.js
+++ b/src/components/ColorPicker.demo.js
@@ -1,20 +1,35 @@
-import Demo, {props as P} from 'react-demo'
+import Demo, { props as P } from "react-demo";
 // See https://github.com/rpominov/react-demo for how to make a demo
 
 import ColorPicker from "./ColorPicker.js";
 
-export default (<Demo
+export default (
+  <Demo
     props={{
-        presetColors:P.json(['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF']),
+      presetColors: P.json([
+        "#FF6900",
+        "#FCB900",
+        "#7BDCB5",
+        "#00D084",
+        "#8ED1FC",
+        "#0693E3",
+        "#ABB8C3",
+        "#EB144C",
+        "#F78DA7",
+        "#9900EF",
+      ]),
     }}
   >
-    {
-      (props, update) => {
-        return <ColorPicker {...props} onChange={(color) => {
-          // modify a key in TrackColorSettings
+    {(props, update) => {
+      return (
+        <ColorPicker
+          {...props}
+          onChange={(color) => {
+            // modify a key in TrackColorSettings
             console.log("changed to color ", color);
-        }}/>
-      }
-    }
-  </Demo>)
-  
+          }}
+        />
+      );
+    }}
+  </Demo>
+);
diff --git a/src/components/ColorPicker.js b/src/components/ColorPicker.js
index 6d612f03..953b2ea5 100644
--- a/src/components/ColorPicker.js
+++ b/src/components/ColorPicker.js
@@ -1,88 +1,91 @@
 import PropTypes from "prop-types";
-import React, {useState} from 'react';
-import { SketchPicker } from 'react-color';
-import { Button } from 'reactstrap'
+import React, { useState } from "react";
+import { SketchPicker } from "react-color";
+import { Button } from "reactstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPalette } from '@fortawesome/free-solid-svg-icons';
-import { Container } from 'reactstrap';
+import { faPalette } from "@fortawesome/free-solid-svg-icons";
+import { Container } from "reactstrap";
 
 // A react-color picker embedded within a button
 export const ColorPicker = ({
-    color, // hex color or named color pallete currently selected.
-    presetColors, // array of hex colors e.g ["#f44336", "#e91e63", "#9c27b0", "#673ab7"]
-    onChange, // on change function expecting hex color as an argument
-    testID,
+  color, // hex color or named color pallete currently selected.
+  presetColors, // array of hex colors e.g ["#f44336", "#e91e63", "#9c27b0", "#673ab7"]
+  onChange, // on change function expecting hex color as an argument
+  testID,
 }) => {
-    const [nextColor, setNextColor] = useState(undefined);
-    const [open, setOpen] = useState(false);
+  const [nextColor, setNextColor] = useState(undefined);
+  const [open, setOpen] = useState(false);
 
-    const popover = {
-        position: 'absolute',
-        zIndex: '2',
-    }
+  const popover = {
+    position: "absolute",
+    zIndex: "2",
+  };
 
-    const cover = {
-    position: 'fixed',
-    top: '0px',
-    right: '0px',
-    bottom: '0px',
-    left: '0px',
-    }
+  const cover = {
+    position: "fixed",
+    top: "0px",
+    right: "0px",
+    bottom: "0px",
+    left: "0px",
+  };
 
-    function togglePicker() {
-        if (open) {
-            setOpen(false);
-            if (nextColor) {
-                // Apply the color
-                onChange(nextColor);
-            }
-        } else {
-            setOpen(true);
-            if (color && color.startsWith("#")) {
-                // If we had a color picked, use it to start
-                setNextColor(color);
-            } else {
-                // We don't have a color to start with. We don't want to apply
-                // a random color when we close.
-                setNextColor(undefined);
-            }
-        }
+  function togglePicker() {
+    if (open) {
+      setOpen(false);
+      if (nextColor) {
+        // Apply the color
+        onChange(nextColor);
+      }
+    } else {
+      setOpen(true);
+      if (color && color.startsWith("#")) {
+        // If we had a color picked, use it to start
+        setNextColor(color);
+      } else {
+        // We don't have a color to start with. We don't want to apply
+        // a random color when we close.
+        setNextColor(undefined);
+      }
     }
+  }
 
-    return (
-        <div>
-            <Button aria-label="ColorPicker" onClick={ togglePicker } data-testid={testID}><FontAwesomeIcon icon={faPalette} /></Button>
-
-            { open ? 
-                <div style={ popover  }>
-                    <div style={ cover } onClick={ togglePicker }/>
-                    <Container>
-                        <SketchPicker 
-                            color={nextColor || '#fff'}
-                            presetColors={presetColors}
-                            onChange={(newColor) => {
-                                    setNextColor(newColor["hex"]);
-                            }}
+  return (
+    <div>
+      <Button
+        aria-label="ColorPicker"
+        onClick={togglePicker}
+        data-testid={testID}
+      >
+        <FontAwesomeIcon icon={faPalette} />
+      </Button>
 
-                        />
-                    </Container> 
-                </div>
-              : null
-            }
-            
+      {open ? (
+        <div style={popover}>
+          <div style={cover} onClick={togglePicker} />
+          <Container>
+            <SketchPicker
+              color={nextColor || "#fff"}
+              presetColors={presetColors}
+              onChange={(newColor) => {
+                setNextColor(newColor["hex"]);
+              }}
+            />
+          </Container>
         </div>
-    );
+      ) : null}
+    </div>
+  );
 };
 
 ColorPicker.propTypes = {
-    color: PropTypes.string,
-    presetColors: PropTypes.array.isRequired,
-    onChange: PropTypes.func.isRequired,
-    testID: PropTypes.string
-}
+  color: PropTypes.string,
+  presetColors: PropTypes.array.isRequired,
+  onChange: PropTypes.func.isRequired,
+  testID: PropTypes.string,
+};
 
 ColorPicker.defaultProps = {
-    testID: "color-picker-component"
-}
+  testID: "color-picker-component",
+};
 
 export default ColorPicker;
diff --git a/src/components/CopyLink.js b/src/components/CopyLink.js
index a9f38b6d..d7689bd7 100644
--- a/src/components/CopyLink.js
+++ b/src/components/CopyLink.js
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Button } from "reactstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faLink } from "@fortawesome/free-solid-svg-icons";
-import * as qs from 'qs';
+import * as qs from "qs";
 import PopupDialog from "./PopupDialog";
 
 const UNCLICKED_TEXT = " Copy link to data";
@@ -35,18 +35,16 @@ export function CopyLink(props) {
     const full = window.location.origin + "?" + params;
     console.log(full);
 
-    try{
+    try {
       // copy full to clipboard
       copyCallback(full);
       // change text
       setText(CLICKED_TEXT);
-    }
-    catch(err){
+    } catch (err) {
       setText(UNCLICKED_TEXT);
       setDialogLink(full);
-      console.log("copy error")
+      console.log("copy error");
     }
-
   };
 
   const close = () => setDialogLink(undefined);
@@ -61,7 +59,14 @@ export function CopyLink(props) {
         <h5>Link to Data</h5>
         {/* Received warning on build that simply using target="_blank" is a security risk in older browsers, so included rel="noopener noreferrer" as per this post: 
          https://stackoverflow.com/questions/57628890/why-people-use-rel-noopener-noreferrer-instead-of-just-rel-noreferrer */}
-        <p><a href = {dialogLink} target = "_blank" rel="noopener noreferrer">Data</a><br/>Click this link to return to this view. Right click link to copy this view location.</p>
+        <p>
+          <a href={dialogLink} target="_blank" rel="noopener noreferrer">
+            Data
+          </a>
+          <br />
+          Click this link to return to this view. Right click link to copy this
+          view location.
+        </p>
       </PopupDialog>
     </>
   );
@@ -75,18 +80,18 @@ export const urlParamsToViewTarget = (url) => {
   // Returns: Object (viewTarget) - see App.js
 
   var result = null;
-  const s = url.href.split('?');
+  const s = url.href.split("?");
   // If url contains information on viewObject
   if (s[1]) {
     result = qs.parse(s[1]);
   }
 
-  // Ensures that the simplify field is a boolean, as the qs module can't tell 
-  // the difference between false and "false" 
-  if (result != null){
-    if (result.simplify === "true"){
+  // Ensures that the simplify field is a boolean, as the qs module can't tell
+  // the difference between false and "false"
+  if (result != null) {
+    if (result.simplify === "true") {
       result.simplify = true;
-    } else if (result.simplify === "false"){
+    } else if (result.simplify === "false") {
       result.simplify = false;
     }
   }
diff --git a/src/components/CustomizationAccordion.js b/src/components/CustomizationAccordion.js
index 7fae9711..e83a7fcb 100644
--- a/src/components/CustomizationAccordion.js
+++ b/src/components/CustomizationAccordion.js
@@ -39,7 +39,7 @@ class VisualizationOptions extends Component {
     return (key, value) => {
       this.props.setColorSetting(key, index, value);
     };
-  }
+  };
 
   render() {
     const { visOptions, toggleFlag } = this.props;
@@ -64,14 +64,26 @@ class VisualizationOptions extends Component {
       let type = track.trackType;
       if (type === "graph") {
         trackSettingsList.push(
-          <TrackSettings key={key} label="Graph Paths" fileType={type} trackColorSettings={visOptions.colorSchemes[key]} setTrackColorSetting={this.setColorWithIndex(key)} />
+          <TrackSettings
+            key={key}
+            label="Graph Paths"
+            fileType={type}
+            trackColorSettings={visOptions.colorSchemes[key]}
+            setTrackColorSetting={this.setColorWithIndex(key)}
+          />
         );
       } else if (type === "haplotype") {
         // TODO: Do nothing for now. Haplotypes get assigned to the graph as their source track right now.
       } else if (type === "read") {
         if (visOptions.showReads) {
           trackSettingsList.push(
-            <TrackSettings key={key} label={"Read Track " + readTrackNumber} fileType={type} trackColorSettings={visOptions.colorSchemes[key]} setTrackColorSetting={this.setColorWithIndex(key)} />
+            <TrackSettings
+              key={key}
+              label={"Read Track " + readTrackNumber}
+              fileType={type}
+              trackColorSettings={visOptions.colorSchemes[key]}
+              setTrackColorSetting={this.setColorWithIndex(key)}
+            />
           );
           readTrackNumber++;
         }
diff --git a/src/components/DataPositionFormRow.js b/src/components/DataPositionFormRow.js
index f90c7470..d0f278c6 100644
--- a/src/components/DataPositionFormRow.js
+++ b/src/components/DataPositionFormRow.js
@@ -9,7 +9,7 @@ import {
   faSearchPlus,
   faSearchMinus,
 } from "@fortawesome/free-solid-svg-icons";
-import HelpButton from "./HelpButton.js"
+import HelpButton from "./HelpButton.js";
 import * as tubeMap from "../util/tubemap";
 
 const ZOOM_FACTOR = 2.0;
@@ -65,13 +65,15 @@ class DataPositionFormRow extends Component {
         {this.props.uploadInProgress && (
           <div className="smallLoader" id="fileUploadSpinner" />
         )}
-
         {/* Help Button */}
         <HelpButton file="./help/help.md"></HelpButton>
-        
         <Button
           color={this.props.viewTargetHasChange ? "alert" : "primary"}
-          title={this.props.viewTargetHasChange ? "Click to apply pending changes." : "No changes to apply; view is up to date."}
+          title={
+            this.props.viewTargetHasChange
+              ? "Click to apply pending changes."
+              : "No changes to apply; view is up to date."
+          }
           id="goButton"
           onClick={this.props.handleGoButton}
           disabled={this.props.uploadInProgress}
diff --git a/src/components/DemoLibrary.js b/src/components/DemoLibrary.js
index 0c86daf9..8dc3b0bb 100644
--- a/src/components/DemoLibrary.js
+++ b/src/components/DemoLibrary.js
@@ -8,11 +8,11 @@
 /// 2. Make a demo file, Whatever.demo.js
 /// 3. In the demo file, import your component, import Demo from 'react-demo',
 ///    and make the default export be a <Demo> component:
-///    
+///
 ///    import { Whatever } from './Whatever'
 ///    import { Demo, props as P } from 'react-demo'
 ///    export default (<Demo target={Whatever} />)
-///    
+///
 /// 4. If the component needs props, pass a "props" attribute to the Demo
 ///    component, with the props to use. See
 ///    <https://github.com/rpominov/react-demo#available-demoprops>.
@@ -30,8 +30,8 @@
 ///
 /// (Assuming this component is mounted there in the React router.)
 
-import Library from 'react-demo-library'
-import { SafeLink } from "./SafeLink"
+import Library from "react-demo-library";
+import { SafeLink } from "./SafeLink";
 
 // To auto-magically pick up demos, we use this magic to tell Webpack what we
 // want it to grab (*.demo.js, recursively), which it can work out at bundle
@@ -39,7 +39,7 @@ import { SafeLink } from "./SafeLink"
 // <https://webpack.js.org/guides/dependency-management/#requirecontext>.
 // Can't use constandt here, arguments *MUST* be literals for the magic to
 // work.
-const getFromContext = require.context('.', true, /\.demo\.js$/)
+const getFromContext = require.context(".", true, /\.demo\.js$/);
 
 // Each demo gets an object in this array with fields:
 // location: array of path components to mount at, after a hashbang
@@ -48,23 +48,27 @@ const getFromContext = require.context('.', true, /\.demo\.js$/)
 // importPath: hint about where to find the component to use it
 // fullWidth: boolean, true if we want to hide the demo picker
 // files: array of name and content objects to show along with the demo.
-// 
+//
 // Really we just need location and demo set.
-let demoList = []
+let demoList = [];
 
 for (let moduleName of getFromContext.keys()) {
   // Load all the demos available.
-  
+
   // Work out what import this should be a demo for (drop the whole extension)
-  let componentFile = moduleName.replace(/\.demo\.js$/, '') 
+  let componentFile = moduleName.replace(/\.demo\.js$/, "");
   // Work out what this should be a demo for (drop './' and extension and split
   // path segments).
   // Last one will be the component name.
-  let componentPathSegments = componentFile.replace(/^\.\//, '').split('/')
-  
+  let componentPathSegments = componentFile.replace(/^\.\//, "").split("/");
+
   // We need to fetch out the default export manually by its magic name. See
   // <https://stackoverflow.com/a/33705077>
-  demoList.push({location: componentPathSegments, importPath: componentFile, demo: getFromContext(moduleName).default})
+  demoList.push({
+    location: componentPathSegments,
+    importPath: componentFile,
+    demo: getFromContext(moduleName).default,
+  });
 }
 
 export const DemoLibrary = () => {
@@ -73,10 +77,17 @@ export const DemoLibrary = () => {
       {
         // Because the demo UI does a bunch of full-browser-size stuff we have to float our back link over it
       }
-      <div style={{position: "absolute", left: "0.5em", bottom: "0.5em", zIndex: 1001}}>
+      <div
+        style={{
+          position: "absolute",
+          left: "0.5em",
+          bottom: "0.5em",
+          zIndex: 1001,
+        }}
+      >
         <SafeLink to="/">Back to Tube Map</SafeLink>
       </div>
-      <Library demos={demoList}/>
+      <Library demos={demoList} />
     </>
-  )
-}
+  );
+};
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 03eaa070..5fa1d40b 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,27 +1,38 @@
 /// Footer.js: main page footer component. Includes project page links and demo link.
 
-import { Container, Row, Col, Navbar, Nav, NavItem } from "reactstrap"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faGithub } from "@fortawesome/free-brands-svg-icons"
-import { faCode, faDna } from "@fortawesome/free-solid-svg-icons"
+import { Container, Row, Col, Navbar, Nav, NavItem } from "reactstrap";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGithub } from "@fortawesome/free-brands-svg-icons";
+import { faCode, faDna } from "@fortawesome/free-solid-svg-icons";
 
-import SafeLink from "./SafeLink"
-
-import PACKAGE from "../../package.json"
+import SafeLink from "./SafeLink";
 
+import PACKAGE from "../../package.json";
 
 export const Footer = () => {
   return (
-    <Container tag="footer" fluid={true} style={{marginTop: "1em"}}>
+    <Container tag="footer" fluid={true} style={{ marginTop: "1em" }}>
       <Row className="bg-light">
-        <Col lg={{offset: 2, size: 8}}>
+        <Col lg={{ offset: 2, size: 8 }}>
           <Navbar>
             <Nav className="mr-auto">
               <NavItem>
-                <SafeLink className="nav-link" target="_blank" href="https://github.com/vgteam/sequenceTubeMap"><FontAwesomeIcon icon={faGithub} /> Github</SafeLink>
+                <SafeLink
+                  className="nav-link"
+                  target="_blank"
+                  href="https://github.com/vgteam/sequenceTubeMap"
+                >
+                  <FontAwesomeIcon icon={faGithub} /> Github
+                </SafeLink>
               </NavItem>
               <NavItem>
-                <SafeLink className="nav-link" target="_blank" href="https://genomics.ucsc.edu/"><FontAwesomeIcon icon={faDna} /> UCSC GI</SafeLink>
+                <SafeLink
+                  className="nav-link"
+                  target="_blank"
+                  href="https://genomics.ucsc.edu/"
+                >
+                  <FontAwesomeIcon icon={faDna} /> UCSC GI
+                </SafeLink>
               </NavItem>
             </Nav>
             <Nav>
@@ -31,14 +42,21 @@ export const Footer = () => {
             </Nav>
             <Nav>
               <NavItem>
-                <SafeLink className="nav-link" to="/demo" title="Component Demos" style={{textDecoration: "none"}}><FontAwesomeIcon icon={faCode} /> Component Demos</SafeLink>
+                <SafeLink
+                  className="nav-link"
+                  to="/demo"
+                  title="Component Demos"
+                  style={{ textDecoration: "none" }}
+                >
+                  <FontAwesomeIcon icon={faCode} /> Component Demos
+                </SafeLink>
               </NavItem>
             </Nav>
           </Navbar>
         </Col>
       </Row>
     </Container>
-  )
-}
+  );
+};
 
-export default Footer
+export default Footer;
diff --git a/src/components/HeaderForm.js b/src/components/HeaderForm.js
index f52b2b7e..4540504c 100644
--- a/src/components/HeaderForm.js
+++ b/src/components/HeaderForm.js
@@ -10,8 +10,12 @@ import RegionInput from "./RegionInput";
 import TrackPicker from "./TrackPicker";
 import BedFileDropdown from "./BedFileDropdown";
 import FormHelperText from "@mui/material/FormHelperText";
-import { parseRegion, stringifyRegion, isEmpty, readsExist } from "../common.mjs";
-
+import {
+  parseRegion,
+  stringifyRegion,
+  isEmpty,
+  readsExist,
+} from "../common.mjs";
 
 // See src/Types.ts
 
@@ -26,10 +30,9 @@ const fileTypes = {
   GRAPH: "graph",
   HAPLOTYPE: "haplotype",
   READ: "read",
-  BED:"bed",
+  BED: "bed",
 };
 
-
 // We define the subset of the empty state that is safe to apply without
 // clobbering downloaded data from the server which we need
 const CLEAR_STATE = {
@@ -71,7 +74,7 @@ const EMPTY_STATE = {
   fileSelectOptions: [],
   // This one is for the BED files. It needs to exist when we start up or we
   // will try and draw the BED dropdown without an array of options.
-  bedSelectOptions: []
+  bedSelectOptions: [],
 };
 
 // Creates track to be stored in ViewTarget
@@ -79,7 +82,7 @@ const EMPTY_STATE = {
 // INPUT: file structure, see Types.ts
 function createTrack(file) {
   //track properties
-  const files = [file]
+  const files = [file];
 
   //remove empty files here?
 
@@ -101,14 +104,16 @@ function tracksEqual(curr, next) {
 
   const curr_settings = curr.trackColorSettings;
   const next_settings = next.trackColorSettings;
-  
+
   // check if color settings are equal
-  if (curr_settings && next_settings){
-    if (curr_settings.mainPalette !== next_settings.mainPalette || 
-        curr_settings.auxPalette !== next_settings.auxPalette ||
-        curr_settings.colorReadsByMappingQuality !== next_settings.colorReadsByMappingQuality) {
-          
-        return false;
+  if (curr_settings && next_settings) {
+    if (
+      curr_settings.mainPalette !== next_settings.mainPalette ||
+      curr_settings.auxPalette !== next_settings.auxPalette ||
+      curr_settings.colorReadsByMappingQuality !==
+        next_settings.colorReadsByMappingQuality
+    ) {
+      return false;
     }
   }
   // count falsy file names as the same
@@ -116,20 +121,21 @@ function tracksEqual(curr, next) {
     return true;
   }
   return false;
-
 }
 
 // Checks if two view targets are the same. They are the same if they have the
 // same tracks and the same region.
 function viewTargetsEqual(currViewTarget, nextViewTarget) {
-
   // Update if one is undefined and the other isn't
   if ((currViewTarget === undefined) !== (nextViewTarget === undefined)) {
     return false;
   }
 
   // Update if view target tracks are not equal
-  if (Object.keys(currViewTarget.tracks).length !== Object.keys(nextViewTarget.tracks).length) {
+  if (
+    Object.keys(currViewTarget.tracks).length !==
+    Object.keys(nextViewTarget.tracks).length
+  ) {
     // Different lengths so not equal
     return false;
   }
@@ -155,15 +161,14 @@ function viewTargetsEqual(currViewTarget, nextViewTarget) {
 
   // Update if regions are not equal
   if (currViewTarget.region !== nextViewTarget.region) {
-     return false;
+    return false;
   }
 
-  if (currViewTarget.simplify !== nextViewTarget.simplify){
+  if (currViewTarget.simplify !== nextViewTarget.simplify) {
     return false;
   }
 
   return true;
-
 }
 
 class HeaderForm extends Component {
@@ -215,7 +220,7 @@ class HeaderForm extends Component {
         region: ds.region,
         dataType: ds.dataType,
         name: ds.name,
-        simplify: ds.simplify 
+        simplify: ds.simplify,
       };
       return stateVals;
     });
@@ -226,7 +231,16 @@ class HeaderForm extends Component {
     // If there is no nth track of that type, create one.
     // If the file is "none", remove that track.
     this.setState((state) => {
-      console.log('Set file ' + type + ' index ' + index + ' to ' + file + ' over ' + JSON.stringify(state.tracks));
+      console.log(
+        "Set file " +
+          type +
+          " index " +
+          index +
+          " to " +
+          file +
+          " over " +
+          JSON.stringify(state.tracks)
+      );
 
       // Make a modified copy of the tracks
       let newTracks = [];
@@ -258,21 +272,23 @@ class HeaderForm extends Component {
           maxKey = parseInt(key);
         }
       }
-      
-      console.log('Saw ' + seenTracksOfType + ' tracks of type vs index ' + index)
+
+      console.log(
+        "Saw " + seenTracksOfType + " tracks of type vs index " + index
+      );
       if (seenTracksOfType === index && file !== "none") {
         // We need to add this track
-        console.log('Create track at index ' + (maxKey + 1))
-        newTracks[maxKey + 1] = createTrack({"type": type, "name": file});
+        console.log("Create track at index " + (maxKey + 1));
+        newTracks[maxKey + 1] = createTrack({ type: type, name: file });
       }
 
       // Add the new tracks to the state
       let newState = Object.assign({}, state);
       newState.tracks = newTracks;
-      console.log('Set result: ' + JSON.stringify(newTracks));
+      console.log("Set result: " + JSON.stringify(newTracks));
       return newState;
     });
-  }
+  };
 
   getTrackFile = (tracks, type, index) => {
     // Get the file used in the nth track of the gicen type, or "none" if no
@@ -289,11 +305,11 @@ class HeaderForm extends Component {
           return track.trackFile;
         }
         seenTracksOfType++;
-      } 
+      }
     }
     // Not found
     return "none";
-  }
+  };
 
   getMountedFilenames = async () => {
     this.setState({ error: null });
@@ -322,7 +338,7 @@ class HeaderForm extends Component {
                 console.log("Get path names for track: ", state.tracks[key]);
                 this.getPathNames(state.tracks[key].trackFile);
               }
-            } 
+            }
             return {
               fileSelectOptions: json.files,
               bedSelectOptions: json.bedFiles,
@@ -339,10 +355,7 @@ class HeaderForm extends Component {
         }
       }
     } catch (error) {
-      this.handleFetchError(
-        error,
-        `GET to ${this.props.apiUrl}/getFilenames failed:`
-      );
+      this.handleFetchError(error, `API getFilenames failed:`);
     }
   };
 
@@ -363,10 +376,7 @@ class HeaderForm extends Component {
         };
       });
     } catch (error) {
-      this.handleFetchError(
-        error,
-        `POST to ${this.props.apiUrl}/getBedRegions failed:`
-      );
+      this.handleFetchError(error, `API getBedRegions failed:`);
     }
   };
 
@@ -391,10 +401,7 @@ class HeaderForm extends Component {
         };
       });
     } catch (error) {
-      this.handleFetchError(
-        error,
-        `POST to ${this.props.apiUrl}/getPathNames failed:`
-      );
+      this.handleFetchError(error, `API getPathNames failed:`);
     }
   };
 
@@ -435,7 +442,7 @@ class HeaderForm extends Component {
             }
           }
           this.setState({
-            tracks: ds.tracks, 
+            tracks: ds.tracks,
             bedFile: ds.bedFile,
             bedSelect: bedSelect,
             region: ds.region,
@@ -453,7 +460,7 @@ class HeaderForm extends Component {
     name: this.state.name,
     region: this.state.region,
     dataType: this.state.dataType,
-    simplify: this.state.simplify && !(readsExist(this.state.tracks))
+    simplify: this.state.simplify && !readsExist(this.state.tracks),
   });
 
   handleGoButton = () => {
@@ -473,12 +480,10 @@ class HeaderForm extends Component {
       return;
     }
 
-    
     if (!viewTargetsEqual(currViewTarget, nextViewTarget)) {
       // Update the view if the view target has changed.
       this.props.setCurrentViewTarget(nextViewTarget);
     }
-
   };
 
   getRegionCoords = (desc) => {
@@ -520,18 +525,23 @@ class HeaderForm extends Component {
       coords = this.getRegionCoords(value);
     }
     this.setState({ region: coords });
-    
-    let coordsToMetaData = {}
+
+    let coordsToMetaData = {};
 
     // Construct a concatenated string of possible coords
     // Set relative meta data to each coord
     if (this.state.regionInfo && !isEmpty(this.state.regionInfo)) {
       for (const [index, path] of this.state.regionInfo["chr"].entries()) {
-        const pathWithRegion = path + ":" + this.state.regionInfo.start[index] + "-" + this.state.regionInfo.end[index];
+        const pathWithRegion =
+          path +
+          ":" +
+          this.state.regionInfo.start[index] +
+          "-" +
+          this.state.regionInfo.end[index];
         coordsToMetaData[pathWithRegion] = {
-          "tracks": this.state.regionInfo.tracks[index],
-          "chunk": this.state.regionInfo.chunk[index]
-        }
+          tracks: this.state.regionInfo.tracks[index],
+          chunk: this.state.regionInfo.chunk[index],
+        };
       }
     }
 
@@ -545,7 +555,11 @@ class HeaderForm extends Component {
       console.log("New tracks have been applied");
     } else if (this.state.bedFile && chunk) {
       // Try to retrieve tracks from the server
-      const json = await this.api.getChunkTracks(this.state.bedFile, chunk, this.cancelSignal);
+      const json = await this.api.getChunkTracks(
+        this.state.bedFile,
+        chunk,
+        this.cancelSignal
+      );
 
       // Replace tracks if request returns non-falsey value
       if (json.tracks) {
@@ -565,16 +579,15 @@ class HeaderForm extends Component {
     this.setState((state) => {
       let newState = Object.assign({}, state);
       newState.tracks = newTracks;
-      console.log('Set result: ' + JSON.stringify(newTracks));
+      console.log("Set result: " + JSON.stringify(newTracks));
       return newState;
     });
 
     // update path names
     const graphFile = this.getTrackFile(newTracks, fileTypes.GRAPH, 0);
-    if (graphFile && graphFile !== "none"){
+    if (graphFile && graphFile !== "none") {
       this.getPathNames(graphFile);
     }
-
   };
 
   handleBedChange = (event) => {
@@ -586,8 +599,7 @@ class HeaderForm extends Component {
       this.getBedRegions(value);
     }
     this.setState({ bedFile: value });
-
-  }
+  };
 
   // Budge the region left or right by the given negative or positive fraction
   // of its width.
@@ -606,7 +618,7 @@ class HeaderForm extends Component {
       parsedRegion.start = Math.max(0, Math.round(parsedRegion.start + shift));
       parsedRegion.end = Math.max(0, Math.round(parsedRegion.end + shift));
     }
-   
+
     this.setState(
       (state) => ({
         region: stringifyRegion(parsedRegion),
@@ -633,76 +645,87 @@ class HeaderForm extends Component {
 
   // Sends uploaded file to server and returns a path to the file
   handleFileUpload = async (fileType, file) => {
-    return new Promise(function (resolve, reject) {
-      if (file.size > config.MAXUPLOADSIZE) {
-        this.showFileSizeAlert();
-        return;
-      }
-  
-      this.setUploadInProgress(true);
-  
-      const formData = new FormData();
-      // If the file is anything other than a Blob, it will be turned into a
-      // string and added as a normal form value. If it is a Blob it will
-      // become a file upload. Note that a File is a kind of Blob. See
-      // <https://developer.mozilla.org/en-US/docs/Web/API/FormData/append#value>
-      //
-      // But in jsdom in the test environment there are two Blob types: Node's
-      // and jdsom's, and only jsdom's will work. Node's will turn into a
-      // string. And it seems hard to get at both types in a way that makes
-      // sense in a browser. So we will add the file and make sure it added OK
-      // and didn't stringify.
-      
-      // According to <https://stackoverflow.com/a/43914175>, we *must* set a filename for uploads.
-      // In jsdom it turns on jsdom's own type checking support.
-      let fileName = file.name || "upload.dat";
-      formData.append("trackFile", file, fileName);
-      if (typeof formData.get("trackFile") == "string") {
-        // Catch stringification in case jsdom didn't.
-        console.error("Cannot upload file because it is not the appropriate type:", file);
-        throw new Error("File is not an appropriate type to upload");
-      }
-      // Make sure server can identify a Read file
-      formData.append("fileType", fileType); 
-      const xhr = new XMLHttpRequest();
-      xhr.responseType = "json";
-      xhr.onreadystatechange = () => {
-        if (xhr.readyState === 4 && xhr.status === 200) {
-          // Every thing ok, file uploaded
-          this.setUploadInProgress(false);
-          if (fileType === "graph") {
-            this.getPathNames(xhr.response.path);
-          }
+    return new Promise(
+      function (resolve, reject) {
+        if (file.size > config.MAXUPLOADSIZE) {
+          this.showFileSizeAlert();
+          return;
+        }
 
-          resolve(xhr.response.path);
+        this.setUploadInProgress(true);
+
+        const formData = new FormData();
+        // If the file is anything other than a Blob, it will be turned into a
+        // string and added as a normal form value. If it is a Blob it will
+        // become a file upload. Note that a File is a kind of Blob. See
+        // <https://developer.mozilla.org/en-US/docs/Web/API/FormData/append#value>
+        //
+        // But in jsdom in the test environment there are two Blob types: Node's
+        // and jdsom's, and only jsdom's will work. Node's will turn into a
+        // string. And it seems hard to get at both types in a way that makes
+        // sense in a browser. So we will add the file and make sure it added OK
+        // and didn't stringify.
+
+        // According to <https://stackoverflow.com/a/43914175>, we *must* set a filename for uploads.
+        // In jsdom it turns on jsdom's own type checking support.
+        let fileName = file.name || "upload.dat";
+        formData.append("trackFile", file, fileName);
+        if (typeof formData.get("trackFile") == "string") {
+          // Catch stringification in case jsdom didn't.
+          console.error(
+            "Cannot upload file because it is not the appropriate type:",
+            file
+          );
+          throw new Error("File is not an appropriate type to upload");
         }
-      };
-      
-      console.log("Uploading file", file);
-      console.log("Sending form data", formData);
-      console.log("Form file is a " + typeof formData.get("trackFile"));
-      xhr.open("POST", `${this.props.apiUrl}/trackFileSubmission`, true);
-      xhr.send(formData);
-    }.bind(this));
+        // Make sure server can identify a Read file
+        formData.append("fileType", fileType);
+        const xhr = new XMLHttpRequest();
+        xhr.responseType = "json";
+        xhr.onreadystatechange = () => {
+          if (xhr.readyState === 4 && xhr.status === 200) {
+            // Every thing ok, file uploaded
+            this.setUploadInProgress(false);
+            if (fileType === "graph") {
+              this.getPathNames(xhr.response.path);
+            }
+
+            resolve(xhr.response.path);
+          }
+        };
+
+        console.log("Uploading file", file);
+        console.log("Sending form data", formData);
+        console.log("Form file is a " + typeof formData.get("trackFile"));
+        xhr.open("POST", `${this.props.apiUrl}/trackFileSubmission`, true);
+        xhr.send(formData);
+      }.bind(this)
+    );
   };
 
   setUpWebsocket = () => {
     this.ws = new WebSocket(this.props.apiUrl.replace(/^http/, "ws"));
     this.ws.onmessage = (message) => {
-      this.getMountedFilenames();
+      if (!this.cancelSignal.aborted) {
+        this.getMountedFilenames();
+      } else {
+        this.ws.close();
+      }
     };
     this.ws.onclose = (event) => {
-      setTimeout(this.setUpWebsocket, 1000);
+      if (!this.cancelSignal.aborted) {
+        setTimeout(this.setUpWebsocket, 1000);
+      }
     };
     this.ws.onerror = (event) => {
       this.ws.close();
     };
   };
 
-/* Function for toggling simplify button, enabling vg simplify to be turned on or off */
-toggleSimplify = () => {
-    this.setState( { simplify: !this.state.simplify });
-  }
+  /* Function for toggling simplify button, enabling vg simplify to be turned on or off */
+  toggleSimplify = () => {
+    this.setState({ simplify: !this.state.simplify });
+  };
 
   render() {
     let errorDiv = null;
@@ -741,31 +764,33 @@ toggleSimplify = () => {
 
     const customFilesFlag = this.state.dataType === dataTypes.CUSTOM_FILES;
     const examplesFlag = this.state.dataType === dataTypes.EXAMPLES;
-    const viewTargetHasChange = !viewTargetsEqual(this.getNextViewTarget(), this.props.getCurrentViewTarget());
+    const viewTargetHasChange = !viewTargetsEqual(
+      this.getNextViewTarget(),
+      this.props.getCurrentViewTarget()
+    );
     const displayDescription = this.state.desc;
 
-
     console.log(
       "Rendering header form with fileSelectOptions: ",
       this.state.fileSelectOptions
     );
 
-    const DataPositionFormRowComponent = <DataPositionFormRow
-      handleGoLeft={this.handleGoLeft}
-      handleGoRight={this.handleGoRight}
-      handleGoButton={this.handleGoButton}
-      uploadInProgress={this.state.uploadInProgress}
-      getCurrentViewTarget={this.props.getCurrentViewTarget}
-      viewTargetHasChange={viewTargetHasChange}
-    />
+    const DataPositionFormRowComponent = (
+      <DataPositionFormRow
+        handleGoLeft={this.handleGoLeft}
+        handleGoRight={this.handleGoRight}
+        handleGoButton={this.handleGoButton}
+        uploadInProgress={this.state.uploadInProgress}
+        getCurrentViewTarget={this.props.getCurrentViewTarget}
+        viewTargetHasChange={viewTargetHasChange}
+      />
+    );
 
     return (
       <div>
         <Container>
           <Row>
-            <Col>
-              {errorDiv}
-            </Col>
+            <Col>{errorDiv}</Col>
           </Row>
           <Row>
             <Col md="auto">
@@ -778,7 +803,6 @@ toggleSimplify = () => {
               >
                 Data:
               </Label>
-
               <select
                 type="select"
                 value={
@@ -813,9 +837,7 @@ toggleSimplify = () => {
                   />
                   &nbsp;
                 </React.Fragment>
-
               )}
-
               {!examplesFlag && (
                 <RegionInput
                   pathNames={this.state.pathNames}
@@ -824,9 +846,8 @@ toggleSimplify = () => {
                   region={this.state.region}
                 />
               )}
-
-              {customFilesFlag && 
-                <div style={{display: "flex"}}>
+              {customFilesFlag && (
+                <div style={{ display: "flex" }}>
                   {DataPositionFormRowComponent}
                   <TrackPicker
                     tracks={this.state.tracks}
@@ -835,13 +856,17 @@ toggleSimplify = () => {
                     handleFileUpload={this.handleFileUpload}
                   ></TrackPicker>
                   {/* Button for simplify */}
-                  {
-                    !(readsExist(this.state.tracks)) &&
-                    <Button onClick={this.toggleSimplify} outline active={this.state.simplify}>{this.state.simplify ? "Simplify On" : "Simplify Off"}</Button>
-                  }
-                  </div>
-              }
-
+                  {!readsExist(this.state.tracks) && (
+                    <Button
+                      onClick={this.toggleSimplify}
+                      outline
+                      active={this.state.simplify}
+                    >
+                      {this.state.simplify ? "Simplify On" : "Simplify Off"}
+                    </Button>
+                  )}
+                </div>
+              )}
               <Row>
                 <Alert
                   color="danger"
@@ -862,15 +887,17 @@ toggleSimplify = () => {
                     setColorSetting={this.props.setColorSetting}
                   />
                 ) : (
-                  !customFilesFlag && DataPositionFormRowComponent 
+                  !customFilesFlag && DataPositionFormRowComponent
                 )}
               </Row>
-              {displayDescription ?
-                <div style={{marginTop: "10px"}}>
+              {displayDescription ? (
+                <div style={{ marginTop: "10px" }}>
                   <FormHelperText> {"Region Description: "} </FormHelperText>
-                  <FormHelperText style={{fontWeight: "bold"}}>{this.state.desc}</FormHelperText>
-                </div> 
-               : null }
+                  <FormHelperText style={{ fontWeight: "bold" }}>
+                    {this.state.desc}
+                  </FormHelperText>
+                </div>
+              ) : null}
             </Col>
           </Row>
         </Container>
diff --git a/src/components/HelpButton.demo.js b/src/components/HelpButton.demo.js
index 7dfb26a4..a6f765d7 100644
--- a/src/components/HelpButton.demo.js
+++ b/src/components/HelpButton.demo.js
@@ -1,17 +1,16 @@
-import Demo, {props as P} from 'react-demo'
+import Demo, { props as P } from "react-demo";
 // See https://github.com/rpominov/react-demo for how to make a demo
 
 import HelpButton from "./HelpButton.js";
 
-export default (<Demo
+export default (
+  <Demo
     props={{
-      file: P.string('./help/help.md'),
+      file: P.string("./help/help.md"),
     }}
   >
-    {
-      (props) => {
-        return <HelpButton {...props}/>
-      }
-    }
-  </Demo>)
-  
+    {(props) => {
+      return <HelpButton {...props} />;
+    }}
+  </Demo>
+);
diff --git a/src/components/HelpButton.js b/src/components/HelpButton.js
index 67f06519..bfa393af 100644
--- a/src/components/HelpButton.js
+++ b/src/components/HelpButton.js
@@ -1,67 +1,79 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import { Button } from 'reactstrap'
+import { Button } from "reactstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faQuestion } from '@fortawesome/free-solid-svg-icons';
-import Markdown from 'markdown-to-jsx';
-import PopupDialog from './PopupDialog.js';
+import { faQuestion } from "@fortawesome/free-solid-svg-icons";
+import Markdown from "markdown-to-jsx";
+import PopupDialog from "./PopupDialog.js";
 
 export const HelpButton = ({
   /* Expects a file input */
-  file
+  file,
 }) => {
+  let fileURL = new URL(file, document.baseURI);
+  // based off of https://react-popup.elazizi.com/controlled-popup/#using-open-prop
+  const [open, setOpen] = useState(false);
+  const close = () => setOpen(false);
 
-    let fileURL = new URL(file, document.baseURI)
-    // based off of https://react-popup.elazizi.com/controlled-popup/#using-open-prop
-    const [open, setOpen] = useState(false);
-    const close = () => setOpen(false);
+  // based off of https://stackoverflow.com/questions/42928530/how-do-i-load-a-markdown-file-into-a-react-component/65584658#65584658
+  const [content, setContent] = useState("");
 
-    // based off of https://stackoverflow.com/questions/42928530/how-do-i-load-a-markdown-file-into-a-react-component/65584658#65584658
-    const [content, setContent] = useState("");
+  const Image = ({ alt, src, ...props }) => (
+    <img
+      alt={alt}
+      src={new URL(src, fileURL)}
+      {...props}
+      style={{
+        margin: "5px 0",
+        maxWidth: "90%",
+        border: "solid grey 1px",
+        boxShadow: "0 2px 6px 0 rgba(0, 0, 0, 0.2)",
+        borderRadius: "5px",
+      }}
+    />
+  );
 
-    const Image = ({ alt, src, ...props }) => (
-      <img alt={alt} src={new URL(src, fileURL)} {...props} style={{margin: "5px 0", maxWidth: "90%", border: "solid grey 1px", boxShadow: "0 2px 6px 0 rgba(0, 0, 0, 0.2)", borderRadius: "5px"}}/>
-    );
+  const options = {
+    overrides: {
+      img: { component: Image },
+    },
+  };
 
-    const options = {
-      overrides: {
-        img: { component: Image }
-      }
-    };
-
-    useEffect(() => {
-      fetch(file)
-        .then(res => res.text())
-        .then(md => { setContent(md) })
-        // catch - error is link
-        .catch((e) => {
-          // If the network drops or if the front-end static server isn't
-          // avaialble (like in the end to end tests), put something instead of
-          // having an unhandled rejection.
-          setContent("Could not fetch help")
-        })
-        
-    }, [file])
-
-    return(
-      <>
-        <Button aria-label="Help" onClick={() => setOpen(!open)}><FontAwesomeIcon icon={faQuestion} /></Button>
-        <PopupDialog open={open} close={close}>
-          <div style={{height: "90vh", overflowY: "scroll", overflowX: "hidden"}}>
-            <Markdown options={options} children={content}/>
-          </div>
-        </PopupDialog>
-      </>     
-    )
-}
+  useEffect(() => {
+    fetch(file)
+      .then((res) => res.text())
+      .then((md) => {
+        setContent(md);
+      })
+      // catch - error is link
+      .catch((e) => {
+        // If the network drops or if the front-end static server isn't
+        // avaialble (like in the end to end tests), put something instead of
+        // having an unhandled rejection.
+        setContent("Could not fetch help");
+      });
+  }, [file]);
 
+  return (
+    <>
+      <Button aria-label="Help" onClick={() => setOpen(!open)}>
+        <FontAwesomeIcon icon={faQuestion} />
+      </Button>
+      <PopupDialog open={open} close={close}>
+        <div
+          style={{ height: "90vh", overflowY: "scroll", overflowX: "hidden" }}
+        >
+          <Markdown options={options} children={content} />
+        </div>
+      </PopupDialog>
+    </>
+  );
+};
 
 HelpButton.propTypes = {
   file: PropTypes.string.isRequired,
-}
-
-HelpButton.defaultProps = {
+};
 
-}
+HelpButton.defaultProps = {};
 
 export default HelpButton;
diff --git a/src/components/HelpButton.test.js b/src/components/HelpButton.test.js
index cfa61ecf..a4d8c38d 100644
--- a/src/components/HelpButton.test.js
+++ b/src/components/HelpButton.test.js
@@ -1,27 +1,24 @@
-import { enableFetchMocks } from 'jest-fetch-mock';
+import { enableFetchMocks } from "jest-fetch-mock";
 enableFetchMocks();
 
-import React from 'react';
-import {render} from '@testing-library/react';
-import {HelpButton} from './HelpButton';
-import {screen, waitFor} from '@testing-library/react';
+import React from "react";
+import { render } from "@testing-library/react";
+import { HelpButton } from "./HelpButton";
+import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { act } from "react-dom/test-utils";
 
+describe("HelpButton", () => {
+  it("opens popup with help instructions", async () => {
+    fetch.mockResponseOnce("Instructions");
+    const result = render(<HelpButton file="./help/help.md" />);
 
-describe('HelpButton', () => {
-    it('opens popup with help instructions', async () => {
-        fetch.mockResponseOnce("Instructions");
-        const result = render(
-            <HelpButton file="./help/help.md" />
-        );
-
-        act(() => {
-            userEvent.click(screen.getByRole('button'));
-        });
+    act(() => {
+      userEvent.click(screen.getByRole("button"));
+    });
 
-        await waitFor(() => expect(screen.getByText('Instructions')).toBeTruthy());
+    await waitFor(() => expect(screen.getByText("Instructions")).toBeTruthy());
 
-        await waitFor(() => expect(screen.queryByText('#')).toBeFalsy());
-    });
+    await waitFor(() => expect(screen.queryByText("#")).toBeFalsy());
+  });
 });
diff --git a/src/components/PickerTypeDropdown.js b/src/components/PickerTypeDropdown.js
index 18051e36..521eccd7 100644
--- a/src/components/PickerTypeDropdown.js
+++ b/src/components/PickerTypeDropdown.js
@@ -3,52 +3,50 @@ import Select from "react-select";
 import React from "react";
 
 export const PickerTypeDropdown = ({
-    value,
-    handleInputChange,
-    pickerOptions,
-    testID,
+  value,
+  handleInputChange,
+  pickerOptions,
+  testID,
 }) => {
+  function onChange(option) {
+    handleInputChange(option.value);
+  }
 
-    function onChange(option) {
-        handleInputChange(option.value);
-    }
-
-    const dropDownOptions = pickerOptions.map((option) => ({
-        label: option,
-        value: option,
-    }));
-
-    return(
-        <div data-testid={testID}>
-            <Select 
-            options={dropDownOptions}
-            value={{label: value, value: value}}
-            // Identical-looking object literals will compare unequal, so we
-            // need to provide a way to turn them into strings so that
-            // `value` can be matched up with the corresponding item in
-            // `options`.
-            getOptionValue={(o) => {
-                return o["value"];
-            }}
-            onChange={onChange}
-            autoComplete="on"
-            />  
-        </div>
-    );
-}
+  const dropDownOptions = pickerOptions.map((option) => ({
+    label: option,
+    value: option,
+  }));
 
+  return (
+    <div data-testid={testID}>
+      <Select
+        options={dropDownOptions}
+        value={{ label: value, value: value }}
+        // Identical-looking object literals will compare unequal, so we
+        // need to provide a way to turn them into strings so that
+        // `value` can be matched up with the corresponding item in
+        // `options`.
+        getOptionValue={(o) => {
+          return o["value"];
+        }}
+        onChange={onChange}
+        autoComplete="on"
+      />
+    </div>
+  );
+};
 
 PickerTypeDropdown.propTypes = {
-    handleInputChange: PropTypes.func.isRequired,
-    pickerOptions: PropTypes.array.isRequired,
-    value: PropTypes.string.isRequired,
-    testID: PropTypes.string,
-}
-  
+  handleInputChange: PropTypes.func.isRequired,
+  pickerOptions: PropTypes.array.isRequired,
+  value: PropTypes.string.isRequired,
+  testID: PropTypes.string,
+};
+
 PickerTypeDropdown.defaultProps = {
-    value: "mounted",
-    pickerOptions: ["upload, mounted"],
-    testID: "picker-type-component"
-}
+  value: "mounted",
+  pickerOptions: ["upload, mounted"],
+  testID: "picker-type-component",
+};
 
-export default PickerTypeDropdown;
\ No newline at end of file
+export default PickerTypeDropdown;
diff --git a/src/components/PopUpInfoDialog.js b/src/components/PopUpInfoDialog.js
index c11d1fad..80609039 100644
--- a/src/components/PopUpInfoDialog.js
+++ b/src/components/PopUpInfoDialog.js
@@ -1,32 +1,31 @@
-import React from 'react';
+import React from "react";
 import PropTypes from "prop-types";
-import PopupDialog from './PopupDialog.js';
-
-export const PopUpInfoDialog = ({
-  open,
-  attributes,
-  close,
-}) => {
-    return(
-      <div>
-        <PopupDialog open={open} close={close}>
-            <h5>Object Information</h5>
-            <table>
-              <tbody>
-                {/* Track or Node info here */}
-                {(attributes || []).map(function(attribute){
-                  return <tr key={attribute[0]}>
-                      <td style={{fontWeight: 'bold', border: '1px solid black'}}>{attribute[0]}</td>
-                      <td style={{border: '1px solid black'}}>{attribute[1]}</td>
-                    </tr>
-                })}
-              </tbody>
-            </table>
-        </PopupDialog>
-      </div>
-    )
-}
+import PopupDialog from "./PopupDialog.js";
 
+export const PopUpInfoDialog = ({ open, attributes, close }) => {
+  return (
+    <div>
+      <PopupDialog open={open} close={close}>
+        <h5>Object Information</h5>
+        <table>
+          <tbody>
+            {/* Track or Node info here */}
+            {(attributes || []).map(function (attribute) {
+              return (
+                <tr key={attribute[0]}>
+                  <td style={{ fontWeight: "bold", border: "1px solid black" }}>
+                    {attribute[0]}
+                  </td>
+                  <td style={{ border: "1px solid black" }}>{attribute[1]}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </PopupDialog>
+    </div>
+  );
+};
 
 export default PopUpInfoDialog;
 
@@ -35,9 +34,7 @@ PopUpInfoDialog.propTypes = {
   /* array argument of track or node attribute pairs containing attribute name as a string and attribute value
   as a string or number */
   attributes: PropTypes.arrayOf(
-    PropTypes.arrayOf(
-      PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    )
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
   ),
   close: PropTypes.func.isRequired,
-}
+};
diff --git a/src/components/PopupDialog.js b/src/components/PopupDialog.js
index 741fe52a..c2dcf664 100644
--- a/src/components/PopupDialog.js
+++ b/src/components/PopupDialog.js
@@ -1,10 +1,10 @@
-import React from 'react';
-import Popup from 'reactjs-popup';
-import { Button } from 'reactstrap'
+import React from "react";
+import Popup from "reactjs-popup";
+import { Button } from "reactstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faX } from '@fortawesome/free-solid-svg-icons';
+import { faX } from "@fortawesome/free-solid-svg-icons";
 import PropTypes from "prop-types";
-import { Container, CardBody, Card } from 'reactstrap';
+import { Container, CardBody, Card } from "reactstrap";
 
 export const PopupDialog = ({
   open,
@@ -12,26 +12,36 @@ export const PopupDialog = ({
   close,
   closeOnDocumentClick,
   width,
-  testID
+  testID,
 }) => {
-    // based off of https://react-popup.elazizi.com/controlled-popup/#using-open-prop
-    return(
-      <>
-        <Popup open={open} closeOnDocumentClick={closeOnDocumentClick} contentStyle={width !== null ? {width: width} : {}} modal>
-          <Container>
-            <Card style={{boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2)"}}>
-              <CardBody>
-                {/* Close Button */}
-                <Button className="closePopup" onClick={close} data-testid={testID.concat("CloseButton")}><FontAwesomeIcon icon={faX}/></Button>
-                <div>{children}</div>
-              </CardBody>
-            </Card>
-          </Container>
-        </Popup>
-      </>
-    )
-}
-
+  // based off of https://react-popup.elazizi.com/controlled-popup/#using-open-prop
+  return (
+    <>
+      <Popup
+        open={open}
+        closeOnDocumentClick={closeOnDocumentClick}
+        contentStyle={width !== null ? { width: width } : {}}
+        modal
+      >
+        <Container>
+          <Card style={{ boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2)" }}>
+            <CardBody>
+              {/* Close Button */}
+              <Button
+                className="closePopup"
+                onClick={close}
+                data-testid={testID.concat("CloseButton")}
+              >
+                <FontAwesomeIcon icon={faX} />
+              </Button>
+              <div>{children}</div>
+            </CardBody>
+          </Card>
+        </Container>
+      </Popup>
+    </>
+  );
+};
 
 export default PopupDialog;
 
@@ -41,11 +51,11 @@ PopupDialog.propTypes = {
   closeOnDocumentClick: PropTypes.bool,
   width: PropTypes.string,
   height: PropTypes.string,
-  testID: PropTypes.string
-}
+  testID: PropTypes.string,
+};
 
 PopupDialog.defaultProps = {
   closeOnDocumentClick: false,
   width: "760px",
-  testID: "PopupDialog"
-}
+  testID: "PopupDialog",
+};
diff --git a/src/components/RadioRow.js b/src/components/RadioRow.js
index 6eb2da68..4a61f243 100644
--- a/src/components/RadioRow.js
+++ b/src/components/RadioRow.js
@@ -14,45 +14,43 @@ const colorMap = new Map([
 
 class RadioRow extends Component {
   onChange = (event) => {
-
     this.props.setColorSetting(
       this.props.setting,
       colorMap.get(event.target.value)
     );
-
   };
 
-
   render() {
     let currColorMap = new Map(colorMap);
     for (const [keyColor, valueColor] of colorMap) {
-      if(!this.props.availableColors.includes(valueColor)){
+      if (!this.props.availableColors.includes(valueColor)) {
         currColorMap.delete(keyColor);
       }
     }
 
-    const colorRadios = Array.from(currColorMap).map(([keyColor, valueColor]) => {
-      return (
-        <Col xs="auto" key={keyColor}>
-          <FormGroup check>
-            <Label check>
-              <Input
-                type="radio"
-                value={keyColor}
-                checked={this.props.color === valueColor}
-                onChange={this.onChange}
-                key={keyColor}
-              />
-              {keyColor}
-            </Label>
-          </FormGroup>
-        </Col>
-      );
-    });
+    const colorRadios = Array.from(currColorMap).map(
+      ([keyColor, valueColor]) => {
+        return (
+          <Col xs="auto" key={keyColor}>
+            <FormGroup check>
+              <Label check>
+                <Input
+                  type="radio"
+                  value={keyColor}
+                  checked={this.props.color === valueColor}
+                  onChange={this.onChange}
+                  key={keyColor}
+                />
+                {keyColor}
+              </Label>
+            </FormGroup>
+          </Col>
+        );
+      }
+    );
     return (
       <FormGroup row className="mb-1">
-        {this.props.rowHeading}:
-        {colorRadios}
+        {this.props.rowHeading}:{colorRadios}
       </FormGroup>
     );
   }
@@ -63,11 +61,18 @@ RadioRow.propTypes = {
   rowHeading: PropTypes.string.isRequired,
   setColorSetting: PropTypes.func.isRequired,
   setting: PropTypes.string.isRequired,
-  availableColors: PropTypes.array
+  availableColors: PropTypes.array,
 };
 
 RadioRow.defaultProps = {
-  availableColors: ["greys", "ygreys", "blues", "reds", "plainColors", "lightColors"]
-}
+  availableColors: [
+    "greys",
+    "ygreys",
+    "blues",
+    "reds",
+    "plainColors",
+    "lightColors",
+  ],
+};
 
 export default RadioRow;
diff --git a/src/components/RegionInput.demo.js b/src/components/RegionInput.demo.js
index d1ae8977..e2ae44f6 100644
--- a/src/components/RegionInput.demo.js
+++ b/src/components/RegionInput.demo.js
@@ -1,30 +1,34 @@
-import Demo, {props as P} from 'react-demo'
+import Demo, { props as P } from "react-demo";
 // See https://github.com/rpominov/react-demo for how to make a demo
 
 import RegionInput from "./RegionInput";
 
 // We want to two-way-bind the demo region prop so we use advanced mode and pass the render function.
-export default (<Demo
-  props={{
-    region: P.string('pathy:1-100'),
-    regionInfo: P.json({
-      chr: ['chr600'],
-      start: [10],
-      end: [90],
-      desc: ['Something cool']
-    }),
-    pathNames: P.json(["pathy", "anotherPath", "node", "chr600"])
-  }}
->
-  {
-    (props, update) => {
+export default (
+  <Demo
+    props={{
+      region: P.string("pathy:1-100"),
+      regionInfo: P.json({
+        chr: ["chr600"],
+        start: [10],
+        end: [90],
+        desc: ["Something cool"],
+      }),
+      pathNames: P.json(["pathy", "anotherPath", "node", "chr600"]),
+    }}
+  >
+    {(props, update) => {
       // We need to render the component under test using the props in props, and
       // call update when the component wants to adjust the props.
-      return <RegionInput {...props} handleRegionChange={(newRegion) => {
-        // When region is changed by the component, update the demo's region state
-        update({region: newRegion})
-      }}/>
-    }
-  }
-</Demo>)
-
+      return (
+        <RegionInput
+          {...props}
+          handleRegionChange={(newRegion) => {
+            // When region is changed by the component, update the demo's region state
+            update({ region: newRegion });
+          }}
+        />
+      );
+    }}
+  </Demo>
+);
diff --git a/src/components/RegionInput.js b/src/components/RegionInput.js
index 692a14a2..53536955 100644
--- a/src/components/RegionInput.js
+++ b/src/components/RegionInput.js
@@ -21,7 +21,7 @@ export const RegionInput = ({
   // Add : to pathNames
   console.log("rendering with pathnames: ", pathNames);
   const pathNamesColon = pathNames.map((name) => {
-    return {label: name + ":", value: name + ":"};
+    return { label: name + ":", value: name + ":" };
   });
   const pathsWithRegion = [];
 
@@ -30,10 +30,11 @@ export const RegionInput = ({
   if (regionInfo && !isEmpty(regionInfo)) {
     // Stitch path name + region start and end
     for (const [index, path] of regionInfo["chr"].entries()) {
-      const pathWithRegion = path + ":" + regionInfo.start[index] + "-" + regionInfo.end[index];
+      const pathWithRegion =
+        path + ":" + regionInfo.start[index] + "-" + regionInfo.end[index];
       pathsWithRegion.push({
         label: pathWithRegion + " " + regionInfo.desc[index],
-        value: pathWithRegion
+        value: pathWithRegion,
       });
       regionToDesc.set(pathWithRegion, regionInfo.desc[index]);
     }
@@ -57,18 +58,18 @@ export const RegionInput = ({
           value={region}
           inputValue={region}
           data-testid="autocomplete"
-          id="regionInput" 
-
+          id="regionInput"
           onInputChange={(event, newInput) => {
             let regionValue = newInput;
-            const regionObject = displayRegions.find((option) => option.label === newInput);
+            const regionObject = displayRegions.find(
+              (option) => option.label === newInput
+            );
             // If input is selected from one of the options
             if (regionObject) {
-              regionValue = regionObject.value
+              regionValue = regionObject.value;
             }
             handleRegionChange(regionValue, regionToDesc.get(regionValue));
           }}
-
           options={displayRegions}
           renderInput={(params) => (
             <TextField
@@ -108,4 +109,4 @@ RegionInput.propTypes = {
   }),
 };
 
-export default RegionInput;
\ No newline at end of file
+export default RegionInput;
diff --git a/src/components/RegionInput.test.js b/src/components/RegionInput.test.js
index 65f3a602..3e1f3bb5 100644
--- a/src/components/RegionInput.test.js
+++ b/src/components/RegionInput.test.js
@@ -60,5 +60,8 @@ test("it calls handleRegionChange when region is changed with new region", async
   await userEvent.clear(input);
   await userEvent.type(input, NEW_REGION);
 
-  expect(handleRegionChangeMock).toHaveBeenLastCalledWith(NEW_REGION, undefined);
-});
\ No newline at end of file
+  expect(handleRegionChangeMock).toHaveBeenLastCalledWith(
+    NEW_REGION,
+    undefined
+  );
+});
diff --git a/src/components/SafeLink.js b/src/components/SafeLink.js
index 3001d643..7d6436c6 100644
--- a/src/components/SafeLink.js
+++ b/src/components/SafeLink.js
@@ -1,25 +1,21 @@
 /// SafeLink.js: React Router-compatible Link component that doesn't explode if
 /// not used inside a React Router.
 
-import { Link, useInRouterContext } from "react-router-dom"
+import { Link, useInRouterContext } from "react-router-dom";
 
-export const SafeLink = ({children, ...props}) => {
+export const SafeLink = ({ children, ...props }) => {
   // Find out if we are in a router
-  let insideRouter = useInRouterContext()
+  let insideRouter = useInRouterContext();
   if (insideRouter) {
     // We can use Link
-    return (
-      <Link {...props}>{children}</Link>  
-    )
+    return <Link {...props}>{children}</Link>;
   } else {
     // We can't use Link
     // Also try to fix to -> href
-    let {to, href, ...otherProps} = props
-    let fixedProps = {href: href || to, ...otherProps}
-    return (
-      <a {...fixedProps}>{children}</a>
-    )
+    let { to, href, ...otherProps } = props;
+    let fixedProps = { href: href || to, ...otherProps };
+    return <a {...fixedProps}>{children}</a>;
   }
-}
+};
 
-export default SafeLink
+export default SafeLink;
diff --git a/src/components/TrackAddButton.js b/src/components/TrackAddButton.js
index ac56ee3d..7337a032 100644
--- a/src/components/TrackAddButton.js
+++ b/src/components/TrackAddButton.js
@@ -1,34 +1,30 @@
 import React from "react";
 import { Button } from "reactstrap";
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import PropTypes from "prop-types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 // Component in TrackListDisplay, adds new track item into TrackList when pressed
-export const TrackAddButton = ({
-    onChange,
-    testID,
-}) => {
-
-    return(
-        <Button 
-            aria-label="TrackAdd" 
-            onClick={onChange}
-            data-testid={testID}
-            style={{width : "40px", marginLeft: "25px", marginTop: "5px"}}
-        >
-        <FontAwesomeIcon icon={faPlus}/>
-        </Button>
-    );
-}
+export const TrackAddButton = ({ onChange, testID }) => {
+  return (
+    <Button
+      aria-label="TrackAdd"
+      onClick={onChange}
+      data-testid={testID}
+      style={{ width: "40px", marginLeft: "25px", marginTop: "5px" }}
+    >
+      <FontAwesomeIcon icon={faPlus} />
+    </Button>
+  );
+};
 
 TrackAddButton.propTypes = {
-    onChange: PropTypes.func.isRequired,
-    testID: PropTypes.string
-}
+  onChange: PropTypes.func.isRequired,
+  testID: PropTypes.string,
+};
 
 TrackAddButton.defaultProps = {
-    testID: "track-add-button-component"
-}
+  testID: "track-add-button-component",
+};
 
-export default TrackAddButton;
\ No newline at end of file
+export default TrackAddButton;
diff --git a/src/components/TrackDeleteButton.demo.js b/src/components/TrackDeleteButton.demo.js
index 59e10124..bc2c9a94 100644
--- a/src/components/TrackDeleteButton.demo.js
+++ b/src/components/TrackDeleteButton.demo.js
@@ -1,22 +1,26 @@
-import Demo, {props as P} from 'react-demo'
+import Demo, { props as P } from "react-demo";
 // See https://github.com/rpominov/react-demo for how to make a demo
 
 import TrackDeleteButton from "./TrackDeleteButton";
 
-export default (<Demo
-  props={{
-    id: P.string('deleteButton'),
-    className: P.string('someCSSClass'),
-  }}
->
-  {
-    (props) => {
+export default (
+  <Demo
+    props={{
+      id: P.string("deleteButton"),
+      className: P.string("someCSSClass"),
+    }}
+  >
+    {(props) => {
       // We need to render the component under test using the props in props
-      return <TrackDeleteButton {...props} onClick={() => {
-        // button has been clicked
-        alert("clicked");
-      }}/>
-    }
-  }
-</Demo>)
-
+      return (
+        <TrackDeleteButton
+          {...props}
+          onClick={() => {
+            // button has been clicked
+            alert("clicked");
+          }}
+        />
+      );
+    }}
+  </Demo>
+);
diff --git a/src/components/TrackDeleteButton.js b/src/components/TrackDeleteButton.js
index 161f8c66..29003d31 100644
--- a/src/components/TrackDeleteButton.js
+++ b/src/components/TrackDeleteButton.js
@@ -1,26 +1,28 @@
 import React from "react";
 import { Button } from "reactstrap";
-import { faX } from '@fortawesome/free-solid-svg-icons';
+import { faX } from "@fortawesome/free-solid-svg-icons";
 import PropTypes from "prop-types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 /**
  * A track delete button component.
- * 
+ *
  * When clicked, would call a function to delete the track
- * 
+ *
  */
 
- export function TrackDeleteButton (props) {
-    // https://stackoverflow.com/questions/49358560/react-wrapper-react-does-not-recognize-the-staticcontext-prop-on-a-dom-elemen
-    const {testID, ...rest} = props;
+export function TrackDeleteButton(props) {
+  // https://stackoverflow.com/questions/49358560/react-wrapper-react-does-not-recognize-the-staticcontext-prop-on-a-dom-elemen
+  const { testID, ...rest } = props;
 
-    // return button
-    // upon click, call onClick function 
-    
-    return (
-        <Button data-testid={props.testID} {...rest}><FontAwesomeIcon icon={faX} /></Button>
-    );
+  // return button
+  // upon click, call onClick function
+
+  return (
+    <Button data-testid={props.testID} {...rest}>
+      <FontAwesomeIcon icon={faX} />
+    </Button>
+  );
 }
 
 /* React checks for the type of each prop passed in to ensure that the correct type is being 
@@ -32,14 +34,13 @@ TrackDeleteButton.propTypes = {
   id: PropTypes.string,
   className: PropTypes.string,
   onClick: PropTypes.func.isRequired,
-  testID: PropTypes.string
+  testID: PropTypes.string,
 };
 
 TrackDeleteButton.defaultProps = {
   id: undefined,
   className: undefined,
-  testID: "delete-button-component"
+  testID: "delete-button-component",
 };
 
 export default TrackDeleteButton;
-
diff --git a/src/components/TrackDeleteButton.test.js b/src/components/TrackDeleteButton.test.js
index c4deae37..91bcc5da 100644
--- a/src/components/TrackDeleteButton.test.js
+++ b/src/components/TrackDeleteButton.test.js
@@ -1,18 +1,18 @@
-import React from 'react';
-import {render} from '@testing-library/react';
-import {TrackDeleteButton} from './TrackDeleteButton';
-import {screen} from '@testing-library/react';
+import React from "react";
+import { render } from "@testing-library/react";
+import { TrackDeleteButton } from "./TrackDeleteButton";
+import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-describe('TrackDeleteButton', () => {
-    it('calls onClick', async () => {
-        const onClick = jest.fn();
-        const result = render(
-            <TrackDeleteButton onClick={onClick}></TrackDeleteButton>
-        );
+describe("TrackDeleteButton", () => {
+  it("calls onClick", async () => {
+    const onClick = jest.fn();
+    const result = render(
+      <TrackDeleteButton onClick={onClick}></TrackDeleteButton>
+    );
 
-        await userEvent.click(screen.getByRole('button'));
+    await userEvent.click(screen.getByRole("button"));
 
-        expect(onClick).toHaveBeenCalledTimes(1);
-    });
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/src/components/TrackFilePicker.demo.js b/src/components/TrackFilePicker.demo.js
index aa0b496e..27a65493 100644
--- a/src/components/TrackFilePicker.demo.js
+++ b/src/components/TrackFilePicker.demo.js
@@ -1,35 +1,39 @@
-import Demo, {props as P} from 'react-demo'
+import Demo, { props as P } from "react-demo";
 // See https://github.com/rpominov/react-demo for how to make a demo
 
 import React from "react";
 
 import TrackFilePicker from "./TrackFilePicker";
 
-export default (<Demo
-  props={{
-    tracks: P.json([{"trackFile": "fileA1.vg", "trackType": "graph"},
-                    {"trackFile": "fileA2.gbwt", "trackType": "haplotype"},
-                    {"trackFile": "fileB1.gbwt", "trackType": "haplotype"},
-                    {"trackFile": "fileB2.gam", "trackType": "read"},
-                    {"trackFile": "fileC1.xg", "trackType": "graph"}]),
-
-    value: P.string("fileA1.vg"),
-    fileType: P.choices(["graph", "haplotype", "read"]),
-    pickerType: P.choices(["mounted", "upload"]),
-  }}
->
-  {
-    (props, update) => {
-      return <TrackFilePicker {...props} handleInputChange={(file) => {
-        // takes file name as value, updates the fileSelect prop in TrackFilePicker
-        update({value: file});
-      }}
-      handleFileUpload={(fileType, file) => {
-        console.log("handling file upload");
-      }}
-    />
-    }
-  }
-</Demo>)
-
+export default (
+  <Demo
+    props={{
+      tracks: P.json([
+        { trackFile: "fileA1.vg", trackType: "graph" },
+        { trackFile: "fileA2.gbwt", trackType: "haplotype" },
+        { trackFile: "fileB1.gbwt", trackType: "haplotype" },
+        { trackFile: "fileB2.gam", trackType: "read" },
+        { trackFile: "fileC1.xg", trackType: "graph" },
+      ]),
 
+      value: P.string("fileA1.vg"),
+      fileType: P.choices(["graph", "haplotype", "read"]),
+      pickerType: P.choices(["mounted", "upload"]),
+    }}
+  >
+    {(props, update) => {
+      return (
+        <TrackFilePicker
+          {...props}
+          handleInputChange={(file) => {
+            // takes file name as value, updates the fileSelect prop in TrackFilePicker
+            update({ value: file });
+          }}
+          handleFileUpload={(fileType, file) => {
+            console.log("handling file upload");
+          }}
+        />
+      );
+    }}
+  </Demo>
+);
diff --git a/src/components/TrackFilePicker.js b/src/components/TrackFilePicker.js
index 188e44c5..d7b64dfb 100644
--- a/src/components/TrackFilePicker.js
+++ b/src/components/TrackFilePicker.js
@@ -5,15 +5,13 @@ import "../config-client.js";
 import { config } from "../config-global.mjs";
 import { Input } from "reactstrap";
 
-
-
 /*
  * A selection dropdown component that select files.
  * Expects a file type object in the form of {"name": string, "type": string}
- * 
+ *
  * The handleInputChange function expects to be passed an option type object in the form of
  * {"label": string, "value": file}
- *  
+ *
  * See demo and test file for examples of this component.
  */
 
@@ -28,69 +26,73 @@ export const TrackFilePicker = ({
   testID,
   handleFileUpload,
 }) => {
-
-    let uploadFileInput = React.createRef();
-    let acceptedExtensions = config.fileTypeToExtensions[fileType];
-
-    async function uploadOnChange() {
-      const file = uploadFileInput.current.files[0];
-
-      const completePath = await handleFileUpload(fileType, file);
-      console.log("TrackFilePicker got an upload result:", completePath);
-      handleInputChange(completePath);
+  let uploadFileInput = React.createRef();
+  let acceptedExtensions = config.fileTypeToExtensions[fileType];
+
+  async function uploadOnChange() {
+    const file = uploadFileInput.current.files[0];
+
+    const completePath = await handleFileUpload(fileType, file);
+    console.log("TrackFilePicker got an upload result:", completePath);
+    handleInputChange(completePath);
+  }
+
+  function mountedOnChange(option) {
+    // update parent state
+    value = option.value;
+    handleInputChange(option.value);
+  }
+
+  function getFilename(fullPath) {
+    const segments = fullPath.split("/");
+    return segments[segments.length - 1];
+  }
+
+  const fileOptions = [];
+  // find all file options matching the specified file type
+  for (const track of tracks) {
+    if (track.trackType === fileType) {
+      fileOptions.push(track.trackFile);
     }
+  }
 
+  // takes in an array of options and maps them into a format <Select> takes
+  const dropDownOptions = fileOptions.map((option) => ({
+    label: getFilename(option),
+    value: option,
+  }));
 
-    function mountedOnChange(option) {
-      // update parent state
-      value = option.value;
-      handleInputChange(option.value);
-    }
-
-    function getFilename(fullPath) {
-      const segments = fullPath.split("/");
-      return segments[segments.length - 1];
-    }
-
-    const fileOptions = []
-    // find all file options matching the specified file type
-    for (const track of tracks) {
-        if (track.trackType === fileType) {
-          fileOptions.push(track.trackFile)
-        }
-    }
-
-    // takes in an array of options and maps them into a format <Select> takes
-    const dropDownOptions = fileOptions.map((option) => ({
-      label: getFilename(option),
-      value: option,
-    }));
-    
-
-    if (pickerType === "mounted"){
-      return(
+  if (pickerType === "mounted") {
+    return (
       // wrap Select container in div to easily query in tests
-        <div data-testid={testID}>
-            <Select 
-              options={dropDownOptions}
-              value={{label: getFilename(value), value: value}}
-              // Identical-looking object literals will compare unequal, so we
-              // need to provide a way to turn them into strings so that
-              // `value` can be matched up with the corresponding item in
-              // `options`.
-              getOptionValue={(o) => {
-                return o["value"];
-              }}
-              onChange={mountedOnChange}
-              autoComplete="on"
-              className={className}
-            />  
-          </div>
-      );
-    } else if (pickerType === "upload") {
-      return (
-        <div style={{display: 'flex',  justifyContent:'center', alignItems:'center', marginTop: 5}}>
-          <Input
+      <div data-testid={testID}>
+        <Select
+          options={dropDownOptions}
+          value={{ label: getFilename(value), value: value }}
+          // Identical-looking object literals will compare unequal, so we
+          // need to provide a way to turn them into strings so that
+          // `value` can be matched up with the corresponding item in
+          // `options`.
+          getOptionValue={(o) => {
+            return o["value"];
+          }}
+          onChange={mountedOnChange}
+          autoComplete="on"
+          className={className}
+        />
+      </div>
+    );
+  } else if (pickerType === "upload") {
+    return (
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          marginTop: 5,
+        }}
+      >
+        <Input
           data-testid={testID}
           type="file"
           className="customDataUpload form-control-file"
@@ -98,32 +100,30 @@ export const TrackFilePicker = ({
           innerRef={uploadFileInput}
           onChange={uploadOnChange}
         />
-        </div>
-
-      );
-    } else {
-      throw new Error("Invalid picker type");
-    }
-}
+      </div>
+    );
+  } else {
+    throw new Error("Invalid picker type");
+  }
+};
 
 TrackFilePicker.propTypes = {
-    tracks: PropTypes.array.isRequired,
-    fileType: PropTypes.string,
-    value: PropTypes.string,
-    handleInputChange: PropTypes.func.isRequired,
-    pickerType: PropTypes.string,
-    className: PropTypes.string,
-    testID: PropTypes.string,
-    handleFileUpload: PropTypes.func.isRequired,
-}
-  
+  tracks: PropTypes.array.isRequired,
+  fileType: PropTypes.string,
+  value: PropTypes.string,
+  handleInputChange: PropTypes.func.isRequired,
+  pickerType: PropTypes.string,
+  className: PropTypes.string,
+  testID: PropTypes.string,
+  handleFileUpload: PropTypes.func.isRequired,
+};
+
 TrackFilePicker.defaultProps = {
   value: "Select a file",
   fileType: "graph",
   pickerType: "mounted",
   className: undefined,
-  testID: "file-select-component"
-}
+  testID: "file-select-component",
+};
 
 export default TrackFilePicker;
-
diff --git a/src/components/TrackFilePicker.test.js b/src/components/TrackFilePicker.test.js
index 104f2622..57c911fc 100644
--- a/src/components/TrackFilePicker.test.js
+++ b/src/components/TrackFilePicker.test.js
@@ -1,148 +1,152 @@
-import React from 'react';
-import { render, fireEvent, waitFor }  from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import {TrackFilePicker} from './TrackFilePicker';
-
-
-
-describe('TrackFilePicker', () => {
-    const testTracks = [{"trackFile": "fileA1.vg", "trackType": "graph"},
-                        {"trackFile": "fileA2.gbwt", "trackType": "haplotype"},
-                        {"trackFile": "fileB1.gbwt", "trackType": "haplotype"},
-                        {"trackFile": "fileB2.gam", "trackType": "read"},
-                        {"trackFile": "fileC1.xg", "trackType": "graph"}];
-
-    it('should render without errors', async () => {
-        const fakeOnChange = jest.fn();
-        const { getByText } = render(
-            <TrackFilePicker 
-            tracks={testTracks}
-            fileType={"graph"}
-            pickerType={"mounted"}
-            handleInputChange={fakeOnChange}/>
-        );
-
-        // maybe need to search by "Select a file"
-        const placeholder = await getByText("Select a file");
-        expect(placeholder).toBeTruthy();
-    });
-    
-    it('should allow value to be controlled', async () => {
-        const fakeOnChange = jest.fn();
-        const { getByText, queryByText, rerender } = render(
-            <TrackFilePicker 
-            tracks={testTracks}
-            fileType={"graph"}
-            pickerType={"mounted"}
-            value={"fileA1.vg"}
-            handleInputChange={fakeOnChange}/>
-        );
-
-        let displayed = getByText("fileA1.vg");
-        expect(displayed).toBeTruthy();
-        let notDisplayed = queryByText("fileC1.xg");
-        expect(notDisplayed).toBeFalsy();
-        
-        rerender(
-            <TrackFilePicker 
-            tracks={testTracks}
-            fileType={"graph"}
-            pickerType={"mounted"}
-            value={"fileC1.xg"}
-            handleInputChange={fakeOnChange}/>
-        );
-        
-        displayed = getByText("fileC1.xg");
-        expect(displayed).toBeTruthy();
-        notDisplayed = queryByText("fileA1.vg");
-        expect(notDisplayed).toBeFalsy();
+import React from "react";
+import { render, fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { TrackFilePicker } from "./TrackFilePicker";
+
+describe("TrackFilePicker", () => {
+  const testTracks = [
+    { trackFile: "fileA1.vg", trackType: "graph" },
+    { trackFile: "fileA2.gbwt", trackType: "haplotype" },
+    { trackFile: "fileB1.gbwt", trackType: "haplotype" },
+    { trackFile: "fileB2.gam", trackType: "read" },
+    { trackFile: "fileC1.xg", trackType: "graph" },
+  ];
+
+  it("should render without errors", async () => {
+    const fakeOnChange = jest.fn();
+    const { getByText } = render(
+      <TrackFilePicker
+        tracks={testTracks}
+        fileType={"graph"}
+        pickerType={"mounted"}
+        handleInputChange={fakeOnChange}
+      />
+    );
+
+    // maybe need to search by "Select a file"
+    const placeholder = await getByText("Select a file");
+    expect(placeholder).toBeTruthy();
+  });
+
+  it("should allow value to be controlled", async () => {
+    const fakeOnChange = jest.fn();
+    const { getByText, queryByText, rerender } = render(
+      <TrackFilePicker
+        tracks={testTracks}
+        fileType={"graph"}
+        pickerType={"mounted"}
+        value={"fileA1.vg"}
+        handleInputChange={fakeOnChange}
+      />
+    );
+
+    let displayed = getByText("fileA1.vg");
+    expect(displayed).toBeTruthy();
+    let notDisplayed = queryByText("fileC1.xg");
+    expect(notDisplayed).toBeFalsy();
+
+    rerender(
+      <TrackFilePicker
+        tracks={testTracks}
+        fileType={"graph"}
+        pickerType={"mounted"}
+        value={"fileC1.xg"}
+        handleInputChange={fakeOnChange}
+      />
+    );
+
+    displayed = getByText("fileC1.xg");
+    expect(displayed).toBeTruthy();
+    notDisplayed = queryByText("fileA1.vg");
+    expect(notDisplayed).toBeFalsy();
+  });
+
+  it("should call onChange when an option is selected", async () => {
+    const fakeOnChange = jest.fn();
+    const { getByText, queryByTestId } = render(
+      <TrackFilePicker
+        tracks={testTracks}
+        fileType={"haplotype"}
+        pickerType={"mounted"}
+        handleInputChange={fakeOnChange}
+      />
+    );
+
+    // find div containing the component
+    const fileSelectComponent = queryByTestId("file-select-component");
+
+    expect(fileSelectComponent).toBeDefined();
+    expect(fileSelectComponent).not.toBeNull();
+
+    // expand the select box
+    fireEvent.keyDown(fileSelectComponent.firstChild, { key: "ArrowDown" });
+    await waitFor(() => getByText("fileB1.gbwt"));
+    fireEvent.click(getByText("fileB1.gbwt"));
+
+    expect(fakeOnChange).toHaveBeenCalledTimes(1);
+    expect(fakeOnChange).toHaveBeenCalledWith("fileB1.gbwt");
+
+    // make sure we can repeat the process
+    fireEvent.keyDown(fileSelectComponent.firstChild, { key: "ArrowDown" });
+    await waitFor(() => getByText("fileA2.gbwt"));
+    fireEvent.click(getByText("fileA2.gbwt"));
+
+    expect(fakeOnChange).toHaveBeenCalledTimes(2);
+    expect(fakeOnChange).toHaveBeenCalledWith("fileA2.gbwt");
+  });
+
+  it("should call onChange when queried by input value", async () => {
+    const fakeOnChange = jest.fn();
+    const { getByText, queryByTestId, container } = render(
+      <TrackFilePicker
+        tracks={testTracks}
+        fileType={"graph"}
+        pickerType={"mounted"}
+        handleInputChange={fakeOnChange}
+      />
+    );
+
+    const fileSelectComponent = queryByTestId("file-select-component");
+
+    fireEvent.change(container.querySelector("input"), {
+      target: { value: "fileC1.xg" },
     });
 
-    it('should call onChange when an option is selected', async () => {
-        const fakeOnChange = jest.fn();
-        const { getByText, queryByTestId } = render(
-            <TrackFilePicker 
-            tracks={testTracks}
-            fileType={"haplotype"}
-            pickerType={"mounted"}
-            handleInputChange={fakeOnChange}/>
-        );
+    fireEvent.keyDown(fileSelectComponent.firstChild, { key: "ArrowDown" });
 
-        // find div containing the component
-        const fileSelectComponent = queryByTestId('file-select-component');
+    await waitFor(() => getByText("fileC1.xg"));
+    fireEvent.click(getByText("fileC1.xg"));
 
-        expect(fileSelectComponent).toBeDefined();
-        expect(fileSelectComponent).not.toBeNull();
+    expect(fakeOnChange).toHaveBeenCalledTimes(1);
+    expect(fakeOnChange).toHaveBeenCalledWith("fileC1.xg");
+  });
 
-        // expand the select box
-        fireEvent.keyDown(fileSelectComponent.firstChild, {key: "ArrowDown"});
-        await waitFor(() => getByText("fileB1.gbwt"));
-        fireEvent.click(getByText("fileB1.gbwt"));
+  it("should call call handleFileUpload when a file is inputted", async () => {
+    const fakeOnChange = jest.fn();
+    const fakeHandleFileUpload = jest.fn();
 
-        expect(fakeOnChange).toHaveBeenCalledTimes(1);
-        expect(fakeOnChange).toHaveBeenCalledWith("fileB1.gbwt");
+    const { queryByTestId } = render(
+      <TrackFilePicker
+        tracks={testTracks}
+        fileType={"graph"}
+        pickerType={"upload"}
+        handleInputChange={fakeOnChange}
+        handleFileUpload={fakeHandleFileUpload}
+      />
+    );
 
-        // make sure we can repeat the process
-        fireEvent.keyDown(fileSelectComponent.firstChild, {key: "ArrowDown"});
-        await waitFor(() => getByText("fileA2.gbwt"));
-        fireEvent.click(getByText("fileA2.gbwt"));
+    const fakeFile = new File(["example_data"], "example.vg", {
+      type: "text/vg",
+    });
 
-        expect(fakeOnChange).toHaveBeenCalledTimes(2);
-        expect(fakeOnChange).toHaveBeenCalledWith("fileA2.gbwt");
+    const fileSelectComponent = queryByTestId("file-select-component");
 
+    await waitFor(() => {
+      userEvent.upload(fileSelectComponent, fakeFile);
     });
 
-    it('should call onChange when queried by input value' ,async() => {
-        const fakeOnChange = jest.fn();
-        const { getByText, queryByTestId, container  } = render(
-            <TrackFilePicker 
-            tracks={testTracks}
-            fileType={"graph"}
-            pickerType={"mounted"}
-            handleInputChange={fakeOnChange}/>
-        );
-
-        const fileSelectComponent = queryByTestId('file-select-component');
-        
-        fireEvent.change(container.querySelector('input'), {
-            target: { value: 'fileC1.xg' },
-        });
-        
-        fireEvent.keyDown(fileSelectComponent.firstChild, { key: 'ArrowDown' });  
-
-        await waitFor(() => getByText("fileC1.xg"));
-        fireEvent.click(getByText("fileC1.xg"));
-
-        expect(fakeOnChange).toHaveBeenCalledTimes(1);
-        expect(fakeOnChange).toHaveBeenCalledWith("fileC1.xg");
-    })
-
-    it('should call call handleFileUpload when a file is inputted', async() => {
-        const fakeOnChange = jest.fn();
-        const fakeHandleFileUpload = jest.fn();
-
-        const { queryByTestId } = render(
-            <TrackFilePicker 
-            tracks={testTracks}
-            fileType={"graph"}
-            pickerType={"upload"}
-            handleInputChange={fakeOnChange}
-            handleFileUpload={fakeHandleFileUpload}/>
-        );
-
-        const fakeFile = new File(["example_data"], "example.vg", { type: "text/vg" });
-
-
-        const fileSelectComponent = queryByTestId("file-select-component");
-
-        await waitFor(() => {
-            userEvent.upload(fileSelectComponent, fakeFile);
-        });  
-
-        expect(fakeHandleFileUpload).toHaveBeenCalledTimes(1);
-        expect(fileSelectComponent.files.length).toBe(1);
-        expect(fileSelectComponent.files[0]).toStrictEqual(fakeFile);
-
-    })
-    
+    expect(fakeHandleFileUpload).toHaveBeenCalledTimes(1);
+    expect(fileSelectComponent.files.length).toBe(1);
+    expect(fileSelectComponent.files[0]).toStrictEqual(fakeFile);
+  });
 });
diff --git a/src/components/TrackList.demo.js b/src/components/TrackList.demo.js
index 974b0be1..59249471 100644
--- a/src/components/TrackList.demo.js
+++ b/src/components/TrackList.demo.js
@@ -1,59 +1,65 @@
-import Demo, {props as P} from 'react-demo'
+import Demo, { props as P } from "react-demo";
 // See https://github.com/rpominov/react-demo for how to make a demo
 
 import React from "react";
 
 import TrackList from "./TrackList";
 
-export default (<Demo
-  props={{
-    tracks:P.json({
+export default (
+  <Demo
+    props={{
+      tracks: P.json({
         1: {
-            trackFile: undefined,
-            trackType: "graph",
-            trackColorSettings: {    
-                mainPalette: "blues",
-                auxPalette: "reds",
-                colorReadsByMappingQuality: false
-            }
+          trackFile: undefined,
+          trackType: "graph",
+          trackColorSettings: {
+            mainPalette: "blues",
+            auxPalette: "reds",
+            colorReadsByMappingQuality: false,
+          },
         },
         2: {
-            trackFile: undefined,
-            trackType: "graph",
-            trackColorSettings: {    
-                mainPalette: "blues",
-                auxPalette: "reds",
-                colorReadsByMappingQuality: false
-            }
+          trackFile: undefined,
+          trackType: "graph",
+          trackColorSettings: {
+            mainPalette: "blues",
+            auxPalette: "reds",
+            colorReadsByMappingQuality: false,
+          },
         },
         3: {
-            trackFile: undefined,
-            trackType: "graph",
-            trackColorSettings: {    
-                mainPalette: "blues",
-                auxPalette: "reds",
-                colorReadsByMappingQuality: false
-            }
+          trackFile: undefined,
+          trackType: "graph",
+          trackColorSettings: {
+            mainPalette: "blues",
+            auxPalette: "reds",
+            colorReadsByMappingQuality: false,
+          },
         },
-    }),
-    availableTracks: P.json([
-      [{"trackFile": "fileA1.vg", "trackType": "graph"},
-      {"trackFile": "fileA2.gbwt", "trackType": "haplotype"},
-      {"trackFile": "fileB1.gbwt", "trackType": "haplotype"},
-      {"trackFile": "fileB2.gam", "trackType": "read"},
-      {"trackFile": "fileC1.xg", "trackType": "graph"}]
-      ])
-  }}
->
-  {
-    (props, update) => {
-      return <TrackList {...props} 
-        onChange={(newTracks) => {
-          update({tracks: newTracks});
-        }} 
-        onDelete={() => {console.log("track deleted")}}/>
-    }
-  }
-</Demo>)
-
-
+      }),
+      availableTracks: P.json([
+        [
+          { trackFile: "fileA1.vg", trackType: "graph" },
+          { trackFile: "fileA2.gbwt", trackType: "haplotype" },
+          { trackFile: "fileB1.gbwt", trackType: "haplotype" },
+          { trackFile: "fileB2.gam", trackType: "read" },
+          { trackFile: "fileC1.xg", trackType: "graph" },
+        ],
+      ]),
+    }}
+  >
+    {(props, update) => {
+      return (
+        <TrackList
+          {...props}
+          onChange={(newTracks) => {
+            update({ tracks: newTracks });
+          }}
+          onDelete={() => {
+            console.log("track deleted");
+          }}
+        />
+      );
+    }}
+  </Demo>
+);
diff --git a/src/components/TrackList.js b/src/components/TrackList.js
index 6e71f376..95cbcaf9 100644
--- a/src/components/TrackList.js
+++ b/src/components/TrackList.js
@@ -1,12 +1,11 @@
 import PropTypes from "prop-types";
-import {TrackListItem} from './TrackListItem';
-
+import { TrackListItem } from "./TrackListItem";
 
 export const TrackList = ({
   // tracks expects an object mapping an trackID to trackProps, which includes
-      // * trackType: string
-      // * trackFile: file object / undefined
-      // * trackColorSettings: object(aka. colorScheme)
+  // * trackType: string
+  // * trackFile: file object / undefined
+  // * trackColorSettings: object(aka. colorScheme)
   tracks,
   // availableTracks: array of tracks(see types.ts)
   availableTracks,
@@ -16,43 +15,38 @@ export const TrackList = ({
   onDelete,
   handleFileUpload,
 }) => {
-
   function trackItemOnChange(trackID, trackProps) {
-      let newTracks = {...tracks};
-      newTracks[trackID] = trackProps;
-      if (JSON.stringify(newTracks) !== JSON.stringify(tracks)) {
-          onChange(newTracks);
-      }
-
+    let newTracks = { ...tracks };
+    newTracks[trackID] = trackProps;
+    if (JSON.stringify(newTracks) !== JSON.stringify(tracks)) {
+      onChange(newTracks);
+    }
   }
 
-
   function renderTracks() {
-      let trackHTML = [];
-
-      Object.keys(tracks).forEach((trackID, index) => {
-          const trackProps = tracks[trackID]
-          trackHTML.push(          
-              <TrackListItem 
-              trackProps={trackProps}
-              availableTracks={availableTracks}
-              availableColors={availableColors}
-              onChange={trackItemOnChange}
-              onDelete={onDelete}
-              trackID={parseInt(trackID)}
-              key={trackID}
-              handleFileUpload={handleFileUpload}/>
-          );
-      })
-
-      return trackHTML;
+    let trackHTML = [];
+
+    Object.keys(tracks).forEach((trackID, index) => {
+      const trackProps = tracks[trackID];
+      trackHTML.push(
+        <TrackListItem
+          trackProps={trackProps}
+          availableTracks={availableTracks}
+          availableColors={availableColors}
+          onChange={trackItemOnChange}
+          onDelete={onDelete}
+          trackID={parseInt(trackID)}
+          key={trackID}
+          handleFileUpload={handleFileUpload}
+        />
+      );
+    });
+
+    return trackHTML;
   }
 
-  return(<div>
-            {renderTracks()}
-         </div>);
-  
-}
+  return <div>{renderTracks()}</div>;
+};
 
 TrackList.propTypes = {
   tracks: PropTypes.object.isRequired,
@@ -61,7 +55,6 @@ TrackList.propTypes = {
   onChange: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   handleFileUpload: PropTypes.func.isRequired,
-}
-  
+};
 
 export default TrackList;
diff --git a/src/components/TrackList.test.js b/src/components/TrackList.test.js
index ebebcd77..4c284556 100644
--- a/src/components/TrackList.test.js
+++ b/src/components/TrackList.test.js
@@ -1,163 +1,166 @@
-import React from 'react';
-import { render, fireEvent, waitFor }  from '@testing-library/react';
-import {TrackList} from './TrackList';
-import '@testing-library/jest-dom'
-
-
-describe('TrackList', () => {
-    const tracks = {
-        1: {
-            trackFile: undefined,
-            trackType: "graph",
-            trackColorSettings: {    
-                mainPalette: "blues",
-                auxPalette: "reds",
-                colorReadsByMappingQuality: false
-            }
-        },
-        2: {
-            trackFile: undefined,
-            trackType: "graph",
-            trackColorSettings: {    
-                mainPalette: "blues",
-                auxPalette: "reds",
-                colorReadsByMappingQuality: false
-            }
-        },
-        3: {
-            trackFile: undefined,
-            trackType: "graph",
-            trackColorSettings: {    
-                mainPalette: "blues",
-                auxPalette: "reds",
-                colorReadsByMappingQuality: false
-            }
-        },
-    }
-    const availableColors = ["greys", "ygreys", "reds", "plainColors", "lightColors"];
-    const availableTracks = [{"trackFile": "fileA1.vg", "trackType": "graph"},
-                            {"trackFile": "fileA2.gbwt", "trackType": "haplotype"},
-                            {"trackFile": "fileB1.gbwt", "trackType": "haplotype"},
-                            {"trackFile": "fileB2.gam", "trackType": "read"},
-                            {"trackFile": "fileC1.xg", "trackType": "graph"}];
-
-    function rerenderTrackList(rerender, newTracks, fakeOnChange, fakeOnDelete) {
-        rerender(
-            <TrackList
-                tracks={newTracks}
-                availableTracks={availableTracks}
-                availableColors={availableColors}
-                onChange={fakeOnChange}
-                onDelete={fakeOnDelete}
-            />
-        );
-    }
-
-
-    it('should render without errors', async () => {
-        const fakeOnChange = jest.fn();
-        const fakeOnDelete = jest.fn();
-        const { queryByTestId } = render(
-            <TrackList
-                tracks={tracks}
-                availableTracks={availableTracks}
-                availableColors={availableColors}
-                onChange={fakeOnChange}
-                onDelete={fakeOnDelete}
-            />
-        );
-
-        expect(queryByTestId("file-type-select-component1")).toBeTruthy();
-
-        expect(queryByTestId("file-type-select-component2")).toBeTruthy();
-
-        expect(queryByTestId("file-select-component1")).toBeTruthy();
-
-        expect(queryByTestId("settings-button-component1")).toBeTruthy();
-
-        expect(queryByTestId("delete-button-component1")).toBeTruthy();
-        
-    });
-
-    it('should call onChange when a track is changed', async () => {
-        const fakeOnChange = jest.fn();
-        const fakeOnDelete = jest.fn();
-        const { queryByTestId, getByText, rerender } = render(
-            <TrackList
-                tracks={tracks}
-                availableTracks={availableTracks}
-                availableColors={availableColors}
-                onChange={fakeOnChange}
-                onDelete={fakeOnDelete}
-            />
-        );
-
-        // select file type
-        const fileTypeSelectComponent = queryByTestId("file-type-select-component1");
-        fireEvent.keyDown(fileTypeSelectComponent.firstChild, {key: "ArrowDown"});
-        await waitFor(() => getByText("haplotype"));
-        fireEvent.click(getByText("haplotype"));
-
-        expect(fakeOnChange).toHaveBeenCalledTimes(1);
-        let newTracks = JSON.parse(JSON.stringify(tracks));
-        newTracks[1].trackType = "haplotype";
-        rerenderTrackList(rerender, newTracks, fakeOnChange, fakeOnDelete);
-
-        // change file name
-        const fileSelectComponent = queryByTestId('file-select-component1');
-        fireEvent.keyDown(fileSelectComponent.firstChild, {key: "ArrowDown"});
-        await waitFor(() => getByText("fileB1.gbwt"));
-        fireEvent.click(getByText("fileB1.gbwt"));
-
-        expect(fakeOnChange).toHaveBeenCalledTimes(2);
-        newTracks[1].trackFile = "fileB1.gbwt";
-        newTracks[1].trackType = "haplotype";
-        expect(fakeOnChange).toHaveBeenCalledWith(newTracks);
-
-        // rerender file select effect
-        rerenderTrackList(rerender, newTracks, fakeOnChange, fakeOnDelete);
-
-        // change color
-        const settingsButtonComponent = queryByTestId('settings-button-component1');
-        fireEvent.click(settingsButtonComponent);
-        await waitFor(() => getByText("reds"));
-        fireEvent.click(getByText("reds"));
-        fireEvent.click(document);
-
-        expect(fakeOnChange).toHaveBeenCalledTimes(3); 
-
-        newTracks[1].trackColorSettings.mainPalette = "reds";
-        expect(fakeOnChange).toHaveBeenCalledWith(newTracks);
-
-    });
-
-    it('should use a new event handler when passed', async () => {
-        const fakeOnChange1 = jest.fn();
-        const fakeOnChange2 = jest.fn();
-        const fakeOnDelete = jest.fn();
-        const { queryByTestId, getByText, rerender } = render(
-            <TrackList
-                tracks={tracks}
-                availableTracks={availableTracks}
-                availableColors={availableColors}
-                onChange={fakeOnChange1}
-                onDelete={fakeOnDelete}
-            />
-        );
-
-        expect(fakeOnChange1).toHaveBeenCalledTimes(0); 
-
-        rerenderTrackList(rerender, tracks, fakeOnChange2, fakeOnDelete);
-
-
-        const fileSelectComponent = queryByTestId('file-select-component1');
-        fireEvent.keyDown(fileSelectComponent.firstChild, {key: "ArrowDown"});
-        await waitFor(() => getByText("fileA1.vg"));
-        fireEvent.click(getByText("fileA1.vg"));
-
-        expect(fakeOnChange1).toHaveBeenCalledTimes(0); 
-        expect(fakeOnChange2).toHaveBeenCalledTimes(1); 
-
-    });
-
+import React from "react";
+import { render, fireEvent, waitFor } from "@testing-library/react";
+import { TrackList } from "./TrackList";
+import "@testing-library/jest-dom";
+
+describe("TrackList", () => {
+  const tracks = {
+    1: {
+      trackFile: undefined,
+      trackType: "graph",
+      trackColorSettings: {
+        mainPalette: "blues",
+        auxPalette: "reds",
+        colorReadsByMappingQuality: false,
+      },
+    },
+    2: {
+      trackFile: undefined,
+      trackType: "graph",
+      trackColorSettings: {
+        mainPalette: "blues",
+        auxPalette: "reds",
+        colorReadsByMappingQuality: false,
+      },
+    },
+    3: {
+      trackFile: undefined,
+      trackType: "graph",
+      trackColorSettings: {
+        mainPalette: "blues",
+        auxPalette: "reds",
+        colorReadsByMappingQuality: false,
+      },
+    },
+  };
+  const availableColors = [
+    "greys",
+    "ygreys",
+    "reds",
+    "plainColors",
+    "lightColors",
+  ];
+  const availableTracks = [
+    { trackFile: "fileA1.vg", trackType: "graph" },
+    { trackFile: "fileA2.gbwt", trackType: "haplotype" },
+    { trackFile: "fileB1.gbwt", trackType: "haplotype" },
+    { trackFile: "fileB2.gam", trackType: "read" },
+    { trackFile: "fileC1.xg", trackType: "graph" },
+  ];
+
+  function rerenderTrackList(rerender, newTracks, fakeOnChange, fakeOnDelete) {
+    rerender(
+      <TrackList
+        tracks={newTracks}
+        availableTracks={availableTracks}
+        availableColors={availableColors}
+        onChange={fakeOnChange}
+        onDelete={fakeOnDelete}
+      />
+    );
+  }
+
+  it("should render without errors", async () => {
+    const fakeOnChange = jest.fn();
+    const fakeOnDelete = jest.fn();
+    const { queryByTestId } = render(
+      <TrackList
+        tracks={tracks}
+        availableTracks={availableTracks}
+        availableColors={availableColors}
+        onChange={fakeOnChange}
+        onDelete={fakeOnDelete}
+      />
+    );
+
+    expect(queryByTestId("file-type-select-component1")).toBeTruthy();
+
+    expect(queryByTestId("file-type-select-component2")).toBeTruthy();
+
+    expect(queryByTestId("file-select-component1")).toBeTruthy();
+
+    expect(queryByTestId("settings-button-component1")).toBeTruthy();
+
+    expect(queryByTestId("delete-button-component1")).toBeTruthy();
+  });
+
+  it("should call onChange when a track is changed", async () => {
+    const fakeOnChange = jest.fn();
+    const fakeOnDelete = jest.fn();
+    const { queryByTestId, getByText, rerender } = render(
+      <TrackList
+        tracks={tracks}
+        availableTracks={availableTracks}
+        availableColors={availableColors}
+        onChange={fakeOnChange}
+        onDelete={fakeOnDelete}
+      />
+    );
+
+    // select file type
+    const fileTypeSelectComponent = queryByTestId(
+      "file-type-select-component1"
+    );
+    fireEvent.keyDown(fileTypeSelectComponent.firstChild, { key: "ArrowDown" });
+    await waitFor(() => getByText("haplotype"));
+    fireEvent.click(getByText("haplotype"));
+
+    expect(fakeOnChange).toHaveBeenCalledTimes(1);
+    let newTracks = JSON.parse(JSON.stringify(tracks));
+    newTracks[1].trackType = "haplotype";
+    rerenderTrackList(rerender, newTracks, fakeOnChange, fakeOnDelete);
+
+    // change file name
+    const fileSelectComponent = queryByTestId("file-select-component1");
+    fireEvent.keyDown(fileSelectComponent.firstChild, { key: "ArrowDown" });
+    await waitFor(() => getByText("fileB1.gbwt"));
+    fireEvent.click(getByText("fileB1.gbwt"));
+
+    expect(fakeOnChange).toHaveBeenCalledTimes(2);
+    newTracks[1].trackFile = "fileB1.gbwt";
+    newTracks[1].trackType = "haplotype";
+    expect(fakeOnChange).toHaveBeenCalledWith(newTracks);
+
+    // rerender file select effect
+    rerenderTrackList(rerender, newTracks, fakeOnChange, fakeOnDelete);
+
+    // change color
+    const settingsButtonComponent = queryByTestId("settings-button-component1");
+    fireEvent.click(settingsButtonComponent);
+    await waitFor(() => getByText("reds"));
+    fireEvent.click(getByText("reds"));
+    fireEvent.click(document);
+
+    expect(fakeOnChange).toHaveBeenCalledTimes(3);
+
+    newTracks[1].trackColorSettings.mainPalette = "reds";
+    expect(fakeOnChange).toHaveBeenCalledWith(newTracks);
+  });
+
+  it("should use a new event handler when passed", async () => {
+    const fakeOnChange1 = jest.fn();
+    const fakeOnChange2 = jest.fn();
+    const fakeOnDelete = jest.fn();
+    const { queryByTestId, getByText, rerender } = render(
+      <TrackList
+        tracks={tracks}
+        availableTracks={availableTracks}
+        availableColors={availableColors}
+        onChange={fakeOnChange1}
+        onDelete={fakeOnDelete}
+      />
+    );
+
+    expect(fakeOnChange1).toHaveBeenCalledTimes(0);
+
+    rerenderTrackList(rerender, tracks, fakeOnChange2, fakeOnDelete);
+
+    const fileSelectComponent = queryByTestId("file-select-component1");
+    fireEvent.keyDown(fileSelectComponent.firstChild, { key: "ArrowDown" });
+    await waitFor(() => getByText("fileA1.vg"));
+    fireEvent.click(getByText("fileA1.vg"));
+
+    expect(fakeOnChange1).toHaveBeenCalledTimes(0);
+    expect(fakeOnChange2).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/src/components/TrackListItem.demo.js b/src/components/TrackListItem.demo.js
index ba81e6e7..b648ae04 100644
--- a/src/components/TrackListItem.demo.js
+++ b/src/components/TrackListItem.demo.js
@@ -1,37 +1,43 @@
-import Demo, {props as P} from 'react-demo'
+import Demo, { props as P } from "react-demo";
 // See https://github.com/rpominov/react-demo for how to make a demo
 
 import React from "react";
 
 import TrackListItem from "./TrackListItem";
 
-export default (<Demo
-  props={{
-    trackProps: P.json({
-      trackFile: undefined,
-      trackType: "graph",
-      trackColorSettings: {    
-        mainPalette: "blues",
-        auxPalette: "reds",
-        colorReadsByMappingQuality: false
-      }
-    }),
-    availableTracks: P.json([{"trackFile": "fileA1.vg", "trackType": "graph"},
-                            {"trackFile": "fileA2.gbwt", "trackType": "haplotype"},
-                            {"trackFile": "fileB1.gbwt", "trackType": "haplotype"},
-                            {"trackFile": "fileB2.gam", "trackType": "read"},
-                            {"trackFile": "fileC1.xg", "trackType": "graph"}]),
-  }}
->
-  {
-    (props, update) => {
-      return <TrackListItem {...props} 
-        onChange={(trackID, newTrackProps) => {
-          update({trackProps: newTrackProps});
-        }} 
-        onDelete={() => {console.log("track deleted")}}/>
-    }
-  }
-</Demo>)
-
-
+export default (
+  <Demo
+    props={{
+      trackProps: P.json({
+        trackFile: undefined,
+        trackType: "graph",
+        trackColorSettings: {
+          mainPalette: "blues",
+          auxPalette: "reds",
+          colorReadsByMappingQuality: false,
+        },
+      }),
+      availableTracks: P.json([
+        { trackFile: "fileA1.vg", trackType: "graph" },
+        { trackFile: "fileA2.gbwt", trackType: "haplotype" },
+        { trackFile: "fileB1.gbwt", trackType: "haplotype" },
+        { trackFile: "fileB2.gam", trackType: "read" },
+        { trackFile: "fileC1.xg", trackType: "graph" },
+      ]),
+    }}
+  >
+    {(props, update) => {
+      return (
+        <TrackListItem
+          {...props}
+          onChange={(trackID, newTrackProps) => {
+            update({ trackProps: newTrackProps });
+          }}
+          onDelete={() => {
+            console.log("track deleted");
+          }}
+        />
+      );
+    }}
+  </Demo>
+);
diff --git a/src/components/TrackListItem.js b/src/components/TrackListItem.js
index 31410b06..d94f4dad 100644
--- a/src/components/TrackListItem.js
+++ b/src/components/TrackListItem.js
@@ -1,145 +1,147 @@
 import PropTypes from "prop-types";
-import {
-    Container,
-    Row,
-    Col
-  } from "reactstrap";
-import {TrackFilePicker} from './TrackFilePicker';
-import {TrackTypeDropdown} from './TrackTypeDropdown';
-import {TrackDeleteButton} from './TrackDeleteButton';
-import {TrackSettingsButton} from './TrackSettingsButton';
-import React, { useEffect, useState} from 'react';
-import {defaultTrackColors} from "../common.mjs"
+import { Container, Row, Col } from "reactstrap";
+import { TrackFilePicker } from "./TrackFilePicker";
+import { TrackTypeDropdown } from "./TrackTypeDropdown";
+import { TrackDeleteButton } from "./TrackDeleteButton";
+import { TrackSettingsButton } from "./TrackSettingsButton";
+import React, { useEffect, useState } from "react";
+import { defaultTrackColors } from "../common.mjs";
 import "../config-client.js";
 import { config } from "../config-global.mjs";
 
-
 export const TrackListItem = ({
-    // trackProps expects an object with:
-    // * trackType: string
-    // * trackFile: file object / undefined
-    // * trackColorSettings: object(aka. colorScheme)
-    trackProps,
-    // availableTracks: array of tracks(see types.ts)
-    availableTracks,
-    // availableColors: array of ColorPalettes
-    availableColors,
-    onChange, // expects a new trackProps object
-    onDelete,
-    trackID,
-    handleFileUpload,
-  }) => {
-    // propChanges only store new trackType, trackFile, and trackColorSettings changes
-    // reset after onChange is called
-    const [propChanges, setPropChanges] = useState({});
+  // trackProps expects an object with:
+  // * trackType: string
+  // * trackFile: file object / undefined
+  // * trackColorSettings: object(aka. colorScheme)
+  trackProps,
+  // availableTracks: array of tracks(see types.ts)
+  availableTracks,
+  // availableColors: array of ColorPalettes
+  availableColors,
+  onChange, // expects a new trackProps object
+  onDelete,
+  trackID,
+  handleFileUpload,
+}) => {
+  // propChanges only store new trackType, trackFile, and trackColorSettings changes
+  // reset after onChange is called
+  const [propChanges, setPropChanges] = useState({});
 
-    const [pickerType, setPickerType] = useState("mounted");
+  const [pickerType, setPickerType] = useState("mounted");
 
-  
-    const trackTypeOnChange = async(newTrackType) => {
-      // wait until file change to call onChange
-      let newPropChanges = {...propChanges};
-      newPropChanges["trackType"] = newTrackType;
-      newPropChanges["trackFile"] = undefined;
-      newPropChanges["trackColorSettings"] = defaultTrackColors(newTrackType);
-      setPropChanges(newPropChanges);
-    }
+  const trackTypeOnChange = async (newTrackType) => {
+    // wait until file change to call onChange
+    let newPropChanges = { ...propChanges };
+    newPropChanges["trackType"] = newTrackType;
+    newPropChanges["trackFile"] = undefined;
+    newPropChanges["trackColorSettings"] = defaultTrackColors(newTrackType);
+    setPropChanges(newPropChanges);
+  };
 
-    const trackFileOnChange = async(newFile) => {
-      let newPropChanges = {...propChanges};
-      newPropChanges["trackFile"] = newFile;
-      setPropChanges(newPropChanges);
-    }
+  const trackFileOnChange = async (newFile) => {
+    let newPropChanges = { ...propChanges };
+    newPropChanges["trackFile"] = newFile;
+    setPropChanges(newPropChanges);
+  };
 
-    const trackSettingsOnChange = async(key, value) => {
-      let newTrackColorSettings = {...trackProps["trackColorSettings"]};
-      newTrackColorSettings[key] = value;
-      let newPropChanges = {...propChanges};
-      newPropChanges["trackColorSettings"] = newTrackColorSettings;
-      setPropChanges(newPropChanges);
-    }
+  const trackSettingsOnChange = async (key, value) => {
+    let newTrackColorSettings = { ...trackProps["trackColorSettings"] };
+    newTrackColorSettings[key] = value;
+    let newPropChanges = { ...propChanges };
+    newPropChanges["trackColorSettings"] = newTrackColorSettings;
+    setPropChanges(newPropChanges);
+  };
 
-    // useEffect hook to tell react to call onchange after state changes
-    // setPropChanges are async, useEffect acts as a callback to setPropChanges
-    // https://stackoverflow.com/questions/54954091/how-to-use-callback-with-usestate-hook-in-react/56394177#56394177
-    useEffect(() => {
-      // get an updated version of trackProps
-      let newTrackProps = {...trackProps};
-      for (const key in propChanges) {
-        newTrackProps[key] = propChanges[key];
-      }
-      
-      // push it if changes are made
-      if (JSON.stringify(trackProps) !== JSON.stringify(newTrackProps)) {
-        onChange(trackID, newTrackProps);
-        setPropChanges({});
-      }
-    }, [propChanges, onChange, trackProps, trackID]);
+  // useEffect hook to tell react to call onchange after state changes
+  // setPropChanges are async, useEffect acts as a callback to setPropChanges
+  // https://stackoverflow.com/questions/54954091/how-to-use-callback-with-usestate-hook-in-react/56394177#56394177
+  useEffect(() => {
+    // get an updated version of trackProps
+    let newTrackProps = { ...trackProps };
+    for (const key in propChanges) {
+      newTrackProps[key] = propChanges[key];
+    }
 
+    // push it if changes are made
+    if (JSON.stringify(trackProps) !== JSON.stringify(newTrackProps)) {
+      onChange(trackID, newTrackProps);
+      setPropChanges({});
+    }
+  }, [propChanges, onChange, trackProps, trackID]);
 
+  // displayed elements uses propChanges(local state) first, then uses trackProps
+  // Isn't just a || because propChanges can set the trackFile to be undefined
+  const displayedFile =
+    "trackFile" in propChanges
+      ? propChanges["trackFile"]
+      : trackProps["trackFile"];
+  console.log(displayedFile);
+  return (
+    <Container
+      key={trackID}
+      style={{ width: "900px", marginLeft: 0, marginRight: 15 }}
+    >
+      <Row className="g-0">
+        <Col className="tracklist-dropdown">
+          <TrackTypeDropdown
+            value={propChanges["trackType"] || trackProps["trackType"]}
+            onChange={trackTypeOnChange}
+            testID={"file-type-select-component".concat(trackID)}
+            options={["graph", "haplotype", "read"]}
+          />
+        </Col>
+        <Col className="tracklist-dropdown">
+          <TrackTypeDropdown
+            value={pickerType}
+            onChange={setPickerType}
+            testID={"picker-type-select-component".concat(trackID)}
+            options={config.pickerTypeOptions}
+          />
+        </Col>
 
-    // displayed elements uses propChanges(local state) first, then uses trackProps
-    // Isn't just a || because propChanges can set the trackFile to be undefined
-    const displayedFile = "trackFile" in propChanges ? propChanges["trackFile"] : trackProps["trackFile"];
-    console.log(displayedFile);
-    return (
-      <Container key={trackID} style={{ width: "900px", marginLeft: 0, marginRight: 15 }}>
-        <Row className="g-0">
-          <Col className="tracklist-dropdown">
-            <TrackTypeDropdown value={propChanges["trackType"] || trackProps["trackType"]} 
-                              onChange={trackTypeOnChange}
-                              testID={"file-type-select-component".concat(trackID)}
-                              options={["graph", "haplotype", "read"]}
-                              />
-          </Col>
-          <Col className="tracklist-dropdown">
-            <TrackTypeDropdown
-              value={pickerType}
-              onChange={setPickerType}
-              testID={"picker-type-select-component".concat(trackID)}
-              options={config.pickerTypeOptions}
-            />
-          </Col>
+        <Col className="tracklist-dropdown">
+          <TrackFilePicker
+            tracks={availableTracks}
+            fileType={propChanges["trackType"] || trackProps["trackType"]}
+            value={displayedFile}
+            pickerType={pickerType}
+            handleInputChange={trackFileOnChange}
+            testID={"file-select-component".concat(trackID)}
+            handleFileUpload={handleFileUpload}
+          />
+        </Col>
+        <Col className="tracklist-button" md="1">
+          <TrackSettingsButton
+            fileType={propChanges["trackType"] || trackProps["trackType"]}
+            trackColorSettings={
+              propChanges["trackColorSettings"] ||
+              trackProps["trackColorSettings"]
+            }
+            setTrackColorSetting={trackSettingsOnChange}
+            availableColors={availableColors}
+            testID={"settings-button-component".concat(trackID)}
+          />
+          <TrackDeleteButton
+            onClick={() => {
+              onDelete(trackID);
+            }}
+            testID={"delete-button-component".concat(trackID)}
+          />
+        </Col>
+      </Row>
+    </Container>
+  );
+};
 
-          <Col className="tracklist-dropdown">
-            <TrackFilePicker tracks={availableTracks} 
-                            fileType={propChanges["trackType"] || trackProps["trackType"]} 
-                            value={displayedFile}
-                            pickerType={pickerType} 
-                            handleInputChange={trackFileOnChange}
-                            testID={"file-select-component".concat(trackID)}
-                            handleFileUpload={handleFileUpload}
-                            />
-          </Col>
-          <Col className="tracklist-button" md="1">
-            <TrackSettingsButton fileType={propChanges["trackType"] || trackProps["trackType"]}
-                                trackColorSettings={propChanges["trackColorSettings"] || trackProps["trackColorSettings"]}
-                                setTrackColorSetting={trackSettingsOnChange}
-                                availableColors={availableColors}
-                                testID={"settings-button-component".concat(trackID)}
-                                />
-            <TrackDeleteButton onClick={() => {onDelete(trackID)}}
-                               testID={"delete-button-component".concat(trackID)}
-                              />
-          </Col>
+TrackListItem.propTypes = {
+  trackProps: PropTypes.object.isRequired,
+  availableTracks: PropTypes.array.isRequired,
+  availableColors: PropTypes.array,
+  onChange: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  trackID: PropTypes.number.isRequired,
+  handleFileUpload: PropTypes.func.isRequired,
+};
 
-        </Row>
-      </Container>
-    );
-    
-  }
-  
-  TrackListItem.propTypes = {
-    trackProps: PropTypes.object.isRequired,
-    availableTracks: PropTypes.array.isRequired,
-    availableColors: PropTypes.array,
-    onChange: PropTypes.func.isRequired,
-    onDelete: PropTypes.func.isRequired,
-    trackID: PropTypes.number.isRequired,
-    handleFileUpload: PropTypes.func.isRequired,
-  }
-    
-  
-  export default TrackListItem;
-  
-  
+export default TrackListItem;
diff --git a/src/components/TrackListItem.test.js b/src/components/TrackListItem.test.js
index c388d251..6150a51a 100644
--- a/src/components/TrackListItem.test.js
+++ b/src/components/TrackListItem.test.js
@@ -1,159 +1,164 @@
-import React from 'react';
-import { render, fireEvent, waitFor }  from '@testing-library/react';
-import {TrackListItem} from './TrackListItem';
-import '@testing-library/jest-dom'
-
-describe('TrackListItem', () => {
-    const trackFile = undefined;
-    const trackType = "graph";
-    const availableColors = ["greys", "ygreys", "reds", "plainColors", "lightColors"];
-    const availableTracks = [{"trackFile": "fileA1.vg", "trackType": "graph"},
-                            {"trackFile": "fileA2.gbwt", "trackType": "haplotype"},
-                            {"trackFile": "fileB1.gbwt", "trackType": "haplotype"},
-                            {"trackFile": "fileB2.gam", "trackType": "read"},
-                            {"trackFile": "fileC1.xg", "trackType": "graph"}];
-    const trackColorSettings = {    
-        mainPalette: "blues",
-        auxPalette: "reds",
-        colorReadsByMappingQuality: false
-    };
-
-
-    it('should render without errors', async () => {
-        const fakeOnChange = jest.fn();
-        const fakeOnDelete = jest.fn();
-        const { getByText, getByRole } = render(
-            <TrackListItem 
-              trackProps={{
-                trackFile: trackFile,
-                trackType: trackType,
-                trackColorSettings: trackColorSettings
-              }}
-              availableColors = {availableColors}
-              availableTracks = {availableTracks}
-              onChange = {fakeOnChange}
-              onDelete = {fakeOnDelete}
-              trackID = {1}
-             />
-        );
-
-        let placeholder = getByRole("button", {name: /Settings/i});
-        expect(placeholder).toBeTruthy();
-
-        placeholder = await getByText("graph");
-        expect(placeholder).toBeTruthy();
-
-        placeholder = await getByText("Select a file");
-        expect(placeholder).toBeTruthy();
-    });
-
-    it('should call onChange correctly', async () => {
-        const fakeOnChange = jest.fn();
-        const fakeOnDelete = jest.fn();
-        
-        const { getByText, queryByTestId, rerender } = render(
-            <TrackListItem 
-            trackProps={{
-                trackFile: trackFile,
-                trackType: trackType,
-                trackColorSettings: trackColorSettings
-              }}
-              availableColors = {availableColors}
-              availableTracks = {availableTracks}
-              onChange = {fakeOnChange}
-              onDelete = {fakeOnDelete}
-              trackID = {1}
-             />
-        );
-
-        expect(fakeOnChange).toHaveBeenCalledTimes(0);
-
-        // change track type
-        const fileTypeSelectComponent = queryByTestId("file-type-select-component1");
-        fireEvent.keyDown(fileTypeSelectComponent.firstChild, {key: "ArrowDown"});
-        await waitFor(() => getByText("haplotype"));
-        fireEvent.click(getByText("haplotype"));
-
-        expect(fakeOnChange).toHaveBeenCalledTimes(1);
-
-        // simulate onchange rerendering component
-        rerender(
-            <TrackListItem 
-            trackProps={{
-                trackFile: trackFile,
-                trackType: "haplotype",
-                trackColorSettings: trackColorSettings
-              }}
-              availableColors = {availableColors}
-              availableTracks = {availableTracks}
-              onChange = {fakeOnChange}
-              onDelete = {fakeOnDelete}
-              trackID = {1}
-             />
-        );
-
-        // change file name
-        const fileSelectComponent = queryByTestId('file-select-component1');
-        fireEvent.keyDown(fileSelectComponent.firstChild, {key: "ArrowDown"});
-        await waitFor(() => getByText("fileB1.gbwt"));
-        fireEvent.click(getByText("fileB1.gbwt"));
-
-        expect(fakeOnChange).toHaveBeenCalledTimes(2);
-        expect(fakeOnChange).toHaveBeenCalledWith(1, {
-            trackFile: "fileB1.gbwt",
-            trackType: "haplotype",
-            trackColorSettings: trackColorSettings
-        });
-
-        rerender(
-            <TrackListItem 
-            trackProps={{
-                trackFile: "fileB1.gbwt",
-                trackType: "haplotype",
-                trackColorSettings: trackColorSettings
-              }}
-              availableColors = {availableColors}
-              availableTracks = {availableTracks}
-              onChange = {fakeOnChange}
-              onDelete = {fakeOnDelete}
-              trackID = {1}
-             />
-        );
-
-
-        // change color settings
-        fireEvent.click(queryByTestId('settings-button-component1'));
-        await waitFor(() => getByText("reds"));
-        fireEvent.click(getByText("reds"));
-        fireEvent.click(document);
-
-        expect(fakeOnChange).toHaveBeenCalledTimes(3); 
-
-
-    });
-    
-    it('should call onDelete correctly', async () => {
-        const fakeOnChange = jest.fn();
-        const fakeOnDelete = jest.fn();
-        const { queryByTestId } = render(
-            <TrackListItem 
-            trackProps={{
-                trackFile: trackFile,
-                trackType: trackType,
-                trackColorSettings: trackColorSettings
-              }}
-              availableColors = {availableColors}
-              availableTracks = {availableTracks}
-              onChange = {fakeOnChange}
-              onDelete = {fakeOnDelete}
-              trackID = {1}
-             />
-        );
-
-        expect(fakeOnDelete).toHaveBeenCalledTimes(0); 
-
-        fireEvent.click(queryByTestId("delete-button-component1"));
-        expect(fakeOnDelete).toHaveBeenCalledTimes(1); 
+import React from "react";
+import { render, fireEvent, waitFor } from "@testing-library/react";
+import { TrackListItem } from "./TrackListItem";
+import "@testing-library/jest-dom";
+
+describe("TrackListItem", () => {
+  const trackFile = undefined;
+  const trackType = "graph";
+  const availableColors = [
+    "greys",
+    "ygreys",
+    "reds",
+    "plainColors",
+    "lightColors",
+  ];
+  const availableTracks = [
+    { trackFile: "fileA1.vg", trackType: "graph" },
+    { trackFile: "fileA2.gbwt", trackType: "haplotype" },
+    { trackFile: "fileB1.gbwt", trackType: "haplotype" },
+    { trackFile: "fileB2.gam", trackType: "read" },
+    { trackFile: "fileC1.xg", trackType: "graph" },
+  ];
+  const trackColorSettings = {
+    mainPalette: "blues",
+    auxPalette: "reds",
+    colorReadsByMappingQuality: false,
+  };
+
+  it("should render without errors", async () => {
+    const fakeOnChange = jest.fn();
+    const fakeOnDelete = jest.fn();
+    const { getByText, getByRole } = render(
+      <TrackListItem
+        trackProps={{
+          trackFile: trackFile,
+          trackType: trackType,
+          trackColorSettings: trackColorSettings,
+        }}
+        availableColors={availableColors}
+        availableTracks={availableTracks}
+        onChange={fakeOnChange}
+        onDelete={fakeOnDelete}
+        trackID={1}
+      />
+    );
+
+    let placeholder = getByRole("button", { name: /Settings/i });
+    expect(placeholder).toBeTruthy();
+
+    placeholder = await getByText("graph");
+    expect(placeholder).toBeTruthy();
+
+    placeholder = await getByText("Select a file");
+    expect(placeholder).toBeTruthy();
+  });
+
+  it("should call onChange correctly", async () => {
+    const fakeOnChange = jest.fn();
+    const fakeOnDelete = jest.fn();
+
+    const { getByText, queryByTestId, rerender } = render(
+      <TrackListItem
+        trackProps={{
+          trackFile: trackFile,
+          trackType: trackType,
+          trackColorSettings: trackColorSettings,
+        }}
+        availableColors={availableColors}
+        availableTracks={availableTracks}
+        onChange={fakeOnChange}
+        onDelete={fakeOnDelete}
+        trackID={1}
+      />
+    );
+
+    expect(fakeOnChange).toHaveBeenCalledTimes(0);
+
+    // change track type
+    const fileTypeSelectComponent = queryByTestId(
+      "file-type-select-component1"
+    );
+    fireEvent.keyDown(fileTypeSelectComponent.firstChild, { key: "ArrowDown" });
+    await waitFor(() => getByText("haplotype"));
+    fireEvent.click(getByText("haplotype"));
+
+    expect(fakeOnChange).toHaveBeenCalledTimes(1);
+
+    // simulate onchange rerendering component
+    rerender(
+      <TrackListItem
+        trackProps={{
+          trackFile: trackFile,
+          trackType: "haplotype",
+          trackColorSettings: trackColorSettings,
+        }}
+        availableColors={availableColors}
+        availableTracks={availableTracks}
+        onChange={fakeOnChange}
+        onDelete={fakeOnDelete}
+        trackID={1}
+      />
+    );
+
+    // change file name
+    const fileSelectComponent = queryByTestId("file-select-component1");
+    fireEvent.keyDown(fileSelectComponent.firstChild, { key: "ArrowDown" });
+    await waitFor(() => getByText("fileB1.gbwt"));
+    fireEvent.click(getByText("fileB1.gbwt"));
+
+    expect(fakeOnChange).toHaveBeenCalledTimes(2);
+    expect(fakeOnChange).toHaveBeenCalledWith(1, {
+      trackFile: "fileB1.gbwt",
+      trackType: "haplotype",
+      trackColorSettings: trackColorSettings,
     });
 
+    rerender(
+      <TrackListItem
+        trackProps={{
+          trackFile: "fileB1.gbwt",
+          trackType: "haplotype",
+          trackColorSettings: trackColorSettings,
+        }}
+        availableColors={availableColors}
+        availableTracks={availableTracks}
+        onChange={fakeOnChange}
+        onDelete={fakeOnDelete}
+        trackID={1}
+      />
+    );
+
+    // change color settings
+    fireEvent.click(queryByTestId("settings-button-component1"));
+    await waitFor(() => getByText("reds"));
+    fireEvent.click(getByText("reds"));
+    fireEvent.click(document);
+
+    expect(fakeOnChange).toHaveBeenCalledTimes(3);
+  });
+
+  it("should call onDelete correctly", async () => {
+    const fakeOnChange = jest.fn();
+    const fakeOnDelete = jest.fn();
+    const { queryByTestId } = render(
+      <TrackListItem
+        trackProps={{
+          trackFile: trackFile,
+          trackType: trackType,
+          trackColorSettings: trackColorSettings,
+        }}
+        availableColors={availableColors}
+        availableTracks={availableTracks}
+        onChange={fakeOnChange}
+        onDelete={fakeOnDelete}
+        trackID={1}
+      />
+    );
+
+    expect(fakeOnDelete).toHaveBeenCalledTimes(0);
+
+    fireEvent.click(queryByTestId("delete-button-component1"));
+    expect(fakeOnDelete).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/src/components/TrackPicker.demo.js b/src/components/TrackPicker.demo.js
index 8325827c..2f4488c1 100644
--- a/src/components/TrackPicker.demo.js
+++ b/src/components/TrackPicker.demo.js
@@ -1,4 +1,4 @@
-import Demo, {props as P} from 'react-demo'
+import Demo, { props as P } from "react-demo";
 // See https://github.com/rpominov/react-demo for how to make a demo
 
 import React from "react";
@@ -6,29 +6,32 @@ import "../config-client.js";
 import { config } from "../config-global.mjs";
 import TrackPicker from "./TrackPicker";
 
-export default (<Demo
-  props={{
-    tracks:P.json({
+export default (
+  <Demo
+    props={{
+      tracks: P.json({
         1: config.defaultTrackProps,
         2: config.defaultTrackProps,
         3: config.defaultTrackProps,
-    }),
-    availableTracks: P.json([{"trackFile": "fileA1.vg", "trackType": "graph"},
-                            {"trackFile": "fileA2.gbwt", "trackType": "haplotype"},
-                            {"trackFile": "fileB1.gbwt", "trackType": "haplotype"},
-                            {"trackFile": "fileB2.gam", "trackType": "read"},
-                            {"trackFile": "fileC1.xg", "trackType": "graph"}])
-  }}
->
-  {
-    (props, update) => {
-      return <TrackPicker {...props} 
-        onChange={(newTracks) => {
-          update({tracks: newTracks});
-        }} 
+      }),
+      availableTracks: P.json([
+        { trackFile: "fileA1.vg", trackType: "graph" },
+        { trackFile: "fileA2.gbwt", trackType: "haplotype" },
+        { trackFile: "fileB1.gbwt", trackType: "haplotype" },
+        { trackFile: "fileB2.gam", trackType: "read" },
+        { trackFile: "fileC1.xg", trackType: "graph" },
+      ]),
+    }}
+  >
+    {(props, update) => {
+      return (
+        <TrackPicker
+          {...props}
+          onChange={(newTracks) => {
+            update({ tracks: newTracks });
+          }}
         />
-    }
-  }
-</Demo>)
-
-
+      );
+    }}
+  </Demo>
+);
diff --git a/src/components/TrackPicker.js b/src/components/TrackPicker.js
index 96e119f7..1f07a25f 100644
--- a/src/components/TrackPicker.js
+++ b/src/components/TrackPicker.js
@@ -1,56 +1,66 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import TrackPickerDisplay from "./TrackPickerDisplay.js";
-import { Button } from 'reactstrap'
+import { Button } from "reactstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faList } from '@fortawesome/free-solid-svg-icons';
-import PopupDialog from './PopupDialog.js';
+import { faList } from "@fortawesome/free-solid-svg-icons";
+import PopupDialog from "./PopupDialog.js";
 import "../config-client.js";
 import { config } from "../config-global.mjs";
 
 export const TrackPicker = ({
-    tracks, // expects a trackList, same as trackListDisplay
-    availableTracks,
-    availableColors,
-    onChange,
-    handleFileUpload,
+  tracks, // expects a trackList, same as trackListDisplay
+  availableTracks,
+  availableColors,
+  onChange,
+  handleFileUpload,
 }) => {
-    // based off of https://react-popup.elazizi.com/controlled-popup/#using-open-prop
-    const [open, setOpen] = useState(false);
-    const close = () => setOpen(false);
+  // based off of https://react-popup.elazizi.com/controlled-popup/#using-open-prop
+  const [open, setOpen] = useState(false);
+  const close = () => setOpen(false);
 
-    return(
-      <div>
-        
-        <Button aria-label="TrackPicker" data-testid={"TrackPickerButton"} onClick={() => setOpen(!open)}><FontAwesomeIcon icon={faList} /> Configure Tracks</Button>
-        {
-          // Need to set width to null because the default fixed width is too small for the track lits items.
-        }
-        <PopupDialog open={open} close={close} closeOnDocumentClick={false} width={null} testID="TrackPicker">
-          <TrackPickerDisplay
-              tracks={tracks}
-              availableTracks={availableTracks}
-              availableColors={availableColors}
-              onChange={onChange}
-              handleFileUpload={handleFileUpload}
-          />
-        </PopupDialog>
-      </div>
-    )
-}
+  return (
+    <div>
+      <Button
+        aria-label="TrackPicker"
+        data-testid={"TrackPickerButton"}
+        onClick={() => setOpen(!open)}
+      >
+        <FontAwesomeIcon icon={faList} /> Configure Tracks
+      </Button>
+      {
+        // Need to set width to null because the default fixed width is too small for the track lits items.
+      }
+      <PopupDialog
+        open={open}
+        close={close}
+        closeOnDocumentClick={false}
+        width={null}
+        testID="TrackPicker"
+      >
+        <TrackPickerDisplay
+          tracks={tracks}
+          availableTracks={availableTracks}
+          availableColors={availableColors}
+          onChange={onChange}
+          handleFileUpload={handleFileUpload}
+        />
+      </PopupDialog>
+    </div>
+  );
+};
 
 TrackPicker.propTypes = {
-    tracks: PropTypes.object.isRequired,
-    availableTracks: PropTypes.array.isRequired,
-    availableColors: PropTypes.array,
-    onChange: PropTypes.func,
-    handleFileUpload: PropTypes.func,
-}
+  tracks: PropTypes.object.isRequired,
+  availableTracks: PropTypes.array.isRequired,
+  availableColors: PropTypes.array,
+  onChange: PropTypes.func,
+  handleFileUpload: PropTypes.func,
+};
 
 TrackPicker.defaultProps = {
-    tracks: {1: config.defaultTrackProps},
-    onChange: () => {}
-}
-
+  tracks: { 1: config.defaultTrackProps },
+  onChange: () => {},
+};
 
 export default TrackPicker;
diff --git a/src/components/TrackPicker.test.js b/src/components/TrackPicker.test.js
index be1ef9a4..839ee1da 100644
--- a/src/components/TrackPicker.test.js
+++ b/src/components/TrackPicker.test.js
@@ -1,205 +1,218 @@
-import React from 'react';
-import { render, fireEvent, waitFor }  from '@testing-library/react';
-import {TrackPicker} from './TrackPicker';
-import '@testing-library/jest-dom'
+import React from "react";
+import { render, fireEvent, waitFor } from "@testing-library/react";
+import { TrackPicker } from "./TrackPicker";
+import "@testing-library/jest-dom";
 import "../config-client.js";
 import { config } from "../config-global.mjs";
-import {defaultTrackColors} from "../common.mjs";
-
-
-describe('TrackPicker', () => {
-    const tracks = {
-        1: config.defaultTrackProps,
-        2: config.defaultTrackProps,
-        3: config.defaultTrackProps,
-    }
-    const availableColors = ["greys", "ygreys", "reds", "plainColors", "lightColors"];
-    const availableTracks = [{"trackFile": "fileA1.vg", "trackType": "graph"},
-                            {"trackFile": "fileA2.gbwt", "trackType": "haplotype"},
-                            {"trackFile": "fileB1.gbwt", "trackType": "haplotype"},
-                            {"trackFile": "fileB2.gam", "trackType": "read"},
-                            {"trackFile": "fileC1.xg", "trackType": "graph"}];
-
-    it('should render without errors', async () => {
-        const fakeOnChange = jest.fn();
-        const { queryByTestId } = render(
-            <TrackPicker
-                tracks={tracks}
-                availableTracks={availableTracks}
-                availableColors={availableColors}
-                onChange={fakeOnChange}
-            />
-        );
-
-        const trackPickerButton = queryByTestId("TrackPickerButton");
-
-        expect(trackPickerButton).toBeTruthy();
-
-        fireEvent.click(trackPickerButton);
-
-        expect(queryByTestId("file-type-select-component1")).toBeTruthy();
-
-        expect(queryByTestId("file-type-select-component2")).toBeTruthy();
-
-        expect(queryByTestId("file-select-component1")).toBeTruthy();
-
-        expect(queryByTestId("settings-button-component1")).toBeTruthy();
-
-        expect(queryByTestId("delete-button-component1")).toBeTruthy();
-
-        expect(queryByTestId("track-add-button-component")).toBeTruthy();
+import { defaultTrackColors } from "../common.mjs";
+
+describe("TrackPicker", () => {
+  const tracks = {
+    1: config.defaultTrackProps,
+    2: config.defaultTrackProps,
+    3: config.defaultTrackProps,
+  };
+  const availableColors = [
+    "greys",
+    "ygreys",
+    "reds",
+    "plainColors",
+    "lightColors",
+  ];
+  const availableTracks = [
+    { trackFile: "fileA1.vg", trackType: "graph" },
+    { trackFile: "fileA2.gbwt", trackType: "haplotype" },
+    { trackFile: "fileB1.gbwt", trackType: "haplotype" },
+    { trackFile: "fileB2.gam", trackType: "read" },
+    { trackFile: "fileC1.xg", trackType: "graph" },
+  ];
+
+  it("should render without errors", async () => {
+    const fakeOnChange = jest.fn();
+    const { queryByTestId } = render(
+      <TrackPicker
+        tracks={tracks}
+        availableTracks={availableTracks}
+        availableColors={availableColors}
+        onChange={fakeOnChange}
+      />
+    );
+
+    const trackPickerButton = queryByTestId("TrackPickerButton");
+
+    expect(trackPickerButton).toBeTruthy();
+
+    fireEvent.click(trackPickerButton);
+
+    expect(queryByTestId("file-type-select-component1")).toBeTruthy();
+
+    expect(queryByTestId("file-type-select-component2")).toBeTruthy();
+
+    expect(queryByTestId("file-select-component1")).toBeTruthy();
+
+    expect(queryByTestId("settings-button-component1")).toBeTruthy();
+
+    expect(queryByTestId("delete-button-component1")).toBeTruthy();
+
+    expect(queryByTestId("track-add-button-component")).toBeTruthy();
+  });
+
+  it("should add track items when the add button is pressed", async () => {
+    const fakeOnChange = jest.fn();
+    const { queryByTestId } = render(
+      <TrackPicker
+        tracks={tracks}
+        availableTracks={availableTracks}
+        availableColors={availableColors}
+        onChange={fakeOnChange}
+      />
+    );
+
+    fireEvent.click(queryByTestId("TrackPickerButton"));
+
+    expect(queryByTestId("file-type-select-component4")).toBeFalsy();
+
+    const addButtonComponent = queryByTestId("track-add-button-component");
+    fireEvent.click(addButtonComponent);
+
+    expect(queryByTestId("file-type-select-component4")).toBeTruthy();
+    expect(queryByTestId("file-select-component4")).toBeTruthy();
+    expect(queryByTestId("settings-button-component4")).toBeTruthy();
+
+    fireEvent.click(addButtonComponent);
+
+    expect(queryByTestId("file-type-select-component5")).toBeTruthy();
+    expect(queryByTestId("file-select-component5")).toBeTruthy();
+    expect(queryByTestId("settings-button-component5")).toBeTruthy();
+  });
+
+  it("should call onChange when all files are selected", async () => {
+    const fakeOnChange = jest.fn();
+    const { queryByTestId, getByText, rerender } = render(
+      <TrackPicker
+        tracks={tracks}
+        availableTracks={availableTracks}
+        availableColors={availableColors}
+        onChange={fakeOnChange}
+      />
+    );
+
+    fireEvent.click(queryByTestId("TrackPickerButton"));
+
+    expect(fakeOnChange).toHaveBeenCalledTimes(0);
+
+    // select a file for all three track items
+
+    // first track item
+    fireEvent.keyDown(queryByTestId("file-select-component1").firstChild, {
+      key: "ArrowDown",
     });
+    await waitFor(() => getByText("fileA1.vg"));
+    fireEvent.click(getByText("fileA1.vg"));
 
+    // onChange should not be called
+    expect(fakeOnChange).toHaveBeenCalledTimes(0);
 
-    it('should add track items when the add button is pressed', async () => {
-        const fakeOnChange = jest.fn();
-        const { queryByTestId } = render(
-            <TrackPicker
-                tracks={tracks}
-                availableTracks={availableTracks}
-                availableColors={availableColors}
-                onChange={fakeOnChange}
-            />
-        );
-
-        fireEvent.click(queryByTestId("TrackPickerButton"));
-
-        expect(queryByTestId('file-type-select-component4')).toBeFalsy();
-
-        const addButtonComponent = queryByTestId('track-add-button-component');
-        fireEvent.click(addButtonComponent);
-
-        expect(queryByTestId('file-type-select-component4')).toBeTruthy();
-        expect(queryByTestId('file-select-component4')).toBeTruthy();
-        expect(queryByTestId('settings-button-component4')).toBeTruthy();
-
-        fireEvent.click(addButtonComponent);
-
-        expect(queryByTestId('file-type-select-component5')).toBeTruthy();
-        expect(queryByTestId('file-select-component5')).toBeTruthy();
-        expect(queryByTestId('settings-button-component5')).toBeTruthy();
-
-
-
+    // second track item
+    fireEvent.keyDown(queryByTestId("file-type-select-component2").firstChild, {
+      key: "ArrowDown",
     });
+    await waitFor(() => getByText("haplotype"));
+    fireEvent.click(getByText("haplotype"));
 
-    it('should call onChange when all files are selected', async () => {
-        const fakeOnChange = jest.fn();
-        const { queryByTestId, getByText, rerender } = render(
-            <TrackPicker
-                tracks={tracks}
-                availableTracks={availableTracks}
-                availableColors={availableColors}
-                onChange={fakeOnChange}
-            />
-        );
-
-        fireEvent.click(queryByTestId("TrackPickerButton"));
-
-        expect(fakeOnChange).toHaveBeenCalledTimes(0);
-
-        // select a file for all three track items
-
-        // first track item
-        fireEvent.keyDown(queryByTestId('file-select-component1').firstChild, {key: "ArrowDown"});
-        await waitFor(() => getByText("fileA1.vg"));
-        fireEvent.click(getByText("fileA1.vg"));
-
-        // onChange should not be called
-        expect(fakeOnChange).toHaveBeenCalledTimes(0);
-
-        // second track item
-        fireEvent.keyDown(queryByTestId("file-type-select-component2").firstChild, {key: "ArrowDown"});
-        await waitFor(() => getByText("haplotype"));
-        fireEvent.click(getByText("haplotype"));
-
-        fireEvent.keyDown(queryByTestId('file-select-component2').firstChild, {key: "ArrowDown"});
-        await waitFor(() => getByText("fileB1.gbwt"));
-        fireEvent.click(getByText("fileB1.gbwt"));
-
-        expect(fakeOnChange).toHaveBeenCalledTimes(0);
-
-        // third track item
-        fireEvent.keyDown(queryByTestId('file-select-component3').firstChild, {key: "ArrowDown"});
-        await waitFor(() => getByText("fileC1.xg"));
-        fireEvent.click(getByText("fileC1.xg"));
-
-        let newTracks = JSON.parse(JSON.stringify(tracks));
-
-        newTracks[1].trackFile = "fileA1.vg";
-        newTracks[1].trackType = "graph";
-        newTracks[1].trackColorSettings = defaultTrackColors("graph");
-        newTracks[2].trackFile = "fileB1.gbwt"
-        newTracks[2].trackType = "haplotype";
-        newTracks[2].trackColorSettings = defaultTrackColors("haplotype");
-        newTracks[3].trackFile = "fileC1.xg";
-        newTracks[3].trackType = "graph";
-        newTracks[3].trackColorSettings = defaultTrackColors("graph");
-
-        expect(fakeOnChange).toHaveBeenCalledTimes(1);
-        expect(fakeOnChange).toHaveBeenCalledWith(newTracks);
-
-        // add a track item and select a file
-        const addButtonComponent = queryByTestId('track-add-button-component');
-        fireEvent.click(addButtonComponent);
-
-        newTracks[4] = config.defaultTrackProps;
-        rerender(
-            <TrackPicker
-                tracks={newTracks}
-                availableTracks={availableTracks}
-                availableColors={availableColors}
-                onChange={fakeOnChange}
-            />
-        )
+    fireEvent.keyDown(queryByTestId("file-select-component2").firstChild, {
+      key: "ArrowDown",
+    });
+    await waitFor(() => getByText("fileB1.gbwt"));
+    fireEvent.click(getByText("fileB1.gbwt"));
 
-        fireEvent.keyDown(queryByTestId("file-type-select-component4").firstChild, {key: "ArrowDown"});
-        await waitFor(() => getByText("read"));
-        fireEvent.click(getByText("read"));
+    expect(fakeOnChange).toHaveBeenCalledTimes(0);
 
-        fireEvent.keyDown(queryByTestId('file-select-component4').firstChild, {key: "ArrowDown"});
-        await waitFor(() => getByText("fileB2.gam"));
-        fireEvent.click(getByText("fileB2.gam"));
+    // third track item
+    fireEvent.keyDown(queryByTestId("file-select-component3").firstChild, {
+      key: "ArrowDown",
+    });
+    await waitFor(() => getByText("fileC1.xg"));
+    fireEvent.click(getByText("fileC1.xg"));
+
+    let newTracks = JSON.parse(JSON.stringify(tracks));
+
+    newTracks[1].trackFile = "fileA1.vg";
+    newTracks[1].trackType = "graph";
+    newTracks[1].trackColorSettings = defaultTrackColors("graph");
+    newTracks[2].trackFile = "fileB1.gbwt";
+    newTracks[2].trackType = "haplotype";
+    newTracks[2].trackColorSettings = defaultTrackColors("haplotype");
+    newTracks[3].trackFile = "fileC1.xg";
+    newTracks[3].trackType = "graph";
+    newTracks[3].trackColorSettings = defaultTrackColors("graph");
+
+    expect(fakeOnChange).toHaveBeenCalledTimes(1);
+    expect(fakeOnChange).toHaveBeenCalledWith(newTracks);
+
+    // add a track item and select a file
+    const addButtonComponent = queryByTestId("track-add-button-component");
+    fireEvent.click(addButtonComponent);
+
+    newTracks[4] = config.defaultTrackProps;
+    rerender(
+      <TrackPicker
+        tracks={newTracks}
+        availableTracks={availableTracks}
+        availableColors={availableColors}
+        onChange={fakeOnChange}
+      />
+    );
+
+    fireEvent.keyDown(queryByTestId("file-type-select-component4").firstChild, {
+      key: "ArrowDown",
+    });
+    await waitFor(() => getByText("read"));
+    fireEvent.click(getByText("read"));
 
-        newTracks[4] = {
-            trackFile: "fileB2.gam",
-            trackType: "read",
-            trackColorSettings: defaultTrackColors("read")
-        }
+    fireEvent.keyDown(queryByTestId("file-select-component4").firstChild, {
+      key: "ArrowDown",
+    });
+    await waitFor(() => getByText("fileB2.gam"));
+    fireEvent.click(getByText("fileB2.gam"));
 
-        expect(fakeOnChange).toHaveBeenCalledTimes(2);
-        expect(fakeOnChange).toHaveBeenCalledWith(newTracks);        
-    }, 50000);    
+    newTracks[4] = {
+      trackFile: "fileB2.gam",
+      trackType: "read",
+      trackColorSettings: defaultTrackColors("read"),
+    };
 
-    it('should close when the exit button is pressed', async () => {
-        const fakeOnChange = jest.fn();
-        const { queryByTestId, getByText, rerender } = render(
-            <TrackPicker
-                tracks={tracks}
-                availableTracks={availableTracks}
-                availableColors={availableColors}
-                onChange={fakeOnChange}
-            />
-        );
+    expect(fakeOnChange).toHaveBeenCalledTimes(2);
+    expect(fakeOnChange).toHaveBeenCalledWith(newTracks);
+  }, 50000);
 
-        // open popup
-        fireEvent.click(queryByTestId("TrackPickerButton"));
-
-        expect(queryByTestId("file-type-select-component1")).toBeTruthy();
+  it("should close when the exit button is pressed", async () => {
+    const fakeOnChange = jest.fn();
+    const { queryByTestId, getByText, rerender } = render(
+      <TrackPicker
+        tracks={tracks}
+        availableTracks={availableTracks}
+        availableColors={availableColors}
+        onChange={fakeOnChange}
+      />
+    );
 
-        expect(queryByTestId("file-select-component1")).toBeTruthy();
+    // open popup
+    fireEvent.click(queryByTestId("TrackPickerButton"));
 
-        expect(queryByTestId("settings-button-component1")).toBeTruthy();
+    expect(queryByTestId("file-type-select-component1")).toBeTruthy();
 
-        // close popup
-        fireEvent.click(queryByTestId("TrackPickerCloseButton"));
+    expect(queryByTestId("file-select-component1")).toBeTruthy();
 
-        expect(queryByTestId("file-type-select-component1")).toBeFalsy();
+    expect(queryByTestId("settings-button-component1")).toBeTruthy();
 
-        expect(queryByTestId("file-select-component1")).toBeFalsy();
+    // close popup
+    fireEvent.click(queryByTestId("TrackPickerCloseButton"));
 
-        expect(queryByTestId("settings-button-component1")).toBeFalsy();
+    expect(queryByTestId("file-type-select-component1")).toBeFalsy();
 
-    });
+    expect(queryByTestId("file-select-component1")).toBeFalsy();
 
+    expect(queryByTestId("settings-button-component1")).toBeFalsy();
+  });
 });
diff --git a/src/components/TrackPickerDisplay.demo.js b/src/components/TrackPickerDisplay.demo.js
index c7ea614b..30f68f20 100644
--- a/src/components/TrackPickerDisplay.demo.js
+++ b/src/components/TrackPickerDisplay.demo.js
@@ -1,57 +1,60 @@
-import Demo, {props as P} from 'react-demo'
+import Demo, { props as P } from "react-demo";
 // See https://github.com/rpominov/react-demo for how to make a demo
 
 import React from "react";
 
 import TrackPickerDisplay from "./TrackPickerDisplay";
 
-export default (<Demo
-  props={{
-    tracks:P.json({
+export default (
+  <Demo
+    props={{
+      tracks: P.json({
         1: {
-            trackFile: undefined,
-            trackType: "graph",
-            trackColorSettings: {    
-                mainPalette: "blues",
-                auxPalette: "reds",
-                colorReadsByMappingQuality: false
-            }
+          trackFile: undefined,
+          trackType: "graph",
+          trackColorSettings: {
+            mainPalette: "blues",
+            auxPalette: "reds",
+            colorReadsByMappingQuality: false,
+          },
         },
         2: {
-            trackFile: undefined,
-            trackType: "graph",
-            trackColorSettings: {    
-                mainPalette: "blues",
-                auxPalette: "reds",
-                colorReadsByMappingQuality: false
-            }
+          trackFile: undefined,
+          trackType: "graph",
+          trackColorSettings: {
+            mainPalette: "blues",
+            auxPalette: "reds",
+            colorReadsByMappingQuality: false,
+          },
         },
         3: {
-            trackFile: undefined,
-            trackType: "graph",
-            trackColorSettings: {    
-                mainPalette: "blues",
-                auxPalette: "reds",
-                colorReadsByMappingQuality: false
-            }
+          trackFile: undefined,
+          trackType: "graph",
+          trackColorSettings: {
+            mainPalette: "blues",
+            auxPalette: "reds",
+            colorReadsByMappingQuality: false,
+          },
         },
-    }),
-    availableTracks: P.json([{"trackFile": "fileA1.vg", "trackType": "graph"},
-                            {"trackFile": "fileA2.gbwt", "trackType": "haplotype"},
-                            {"trackFile": "fileB1.gbwt", "trackType": "haplotype"},
-                            {"trackFile": "fileB2.gam", "trackType": "read"},
-                            {"trackFile": "fileC1.xg", "trackType": "graph"}])
-  }}
->
-  {
-    (props, update) => {
-      return <TrackPickerDisplay {...props} 
-        onChange={(newTracks) => {
-          update({tracks: newTracks});
-        }} 
+      }),
+      availableTracks: P.json([
+        { trackFile: "fileA1.vg", trackType: "graph" },
+        { trackFile: "fileA2.gbwt", trackType: "haplotype" },
+        { trackFile: "fileB1.gbwt", trackType: "haplotype" },
+        { trackFile: "fileB2.gam", trackType: "read" },
+        { trackFile: "fileC1.xg", trackType: "graph" },
+      ]),
+    }}
+  >
+    {(props, update) => {
+      return (
+        <TrackPickerDisplay
+          {...props}
+          onChange={(newTracks) => {
+            update({ tracks: newTracks });
+          }}
         />
-    }
-  }
-</Demo>)
-
-
+      );
+    }}
+  </Demo>
+);
diff --git a/src/components/TrackPickerDisplay.js b/src/components/TrackPickerDisplay.js
index d1150826..137ae72f 100644
--- a/src/components/TrackPickerDisplay.js
+++ b/src/components/TrackPickerDisplay.js
@@ -1,128 +1,124 @@
 import PropTypes from "prop-types";
 import React, { useState, useEffect } from "react";
-import {
-    Row,
-    Col
-  } from "reactstrap";
-import {TrackList} from "./TrackList";
-import {TrackAddButton} from "./TrackAddButton";
+import { Row, Col } from "reactstrap";
+import { TrackList } from "./TrackList";
+import { TrackAddButton } from "./TrackAddButton";
 import "../config-client.js";
 import { config } from "../config-global.mjs";
 
 export const TrackPickerDisplay = ({
-    // tracks expects an object mapping a trackID to trackProps, which includes
-      // * trackType: string
-      // * trackFile: file object / undefined
-      // * trackColorSettings: object(aka. colorScheme)
-    tracks, 
-    availableTracks, // array of tracks(see types.ts)
-    availableColors, // array of ColorPalettes
-    onChange, // expects a new tracks object
-    handleFileUpload,
+  // tracks expects an object mapping a trackID to trackProps, which includes
+  // * trackType: string
+  // * trackFile: file object / undefined
+  // * trackColorSettings: object(aka. colorScheme)
+  tracks,
+  availableTracks, // array of tracks(see types.ts)
+  availableColors, // array of ColorPalettes
+  onChange, // expects a new tracks object
+  handleFileUpload,
 }) => {
+  const [trackListChanges, setTrackListChanges] = useState({});
 
-    const [trackListChanges, setTrackListChanges] = useState({});
-
-    // gets the highest trackID bewteen pending changes and tracks + 1
-    let nextTrackID = parseInt(Object.keys({...tracks, ...trackListChanges}).reduce((t1, t2) => {
+  // gets the highest trackID bewteen pending changes and tracks + 1
+  let nextTrackID =
+    parseInt(
+      Object.keys({ ...tracks, ...trackListChanges }).reduce((t1, t2) => {
         t1 = parseInt(t1);
         t2 = parseInt(t2);
         if (t1 > t2) {
-            return t1;
+          return t1;
         }
         return t2;
-    }, 0)) + 1;
-
-    // returns an updated track list combining the 2 inputs, with trackChanges taking priority
-    const applyTrackListChanges = (tracks, trackChanges) => {
-        let newTrackList = {...tracks};
-        Object.keys(trackChanges).forEach((trackID, index) => {
-            // if the trackprops are marked as -1, they are deleted
-            if (trackChanges[trackID] === -1) {
-                delete newTrackList[trackID];
-            } else {
-                newTrackList[trackID] = trackChanges[trackID];
-            }
-        });
-        return newTrackList;
-    }
-
-    const addTrackItem = () => {
-        let newTrackList = {...trackListChanges};
-
-        // create a track item with default trackProps
-        newTrackList[nextTrackID.toString()] = {...config.defaultTrackProps};
-        setTrackListChanges(newTrackList);
+      }, 0)
+    ) + 1;
+
+  // returns an updated track list combining the 2 inputs, with trackChanges taking priority
+  const applyTrackListChanges = (tracks, trackChanges) => {
+    let newTrackList = { ...tracks };
+    Object.keys(trackChanges).forEach((trackID, index) => {
+      // if the trackprops are marked as -1, they are deleted
+      if (trackChanges[trackID] === -1) {
+        delete newTrackList[trackID];
+      } else {
+        newTrackList[trackID] = trackChanges[trackID];
+      }
+    });
+    return newTrackList;
+  };
+
+  const addTrackItem = () => {
+    let newTrackList = { ...trackListChanges };
+
+    // create a track item with default trackProps
+    newTrackList[nextTrackID.toString()] = { ...config.defaultTrackProps };
+    setTrackListChanges(newTrackList);
+  };
+
+  const trackListOnChange = (newTracks) => {
+    setTrackListChanges(applyTrackListChanges(trackListChanges, newTracks));
+  };
+
+  const onDelete = (trackID) => {
+    let newTrackList = { ...trackListChanges };
+    // store to be deleted tracks as -1
+    newTrackList[trackID] = -1;
+    setTrackListChanges(newTrackList);
+  };
+
+  useEffect(() => {
+    // construct the new track list
+    let newTrackList = applyTrackListChanges(tracks, trackListChanges);
+
+    let validTrackList = true;
+    // track list is valid to commit if all fileNames have been selected
+    Object.keys(newTrackList).forEach((trackID, index) => {
+      const trackProps = newTrackList[trackID];
+      if (trackProps.trackFile === undefined) {
+        validTrackList = false;
+      }
+    });
+
+    // call onChange if the track list is valid and changes have been made
+    if (
+      validTrackList &&
+      JSON.stringify(newTrackList) !== JSON.stringify(tracks)
+    ) {
+      console.log("calling Track Picker Display onChange with ", newTrackList);
+      onChange(newTrackList);
+      // clear out pending changes
+      setTrackListChanges({});
     }
-
-    const trackListOnChange = (newTracks) => {
-        setTrackListChanges(applyTrackListChanges(trackListChanges, newTracks));
-    }
-
-    const onDelete = (trackID) => {
-        let newTrackList = {...trackListChanges};
-        // store to be deleted tracks as -1
-        newTrackList[trackID] = -1;
-        setTrackListChanges(newTrackList);
-    }
-
-
-    useEffect(() => {
-        // construct the new track list
-        let newTrackList = applyTrackListChanges(tracks, trackListChanges)
-
-        let validTrackList = true;
-        // track list is valid to commit if all fileNames have been selected
-        Object.keys(newTrackList).forEach((trackID, index) => {
-            const trackProps = newTrackList[trackID];
-            if (trackProps.trackFile === undefined) {
-                validTrackList = false;
-            }
-        });
-
-        // call onChange if the track list is valid and changes have been made        
-        if (validTrackList && JSON.stringify(newTrackList) !== JSON.stringify(tracks)) {
-            console.log("calling Track Picker Display onChange with ", newTrackList);
-            onChange(newTrackList);
-            // clear out pending changes
-            setTrackListChanges({});
-        }
-
-
-    }, [trackListChanges, onChange, tracks]);
-
-    return(
-        <Col>
-            <Row>
-                <TrackList
-                    tracks={applyTrackListChanges(tracks, trackListChanges)}
-                    availableTracks={availableTracks}
-                    availableColors={availableColors}
-                    onChange={trackListOnChange}
-                    onDelete={onDelete}
-                    handleFileUpload={handleFileUpload}
-                />
-            </Row>
-            <Row>
-                <TrackAddButton
-                    onChange={addTrackItem}
-                />
-            </Row>
-        </Col>
-
-    );
+  }, [trackListChanges, onChange, tracks]);
+
+  return (
+    <Col>
+      <Row>
+        <TrackList
+          tracks={applyTrackListChanges(tracks, trackListChanges)}
+          availableTracks={availableTracks}
+          availableColors={availableColors}
+          onChange={trackListOnChange}
+          onDelete={onDelete}
+          handleFileUpload={handleFileUpload}
+        />
+      </Row>
+      <Row>
+        <TrackAddButton onChange={addTrackItem} />
+      </Row>
+    </Col>
+  );
 };
 
 TrackPickerDisplay.propTypes = {
-    tracks: PropTypes.object.isRequired,
-    availableTracks: PropTypes.array.isRequired,
-    availableColors: PropTypes.array,
-    onChange: PropTypes.func,
-    handleFileUpload: PropTypes.func.isRequired,
-}
+  tracks: PropTypes.object.isRequired,
+  availableTracks: PropTypes.array.isRequired,
+  availableColors: PropTypes.array,
+  onChange: PropTypes.func,
+  handleFileUpload: PropTypes.func.isRequired,
+};
 
 TrackPickerDisplay.defaultProps = {
-    onChange: () => {}
-}
+  onChange: () => {},
+};
 
 export default TrackPickerDisplay;
diff --git a/src/components/TrackPickerDisplay.test.js b/src/components/TrackPickerDisplay.test.js
index 741eea0d..c62f0143 100644
--- a/src/components/TrackPickerDisplay.test.js
+++ b/src/components/TrackPickerDisplay.test.js
@@ -1,192 +1,204 @@
-import React from 'react';
-import { render, fireEvent, waitFor }  from '@testing-library/react';
-import {TrackPickerDisplay} from './TrackPickerDisplay';
-import '@testing-library/jest-dom'
+import React from "react";
+import { render, fireEvent, waitFor } from "@testing-library/react";
+import { TrackPickerDisplay } from "./TrackPickerDisplay";
+import "@testing-library/jest-dom";
 import config from "./../config.json";
-import {defaultTrackColors} from "../common.mjs";
-
-
-describe('TrackPickerDisplay', () => {
-    const tracks = {
-        1: config.defaultTrackProps,
-        2: config.defaultTrackProps,
-        3: config.defaultTrackProps,
-    }
-    const availableColors = ["greys", "ygreys", "reds", "plainColors", "lightColors"];
-    const availableTracks = [{"trackFile": "fileA1.vg", "trackType": "graph"},
-                            {"trackFile": "fileA2.gbwt", "trackType": "haplotype"},
-                            {"trackFile": "fileB1.gbwt", "trackType": "haplotype"},
-                            {"trackFile": "fileB2.gam", "trackType": "read"},
-                            {"trackFile": "fileC1.xg", "trackType": "graph"}];
-
-    it('should render without errors', async () => {
-        const fakeOnChange = jest.fn();
-        const { queryByTestId } = render(
-            <TrackPickerDisplay
-                tracks={tracks}
-                availableTracks={availableTracks}
-                availableColors={availableColors}
-                onChange={fakeOnChange}
-            />
-        );
-
-        expect(queryByTestId("file-type-select-component1")).toBeTruthy();
-
-        expect(queryByTestId("file-type-select-component2")).toBeTruthy();
-
-        expect(queryByTestId("file-select-component1")).toBeTruthy();
-
-        expect(queryByTestId("settings-button-component1")).toBeTruthy();
-
-        expect(queryByTestId("delete-button-component1")).toBeTruthy();
-
-        expect(queryByTestId("track-add-button-component")).toBeTruthy();
+import { defaultTrackColors } from "../common.mjs";
+
+describe("TrackPickerDisplay", () => {
+  const tracks = {
+    1: config.defaultTrackProps,
+    2: config.defaultTrackProps,
+    3: config.defaultTrackProps,
+  };
+  const availableColors = [
+    "greys",
+    "ygreys",
+    "reds",
+    "plainColors",
+    "lightColors",
+  ];
+  const availableTracks = [
+    { trackFile: "fileA1.vg", trackType: "graph" },
+    { trackFile: "fileA2.gbwt", trackType: "haplotype" },
+    { trackFile: "fileB1.gbwt", trackType: "haplotype" },
+    { trackFile: "fileB2.gam", trackType: "read" },
+    { trackFile: "fileC1.xg", trackType: "graph" },
+  ];
+
+  it("should render without errors", async () => {
+    const fakeOnChange = jest.fn();
+    const { queryByTestId } = render(
+      <TrackPickerDisplay
+        tracks={tracks}
+        availableTracks={availableTracks}
+        availableColors={availableColors}
+        onChange={fakeOnChange}
+      />
+    );
+
+    expect(queryByTestId("file-type-select-component1")).toBeTruthy();
+
+    expect(queryByTestId("file-type-select-component2")).toBeTruthy();
+
+    expect(queryByTestId("file-select-component1")).toBeTruthy();
+
+    expect(queryByTestId("settings-button-component1")).toBeTruthy();
+
+    expect(queryByTestId("delete-button-component1")).toBeTruthy();
+
+    expect(queryByTestId("track-add-button-component")).toBeTruthy();
+  });
+
+  it("should add track items when the add button is pressed", async () => {
+    const fakeOnChange = jest.fn();
+    const { queryByTestId } = render(
+      <TrackPickerDisplay
+        tracks={tracks}
+        availableTracks={availableTracks}
+        availableColors={availableColors}
+        onChange={fakeOnChange}
+      />
+    );
+
+    expect(queryByTestId("file-type-select-component4")).toBeFalsy();
+
+    const addButtonComponent = queryByTestId("track-add-button-component");
+    fireEvent.click(addButtonComponent);
+
+    const newTrackItem = queryByTestId("file-type-select-component4");
+
+    expect(queryByTestId("file-type-select-component4")).toBeTruthy();
+    expect(queryByTestId("file-select-component4")).toBeTruthy();
+    expect(queryByTestId("settings-button-component4")).toBeTruthy();
+
+    fireEvent.click(addButtonComponent);
+
+    expect(queryByTestId("file-type-select-component5")).toBeTruthy();
+    expect(queryByTestId("file-select-component5")).toBeTruthy();
+    expect(queryByTestId("settings-button-component5")).toBeTruthy();
+  });
+
+  it("should call onChange when all files are selected", async () => {
+    const fakeOnChange = jest.fn();
+    const { queryByTestId, getByText, rerender } = render(
+      <TrackPickerDisplay
+        tracks={tracks}
+        availableTracks={availableTracks}
+        availableColors={availableColors}
+        onChange={fakeOnChange}
+      />
+    );
+
+    expect(fakeOnChange).toHaveBeenCalledTimes(0);
+
+    // select a file for all three track items
+
+    // first track item
+    fireEvent.keyDown(queryByTestId("file-select-component1").firstChild, {
+      key: "ArrowDown",
     });
+    await waitFor(() => getByText("fileA1.vg"));
+    fireEvent.click(getByText("fileA1.vg"));
 
+    // onChange should not be called
+    expect(fakeOnChange).toHaveBeenCalledTimes(0);
 
-    it('should add track items when the add button is pressed', async () => {
-        const fakeOnChange = jest.fn();
-        const { queryByTestId } = render(
-            <TrackPickerDisplay
-                tracks={tracks}
-                availableTracks={availableTracks}
-                availableColors={availableColors}
-                onChange={fakeOnChange}
-            />
-        );
-
-        expect(queryByTestId('file-type-select-component4')).toBeFalsy();
-
-        const addButtonComponent = queryByTestId('track-add-button-component');
-        fireEvent.click(addButtonComponent);
-
-        const newTrackItem = queryByTestId('file-type-select-component4');
-
-        expect(queryByTestId('file-type-select-component4')).toBeTruthy();
-        expect(queryByTestId('file-select-component4')).toBeTruthy();
-        expect(queryByTestId('settings-button-component4')).toBeTruthy();
-
-        fireEvent.click(addButtonComponent);
-
-        expect(queryByTestId('file-type-select-component5')).toBeTruthy();
-        expect(queryByTestId('file-select-component5')).toBeTruthy();
-        expect(queryByTestId('settings-button-component5')).toBeTruthy();
+    // second track item
+    fireEvent.keyDown(queryByTestId("file-type-select-component2").firstChild, {
+      key: "ArrowDown",
+    });
+    await waitFor(() => getByText("haplotype"));
+    fireEvent.click(getByText("haplotype"));
 
+    fireEvent.keyDown(queryByTestId("file-select-component2").firstChild, {
+      key: "ArrowDown",
+    });
+    await waitFor(() => getByText("fileB1.gbwt"));
+    fireEvent.click(getByText("fileB1.gbwt"));
 
+    expect(fakeOnChange).toHaveBeenCalledTimes(0);
 
+    // third track item
+    fireEvent.keyDown(queryByTestId("file-select-component3").firstChild, {
+      key: "ArrowDown",
     });
-
-    it('should call onChange when all files are selected', async () => {
-        const fakeOnChange = jest.fn();
-        const { queryByTestId, getByText, rerender } = render(
-            <TrackPickerDisplay
-                tracks={tracks}
-                availableTracks={availableTracks}
-                availableColors={availableColors}
-                onChange={fakeOnChange}
-            />
-        );
-
-        expect(fakeOnChange).toHaveBeenCalledTimes(0);
-
-        // select a file for all three track items
-
-        // first track item
-        fireEvent.keyDown(queryByTestId('file-select-component1').firstChild, {key: "ArrowDown"});
-        await waitFor(() => getByText("fileA1.vg"));
-        fireEvent.click(getByText("fileA1.vg"));
-
-        // onChange should not be called
-        expect(fakeOnChange).toHaveBeenCalledTimes(0);
-
-        // second track item
-        fireEvent.keyDown(queryByTestId("file-type-select-component2").firstChild, {key: "ArrowDown"});
-        await waitFor(() => getByText("haplotype"));
-        fireEvent.click(getByText("haplotype"));
-
-        fireEvent.keyDown(queryByTestId('file-select-component2').firstChild, {key: "ArrowDown"});
-        await waitFor(() => getByText("fileB1.gbwt"));
-        fireEvent.click(getByText("fileB1.gbwt"));
-
-        expect(fakeOnChange).toHaveBeenCalledTimes(0);
-
-        // third track item
-        fireEvent.keyDown(queryByTestId('file-select-component3').firstChild, {key: "ArrowDown"});
-        await waitFor(() => getByText("fileC1.xg"));
-        fireEvent.click(getByText("fileC1.xg"));
-
-        let newTracks = JSON.parse(JSON.stringify(tracks));
-
-        newTracks[1].trackFile = "fileA1.vg";
-        newTracks[1].trackType = "graph";
-        newTracks[1].trackColorSettings = defaultTrackColors("graph");
-        newTracks[2].trackFile = "fileB1.gbwt"
-        newTracks[2].trackType = "haplotype";
-        newTracks[2].trackColorSettings = defaultTrackColors("haplotype");
-        newTracks[3].trackFile = "fileC1.xg"
-        newTracks[3].trackType = "graph"
-        newTracks[3].trackColorSettings = defaultTrackColors("graph");
-
-        expect(fakeOnChange).toHaveBeenCalledTimes(1);
-        //expect(fakeOnChange).toHaveBeenCalledWith(newTracks);
-
-        // add a track item and select a file
-        const addButtonComponent = queryByTestId('track-add-button-component');
-        fireEvent.click(addButtonComponent);
-
-        newTracks[4] = config.defaultTrackProps;
-        rerender(
-            <TrackPickerDisplay
-                tracks={newTracks}
-                availableTracks={availableTracks}
-                availableColors={availableColors}
-                onChange={fakeOnChange}
-            />
-        )
-
-        fireEvent.keyDown(queryByTestId("file-type-select-component4").firstChild, {key: "ArrowDown"});
-        await waitFor(() => getByText("read"));
-        fireEvent.click(getByText("read"));
-
-        fireEvent.keyDown(queryByTestId('file-select-component4').firstChild, {key: "ArrowDown"});
-        await waitFor(() => getByText("fileB2.gam"));
-        fireEvent.click(getByText("fileB2.gam"));
-
-        newTracks[4] = {
-            trackFile: "fileB2.gam",
-            trackType: "read",
-            trackColorSettings: {    
-                mainPalette: "blues",
-                auxPalette: "reds",
-                colorReadsByMappingQuality: false
-            }
-        }
-
-        expect(fakeOnChange).toHaveBeenCalledTimes(2);
-        expect(fakeOnChange).toHaveBeenCalledWith(newTracks);
-
-    });    
-
-
-    it('should delete a trackitem when the delete button is pressed', async () => {
-        const fakeOnChange = jest.fn();
-        const { queryByTestId } = render(
-            <TrackPickerDisplay
-                tracks={tracks}
-                availableTracks={availableTracks}
-                availableColors={availableColors}
-                onChange={fakeOnChange}
-            />
-        );
-
-        // pressing the delete button should delete that row
-        fireEvent.click(queryByTestId('delete-button-component1'));
-        expect(queryByTestId('file-type-select-component1')).toBeFalsy();
-        expect(queryByTestId('file-select-component1')).toBeFalsy();
-
-        fireEvent.click(queryByTestId('delete-button-component3'));
-        expect(queryByTestId('file-type-select-component3')).toBeFalsy();
-        expect(queryByTestId('file-select-component3')).toBeFalsy();
+    await waitFor(() => getByText("fileC1.xg"));
+    fireEvent.click(getByText("fileC1.xg"));
+
+    let newTracks = JSON.parse(JSON.stringify(tracks));
+
+    newTracks[1].trackFile = "fileA1.vg";
+    newTracks[1].trackType = "graph";
+    newTracks[1].trackColorSettings = defaultTrackColors("graph");
+    newTracks[2].trackFile = "fileB1.gbwt";
+    newTracks[2].trackType = "haplotype";
+    newTracks[2].trackColorSettings = defaultTrackColors("haplotype");
+    newTracks[3].trackFile = "fileC1.xg";
+    newTracks[3].trackType = "graph";
+    newTracks[3].trackColorSettings = defaultTrackColors("graph");
+
+    expect(fakeOnChange).toHaveBeenCalledTimes(1);
+    //expect(fakeOnChange).toHaveBeenCalledWith(newTracks);
+
+    // add a track item and select a file
+    const addButtonComponent = queryByTestId("track-add-button-component");
+    fireEvent.click(addButtonComponent);
+
+    newTracks[4] = config.defaultTrackProps;
+    rerender(
+      <TrackPickerDisplay
+        tracks={newTracks}
+        availableTracks={availableTracks}
+        availableColors={availableColors}
+        onChange={fakeOnChange}
+      />
+    );
+
+    fireEvent.keyDown(queryByTestId("file-type-select-component4").firstChild, {
+      key: "ArrowDown",
     });
+    await waitFor(() => getByText("read"));
+    fireEvent.click(getByText("read"));
 
+    fireEvent.keyDown(queryByTestId("file-select-component4").firstChild, {
+      key: "ArrowDown",
+    });
+    await waitFor(() => getByText("fileB2.gam"));
+    fireEvent.click(getByText("fileB2.gam"));
+
+    newTracks[4] = {
+      trackFile: "fileB2.gam",
+      trackType: "read",
+      trackColorSettings: {
+        mainPalette: "blues",
+        auxPalette: "reds",
+        colorReadsByMappingQuality: false,
+      },
+    };
+
+    expect(fakeOnChange).toHaveBeenCalledTimes(2);
+    expect(fakeOnChange).toHaveBeenCalledWith(newTracks);
+  });
+
+  it("should delete a trackitem when the delete button is pressed", async () => {
+    const fakeOnChange = jest.fn();
+    const { queryByTestId } = render(
+      <TrackPickerDisplay
+        tracks={tracks}
+        availableTracks={availableTracks}
+        availableColors={availableColors}
+        onChange={fakeOnChange}
+      />
+    );
+
+    // pressing the delete button should delete that row
+    fireEvent.click(queryByTestId("delete-button-component1"));
+    expect(queryByTestId("file-type-select-component1")).toBeFalsy();
+    expect(queryByTestId("file-select-component1")).toBeFalsy();
+
+    fireEvent.click(queryByTestId("delete-button-component3"));
+    expect(queryByTestId("file-type-select-component3")).toBeFalsy();
+    expect(queryByTestId("file-select-component3")).toBeFalsy();
+  });
 });
diff --git a/src/components/TrackSettings.demo.js b/src/components/TrackSettings.demo.js
index 000bb7f1..5169fc46 100644
--- a/src/components/TrackSettings.demo.js
+++ b/src/components/TrackSettings.demo.js
@@ -1,27 +1,38 @@
-import Demo, {props as P} from 'react-demo'
+import Demo, { props as P } from "react-demo";
 // See https://github.com/rpominov/react-demo for how to make a demo
 
 import TrackSettings from "./TrackSettings.js";
 
-export default (<Demo
+export default (
+  <Demo
     props={{
       fileType: P.choices(["haplotype", "graph", "read"]),
-      trackColorSettings: P.json({    
+      trackColorSettings: P.json({
         mainPalette: "blues",
         auxPalette: "reds",
-        colorReadsByMappingQuality: false}),
-      availableColors: P.json(["greys", "ygreys", "blues", "reds", "plainColors"])
+        colorReadsByMappingQuality: false,
+      }),
+      availableColors: P.json([
+        "greys",
+        "ygreys",
+        "blues",
+        "reds",
+        "plainColors",
+      ]),
     }}
   >
-    {
-      (props, update) => {
-        return <TrackSettings {...props} setTrackColorSetting={(key, value) => {
-          // modify a key in TrackColorSettings
-          let newTrackColorSettings = {...props.trackColorSettings};
-          newTrackColorSettings[key] = value;
-          update({trackColorSettings: newTrackColorSettings})
-        }}/>
-      }
-    }
-  </Demo>)
-  
+    {(props, update) => {
+      return (
+        <TrackSettings
+          {...props}
+          setTrackColorSetting={(key, value) => {
+            // modify a key in TrackColorSettings
+            let newTrackColorSettings = { ...props.trackColorSettings };
+            newTrackColorSettings[key] = value;
+            update({ trackColorSettings: newTrackColorSettings });
+          }}
+        />
+      );
+    }}
+  </Demo>
+);
diff --git a/src/components/TrackSettings.js b/src/components/TrackSettings.js
index 4669289d..258d20ee 100644
--- a/src/components/TrackSettings.js
+++ b/src/components/TrackSettings.js
@@ -1,145 +1,162 @@
-import React from 'react';
+import React from "react";
 import PropTypes from "prop-types";
-import {
-    Form,
-    Row,
-    Col
-  } from "reactstrap";
+import { Form, Row, Col } from "reactstrap";
 import RadioRow from "./RadioRow";
 import ColorPicker from "./ColorPicker";
 
 /**
  * A component meant to contain settings related to an individual track
- * 
+ *
  * fileType expects a string specifying the filetype, e.g "haplotype", "read"
- * 
- * trackColorSettings expects an object in the form of 
+ *
+ * trackColorSettings expects an object in the form of
  * {mainPalette: string,
  *  auxPallate: string,
  *  colorReadsByMappingQuality: boolean}
- * 
+ *
  * The setTrackColorSetting function expects to be passed a key value pair updating the trackColorSettings object
- * 
+ *
  * availableColors expects an array of colors(string), must correspond to valid colors defined in RadioRow.js and tubemap.js
- * 
+ *
  * presetColors expect an array of hex colors, this is used in the single colorPicker
- *  
+ *
  * See demo and test file for examples of this component.
  */
 
 export const TrackSettings = ({
-    fileType,
-    trackColorSettings,
-    setTrackColorSetting,
-    label,
-    availableColors,
-    presetColors
+  fileType,
+  trackColorSettings,
+  setTrackColorSetting,
+  label,
+  availableColors,
+  presetColors,
 }) => {
-
-    function colorRenderSwitch(fileType) {
-        switch(fileType) {
-            case "haplotype":
-                return(
-                    <Form>
-                        <Row>
-                            <Col className="radio-row">
-                                <RadioRow
-                                    rowHeading="Haplotypes"
-                                    color={trackColorSettings.mainPalette}
-                                    setting="mainPalette"
-                                    setColorSetting={setTrackColorSetting}
-                                    availableColors={availableColors}
-                                />
-                            </Col>
-                            <Col className="tracklist-button" md="1">
-                                <ColorPicker
-                                    color={trackColorSettings.mainPalette}
-                                    presetColors={presetColors}
-                                    onChange={(color) => {
-                                        setTrackColorSetting("mainPalette", color);
-                                    }}
-                                />
-                            </Col>
-                        </Row>
-                    </Form>
-                );
-            case "graph":
-            case  "read":
-                return(
-                    <Form>
-                        <Row>
-                            <Col className="radio-row">
-                                <RadioRow
-                                    rowHeading={fileType === "read" ? "Forward Reads" : "Reference Path"}
-                                    color={trackColorSettings.mainPalette}
-                                    setting="mainPalette"
-                                    setColorSetting={setTrackColorSetting}
-                                    availableColors={availableColors}
-                                />
-                            </Col>
-                            <Col className="tracklist-button" md="1">
-                                <ColorPicker
-                                    color={trackColorSettings.mainPalette}
-                                    presetColors={presetColors}
-                                    onChange={(color) => {
-                                        setTrackColorSetting("mainPalette", color);
-                                    }}
-                                />
-                            </Col>
-                        </Row>
-                        <Row>
-                            <Col className="radio-row">
-                                <RadioRow
-                                    rowHeading={fileType === "read" ? "Reverse Reads" : "Non-Reference Path"}
-                                    color={trackColorSettings.auxPalette}
-                                    setting="auxPalette"
-                                    setColorSetting={setTrackColorSetting}
-                                    availableColors={availableColors}
-                                />
-                            </Col>
-                            <Col className="tracklist-button" md="1">
-                                <ColorPicker
-                                    color={trackColorSettings.auxPalette}
-                                    presetColors={presetColors}
-                                    onChange={(color) => {
-                                        setTrackColorSetting("auxPalette", color);
-                                    }}
-                                />
-                            </Col>
-                        </Row>
-                    </Form>
-                );
-            default:
-                throw new Error("Invalid file type");
-        }
+  function colorRenderSwitch(fileType) {
+    switch (fileType) {
+      case "haplotype":
+        return (
+          <Form>
+            <Row>
+              <Col className="radio-row">
+                <RadioRow
+                  rowHeading="Haplotypes"
+                  color={trackColorSettings.mainPalette}
+                  setting="mainPalette"
+                  setColorSetting={setTrackColorSetting}
+                  availableColors={availableColors}
+                />
+              </Col>
+              <Col className="tracklist-button" md="1">
+                <ColorPicker
+                  color={trackColorSettings.mainPalette}
+                  presetColors={presetColors}
+                  onChange={(color) => {
+                    setTrackColorSetting("mainPalette", color);
+                  }}
+                />
+              </Col>
+            </Row>
+          </Form>
+        );
+      case "graph":
+      case "read":
+        return (
+          <Form>
+            <Row>
+              <Col className="radio-row">
+                <RadioRow
+                  rowHeading={
+                    fileType === "read" ? "Forward Reads" : "Reference Path"
+                  }
+                  color={trackColorSettings.mainPalette}
+                  setting="mainPalette"
+                  setColorSetting={setTrackColorSetting}
+                  availableColors={availableColors}
+                />
+              </Col>
+              <Col className="tracklist-button" md="1">
+                <ColorPicker
+                  color={trackColorSettings.mainPalette}
+                  presetColors={presetColors}
+                  onChange={(color) => {
+                    setTrackColorSetting("mainPalette", color);
+                  }}
+                />
+              </Col>
+            </Row>
+            <Row>
+              <Col className="radio-row">
+                <RadioRow
+                  rowHeading={
+                    fileType === "read" ? "Reverse Reads" : "Non-Reference Path"
+                  }
+                  color={trackColorSettings.auxPalette}
+                  setting="auxPalette"
+                  setColorSetting={setTrackColorSetting}
+                  availableColors={availableColors}
+                />
+              </Col>
+              <Col className="tracklist-button" md="1">
+                <ColorPicker
+                  color={trackColorSettings.auxPalette}
+                  presetColors={presetColors}
+                  onChange={(color) => {
+                    setTrackColorSetting("auxPalette", color);
+                  }}
+                />
+              </Col>
+            </Row>
+          </Form>
+        );
+      default:
+        throw new Error("Invalid file type");
     }
+  }
 
-    return(
-        <>
-          <h5>{label} Colors</h5>
-          {colorRenderSwitch(fileType)}
-        </>
-    )
-}
+  return (
+    <>
+      <h5>{label} Colors</h5>
+      {colorRenderSwitch(fileType)}
+    </>
+  );
+};
 
 TrackSettings.propTypes = {
-    fileType: PropTypes.string.isRequired,
-    trackColorSettings: PropTypes.object,
-    setTrackColorSetting: PropTypes.func.isRequired,
-    label: PropTypes.string,
-    availableColors: PropTypes.array,
-    presetColors: PropTypes.array
-}
+  fileType: PropTypes.string.isRequired,
+  trackColorSettings: PropTypes.object,
+  setTrackColorSetting: PropTypes.func.isRequired,
+  label: PropTypes.string,
+  availableColors: PropTypes.array,
+  presetColors: PropTypes.array,
+};
 
 TrackSettings.defaultProps = {
-    fileType: "haplotype",
-    availableColors: ["greys", "ygreys", "blues", "reds", "plainColors", "lightColors"],
-    presetColors: ['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF'],
-    trackColorSettings: {    
-        mainPalette: "blues",
-        auxPalette: "reds",
-        colorReadsByMappingQuality: false
-    },
-}
+  fileType: "haplotype",
+  availableColors: [
+    "greys",
+    "ygreys",
+    "blues",
+    "reds",
+    "plainColors",
+    "lightColors",
+  ],
+  presetColors: [
+    "#FF6900",
+    "#FCB900",
+    "#7BDCB5",
+    "#00D084",
+    "#8ED1FC",
+    "#0693E3",
+    "#ABB8C3",
+    "#EB144C",
+    "#F78DA7",
+    "#9900EF",
+  ],
+  trackColorSettings: {
+    mainPalette: "blues",
+    auxPalette: "reds",
+    colorReadsByMappingQuality: false,
+  },
+};
 
 export default TrackSettings;
diff --git a/src/components/TrackSettings.test.js b/src/components/TrackSettings.test.js
index d4cde673..705c7939 100644
--- a/src/components/TrackSettings.test.js
+++ b/src/components/TrackSettings.test.js
@@ -1,67 +1,76 @@
-import React from 'react';
-import { render, fireEvent}  from '@testing-library/react';
-import {TrackSettings} from './TrackSettings';
-import '@testing-library/jest-dom'
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { TrackSettings } from "./TrackSettings";
+import "@testing-library/jest-dom";
 
-describe('TrackSettings', () => {
-    const availableColors = ["greys", "ygreys", "blues", "reds", "plainColors", "lightColors"];
-    const trackColorSettings = {    
-        mainPalette: "blues",
-        auxPalette: "reds",
-        colorReadsByMappingQuality: false};
+describe("TrackSettings", () => {
+  const availableColors = [
+    "greys",
+    "ygreys",
+    "blues",
+    "reds",
+    "plainColors",
+    "lightColors",
+  ];
+  const trackColorSettings = {
+    mainPalette: "blues",
+    auxPalette: "reds",
+    colorReadsByMappingQuality: false,
+  };
 
-    it('should render without errors', async () => {
-        const fakeOnChange = jest.fn();
-        const { getByText } = render(
-            <TrackSettings 
-            fileType={"haplotype"}
-            trackColorSettings={trackColorSettings}
-            availableColors={availableColors}
-            setTrackColorSetting={fakeOnChange}/>
-        );
+  it("should render without errors", async () => {
+    const fakeOnChange = jest.fn();
+    const { getByText } = render(
+      <TrackSettings
+        fileType={"haplotype"}
+        trackColorSettings={trackColorSettings}
+        availableColors={availableColors}
+        setTrackColorSetting={fakeOnChange}
+      />
+    );
 
-        // maybe need to search by "Select a file"
-        const placeholder = await getByText("blues");
-        expect(placeholder).toBeTruthy();
-    });
+    // maybe need to search by "Select a file"
+    const placeholder = await getByText("blues");
+    expect(placeholder).toBeTruthy();
+  });
 
-    it('should call onChange when an option is selected', async () => {
-        const fakeOnChange = jest.fn();
-        const { getByLabelText } = render(
-            <TrackSettings 
-            fileType={"haplotype"}
-            trackColorSettings={trackColorSettings}
-            availableColors={availableColors}
-            setTrackColorSetting={fakeOnChange}/>
-        );
+  it("should call onChange when an option is selected", async () => {
+    const fakeOnChange = jest.fn();
+    const { getByLabelText } = render(
+      <TrackSettings
+        fileType={"haplotype"}
+        trackColorSettings={trackColorSettings}
+        availableColors={availableColors}
+        setTrackColorSetting={fakeOnChange}
+      />
+    );
 
-        const redLabel = getByLabelText('reds');
-        const greyLabel = getByLabelText('greyscale');
+    const redLabel = getByLabelText("reds");
+    const greyLabel = getByLabelText("greyscale");
 
-        expect(fakeOnChange).toHaveBeenCalledTimes(0);    
+    expect(fakeOnChange).toHaveBeenCalledTimes(0);
 
-        fireEvent.click(redLabel);
-        expect(fakeOnChange).toHaveBeenCalledTimes(1);
+    fireEvent.click(redLabel);
+    expect(fakeOnChange).toHaveBeenCalledTimes(1);
 
-        fireEvent.click(greyLabel);
-        expect(fakeOnChange).toHaveBeenCalledTimes(2);
-        expect(fakeOnChange).toHaveBeenCalledWith("mainPalette", "greys");
-    });
+    fireEvent.click(greyLabel);
+    expect(fakeOnChange).toHaveBeenCalledTimes(2);
+    expect(fakeOnChange).toHaveBeenCalledWith("mainPalette", "greys");
+  });
 
-    it('should update the radio values when an option is selected', async () => {
-        const fakeOnChange = jest.fn();
-        const { getByLabelText } = render(
-            <TrackSettings 
-            fileType={"haplotype"}
-            trackColorSettings={trackColorSettings}
-            availableColors={availableColors}
-            setTrackColorSetting={fakeOnChange}/>
-        );
+  it("should update the radio values when an option is selected", async () => {
+    const fakeOnChange = jest.fn();
+    const { getByLabelText } = render(
+      <TrackSettings
+        fileType={"haplotype"}
+        trackColorSettings={trackColorSettings}
+        availableColors={availableColors}
+        setTrackColorSetting={fakeOnChange}
+      />
+    );
 
-        const radio = getByLabelText("blues")
-        fireEvent.change(radio, {target: { value: "reds" }});
-        expect(radio.value).toBe("reds");
-    })
-
-
-});
\ No newline at end of file
+    const radio = getByLabelText("blues");
+    fireEvent.change(radio, { target: { value: "reds" } });
+    expect(radio.value).toBe("reds");
+  });
+});
diff --git a/src/components/TrackSettingsButton.demo.js b/src/components/TrackSettingsButton.demo.js
index f81845cf..17095b93 100644
--- a/src/components/TrackSettingsButton.demo.js
+++ b/src/components/TrackSettingsButton.demo.js
@@ -1,27 +1,38 @@
-import Demo, {props as P} from 'react-demo'
+import Demo, { props as P } from "react-demo";
 // See https://github.com/rpominov/react-demo for how to make a demo
 
 import TrackSettingsButton from "./TrackSettingsButton.js";
 
-export default (<Demo
+export default (
+  <Demo
     props={{
       fileType: P.choices(["haplotype", "graph", "read"]),
-      trackColorSettings: P.json({    
+      trackColorSettings: P.json({
         mainPalette: "blues",
         auxPalette: "reds",
-        colorReadsByMappingQuality: false}),
-      availableColors: P.json(["greys", "ygreys", "blues", "reds", "plainColors"])
+        colorReadsByMappingQuality: false,
+      }),
+      availableColors: P.json([
+        "greys",
+        "ygreys",
+        "blues",
+        "reds",
+        "plainColors",
+      ]),
     }}
   >
-    {
-      (props, update) => {
-        return <TrackSettingsButton {...props} setTrackColorSetting={(key, value) => {
-          // modify a key in TrackColorSettings
-          let newTrackColorSettings = {...props.trackColorSettings};
-          newTrackColorSettings[key] = value;
-          update({trackColorSettings: newTrackColorSettings})
-        }}/>
-      }
-    }
-  </Demo>)
-  
+    {(props, update) => {
+      return (
+        <TrackSettingsButton
+          {...props}
+          setTrackColorSetting={(key, value) => {
+            // modify a key in TrackColorSettings
+            let newTrackColorSettings = { ...props.trackColorSettings };
+            newTrackColorSettings[key] = value;
+            update({ trackColorSettings: newTrackColorSettings });
+          }}
+        />
+      );
+    }}
+  </Demo>
+);
diff --git a/src/components/TrackSettingsButton.js b/src/components/TrackSettingsButton.js
index fb958fd1..1fbeeebe 100644
--- a/src/components/TrackSettingsButton.js
+++ b/src/components/TrackSettingsButton.js
@@ -1,51 +1,59 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import PropTypes from "prop-types";
-import PopupDialog from './PopupDialog.js';
+import PopupDialog from "./PopupDialog.js";
 import TrackSettings from "./TrackSettings.js";
-import { Button } from 'reactstrap'
+import { Button } from "reactstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGear } from '@fortawesome/free-solid-svg-icons';
+import { faGear } from "@fortawesome/free-solid-svg-icons";
 
 export const TrackSettingsButton = ({
-    fileType,
-    trackColorSettings,
-    setTrackColorSetting,
-    label,
-    availableColors,
-    testID
+  fileType,
+  trackColorSettings,
+  setTrackColorSetting,
+  label,
+  availableColors,
+  testID,
 }) => {
-    // based off of https://react-popup.elazizi.com/controlled-popup/#using-open-prop
-    const [open, setOpen] = useState(false);
-    const close = () => setOpen(false);
-    return(
-      <div>
-        <Button aria-label="Settings" onClick={() => setOpen(!open)}><FontAwesomeIcon icon={faGear} data-testid={testID}/></Button>
-        <PopupDialog open={open} close={close}>
-          <TrackSettings
-            fileType={fileType}
-            trackColorSettings={trackColorSettings}
-            availableColors={availableColors}
-            setTrackColorSetting={setTrackColorSetting}
-            label={label}
-          />
-        </PopupDialog>
-      </div>
-    )
-}
+  // based off of https://react-popup.elazizi.com/controlled-popup/#using-open-prop
+  const [open, setOpen] = useState(false);
+  const close = () => setOpen(false);
+  return (
+    <div>
+      <Button aria-label="Settings" onClick={() => setOpen(!open)}>
+        <FontAwesomeIcon icon={faGear} data-testid={testID} />
+      </Button>
+      <PopupDialog open={open} close={close}>
+        <TrackSettings
+          fileType={fileType}
+          trackColorSettings={trackColorSettings}
+          availableColors={availableColors}
+          setTrackColorSetting={setTrackColorSetting}
+          label={label}
+        />
+      </PopupDialog>
+    </div>
+  );
+};
 
 TrackSettingsButton.propTypes = {
-    fileType: PropTypes.string.isRequired,
-    trackColorSettings: PropTypes.object.isRequired,
-    setTrackColorSetting: PropTypes.func.isRequired,
-    label: PropTypes.string,
-    availableColors: PropTypes.array,
-    testID: PropTypes.string
-}
+  fileType: PropTypes.string.isRequired,
+  trackColorSettings: PropTypes.object.isRequired,
+  setTrackColorSetting: PropTypes.func.isRequired,
+  label: PropTypes.string,
+  availableColors: PropTypes.array,
+  testID: PropTypes.string,
+};
 
 TrackSettingsButton.defaultProps = {
-    availableColors: ["greys", "ygreys", "blues", "reds", "plainColors", "lightColors"],
-    testID: "settings-button-component"
-}
+  availableColors: [
+    "greys",
+    "ygreys",
+    "blues",
+    "reds",
+    "plainColors",
+    "lightColors",
+  ],
+  testID: "settings-button-component",
+};
 
 export default TrackSettingsButton;
-
diff --git a/src/components/TrackSettingsButton.test.js b/src/components/TrackSettingsButton.test.js
index 030bb28d..541e19ec 100644
--- a/src/components/TrackSettingsButton.test.js
+++ b/src/components/TrackSettingsButton.test.js
@@ -1,25 +1,29 @@
-import React from 'react';
-import {render} from '@testing-library/react';
-import {TrackSettingsButton} from './TrackSettingsButton';
-import {screen} from '@testing-library/react';
+import React from "react";
+import { render } from "@testing-library/react";
+import { TrackSettingsButton } from "./TrackSettingsButton";
+import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-describe('TrackSettingsButton', () => {
-    it('opens popup', async () => {
-        const result = render(
-            <TrackSettingsButton fileType="graph" trackColorSettings={{mainPalette: "blues",
-                auxPalette: "reds",
-                colorReadsByMappingQuality: false}} setTrackColorSetting={function(a, b){}}></TrackSettingsButton>
-        );
+describe("TrackSettingsButton", () => {
+  it("opens popup", async () => {
+    const result = render(
+      <TrackSettingsButton
+        fileType="graph"
+        trackColorSettings={{
+          mainPalette: "blues",
+          auxPalette: "reds",
+          colorReadsByMappingQuality: false,
+        }}
+        setTrackColorSetting={function (a, b) {}}
+      ></TrackSettingsButton>
+    );
 
-        await userEvent.click(screen.getByTestId('settings-button-component'));
+    await userEvent.click(screen.getByTestId("settings-button-component"));
 
-        expect(screen.getByRole('heading')).toBeTruthy();
+    expect(screen.getByRole("heading")).toBeTruthy();
 
-        await userEvent.click(screen.getByTestId('settings-button-component'));
+    await userEvent.click(screen.getByTestId("settings-button-component"));
 
-        expect(screen.queryByRole('heading')).toBeFalsy();
-
-
-    });
+    expect(screen.queryByRole("heading")).toBeFalsy();
+  });
 });
diff --git a/src/components/TrackTypeDropdown.demo.js b/src/components/TrackTypeDropdown.demo.js
index b7e1b2a7..8f9a05c0 100644
--- a/src/components/TrackTypeDropdown.demo.js
+++ b/src/components/TrackTypeDropdown.demo.js
@@ -1,25 +1,29 @@
-import Demo, {props as P} from 'react-demo'
+import Demo, { props as P } from "react-demo";
 // See https://github.com/rpominov/react-demo for how to make a demo
 
 import TrackTypeDropdown from "./TrackTypeDropdown";
 
-export default (<Demo
-  props={{
-    id: P.string('theDropdown'),
-    className: P.string('someCSSClass'),
-    value: P.choices(['graph', 'haplotype', 'read']),
-  }}
->
-  {
-    (props, update) => {
+export default (
+  <Demo
+    props={{
+      id: P.string("theDropdown"),
+      className: P.string("someCSSClass"),
+      value: P.choices(["graph", "haplotype", "read"]),
+    }}
+  >
+    {(props, update) => {
       // We need to render the component under test using the props in props, and
       // call update when the component wants to adjust the props.
-      return <TrackTypeDropdown {...props} onChange={(new_value) => {
-        // Bind new value back up to value.
-        // Remember: we get a string 
-        update({value: new_value})
-      }}/>
-    }
-  }
-</Demo>)
-
+      return (
+        <TrackTypeDropdown
+          {...props}
+          onChange={(new_value) => {
+            // Bind new value back up to value.
+            // Remember: we get a string
+            update({ value: new_value });
+          }}
+        />
+      );
+    }}
+  </Demo>
+);
diff --git a/src/components/TrackTypeDropdown.js b/src/components/TrackTypeDropdown.js
index 26bac364..8a97789f 100644
--- a/src/components/TrackTypeDropdown.js
+++ b/src/components/TrackTypeDropdown.js
@@ -5,35 +5,33 @@ import Select from "react-select";
 /**
  * A track type dropdown component.
  * Created using composition of functions approach.
- * 
+ *
  * Expects a two-way-binding where "value" is the selected value (out of the
  * possible track types), and calling "onChange" updates the value.
- * 
+ *
  */
 
-
 // TODO: rename TrackTypeDropdown to be generalized dropdown component
-export function TrackTypeDropdown (props) {
-  
-    
-    // dropdown and selections
-    // upon selection of a dropdown option, call onChange function 
-    let dropdown = (
-      <div data-testid={props.testID}>
-        <Select {...props} onChange={o => {
-          props.onChange(o.value)}
-        }
-          options={props.options.map(o => ({
-            label: o, value: o
-          }))}
-          value={{label: props.value, value: props.value}}
-        />
-      </div>
-    );
-    
-    return (
-      dropdown
-    );
+export function TrackTypeDropdown(props) {
+  // dropdown and selections
+  // upon selection of a dropdown option, call onChange function
+  let dropdown = (
+    <div data-testid={props.testID}>
+      <Select
+        {...props}
+        onChange={(o) => {
+          props.onChange(o.value);
+        }}
+        options={props.options.map((o) => ({
+          label: o,
+          value: o,
+        }))}
+        value={{ label: props.value, value: props.value }}
+      />
+    </div>
+  );
+
+  return dropdown;
 }
 
 /* React checks for the type of each prop passed in to ensure that the correct type is being 
@@ -55,8 +53,7 @@ TrackTypeDropdown.defaultProps = {
   className: undefined,
   value: "graph",
   testID: "file-type-select-component",
-  options: ["graph", "haplotype", "read"]
+  options: ["graph", "haplotype", "read"],
 };
 
 export default TrackTypeDropdown;
-
diff --git a/src/components/TrackTypeDropdown.test.js b/src/components/TrackTypeDropdown.test.js
index ce75c55a..719992f7 100644
--- a/src/components/TrackTypeDropdown.test.js
+++ b/src/components/TrackTypeDropdown.test.js
@@ -1,21 +1,23 @@
-import React from 'react';
-import { render, fireEvent, waitFor }  from '@testing-library/react';
-import {TrackTypeDropdown} from './TrackTypeDropdown';
-import {screen} from '@testing-library/react';
+import React from "react";
+import { render, fireEvent, waitFor } from "@testing-library/react";
+import { TrackTypeDropdown } from "./TrackTypeDropdown";
+import { screen } from "@testing-library/react";
 
-describe('TrackTypeDropdown', () => {
-    it('calls the onChange callback handler', async () => {
-        const onChange = jest.fn();
-        const {queryByTestId} = render(
-            <TrackTypeDropdown value="haplotype" onChange={onChange}>
-            </TrackTypeDropdown>
-        );
-        const fileTypeSelectComponent = queryByTestId('file-type-select-component');
-        fireEvent.keyDown(fileTypeSelectComponent.firstChild, {key: "ArrowDown"});
-        await waitFor(() => screen.getByText("graph"));
-        fireEvent.click(screen.getByText("graph"));
+describe("TrackTypeDropdown", () => {
+  it("calls the onChange callback handler", async () => {
+    const onChange = jest.fn();
+    const { queryByTestId } = render(
+      <TrackTypeDropdown
+        value="haplotype"
+        onChange={onChange}
+      ></TrackTypeDropdown>
+    );
+    const fileTypeSelectComponent = queryByTestId("file-type-select-component");
+    fireEvent.keyDown(fileTypeSelectComponent.firstChild, { key: "ArrowDown" });
+    await waitFor(() => screen.getByText("graph"));
+    fireEvent.click(screen.getByText("graph"));
 
-        expect(onChange).toHaveBeenCalledTimes(1);
-        expect(onChange).toHaveBeenLastCalledWith("graph");
-    });
-});
\ No newline at end of file
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenLastCalledWith("graph");
+  });
+});
diff --git a/src/components/TubeMap.js b/src/components/TubeMap.js
index 50e57243..594eeafd 100644
--- a/src/components/TubeMap.js
+++ b/src/components/TubeMap.js
@@ -15,11 +15,11 @@ class TubeMap extends Component {
     console.log("Old node count:", (prevProps.nodes || []).length);
     console.log("Old read count:", (prevProps.reads || []).length);
     if (!isEqual(this.props, prevProps)) {
-      console.log('Props have changed so re-creating tube map');
+      console.log("Props have changed so re-creating tube map");
       this.updateVisOptions();
       this.createTubeMap();
     } else {
-      console.log('Props have not changed so leaving existing tube map');
+      console.log("Props have not changed so leaving existing tube map");
     }
   }
 
@@ -48,12 +48,15 @@ class TubeMap extends Component {
     for (let key of Object.keys(visOptions.colorSchemes)) {
       // Apply color-by-mapping-quality parameter to all the schemes.
       // TODO: When we get individual controls, pass through individual track options.
-      let colorScheme = {...visOptions.colorSchemes[key], colorReadsByMappingQuality: visOptions.colorReadsByMappingQuality};
+      let colorScheme = {
+        ...visOptions.colorSchemes[key],
+        colorReadsByMappingQuality: visOptions.colorReadsByMappingQuality,
+      };
       // update tubemap colors
       tubeMap.setColorSet(key, colorScheme);
     }
     tubeMap.setMappingQualityCutoff(visOptions.mappingQualityCutoff);
-  }  
+  }
 
   render() {
     return <svg id="svg" alt="Rendered sequence tube map visualization" />;
@@ -65,7 +68,7 @@ TubeMap.propTypes = {
   tracks: PropTypes.array.isRequired,
   reads: PropTypes.array.isRequired,
   region: PropTypes.array.isRequired,
-  visOptions: PropTypes.object.isRequired
+  visOptions: PropTypes.object.isRequired,
 };
 
 export default TubeMap;
diff --git a/src/components/TubeMapContainer.js b/src/components/TubeMapContainer.js
index 49bf4f6c..dd8ac702 100644
--- a/src/components/TubeMapContainer.js
+++ b/src/components/TubeMapContainer.js
@@ -8,7 +8,6 @@ import * as tubeMap from "../util/tubemap";
 import { dataOriginTypes } from "../enums";
 import PopUpInfoDialog from "./PopUpInfoDialog";
 
-
 class TubeMapContainer extends Component {
   state = {
     isLoading: true,
@@ -58,10 +57,10 @@ class TubeMapContainer extends Component {
       }
     }
     // updating visOptions will cause an error if the tubemap is not in place yet.
-    if(!this.state.isLoading) {
+    if (!this.state.isLoading) {
       // Hook into item clicks form the tube map
       tubeMap.setInfoCallback((text) => {
-        this.setState({infoDialogContent: text});
+        this.setState({ infoDialogContent: text });
       });
     }
   }
@@ -102,24 +101,31 @@ class TubeMapContainer extends Component {
     // TubeMapContainer instance, so we can have a shorter name for it.
     let attributes = this.state.infoDialogContent;
     let isOpen;
-    if (attributes === undefined){
+    if (attributes === undefined) {
       isOpen = false;
     } else {
       isOpen = true;
     }
     // resets value of infoDialogContent upon close
-    const closePopup = () => this.setState({infoDialogContent: undefined});
+    const closePopup = () => this.setState({ infoDialogContent: undefined });
 
     return (
       <div id="tubeMapContainer">
-        <PopUpInfoDialog open={isOpen} attributes={attributes} close={closePopup} />
+        <PopUpInfoDialog
+          open={isOpen}
+          attributes={attributes}
+          close={closePopup}
+        />
         <div id="tubeMapSVG">
           <TubeMap
             nodes={this.state.nodes}
             tracks={this.state.tracks}
             reads={this.state.reads}
             region={this.state.region}
-            visOptions={{coloredNodes: this.state.coloredNodes, ...this.props.visOptions}}
+            visOptions={{
+              coloredNodes: this.state.coloredNodes,
+              ...this.props.visOptions,
+            }}
           />
         </div>
       </div>
@@ -129,7 +135,10 @@ class TubeMapContainer extends Component {
   getRemoteTubeMapData = async () => {
     this.setState({ isLoading: true, error: null });
     try {
-      const json = await this.api.getChunkedData(this.props.viewTarget, this.cancelSignal);
+      const json = await this.api.getChunkedData(
+        this.props.viewTarget,
+        this.cancelSignal
+      );
       if (json.graph === undefined) {
         // We did not get back a graph, even if we didn't get an error either.
         const error = "Fetching remote data returned error";
@@ -159,10 +168,19 @@ class TubeMapContainer extends Component {
           }
         }
 
-        console.log("Graph track: " + graphTrackID + " Haplotype track: " + haplotypeTrackID);
+        console.log(
+          "Graph track: " +
+            graphTrackID +
+            " Haplotype track: " +
+            haplotypeTrackID
+        );
 
         const nodes = tubeMap.vgExtractNodes(json.graph);
-        const tracks = tubeMap.vgExtractTracks(json.graph, graphTrackID, haplotypeTrackID);
+        const tracks = tubeMap.vgExtractTracks(
+          json.graph,
+          graphTrackID,
+          haplotypeTrackID
+        );
 
         // Call vgExtractReads on each file of reads and store in readsArr
         let readsArr = [];
@@ -172,11 +190,17 @@ class TubeMapContainer extends Component {
           // For each returned list of reads from a file, convert all those reads to tube map format.
           // Include total read count to prevent duplicate ids.
           // Also include the source track's ID.
-          let newReads = tubeMap.vgExtractReads(nodes, tracks, gam, totalReads, readTrackIDs[readsArr.length]);
+          let newReads = tubeMap.vgExtractReads(
+            nodes,
+            tracks,
+            gam,
+            totalReads,
+            readTrackIDs[readsArr.length]
+          );
           readsArr.push(newReads);
           totalReads += newReads.length;
         }
-        
+
         // concatenate all reads together
         const reads = readsArr.flat();
 
@@ -188,9 +212,8 @@ class TubeMapContainer extends Component {
           tracks,
           reads,
           region,
-          coloredNodes
+          coloredNodes,
         });
-        
       }
     } catch (error) {
       this.handleFetchError(
diff --git a/src/config-client.js b/src/config-client.js
index 9da40b74..1e2a9489 100644
--- a/src/config-client.js
+++ b/src/config-client.js
@@ -8,4 +8,4 @@ const GLOBAL_NAME = "__sequence_tube_map_config";
 const GLOBAL_HOME = globalThis || window || global;
 
 // Hide the config in the globals object when we run.
-GLOBAL_HOME[GLOBAL_NAME] = config
+GLOBAL_HOME[GLOBAL_NAME] = config;
diff --git a/src/config-global.mjs b/src/config-global.mjs
index 02298dfd..cdbf9951 100644
--- a/src/config-global.mjs
+++ b/src/config-global.mjs
@@ -6,15 +6,13 @@ const GLOBAL_NAME = "__sequence_tube_map_config";
 /*global globalThis*/
 const GLOBAL_HOME = globalThis || window || global;
 
-
-
 // Find the config in the globals.
 export const config = GLOBAL_HOME[GLOBAL_NAME];
 
 if (!config) {
-  throw new Error("config-global.mjs loaded before either config-client.js or config-server.mjs");
+  throw new Error(
+    "config-global.mjs loaded before either config-client.js or config-server.mjs"
+  );
 }
 
 export default config;
-
-
diff --git a/src/config-server.mjs b/src/config-server.mjs
index 67814327..fffc68b7 100644
--- a/src/config-server.mjs
+++ b/src/config-server.mjs
@@ -3,7 +3,7 @@
 // This file needs to be valid for Node but also for Jest to load, so we still
 // can't just import the config weith a filetype assert.
 
-import { readFileSync } from 'fs';
+import { readFileSync } from "fs";
 import dirname from "es-dirname";
 
 // Now we want to load config.json.
@@ -32,7 +32,7 @@ import dirname from "es-dirname";
 // Luckily the es-dirname module exists which can find *our* directory by
 // looking at the stack. See
 // https://github.com/vdegenne/es-dirname/blob/master/es-dirname.js
-const config = JSON.parse(readFileSync(dirname() + '/config.json'));
+const config = JSON.parse(readFileSync(dirname() + "/config.json"));
 
 const GLOBAL_NAME = "__sequence_tube_map_config";
 // Tell eslint that globalThis might exist.
@@ -40,4 +40,4 @@ const GLOBAL_NAME = "__sequence_tube_map_config";
 const GLOBAL_HOME = globalThis || window || global;
 
 // Hide the config in the globals object when we run.
-GLOBAL_HOME[GLOBAL_NAME] = config
+GLOBAL_HOME[GLOBAL_NAME] = config;
diff --git a/src/end-to-end.test.js b/src/end-to-end.test.js
index 1c269bff..76be1cb8 100644
--- a/src/end-to-end.test.js
+++ b/src/end-to-end.test.js
@@ -92,15 +92,15 @@ async function waitForLoadStart() {
 
 // Wait for the loading throbber to disappear
 async function waitForLoadEnd() {
-  console.log("Waiting for load end")
+  console.log("Waiting for load end");
   return new Promise((resolve, reject) => {
     function waitAround() {
       let loader = document.getElementById("loader");
       if (loader) {
-        console.log("Still loading...")
+        console.log("Still loading...");
         setTimeout(waitAround, 100);
       } else {
-        console.log("Loading over!")
+        console.log("Loading over!");
         resolve();
       }
     }
@@ -297,13 +297,13 @@ describe("When we wait for it to load", () => {
     expect(svg.getElementsByTagName("title").length).toEqual(65);
   });
 
-  it('draws the right SVG for cactus multiple reads', async () => {
+  it("draws the right SVG for cactus multiple reads", async () => {
     let dropdown = document.getElementById("dataSourceSelect");
 
     // Input data dropdown
     await userEvent.selectOptions(
       screen.getByLabelText(/Data/i),
-      'cactus multiple reads'
+      "cactus multiple reads"
     );
     const autocomplete = screen.getByTestId("autocomplete");
     const input = autocomplete.querySelector("input");
@@ -334,11 +334,8 @@ describe("When we wait for it to load", () => {
     expect(svg).toBeTruthy();
     expect(svg.getElementsByTagName("title").length).toEqual(23);
   });
-
 });
 
-
-
 it("produces correct link for view before & after go is pressed", async () => {
   // First test that after pressing go, the link reflects the dat form
   const expectedLinkBRCA1 =
@@ -388,10 +385,7 @@ it("can retrieve the list of mounted graph files", async () => {
   // Swap over to the custom files mode
   await act(async () => {
     let dropdown = document.getElementById("dataSourceSelect");
-    await userEvent.selectOptions(
-      screen.getByLabelText(/Data/i),
-      "custom"
-    );
+    await userEvent.selectOptions(screen.getByLabelText(/Data/i), "custom");
   });
 
   // Find the select box's input
@@ -404,22 +398,22 @@ it("can retrieve the list of mounted graph files", async () => {
     userEvent.click(trackSelectButton);
   });
 
-
   // add a new track
   await waitFor(() => {
     fireEvent.click(screen.queryByTestId("track-add-button-component"));
   });
 
-
   // We shouldn't see the option before we open the dropdown
   expect(screen.queryByText("cactus.vg.xg")).not.toBeInTheDocument();
 
-
   // Make sure the right entry eventually shows up (since we could be racing
   // the initial load from the component mounting)
   await waitFor(() => {
     // try to select a graph file
-    fireEvent.keyDown(screen.queryByTestId('file-select-component1').firstChild, {key: "ArrowDown"});
+    fireEvent.keyDown(
+      screen.queryByTestId("file-select-component1").firstChild,
+      { key: "ArrowDown" }
+    );
   });
 
   expect(screen.queryByText("cactus.vg.xg")).toBeTruthy();
@@ -432,10 +426,7 @@ it("can accept uploaded files", async () => {
   // Swap over to the custom files mode
   await act(async () => {
     let dropdown = document.getElementById("dataSourceSelect");
-    await userEvent.selectOptions(
-      screen.getByLabelText(/Data/i),
-      "custom"
-    );
+    await userEvent.selectOptions(screen.getByLabelText(/Data/i), "custom");
   });
 
   // Find the select box's input
@@ -447,7 +438,6 @@ it("can accept uploaded files", async () => {
     userEvent.click(trackSelectButton);
   });
 
-
   // add a new track
   await waitFor(() => {
     fireEvent.click(screen.queryByTestId("track-add-button-component"));
@@ -455,7 +445,10 @@ it("can accept uploaded files", async () => {
 
   await waitFor(() => {
     // wait for picker type dropdown
-    fireEvent.keyDown(screen.queryByTestId('picker-type-select-component1').firstChild, {key: "ArrowDown"});
+    fireEvent.keyDown(
+      screen.queryByTestId("picker-type-select-component1").firstChild,
+      { key: "ArrowDown" }
+    );
   });
 
   // select the upload option
@@ -476,8 +469,10 @@ it("can accept uploaded files", async () => {
   // We need to put the data block in an enclosing array, or else the block
   // will be iterated and each byte will be stringified and *those* bytes will
   // be uploaded.
-  const file = new window.File([fileData], "cactus.vg", { type: "application/octet-stream" });
-  
+  const file = new window.File([fileData], "cactus.vg", {
+    type: "application/octet-stream",
+  });
+
   console.log("Adding file:", file);
   await act(async () => {
     await waitFor(() => {
@@ -505,7 +500,7 @@ it("can accept uploaded files", async () => {
   // try to compute the svg
   const autocomplete = screen.getByTestId("autocomplete");
   const input = autocomplete.querySelector("input");
-  
+
   console.log("Clearing input");
   await userEvent.clear(input);
 
@@ -533,4 +528,4 @@ it("can accept uploaded files", async () => {
 
   console.log("Test over");
 }, 50000); // We need to allow a long time for the slow vg test machines.
-// TODO: Is this slow because of unnecessary re-renders caused by the new color schemes taking effect and being rendered with the old data, before the new data downloads?
\ No newline at end of file
+// TODO: Is this slow because of unnecessary re-renders caused by the new color schemes taking effect and being rendered with the old data, before the new data downloads?
diff --git a/src/index.js b/src/index.js
index b84b3c50..55403767 100644
--- a/src/index.js
+++ b/src/index.js
@@ -17,22 +17,33 @@ if (package_json.homepage) {
 
 console.log("Configuring router with basename " + basename);
 
-ReactDOM.render((
-<BrowserRouter basename={basename}>
-  <Routes>
-    <Route path="/">
-      {
-        // Main application renders at the root
-      }
-      <Route index element={<App />} />
-      {
-        // Demos for custom controls show up at /demo
-        // Each demo gets a nice hashbang URL.
-      }
-      <Route path="demo" element={<DemoLibrary />} />
-      <Route path="*" element={() => {<p>No React route found for current path</p>}}/>
-    </Route>
-    <Route path="*" element={() => {<p>No React route found for current path</p>}}/>
-  </Routes>
-</BrowserRouter>
-), document.getElementById("root"));
+ReactDOM.render(
+  <BrowserRouter basename={basename}>
+    <Routes>
+      <Route path="/">
+        {
+          // Main application renders at the root
+        }
+        <Route index element={<App />} />
+        {
+          // Demos for custom controls show up at /demo
+          // Each demo gets a nice hashbang URL.
+        }
+        <Route path="demo" element={<DemoLibrary />} />
+        <Route
+          path="*"
+          element={() => {
+            <p>No React route found for current path</p>;
+          }}
+        />
+      </Route>
+      <Route
+        path="*"
+        element={() => {
+          <p>No React route found for current path</p>;
+        }}
+      />
+    </Routes>
+  </BrowserRouter>,
+  document.getElementById("root")
+);
diff --git a/src/server.mjs b/src/server.mjs
index 065dea55..46f611bf 100644
--- a/src/server.mjs
+++ b/src/server.mjs
@@ -20,8 +20,15 @@ import compression from "compression";
 import { server as WebSocketServer } from "websocket";
 import dotenv from "dotenv";
 import dirname from "es-dirname";
-import { readFileSync, writeFile } from 'fs';
-import { parseRegion, convertRegionToRangeRegion, stringifyRangeRegion, stringifyRegion, isValidURL, readsExist } from "./common.mjs";
+import { readFileSync, writeFile } from "fs";
+import {
+  parseRegion,
+  convertRegionToRangeRegion,
+  stringifyRangeRegion,
+  stringifyRegion,
+  isValidURL,
+  readsExist,
+} from "./common.mjs";
 import { Readable } from "stream";
 import { finished } from "stream/promises";
 import sanitize from "sanitize-filename";
@@ -29,9 +36,6 @@ import { createHash } from "node:crypto";
 import cron from "node-cron";
 import { RWLock, combine } from "readers-writer-lock";
 
-
-
-
 if (process.env.NODE_ENV !== "production") {
   // Load any .env file config
   dotenv.config();
@@ -62,29 +66,26 @@ const ALLOWED_DATA_DIRECTORIES = [
 
 const GRAPH_EXTENSIONS = [".xg", ".vg", ".pg", ".hg", ".gbz"];
 
-const HAPLOTYPE_EXTENSIONS = [
-  ".gbwt",
-  ".gbz"
-]
+const HAPLOTYPE_EXTENSIONS = [".gbwt", ".gbz"];
 
 const fileTypes = {
   GRAPH: "graph",
   HAPLOTYPE: "haplotype",
   READ: "read",
-  BED:"bed",
+  BED: "bed",
 };
 
 const lockMap = new Map();
 
 const lockTypes = {
   READ_LOCK: "read_lock",
-  WRITE_LOCK: "write_lock"
-}
+  WRITE_LOCK: "write_lock",
+};
 
 // In memory storage of fetched file eTags
 // Used to check if the file has been updated and we need to fetch again
 // Stores urls mapped to the eTag from the most recently recieved request
-const ETagMap = new Map(); 
+const ETagMap = new Map();
 
 // Make sure that the scratch directory exists at startup, so multiple requests
 // can't fight over its creation.
@@ -135,7 +136,7 @@ function deleteExpiredFiles(directoryPath) {
   const currentTime = new Date().getTime();
 
   if (!fs.existsSync(directoryPath)) {
-    return
+    return;
   }
 
   const files = fs.readdirSync(directoryPath);
@@ -173,7 +174,7 @@ async function lockDirectory(directoryPath, lockType, func) {
   // if there are no locks, create a new lock and store it in the lock directionary
   if (!lock) {
     lock = new RWLock();
-    
+
     lockMap.set(directoryPath, lock);
   }
 
@@ -186,7 +187,6 @@ async function lockDirectory(directoryPath, lockType, func) {
     console.log("Not a valid lock type:", lockType);
     return 1;
   }
-
 }
 
 // expects an array of directory paths, attemping to acquire all directory locks
@@ -195,7 +195,7 @@ async function lockDirectory(directoryPath, lockType, func) {
 async function lockDirectories(directoryPaths, lockType, func) {
   // input is unexpected
   if (!directoryPaths || directoryPaths.length === 0) {
-    return
+    return;
   }
 
   // last lock to acquire, ready to proceed
@@ -205,19 +205,19 @@ async function lockDirectories(directoryPaths, lockType, func) {
 
   // attempt to acquire a lock for the next directory, and call lockDirectories on the remaining directories
   const currDirectory = directoryPaths.pop();
-  return lockDirectory(currDirectory, lockType, async function() {
+  return lockDirectory(currDirectory, lockType, async function () {
     return lockDirectories(directoryPaths, lockType, func);
-  })
+  });
 }
 
 // runs every hour
 // deletes any files in the download directory past the set fileExpirationTime set in config
-cron.schedule('0 * * * *', async () => {
+cron.schedule("0 * * * *", async () => {
   console.log("cron scheduled check");
   // attempt to acquire a write lock for each on the directory before attemping to delete files
   for (const dir of [DOWNLOAD_DATA_PATH, UPLOAD_DATA_PATH]) {
     try {
-      await lockDirectory(dir, lockTypes.WRITE_LOCK, async function() {
+      await lockDirectory(dir, lockTypes.WRITE_LOCK, async function () {
         deleteExpiredFiles(dir);
       });
     } catch (e) {
@@ -267,7 +267,7 @@ api.post("/trackFileSubmission", upload.single("trackFile"), (req, res) => {
   } else {
     res.json({ path: path.relative(".", req.file.path) });
   }
-})
+});
 
 function indexGamSorted(req, res) {
   const prefix = req.file.path.substring(0, req.file.path.lastIndexOf("."));
@@ -372,9 +372,13 @@ api.post("/getChunkedData", (req, res, next) => {
   // throw synchronously.
   captureErrors(next, async () => {
     // put readlock on necessary directories while processing chunked data
-    return lockDirectories([DOWNLOAD_DATA_PATH, UPLOAD_DATA_PATH], lockTypes.READ_LOCK, async function() {
-      return getChunkedData(req, res, next);
-    });
+    return lockDirectories(
+      [DOWNLOAD_DATA_PATH, UPLOAD_DATA_PATH],
+      lockTypes.READ_LOCK,
+      async function () {
+        return getChunkedData(req, res, next);
+      }
+    );
   });
 });
 
@@ -384,7 +388,6 @@ api.post("/getChunkedData", (req, res, next) => {
 // rewrite the flow of talking to vg in terms of async/await or abandon
 // async/await altogether in order to get out of it.
 async function getChunkedData(req, res, next) {
-
   console.time("request-duration");
   console.log("http POST getChunkedData received");
   console.log(`region = ${req.body.region}`);
@@ -396,7 +399,9 @@ async function getChunkedData(req, res, next) {
     parsedRegion = parseRegion(req.body.region);
   } catch (e) {
     // Whatever went wrong in the parsing, it makes the request bad.
-    throw new BadRequestError("Wrong query: " + e.message + " See ? button above.");
+    throw new BadRequestError(
+      "Wrong query: " + e.message + " See ? button above."
+    );
   }
 
   // There's a chance this request was sent before the proper tracks were fetched
@@ -425,17 +430,22 @@ async function getChunkedData(req, res, next) {
       }
 
       // Convert fetchedTracks into an object format the server expects
-      let fetchedTracksObject = fetchedTracks.reduce((accumulator, obj, index) => {
-        accumulator[index] = obj;
-        return accumulator;
-      }, {});
+      let fetchedTracksObject = fetchedTracks.reduce(
+        (accumulator, obj, index) => {
+          accumulator[index] = obj;
+          return accumulator;
+        },
+        {}
+      );
 
-      console.log("Using new fetched tracks", JSON.stringify(fetchedTracksObject));
+      console.log(
+        "Using new fetched tracks",
+        JSON.stringify(fetchedTracksObject)
+      );
       req.body.tracks = fetchedTracksObject;
     }
   }
 
-
   // Assign each request a UUID. v1 UUIDs can be very similar for similar
   // timestamps on the same node, but are still guaranteed to be unique within
   // a given nodejs process.
@@ -480,12 +490,12 @@ async function getChunkedData(req, res, next) {
   }
   // client is going to send simplify = true if they want to simplify view
   req.simplify = false;
-  if (req.body.simplify){
-    if (readsExist(req.body.tracks)){
+  if (req.body.simplify) {
+    if (readsExist(req.body.tracks)) {
       throw new BadRequestError("Simplify cannot be used on read tracks.");
     }
     req.simplify = true;
-  } 
+  }
 
   // check the bed file if this region has been pre-fetched
   let chunkPath = "";
@@ -499,7 +509,7 @@ async function getChunkedData(req, res, next) {
   // want to make sure it can only start after there's no possibility that we
   // concurrently reject.
   let sentResponse = false;
-  
+
   // We always need a range-version of the region, to fill in req.region, to
   // generate the region part of the response with the range.
   let rangeRegion = convertRegionToRangeRegion(parsedRegion);
@@ -524,10 +534,14 @@ async function getChunkedData(req, res, next) {
 
     if (req.withGbwt) {
       //either push gbz with graph and haplotype or push seperate graph and gbwt file
-      if (graphFile.endsWith(".gbz") && gbwtFile.endsWith(".gbz") && graphFile === gbwtFile) { 
+      if (
+        graphFile.endsWith(".gbz") &&
+        gbwtFile.endsWith(".gbz") &&
+        graphFile === gbwtFile
+      ) {
         // use gbz haplotype
         vgChunkParams.push("-x", graphFile);
-      } else if (!graphFile.endsWith(".gbz") && gbwtFile.endsWith(".gbz")){
+      } else if (!graphFile.endsWith(".gbz") && gbwtFile.endsWith(".gbz")) {
         throw new BadRequestError("Cannot use gbz as haplotype alone.");
       } else {
         // ignoring haplotype from graph file and using haplotype from gbwt file
@@ -566,16 +580,25 @@ async function getChunkedData(req, res, next) {
       console.log("pushing gam file", gamFile);
       vgChunkParams.push("-a", gamFile, "-g");
     }
-    
 
     // to seach by node ID use "node" for the sequence name, e.g. 'node:1-10'
     if (parsedRegion.contig === "node") {
       if (parsedRegion.distance !== undefined) {
         // Start and distance of node IDs, so send that idiomatically.
-        vgChunkParams.push("-r", parsedRegion.start, "-c", parsedRegion.distance);
+        vgChunkParams.push(
+          "-r",
+          parsedRegion.start,
+          "-c",
+          parsedRegion.distance
+        );
       } else {
         // Start and end of node IDs
-        vgChunkParams.push("-r", "".concat(parsedRegion.start, ":",  parsedRegion.end), "-c", 20);
+        vgChunkParams.push(
+          "-r",
+          "".concat(parsedRegion.start, ":", parsedRegion.end),
+          "-c",
+          20
+        );
       }
     } else {
       // Ask for the whole region by start - end range.
@@ -595,7 +618,7 @@ async function getChunkedData(req, res, next) {
     const vgChunkCall = spawn(`${VG_PATH}vg`, vgChunkParams);
     // vg simplify for gam files
     let vgSimplifyCall = null;
-    if (req.simplify){
+    if (req.simplify) {
       vgSimplifyCall = spawn(`${VG_PATH}vg`, ["simplify", "-"]);
       console.log("Spawning vg simplify call");
     }
@@ -626,7 +649,7 @@ async function getChunkedData(req, res, next) {
     });
 
     vgChunkCall.stdout.on("data", function (data) {
-      if (req.simplify){
+      if (req.simplify) {
         vgSimplifyCall.stdin.write(data);
       } else {
         vgViewCall.stdin.write(data);
@@ -635,7 +658,7 @@ async function getChunkedData(req, res, next) {
 
     vgChunkCall.on("close", (code) => {
       console.log(`vg chunk exited with code ${code}`);
-      if (req.simplify){
+      if (req.simplify) {
         vgSimplifyCall.stdin.end();
       } else {
         vgViewCall.stdin.end();
@@ -651,16 +674,10 @@ async function getChunkedData(req, res, next) {
     });
 
     // vg simplify
-    if (req.simplify){
+    if (req.simplify) {
       vgSimplifyCall.on("error", function (err) {
         console.log(
-          "Error executing " +
-            VG_PATH +
-            "vg " +
-            "simplify " + 
-            "- " + 
-            ": " +
-            err
+          "Error executing " + VG_PATH + "vg " + "simplify " + "- " + ": " + err
         );
         if (!sentResponse) {
           sentResponse = true;
@@ -746,28 +763,28 @@ async function getChunkedData(req, res, next) {
     // vg simplify for bed files
     let vgSimplifyCall = null;
     let vgViewArguments = ["view", "-j"];
-    if (req.simplify){
-      vgSimplifyCall = spawn(`${VG_PATH}vg`, ["simplify", filename,]);
+    if (req.simplify) {
+      vgSimplifyCall = spawn(`${VG_PATH}vg`, ["simplify", filename]);
       vgViewArguments.push("-");
       console.log("Spawning vg simplify call");
     } else {
       vgViewArguments.push(filename);
     }
-     
+
     let vgViewCall = spawn(`${VG_PATH}vg`, vgViewArguments);
 
     let graphAsString = "";
     req.error = Buffer.alloc(0);
 
     // vg simplify
-    if (req.simplify){
+    if (req.simplify) {
       vgSimplifyCall.on("error", function (err) {
         console.log(
           "Error executing " +
             VG_PATH +
             "vg " +
-            "simplify " + 
-            filename + 
+            "simplify " +
+            filename +
             ": " +
             err
         );
@@ -849,7 +866,7 @@ async function getChunkedData(req, res, next) {
           if (path.name === parsedRegion.contig) {
             // This is the path we asked about, so it goes first
             refPaths.push(path);
-          } else { 
+          } else {
             // Then we put each other path
             otherPaths.push(path);
           }
@@ -991,13 +1008,12 @@ async function getChunkName(bed, parsedRegion) {
   let chunk = "";
   let regionInfo = await getBedRegions(bed);
 
-
   for (let i = 0; i < regionInfo["desc"].length; i++) {
     let entryRegion = {
       contig: regionInfo["chr"][i],
       start: regionInfo["start"][i],
-      end: regionInfo["end"][i]
-    }
+      end: regionInfo["end"][i],
+    };
     if (stringifyRegion(entryRegion) === stringifyRegion(parsedRegion)) {
       // A BED entry is defined for this region exactly
       if (regionInfo["chunk"][i] !== "") {
@@ -1007,7 +1023,7 @@ async function getChunkName(bed, parsedRegion) {
       }
     }
   }
-  
+
   return chunk;
 }
 
@@ -1031,7 +1047,7 @@ async function getChunkPath(bed, parsedRegion) {
   let chunkPath = bedChunkLocalPath(bed, chunk);
 
   if (isValidURL(bed)) {
-    // download the rest of the chunk 
+    // download the rest of the chunk
     await retrieveChunk(bed, chunk, true);
   }
 
@@ -1044,7 +1060,9 @@ async function getChunkPath(bed, parsedRegion) {
     console.log(`found pre-fetched chunk at ${chunk_file}`);
   } else {
     // The chunk doesn't exist, but was supposed to.
-    throw new BadRequestError(`Couldn't find pre-fetched chunk at ${chunk_file}`);
+    throw new BadRequestError(
+      `Couldn't find pre-fetched chunk at ${chunk_file}`
+    );
   }
 
   return chunkPath;
@@ -1100,18 +1118,13 @@ function processAnnotationFile(req, res, next) {
 }
 
 function processGamFile(req, res, next, gamFile, gamFileNumber) {
-  try{
+  try {
     if (!isAllowedPath(gamFile)) {
       // This is probably under SCRATCH_DATA_PATH
       throw new BadRequestError("Path to GAM file not allowed: " + req.gamFile);
     }
 
-    const vgViewChild = spawn(`${VG_PATH}vg`, [
-      "view",
-      "-j",
-      "-a",
-      gamFile,
-    ]);
+    const vgViewChild = spawn(`${VG_PATH}vg`, ["view", "-j", "-a", gamFile]);
 
     vgViewChild.stderr.on("data", (data) => {
       console.log(`err data: ${data}`);
@@ -1131,18 +1144,16 @@ function processGamFile(req, res, next, gamFile, gamFileNumber) {
         .map(function (a) {
           return JSON.parse(a);
         });
-        // Organize the results by number
-        req.gamResults[gamFileNumber] = gamArr;
-        req.gamRemaining -= 1;
-        if (req.gamRemaining == 0) {
-          processRegionFile(req, res, next);
-        }
+      // Organize the results by number
+      req.gamResults[gamFileNumber] = gamArr;
+      req.gamRemaining -= 1;
+      if (req.gamRemaining == 0) {
+        processRegionFile(req, res, next);
+      }
     });
-
   } catch (error) {
     return next(error);
   }
-
 }
 
 function processGamFiles(req, res, next) {
@@ -1162,34 +1173,33 @@ function processGamFiles(req, res, next) {
     // */chunk_*.gam for 0
     // */chunk-1_*.gam for 1, 2, 3, etc.
     let gamNameToNumber = (gamName) => {
-      const pattern = /.*\/chunk(-([0-9])+)?_.*\.gam/
-      let matches = gamName.match(pattern)
+      const pattern = /.*\/chunk(-([0-9])+)?_.*\.gam/;
+      let matches = gamName.match(pattern);
       if (!matches) {
-        throw new InternalServerError("Bad GAM name " + gamName) 
+        throw new InternalServerError("Bad GAM name " + gamName);
       }
       if (matches[2] !== undefined) {
         // We have a number
-        return parseInt(matches[2])
+        return parseInt(matches[2]);
       }
       // If there's no number we are chunk 0
-      return 0
-    }
+      return 0;
+    };
 
     // Sort all the GAM files we found in order of their chunk number,
     // ascending. This will also be the order of the GAM files passed to chunk,
     // and so the order we got the tracks in, and thus the order we want the
     // results in.
     gamFiles.sort((a, b) => {
-      return gamNameToNumber(a) - gamNameToNumber(b)
-    })
+      return gamNameToNumber(a) - gamNameToNumber(b);
+    });
 
     req.gamResults = [];
     req.gamRemaining = gamFiles.length;
-    for (let i = 0; i < gamFiles.length; i++){
+    for (let i = 0; i < gamFiles.length; i++) {
       processGamFile(req, res, next, gamFiles[i], i);
     }
     console.timeEnd("processing gam files");
-
   } catch (error) {
     return next(error);
   }
@@ -1373,13 +1383,13 @@ api.get("/getFilenames", (req, res) => {
     fs.readdirSync(MOUNTED_DATA_PATH).forEach((file) => {
       const absPath = path.resolve(MOUNTED_DATA_PATH, file);
       if (endsWithExtensions(file, GRAPH_EXTENSIONS)) {
-        result.files.push({"trackFile": absPath, "trackType": "graph"});
+        result.files.push({ trackFile: absPath, trackType: "graph" });
       }
       if (endsWithExtensions(file, HAPLOTYPE_EXTENSIONS)) {
-        result.files.push({"trackFile": absPath, "trackType": "haplotype"});
+        result.files.push({ trackFile: absPath, trackType: "haplotype" });
       }
       if (file.endsWith(".sorted.gam")) {
-        result.files.push({"trackFile": absPath, "trackType": "read"});
+        result.files.push({ trackFile: absPath, trackType: "read" });
       }
       if (file.endsWith(".bed")) {
         result.bedFiles.push(absPath);
@@ -1476,55 +1486,60 @@ function hashString(str) {
 }
 
 // Given a URL and a filename, download the given URL to that filename. Assumes required directories exist.
-const downloadFile = async(fileURL, destination) => {
+const downloadFile = async (fileURL, destination) => {
   if (!isAllowedPath(destination)) {
-    throw new BadRequestError("Download destination path not allowed: " + destination);
+    throw new BadRequestError(
+      "Download destination path not allowed: " + destination
+    );
   }
 
-  const response = await fetchAndValidate(fileURL, config.maxFileSizeBytes, destination);
+  const response = await fetchAndValidate(
+    fileURL,
+    config.maxFileSizeBytes,
+    destination
+  );
 
   // file has already been downloaded and has not been updated since last fetch
   if (!response) {
     console.log("File has already been downloaded at ", destination);
-    return
+    return;
   }
 
   console.log("Save to:", destination);
- 
+
   // overwrites file if it already exists
-  const fileStream = fs.createWriteStream(destination, { flags: 'w' });
+  const fileStream = fs.createWriteStream(destination, { flags: "w" });
   await finished(Readable.fromWeb(response.body).pipe(fileStream));
-
-}
+};
 
 // url: url destination to fetch from
 // maxBytes: maxBytes before aborting fetch
 // existingLocation: the existing location of a file, to prevent duplicate fetches of a file already on disk
 //                   leaving it empty will result in always fetching
-const fetchAndValidate = async(url, maxBytes, existingLocation = null) => {
+const fetchAndValidate = async (url, maxBytes, existingLocation = null) => {
   let fetchHeader = {};
   // We don't want to fetch again if we have a copy on disk
   // Use a "If-None-Match" header to only fetch if our copy is outdated
   if (existingLocation && fs.existsSync(existingLocation)) {
     fetchHeader = {
-      "If-None-Match": ETagMap.get(url) || "-1"
-    }
+      "If-None-Match": ETagMap.get(url) || "-1",
+    };
   }
   const options = {
     method: "GET",
     credentials: "omit",
     cache: "default",
     signal: timeoutController(config.fetchTimeout).signal,
-    headers: fetchHeader
+    headers: fetchHeader,
   };
-  
+
   console.log("Fetching URL:", url);
   let response = await fetch(url, options);
 
   // file exists on disk and file has not been updated since last fetch
   if (response.status === 304) {
     console.log("file not modified since last fetch");
-    return 0
+    return 0;
   }
 
   // update our eTag for this url
@@ -1532,16 +1547,18 @@ const fetchAndValidate = async(url, maxBytes, existingLocation = null) => {
 
   // check for unsuccessful response codes
   if (!response.ok) {
-    throw new BadRequestError(`Fetch request for ${url} failed: ` + response.status);
+    throw new BadRequestError(
+      `Fetch request for ${url} failed: ` + response.status
+    );
   }
-  
-  
 
   // check for size specified in header
   const contentLength = response.headers.get("Content-Length");
 
   if (contentLength > maxBytes) {
-    throw new Error(`Fetch request for ${url} failed: Content-Length exceeds maximum file size of ${maxBytes} bytes`);
+    throw new Error(
+      `Fetch request for ${url} failed: Content-Length exceeds maximum file size of ${maxBytes} bytes`
+    );
   }
 
   // use a reader to make sure we're not reading past the max size allowed
@@ -1551,7 +1568,7 @@ const fetchAndValidate = async(url, maxBytes, existingLocation = null) => {
   const dataRead = [];
 
   while (true) {
-    let {done, value} = await reader.read();
+    let { done, value } = await reader.read();
 
     if (done) {
       break;
@@ -1562,13 +1579,14 @@ const fetchAndValidate = async(url, maxBytes, existingLocation = null) => {
 
     if (bytesRead > maxBytes) {
       reader.cancel();
-      throw new Error(`Fetch request for ${url} failed: received content exceeds maximum file size of ${maxBytes} bytes`);
+      throw new Error(
+        `Fetch request for ${url} failed: received content exceeds maximum file size of ${maxBytes} bytes`
+      );
     }
   }
 
   return new Response(new Blob(dataRead), { headers: response.headers });
-
-}
+};
 
 // Download files for the specified relative chunk path, for the BED file at
 // the given URL.
@@ -1577,7 +1595,7 @@ const fetchAndValidate = async(url, maxBytes, existingLocation = null) => {
 // true, all files listed in chunk_contents.txt will be downloaded.
 // includeContent is false when we select a region, we only need the track names
 // includeContent is true when the go button is pressed and a getChunkedData request is called
-const retrieveChunk = async(bedURL, chunk, includeContent) => {
+const retrieveChunk = async (bedURL, chunk, includeContent) => {
   // path to the designated chunk in the temp directory
   const chunkDir = bedChunkLocalPath(bedURL, chunk);
 
@@ -1595,7 +1613,10 @@ const retrieveChunk = async(bedURL, chunk, includeContent) => {
   // Each chunk has an index in "chunk_contents.txt"
   let chunkContentURL = new URL("chunk_contents.txt", chunkURL).toString();
 
-  let response = await fetchAndValidate(chunkContentURL, config.maxFileSizeBytes);
+  let response = await fetchAndValidate(
+    chunkContentURL,
+    config.maxFileSizeBytes
+  );
 
   const chunkContent = await response.text();
   const fileNames = chunkContent.split("\n");
@@ -1608,7 +1629,9 @@ const retrieveChunk = async(bedURL, chunk, includeContent) => {
     }
     if (fileName !== sanitize(fileName)) {
       // Make sure we don't do things like get out of the directory.
-      throw new BadRequestError(`Chunk index at ${chunkContentURL} cointains disallowed filename ${fileName}`); 
+      throw new BadRequestError(
+        `Chunk index at ${chunkContentURL} cointains disallowed filename ${fileName}`
+      );
     }
 
     // We can interpret all the files in chunk_contents.txt relative to the file they are listed in.
@@ -1620,21 +1643,19 @@ const retrieveChunk = async(bedURL, chunk, includeContent) => {
       await downloadFile(chunkFileURL, chunkFilePath);
     }
   }
-  
-}
-
+};
 
 // aborts fetch request after certain amount of time
 const timeoutController = (seconds) => {
   let controller = new AbortController();
   setTimeout(() => controller.abort(), seconds * 1000);
   return controller;
-}
+};
 
 // Expects a bed file and a chunk name
 // Attempts to download tracks associated with the chunk name from the bed file if it is a URL
 // Returns tracks found from local directories as a tracks object
-async function getChunkTracks (bedFile, chunk) {
+async function getChunkTracks(bedFile, chunk) {
   // Download tracks.json file if it is a URL
   if (isValidURL(bedFile)) {
     await retrieveChunk(bedFile, chunk, false);
@@ -1662,7 +1683,11 @@ api.post("/getChunkTracks", (req, res, next) => {
   captureErrors(next, async () => {
     console.log("received request for chunk tracks");
     if (!req.body.bedFile || !req.body.chunk) {
-      throw new BadRequestError("Invalid request format", req.body.bedFile, req.body.chunk);
+      throw new BadRequestError(
+        "Invalid request format",
+        req.body.bedFile,
+        req.body.chunk
+      );
     }
 
     // tracks are falsy if fetch is unsuccessful
@@ -1696,7 +1721,14 @@ api.post("/getBedRegions", (req, res, next) => {
 // return a data structure decribing all the pre-cached regions it defines.
 // Validates file paths for user-accessibility. May throw.
 async function getBedRegions(bed) {
-  let bed_info = { chr: [], start: [], end: [], desc: [], chunk: [], tracks: []};
+  let bed_info = {
+    chr: [],
+    start: [],
+    end: [],
+    desc: [],
+    chunk: [],
+    tracks: [],
+  };
   let bed_data;
   let lines;
   let isURL = false;
@@ -1705,22 +1737,21 @@ async function getBedRegions(bed) {
     isURL = true;
     const reponse = await fetchAndValidate(bed, config.maxFileSizeBytes);
     bed_data = await reponse.text();
-
-  } else {  // otherwise search for bed file in dataPath
+  } else {
+    // otherwise search for bed file in dataPath
     if (!bed.endsWith(".bed")) {
       throw new BadRequestError("BED file path does not end in .bed: " + bed);
-    } 
+    }
     if (!isAllowedPath(bed)) {
       throw new BadRequestError("BED file path not allowed: " + bed);
     }
     if (!fs.existsSync(bed)) {
       throw new BadRequestError("BED file not found: " + bed);
     }
-  
+
     // Load and parse the BED file
     bed_data = fs.readFileSync(bed).toString();
   }
-  
 
   lines = bed_data.split("\n");
   lines.map(function (line) {
@@ -1728,7 +1759,7 @@ async function getBedRegions(bed) {
 
     if (records.length < 3) {
       // This is an empty line or otherwise not BED
-      return
+      return;
     }
     bed_info["chr"].push(records[0]);
     bed_info["start"].push(records[1]);
@@ -1743,18 +1774,16 @@ async function getBedRegions(bed) {
       chunk = records[4];
     }
     bed_info["chunk"].push(chunk);
-
   });
 
-
   // check for a tracks.json file to prefill tracks configuration
   for (let i = 0; i < bed_info["chunk"].length; i++) {
     let tracks = null;
-    
+
     let chunk = bed_info["chunk"][i];
     if (chunk !== "") {
       // There is a premade chunk for this BED region.
-      
+
       // Work out where it should be locally.
       const chunk_path = bedChunkLocalPath(bed, chunk);
 
@@ -1931,7 +1960,7 @@ export function start() {
 
 if (process) {
   // We assume we are named server.mjs
-  let ourFilename = dirname() + '/server.mjs';
+  let ourFilename = dirname() + "/server.mjs";
   let mainFilename = process.argv[1];
   if (ourFilename === mainFilename) {
     // If we are passed as the first argument we are probably being run.
@@ -1939,10 +1968,10 @@ if (process) {
   }
 }
 
-process.on( "SIGINT", function() {
+process.on("SIGINT", function () {
   console.log("\nshutting down from SIGINT");
   // remove the temporary directory
   fs.rmSync(DOWNLOAD_DATA_PATH, { recursive: true, force: true });
 
   process.exit();
-})
+});
diff --git a/src/util/demo-data.js b/src/util/demo-data.js
index cd1d80b3..87164aa9 100644
--- a/src/util/demo-data.js
+++ b/src/util/demo-data.js
@@ -113,314 +113,314 @@ export const demoReads = `
 `;
 
 export const reverseAlignmentGraph = {
-    "edge": [
+  edge: [
+    {
+      from: "60080783",
+      from_start: true,
+      to: "60080786",
+      to_end: true,
+    },
+    {
+      from: "60080783",
+      from_start: true,
+      to: "60080785",
+    },
+    {
+      from: "60080783",
+      to: "60080785",
+    },
+    {
+      from: "60080786",
+      to: "60080785",
+    },
+    {
+      from: "60080786",
+      to: "60080785",
+      to_end: true,
+    },
+  ],
+  node: [
+    {
+      id: "60080785",
+      sequence: "AC",
+    },
+    {
+      id: "60080783",
+      sequence: "TT",
+    },
+    {
+      id: "60080786",
+      sequence: "GT",
+    },
+  ],
+  path: [
+    {
+      mapping: [
         {
-            "from": "60080783",
-            "from_start": true,
-            "to": "60080786",
-            "to_end": true
+          edit: [
+            {
+              from_length: 2,
+              to_length: 2,
+            },
+          ],
+          position: {
+            node_id: "60080786",
+          },
+          rank: "1",
         },
         {
-            "from": "60080783",
-            "from_start": true,
-            "to": "60080785"
+          edit: [
+            {
+              from_length: 21,
+              to_length: 21,
+            },
+          ],
+          position: {
+            node_id: "60080783",
+          },
+          rank: "2",
         },
+      ],
+      name: "GRCh38.chr14",
+      indexOfFirstBase: "0",
+    },
+  ],
+};
+
+export const mixedAlignmentReads = [
+  {
+    identity: 1,
+    name: "Read0",
+    path: {
+      mapping: [
         {
-            "from": "60080783",
-            "to": "60080785",
+          edit: [
+            {
+              from_length: 2,
+              to_length: 2,
+            },
+          ],
+          position: {
+            node_id: "60080786",
+          },
+          rank: "1",
         },
         {
-            "from": "60080786",
-            "to": "60080785"
+          edit: [
+            {
+              from_length: 2,
+              to_length: 2,
+            },
+          ],
+          position: {
+            is_reverse: true,
+            node_id: "60080785",
+          },
+          rank: "2",
         },
         {
-            "from": "60080786",
-            "to": "60080785",
-            "to_end": true
-        }
-    ],
-    "node": [
-        {
-            "id": "60080785",
-            "sequence": "AC"
+          edit: [
+            {
+              from_length: 2,
+              to_length: 2,
+            },
+          ],
+          position: {
+            node_id: "60080783",
+          },
+          rank: "3",
         },
+      ],
+    },
+    score: 110,
+    sequence: "GTGTTT",
+  },
+  {
+    identity: 1,
+    name: "Read1",
+    path: {
+      mapping: [
         {
-            "id": "60080783",
-            "sequence": "TT"
+          edit: [
+            {
+              from_length: 1,
+              to_length: 1,
+            },
+          ],
+          position: {
+            node_id: "60080786",
+            offset: 1,
+          },
+          rank: "1",
         },
         {
-            "id": "60080786",
-            "sequence": "GT"
-        }
-    ],
-    "path": [
+          edit: [
+            {
+              from_length: 2,
+              to_length: 2,
+            },
+          ],
+          position: {
+            is_reverse: true,
+            node_id: "60080785",
+          },
+          rank: "2",
+        },
         {
-            "mapping": [
-                {
-                    "edit": [
-                        {
-                            "from_length": 2,
-                            "to_length": 2
-                        }
-                    ],
-                    "position": {
-                        "node_id": "60080786"
-                    },
-                    "rank": "1"
-                },
-                {
-                    "edit": [
-                        {
-                            "from_length": 21,
-                            "to_length": 21
-                        }
-                    ],
-                    "position": {
-                        "node_id": "60080783"
-                    },
-                    "rank": "2"
-                }
-            ],
-            "name": "GRCh38.chr14",
-            "indexOfFirstBase": "0"
-        }
-    ]
-};
-
-export const mixedAlignmentReads = [
-    {
-        "identity": 1,
-        "name": "Read0",
-        "path": {
-            "mapping": [
-                {
-                    "edit": [
-                        {
-                            "from_length": 2,
-                            "to_length": 2
-                        }
-                    ],
-                    "position": {
-                        "node_id": "60080786"
-                    },
-                    "rank": "1"
-                },
-                {
-                    "edit": [
-                        {
-                            "from_length": 2,
-                            "to_length": 2
-                        }
-                    ],
-                    "position": {
-                        "is_reverse": true,
-                        "node_id": "60080785"
-                    },
-                    "rank": "2"
-                },
-                {
-                    "edit": [
-                        {
-                            "from_length": 2,
-                            "to_length": 2
-                        }
-                    ],
-                    "position": {
-                        "node_id": "60080783"
-                    },
-                    "rank": "3"
-                },
-            ]
+          edit: [
+            {
+              from_length: 2,
+              to_length: 2,
+            },
+          ],
+          position: {
+            node_id: "60080783",
+          },
+          rank: "3",
         },
-        "score": 110,
-        "sequence": "GTGTTT"
+      ],
     },
-    {
-        "identity": 1,
-        "name": "Read1",
-        "path": {
-            "mapping": [
-                {
-                    "edit": [
-                        {
-                            "from_length": 1,
-                            "to_length": 1
-                        }
-                    ],
-                    "position": {
-                        "node_id": "60080786",
-                        "offset": 1
-                    },
-                    "rank": "1"
-                },
-                {
-                    "edit": [
-                        {
-                            "from_length": 2,
-                            "to_length": 2
-                        }
-                    ],
-                    "position": {
-                        "is_reverse": true,
-                        "node_id": "60080785"
-                    },
-                    "rank": "2"
-                },
-                {
-                    "edit": [
-                        {
-                            "from_length": 2,
-                            "to_length": 2
-                        }
-                    ],
-                    "position": {
-                        "node_id": "60080783"
-                    },
-                    "rank": "3"
-                },
-            ]
+    score: 110,
+    sequence: "TGTTT",
+  },
+  {
+    identity: 1,
+    name: "Read2",
+    path: {
+      mapping: [
+        {
+          edit: [
+            {
+              from_length: 2,
+              to_length: 2,
+            },
+          ],
+          position: {
+            node_id: "60080786",
+          },
+          rank: "1",
         },
-        "score": 110,
-        "sequence": "TGTTT"
-    },
-    {
-        "identity": 1,
-        "name": "Read2",
-        "path": {
-            "mapping": [
-                {
-                    "edit": [
-                        {
-                            "from_length": 2,
-                            "to_length": 2
-                        }
-                    ],
-                    "position": {
-                        "node_id": "60080786"
-                    },
-                    "rank": "1"
-                },
-                {
-                    "edit": [
-                        {
-                            "from_length": 2,
-                            "to_length": 2
-                        }
-                    ],
-                    "position": {
-                        "is_reverse": true,
-                        "node_id": "60080785"
-                    },
-                    "rank": "2"
-                },
-                {
-                    "edit": [
-                        {
-                            "from_length": 2,
-                            "to_length": 2
-                        }
-                    ],
-                    "position": {
-                        "node_id": "60080783"
-                    },
-                    "rank": "3"
-                },
-            ]
+        {
+          edit: [
+            {
+              from_length: 2,
+              to_length: 2,
+            },
+          ],
+          position: {
+            is_reverse: true,
+            node_id: "60080785",
+          },
+          rank: "2",
         },
-        "score": 110,
-        "sequence": "GTGTTT"
+        {
+          edit: [
+            {
+              from_length: 2,
+              to_length: 2,
+            },
+          ],
+          position: {
+            node_id: "60080783",
+          },
+          rank: "3",
+        },
+      ],
     },
-    {
-        "identity": 1,
-        "name": "Read3",
-        "path": {
-            "mapping": [
-                {
-                    "edit": [
-                        {
-                            "from_length": 2,
-                            "to_length": 2
-                        }
-                    ],
-                    "position": {
-                        "node_id": "60080786"
-                    },
-                    "rank": "1"
-                },
-                {
-                    "edit": [
-                        {
-                            "from_length": 2,
-                            "to_length": 2
-                        }
-                    ],
-                    "position": {
-                        "node_id": "60080785"
-                    },
-                    "rank": "2"
-                },
-                {
-                    "edit": [
-                        {
-                            "from_length": 2,
-                            "to_length": 2
-                        }
-                    ],
-                    "position": {
-                        "node_id": "60080783"
-                    },
-                    "rank": "3"
-                },
-            ]
+    score: 110,
+    sequence: "GTGTTT",
+  },
+  {
+    identity: 1,
+    name: "Read3",
+    path: {
+      mapping: [
+        {
+          edit: [
+            {
+              from_length: 2,
+              to_length: 2,
+            },
+          ],
+          position: {
+            node_id: "60080786",
+          },
+          rank: "1",
+        },
+        {
+          edit: [
+            {
+              from_length: 2,
+              to_length: 2,
+            },
+          ],
+          position: {
+            node_id: "60080785",
+          },
+          rank: "2",
         },
-        "score": 110,
-        "sequence": "GTACTT"
+        {
+          edit: [
+            {
+              from_length: 2,
+              to_length: 2,
+            },
+          ],
+          position: {
+            node_id: "60080783",
+          },
+          rank: "3",
+        },
+      ],
     },
-    {
-        "identity": 1,
-        "name": "Read4",
-        "path": {
-            "mapping": [
-                {
-                    "edit": [
-                        {
-                            "from_length": 1,
-                            "to_length": 1
-                        }
-                    ],
-                    "position": {
-                        "node_id": "60080786",
-                        "offset": 1
-                    },
-                    "rank": "1"
-                },
-                {
-                    "edit": [
-                        {
-                            "from_length": 2,
-                            "to_length": 2
-                        }
-                    ],
-                    "position": {
-                        "node_id": "60080785"
-                    },
-                    "rank": "2"
-                },
-                {
-                    "edit": [
-                        {
-                            "from_length": 2,
-                            "to_length": 2
-                        }
-                    ],
-                    "position": {
-                        "node_id": "60080783"
-                    },
-                    "rank": "3"
-                },
-            ]
+    score: 110,
+    sequence: "GTACTT",
+  },
+  {
+    identity: 1,
+    name: "Read4",
+    path: {
+      mapping: [
+        {
+          edit: [
+            {
+              from_length: 1,
+              to_length: 1,
+            },
+          ],
+          position: {
+            node_id: "60080786",
+            offset: 1,
+          },
+          rank: "1",
+        },
+        {
+          edit: [
+            {
+              from_length: 2,
+              to_length: 2,
+            },
+          ],
+          position: {
+            node_id: "60080785",
+          },
+          rank: "2",
         },
-        "score": 110,
-        "sequence": "TACTT"
-    }
+        {
+          edit: [
+            {
+              from_length: 2,
+              to_length: 2,
+            },
+          ],
+          position: {
+            node_id: "60080783",
+          },
+          rank: "3",
+        },
+      ],
+    },
+    score: 110,
+    sequence: "TACTT",
+  },
 ];
diff --git a/src/util/tubemap.js b/src/util/tubemap.js
index db1afb6a..a399f3dd 100644
--- a/src/util/tubemap.js
+++ b/src/util/tubemap.js
@@ -12,7 +12,7 @@ import * as d3 from "d3";
 import "d3-selection-multi";
 import "../config-client.js";
 import externalConfig from "../config-global.mjs";
-import {defaultTrackColors} from "../common.mjs"
+import { defaultTrackColors } from "../common.mjs";
 
 const deepEqual = require("deep-equal");
 
@@ -158,10 +158,6 @@ const config = {
   },
 };
 
-
-
-
-
 // variables for storing info which can be directly translated into drawing instructions
 let trackRectangles = [];
 let trackCurves = [];
@@ -392,7 +388,7 @@ export function setNodeWidthOption(value) {
   }
 }
 
-export function setColoredNodes(value){
+export function setColoredNodes(value) {
   config.coloredNodes = value;
 }
 
@@ -522,21 +518,31 @@ function createTubeMap() {
   alignSVG(nodes, tracks);
   defineSVGPatterns();
 
-  // all drawn tracks are grouped 
-  let trackGroup = svg.append("g").attr("class", "track")
+  // all drawn tracks are grouped
+  let trackGroup = svg.append("g").attr("class", "track");
   drawTrackRectangles(trackRectangles, "haplo", trackGroup);
   drawTrackCurves("haplo", trackGroup);
-  drawReversalsByColor(trackCorners, trackVerticalRectangles, "haplo", trackGroup);
+  drawReversalsByColor(
+    trackCorners,
+    trackVerticalRectangles,
+    "haplo",
+    trackGroup
+  );
   drawTrackRectangles(trackRectanglesStep3, "haplo", trackGroup);
   drawTrackRectangles(trackRectangles, "read", trackGroup);
   drawTrackCurves("read", trackGroup);
 
   // draw only those nodes which have coords assigned to them
   const dNodes = removeUnusedNodes(nodes);
-  drawReversalsByColor(trackCorners, trackVerticalRectangles, "read", trackGroup);
-  
-  // all drawn nodes are grouped 
-  let nodeGroup = svg.append("g").attr("class", "node")
+  drawReversalsByColor(
+    trackCorners,
+    trackVerticalRectangles,
+    "read",
+    trackGroup
+  );
+
+  // all drawn nodes are grouped
+  let nodeGroup = svg.append("g").attr("class", "node");
   drawNodes(dNodes, nodeGroup);
   if (config.nodeWidthOption === 0) drawLabels(dNodes);
   if (trackForRuler !== undefined) drawRuler();
@@ -1234,29 +1240,28 @@ function alignSVG() {
       1,
       parentElement.clientWidth / (maxXCoordinate + 10)
     );
-    
+
     // We need to set an extent here because auto-determination of the region
     // to zoom breaks on the React testing jsdom
-    zoom.extent([
-      [0, 0],
-      [parentElement.clientWidth, parentElement.clientHeight],
-    ])
-    .scaleExtent([minZoom, 8])
-    .translateExtent([
-      [0, minYCoordinate - RAIL_SPACE],
-      [maxXCoordinate, maxYCoordinate + RAIL_SPACE],
+    zoom
+      .extent([
+        [0, 0],
+        [parentElement.clientWidth, parentElement.clientHeight],
+      ])
+      .scaleExtent([minZoom, 8])
+      .translateExtent([
+        [0, minYCoordinate - RAIL_SPACE],
+        [maxXCoordinate, maxYCoordinate + RAIL_SPACE],
       ]);
   }
 
-
-
   // Initially configure panning and zooming
   configureZoomBounds();
-  svg = svg.call(zoom)
-    .on("dblclick.zoom", null)
-    .append("g");
+  svg = svg.call(zoom).on("dblclick.zoom", null).append("g");
   // Don't let scrolling bubble up from the visualization
-  parentElement.addEventListener("wheel", (e) => { e.preventDefault(); })
+  parentElement.addEventListener("wheel", (e) => {
+    e.preventDefault();
+  });
 
   // If the view area resizes, reconfigure the zoom
   if (window.ResizeObserver) {
@@ -2504,11 +2509,13 @@ function generateTrackColor(track, highlight) {
       // TODO: Allow using color 0 for other schemes not the same as the one for the reference path.
       // TODO: Stop reads from taking this color?
       const auxColorSet = getColorSet(config.colorSchemes[sourceID].auxPalette);
-      const primaryColorSet = getColorSet(config.colorSchemes[sourceID].mainPalette);
+      const primaryColorSet = getColorSet(
+        config.colorSchemes[sourceID].mainPalette
+      );
       if (track.id === 0) {
         trackColor = primaryColorSet[0];
       } else {
-        trackColor = auxColorSet[((track.id - 1) % (auxColorSet.length))];
+        trackColor = auxColorSet[(track.id - 1) % auxColorSet.length];
       }
     } else {
       const colorSet = getColorSet(config.exonColors);
@@ -3077,7 +3084,11 @@ function drawReversalsByColor(corners, rectangles, type, groupTrack) {
       type,
       groupTrack
     );
-    drawTrackCorners(corners.filter(filterObjectByAttribute("color", c)), type, groupTrack);
+    drawTrackCorners(
+      corners.filter(filterObjectByAttribute("color", c)),
+      type,
+      groupTrack
+    );
   });
 }
 
@@ -3135,7 +3146,7 @@ function drawNodes(dNodes, groupNode) {
     }
   });
 
-  console.log("config:", config)
+  console.log("config:", config);
 
   groupNode
     .selectAll("node")
@@ -3158,16 +3169,16 @@ function drawNodes(dNodes, groupNode) {
 
 // Given a node name, return an object with "fill", "fill-opacity", and "outline"
 // keys describing what colors should be used to draw it.
-function colorNodes(nodeName){
+function colorNodes(nodeName) {
   let nodesColors = {};
-  if (config.coloredNodes.includes(nodeName)){
-    nodesColors["fill"] = "#ffc0cb"
-    nodesColors["fill-opacity"] = "0.4"
-    nodesColors["outline"] = "#ff0000"
+  if (config.coloredNodes.includes(nodeName)) {
+    nodesColors["fill"] = "#ffc0cb";
+    nodesColors["fill-opacity"] = "0.4";
+    nodesColors["outline"] = "#ff0000";
   } else {
-    nodesColors["fill"] = "#ffffff"
-    nodesColors["fill-opacity"] = "0.4"
-    nodesColors["outline"] = "#000000"
+    nodesColors["fill"] = "#ffffff";
+    nodesColors["fill-opacity"] = "0.4";
+    nodesColors["outline"] = "#000000";
   }
   return nodesColors;
 }
@@ -3216,10 +3227,7 @@ function nodeSingleClick() {
       currentNode.internalReads.length +
       currentNode.outgoingReads.length,
   ]);
-  nodeAttributes.push([
-    "Total Visits:",
-    numReadsVisitNode(currentNode),
-  ]);
+  nodeAttributes.push(["Total Visits:", numReadsVisitNode(currentNode)]);
   nodeAttributes.push(["Coverage:", coverage(currentNode, reads)]);
 
   console.log("Single Click");
@@ -3265,11 +3273,11 @@ export function coverage(node, allReads) {
     for (let i = 0; i < currRead.sequenceNew.length; i += 1) {
       currRead.sequenceNew[i].mismatches.forEach((mm) => {
         if (mm.type === "deletion") {
-          console.log ("this read has a deletion", currRead)
+          console.log("this read has a deletion", currRead);
           countBases -= mm.length;
         }
-      })
-    };
+      });
+    }
     //  if current node is the last node on the read path, add the finalNodeCoverLength number of bases
     if (numNodes === readPathIndex + 1) {
       countBases += currRead.finalNodeCoverLength;
@@ -3288,11 +3296,11 @@ export function coverage(node, allReads) {
     for (let i = 0; i < currRead.sequenceNew.length; i += 1) {
       currRead.sequenceNew[i].mismatches.forEach((mm) => {
         if (mm.type === "deletion") {
-          console.log ("this read has a deletion", currRead)
+          console.log("this read has a deletion", currRead);
           countBases -= mm.length;
         }
-      })
-    };
+      });
+    }
     countBases += currRead.finalNodeCoverLength - currRead.firstNodeOffset;
   }
   // outgoing reads
@@ -3303,11 +3311,11 @@ export function coverage(node, allReads) {
     for (let i = 0; i < currRead.sequenceNew.length; i += 1) {
       currRead.sequenceNew[i].mismatches.forEach((mm) => {
         if (mm.type === "deletion") {
-          console.log ("this read has a deletion", currRead)
+          console.log("this read has a deletion", currRead);
           countBases -= mm.length;
         }
-      })
-    };
+      });
+    }
     // coverage of outgoing read would be the the distance between the end of the node and the
     //  starting point of the read within the node
     countBases += node.sequenceLength - currRead.firstNodeOffset;
diff --git a/src/util/tubemap.test.js b/src/util/tubemap.test.js
index 444bf896..3d441391 100644
--- a/src/util/tubemap.test.js
+++ b/src/util/tubemap.test.js
@@ -2,846 +2,865 @@ import { cigar_string } from "./tubemap";
 import { coverage } from "./tubemap";
 
 // cigar string test
-describe('cigar_string', () => {
-    // TEST 1
-    it('it can handle an edit that is a match and deletion', async () => {
-      const readPath = {
-        mapping: [
-          {
-            edit: [
-              {
-                from_length: 6,
-                to_length: 4
-              }
-            ]
-          }
-        ]
-      }
-      expect(cigar_string(readPath)).toBe("4M2D");
-    });
-    // TEST 2
-    it('it can handle an edit that is a match and insertion', async () => {
-      const readPath = {
-        mapping: [
-          {
-            edit: [
-              {
-                from_length: 4,
-                to_length: 6
-              }
-            ]
-          }
-        ]
-      };
-      expect(cigar_string(readPath)).toBe("4M2I");
-    });
-    // TEST 3
-    it('it can handle edit with double-digit length values', async () => {
-      const readPath = {
-        mapping: [
-          {
-            edit: [
-              {
-                from_length: 11,
-                to_length: 11
-              },
-              {
-                from_length: 21,
-                to_length: 22,
-                sequence: "AA"
-              },
-              {
-                to_length: 13,
-                sequence: "A"
-              },
-              {
-                from_length: 12,
-                to_length: 10
-              },
-              {
-                from_length: 22
-              }
-            ]
-          },
-          {
-            edit: [
-              {
-                from_length: 16
-              }
-            ]
-          }
-        ]
-      };
-      expect(cigar_string(readPath)).toBe("32M14I10M40D");
-    });
-    // TEST 4
-    it('it can handle a mapping with multiple edits', async () => {
-      const readPath = {
-        mapping: [
-          {
-            edit: [
-              {
-                from_length: 8,
-                to_length: 9
-              }
-            ]
-          },
-          {
-            edit: [
-              {
-                from_length: 2,
-                to_length: 1
-              }
-            ]
-          },
-          {
-            edit: [
-              {
-                from_length: 4,
-                to_length: 4
-              }
-            ]
-          },
-          {
-            edit: [
-              {
-                from_length: 18,
-                to_length: 11
-              }
-            ]
-          },
-          {
-            edit: [
-              {
-                from_length: 15,
-                sequence: "C"
-              }
-            ]
-          },
-          {
-            edit: [
-              {
-                from_length: 3,
-                to_length: 4,
-                sequence: "G"
-              }
-            ]
-          }, 
-          {
-            edit: [
-              {
-                from_length: 8,
-                to_length: 9,
-                sequence: "C"
-              }
-            ]
-          }, 
-          {
-            edit: [
-              {
-                from_length: 10,
-                to_length: 10,
-                sequence: "ATCG"
-              }
-            ]
-          },
-          {
-            edit: [
-              {
-                from_length: 15,
-                to_length: 14,
-                sequence: "G"
-              }
-            ]
-          },
-          {
-            edit: [
-              {
-                to_length: 9,
-                sequence: "AAAA"
-              }
-            ]
-          }
-        ]
-      };
-      expect(cigar_string(readPath)).toBe("8M1I1M1D15M22D3M1I8M1I24M1D9I");
-    });
-    // TEST 5
-    it('it can handle multiple edits with lengths of 0', async () => {
-      const readPath = {
-        mapping: [
-          {
-            edit: [
-              {
-                from_length: 0,
-                to_length: 0
-              }
-            ]
-          },
-          {
-            edit: [
-              {
-                from_length: 0,
-                to_length: 0
-              }
-            ]
-          },
-          {
-            edit: [
-              {
-                from_length: 0,
-                to_length: 0
-              }
-            ]
-          },
-          {
-            edit: [
-              {
-                from_length: 0,
-                to_length: 0
-              }
-            ]
-          },
-          {
-            edit: [
-              {
-                from_length: 0,
-                sequence: "C"
-              }
-            ]
-          }
-        ]
-      };
-      expect(cigar_string(readPath)).toBe("0M");
-    });
+describe("cigar_string", () => {
+  // TEST 1
+  it("it can handle an edit that is a match and deletion", async () => {
+    const readPath = {
+      mapping: [
+        {
+          edit: [
+            {
+              from_length: 6,
+              to_length: 4,
+            },
+          ],
+        },
+      ],
+    };
+    expect(cigar_string(readPath)).toBe("4M2D");
   });
-
+  // TEST 2
+  it("it can handle an edit that is a match and insertion", async () => {
+    const readPath = {
+      mapping: [
+        {
+          edit: [
+            {
+              from_length: 4,
+              to_length: 6,
+            },
+          ],
+        },
+      ],
+    };
+    expect(cigar_string(readPath)).toBe("4M2I");
+  });
+  // TEST 3
+  it("it can handle edit with double-digit length values", async () => {
+    const readPath = {
+      mapping: [
+        {
+          edit: [
+            {
+              from_length: 11,
+              to_length: 11,
+            },
+            {
+              from_length: 21,
+              to_length: 22,
+              sequence: "AA",
+            },
+            {
+              to_length: 13,
+              sequence: "A",
+            },
+            {
+              from_length: 12,
+              to_length: 10,
+            },
+            {
+              from_length: 22,
+            },
+          ],
+        },
+        {
+          edit: [
+            {
+              from_length: 16,
+            },
+          ],
+        },
+      ],
+    };
+    expect(cigar_string(readPath)).toBe("32M14I10M40D");
+  });
+  // TEST 4
+  it("it can handle a mapping with multiple edits", async () => {
+    const readPath = {
+      mapping: [
+        {
+          edit: [
+            {
+              from_length: 8,
+              to_length: 9,
+            },
+          ],
+        },
+        {
+          edit: [
+            {
+              from_length: 2,
+              to_length: 1,
+            },
+          ],
+        },
+        {
+          edit: [
+            {
+              from_length: 4,
+              to_length: 4,
+            },
+          ],
+        },
+        {
+          edit: [
+            {
+              from_length: 18,
+              to_length: 11,
+            },
+          ],
+        },
+        {
+          edit: [
+            {
+              from_length: 15,
+              sequence: "C",
+            },
+          ],
+        },
+        {
+          edit: [
+            {
+              from_length: 3,
+              to_length: 4,
+              sequence: "G",
+            },
+          ],
+        },
+        {
+          edit: [
+            {
+              from_length: 8,
+              to_length: 9,
+              sequence: "C",
+            },
+          ],
+        },
+        {
+          edit: [
+            {
+              from_length: 10,
+              to_length: 10,
+              sequence: "ATCG",
+            },
+          ],
+        },
+        {
+          edit: [
+            {
+              from_length: 15,
+              to_length: 14,
+              sequence: "G",
+            },
+          ],
+        },
+        {
+          edit: [
+            {
+              to_length: 9,
+              sequence: "AAAA",
+            },
+          ],
+        },
+      ],
+    };
+    expect(cigar_string(readPath)).toBe("8M1I1M1D15M22D3M1I8M1I24M1D9I");
+  });
+  // TEST 5
+  it("it can handle multiple edits with lengths of 0", async () => {
+    const readPath = {
+      mapping: [
+        {
+          edit: [
+            {
+              from_length: 0,
+              to_length: 0,
+            },
+          ],
+        },
+        {
+          edit: [
+            {
+              from_length: 0,
+              to_length: 0,
+            },
+          ],
+        },
+        {
+          edit: [
+            {
+              from_length: 0,
+              to_length: 0,
+            },
+          ],
+        },
+        {
+          edit: [
+            {
+              from_length: 0,
+              to_length: 0,
+            },
+          ],
+        },
+        {
+          edit: [
+            {
+              from_length: 0,
+              sequence: "C",
+            },
+          ],
+        },
+      ],
+    };
+    expect(cigar_string(readPath)).toBe("0M");
+  });
+});
 
 // Test to make sure that a node and a set of reads make sense together.
 function checkNodeExample(node, reads) {
-  let nodeName = null
+  let nodeName = null;
   // Set or check node name for the given visit of the given read
   function checkNodeName(read, visitIndex) {
-    let visit = read.sequenceNew[visitIndex]
+    let visit = read.sequenceNew[visitIndex];
     if (nodeName) {
       if (nodeName !== visit.nodeName) {
-        throw new Error("Different visits to this node have different node names! " + nodeName + " vs. " + visit.nodeName)
+        throw new Error(
+          "Different visits to this node have different node names! " +
+            nodeName +
+            " vs. " +
+            visit.nodeName
+        );
       }
     } else {
       // See if we can pick up a node name
-      nodeName = visit.nodeName
+      nodeName = visit.nodeName;
     }
   }
   for (let [readNum, visitIndex] of node.incomingReads) {
     if (readNum >= reads.length) {
-      throw new Error("Incoming read " + readNum + " doesn't exist")
+      throw new Error("Incoming read " + readNum + " doesn't exist");
     }
-    let read = reads[readNum]
+    let read = reads[readNum];
     if (visitIndex >= read.sequenceNew.length) {
-      throw new Error("Incoming read " + readNum + " visit " + visitIndex + " doesn't exist")
+      throw new Error(
+        "Incoming read " + readNum + " visit " + visitIndex + " doesn't exist"
+      );
     }
     if (visitIndex == 0) {
       // This shouldn't happen a lot because it means the read started before the first node in the region.
       if (read.firstNodeOffset !== undefined && read.firstNodeOffset !== 0) {
         // This shouldn't happen ever; we can't enter this first node anywhere but the start.
-        throw new Error("Read is entering a node first but has a nonzero first node offset!")
+        throw new Error(
+          "Read is entering a node first but has a nonzero first node offset!"
+        );
       }
     }
-    checkNodeName(read, visitIndex)
+    checkNodeName(read, visitIndex);
     if (visitIndex == read.sequenceNew.length - 1) {
       // Read ends here
       if (read.finalNodeCoverLength > node.sequenceLength) {
-        throw new Error("Final node cover length too long")
+        throw new Error("Final node cover length too long");
       }
     }
   }
   for (let readNum of node.internalReads) {
     if (readNum >= reads.length) {
-      throw new Error("Internal read " + readNum + " doesn't exist")
+      throw new Error("Internal read " + readNum + " doesn't exist");
     }
-    let read = reads[readNum]  
+    let read = reads[readNum];
     // Internal reads can only have one visit
-    let visitIndex = 0
+    let visitIndex = 0;
     if (read.sequenceNew.length !== 1) {
-      throw new Error("Internal reads can only visit one node, but read" + readNum + " doesn't")
-    } 
-    checkNodeName(read, visitIndex)
+      throw new Error(
+        "Internal reads can only visit one node, but read" +
+          readNum +
+          " doesn't"
+      );
+    }
+    checkNodeName(read, visitIndex);
   }
 
   for (let [readNum, visitIndex] of node.outgoingReads) {
     if (readNum >= reads.length) {
-      throw new Error("Outgoing read " + readNum + " doesn't exist")
+      throw new Error("Outgoing read " + readNum + " doesn't exist");
     }
-    let read = reads[readNum]
+    let read = reads[readNum];
     if (visitIndex >= read.sequenceNew.length) {
-      throw new Error("Outgoing read " + readNum + " visit " + visitIndex + " doesn't exist")
+      throw new Error(
+        "Outgoing read " + readNum + " visit " + visitIndex + " doesn't exist"
+      );
     }
     if (visitIndex !== 0) {
-      throw new Error("Outgoing read did not start at the node it is outgoing for")
+      throw new Error(
+        "Outgoing read did not start at the node it is outgoing for"
+      );
     }
-    checkNodeName(read, visitIndex)
+    checkNodeName(read, visitIndex);
     if (visitIndex === 0) {
       // Read starts here
       if (read.firstNodeOffset > node.sequenceLength) {
-        throw new Error("First node offset too long")
+        throw new Error("First node offset too long");
       }
     }
   }
 }
-  
+
 // Node coverage test
-describe('coverage', () => {
+describe("coverage", () => {
   // TEST #1
-  it('can handle zero-length node without reads', async () => {
+  it("can handle zero-length node without reads", async () => {
     const node = {
       sequenceLength: 0,
       incomingReads: [],
       internalReads: [],
       outgoingReads: [],
-    }
+    };
     const reads = [];
     expect(checkNodeExample(node, reads)).toBe(undefined);
-    expect(coverage(node, reads)).toBe(0.00);
-  })
+    expect(coverage(node, reads)).toBe(0.0);
+  });
   // TEST #2
-  it('can handle node of length 1 with 1 incoming read', async () => {
-    const node = {        
+  it("can handle node of length 1 with 1 incoming read", async () => {
+    const node = {
       sequenceLength: 1,
       incomingReads: [[1, 1]],
       internalReads: [],
       outgoingReads: [],
-    }
+    };
     const reads = [
       {
-        "id": 1,
-        "type": "read",
-        "firstNodeOffset": 0,
-        "finalNodeCoverLength": 1,
-        "sequenceNew":
-          [
-            {
-                "nodeName": "1",
-                "mismatches": []
-            },
-            {
-                "nodeName": "11",
-                "mismatches": []
-            },
-            {
-                "nodeName": "13",
-                "mismatches": []
-            }
-          ]
-      }, 
+        id: 1,
+        type: "read",
+        firstNodeOffset: 0,
+        finalNodeCoverLength: 1,
+        sequenceNew: [
+          {
+            nodeName: "1",
+            mismatches: [],
+          },
+          {
+            nodeName: "11",
+            mismatches: [],
+          },
+          {
+            nodeName: "13",
+            mismatches: [],
+          },
+        ],
+      },
       {
-        "id": 2,
-        "sequenceNew": [
-            {
-                "nodeName": "1",
-                "mismatches": []
-            },
-            {
-                "nodeName": "12",
-                "mismatches": []
-            },
-            {
-                "nodeName": "13",
-                "mismatches": []
-            }
+        id: 2,
+        sequenceNew: [
+          {
+            nodeName: "1",
+            mismatches: [],
+          },
+          {
+            nodeName: "12",
+            mismatches: [],
+          },
+          {
+            nodeName: "13",
+            mismatches: [],
+          },
         ],
-        "firstNodeOffset": 0,
-        "finalNodeCoverLength": 1,
-      }
+        firstNodeOffset: 0,
+        finalNodeCoverLength: 1,
+      },
     ];
     expect(checkNodeExample(node, reads)).toBe(undefined);
-    expect(coverage(node, reads)).toBe(1.00);
-  })
+    expect(coverage(node, reads)).toBe(1.0);
+  });
   // TEST #3
-  it('can handle node of length of 6 with 2 outgoing reads and 2 internal reads', async () => {
-    const node = {        
-      nodename: '3',    
+  it("can handle node of length of 6 with 2 outgoing reads and 2 internal reads", async () => {
+    const node = {
+      nodename: "3",
       sequenceLength: 6,
       incomingReads: [],
       internalReads: [0, 1],
-      outgoingReads: [[2, 0], [3, 0]]
-    }
+      outgoingReads: [
+        [2, 0],
+        [3, 0],
+      ],
+    };
     const reads = [
       {
-        "id": 1,
-        "sequenceNew": [
+        id: 1,
+        sequenceNew: [
           {
-            "nodeName": "1",
-            "mismatches": [
+            nodeName: "1",
+            mismatches: [
               {
-                "type": "insertion",
-                "pos": 0,
-                "seq": "CACAG"
-              }
-            ]
-          }
+                type: "insertion",
+                pos: 0,
+                seq: "CACAG",
+              },
+            ],
+          },
         ],
-        "firstNodeOffset": 0,
-        "finalNodeCoverLength": 3,
+        firstNodeOffset: 0,
+        finalNodeCoverLength: 3,
       },
       {
-        "id": 2,
-        "sequenceNew": [
+        id: 2,
+        sequenceNew: [
           {
-            "nodeName": "1",
-            "mismatches": [
+            nodeName: "1",
+            mismatches: [
               {
-                "type": "insertion",
-                "pos": 0,
-                "seq": "TCAAGAACAGTCATTCATG"
-              }
-            ]
-          }
+                type: "insertion",
+                pos: 0,
+                seq: "TCAAGAACAGTCATTCATG",
+              },
+            ],
+          },
         ],
-        "firstNodeOffset": 1,
-        "finalNodeCoverLength": 5,
-      }, 
+        firstNodeOffset: 1,
+        finalNodeCoverLength: 5,
+      },
       {
-        "id": 3,
-        "sequenceNew": [
-            {
-              "nodeName": "1",
-              "mismatches": []
-            },
-            {
-              "nodeName": "11",
-              "mismatches": []
-            },
-            {
-              "nodeName": "13",
-              "mismatches": []
-            }
+        id: 3,
+        sequenceNew: [
+          {
+            nodeName: "1",
+            mismatches: [],
+          },
+          {
+            nodeName: "11",
+            mismatches: [],
+          },
+          {
+            nodeName: "13",
+            mismatches: [],
+          },
         ],
-        "firstNodeOffset": 2,
-        "finalNodeCoverLength": 6,
+        firstNodeOffset: 2,
+        finalNodeCoverLength: 6,
       },
       {
-        "id": 4,
-        "sourceTrackID": "1",
-        "sequence": [
-          "1",
-          "12",
-          "13"
-        ],
-        "sequenceNew": [
-            {
-              "nodeName": "1",
-              "mismatches": []
-            },
-            {
-              "nodeName": "12",
-              "mismatches": []
-            },
-            {
-              "nodeName": "13",
-              "mismatches": []
-            }
+        id: 4,
+        sourceTrackID: "1",
+        sequence: ["1", "12", "13"],
+        sequenceNew: [
+          {
+            nodeName: "1",
+            mismatches: [],
+          },
+          {
+            nodeName: "12",
+            mismatches: [],
+          },
+          {
+            nodeName: "13",
+            mismatches: [],
+          },
         ],
-        "firstNodeOffset": 4,
-        "finalNodeCoverLength": 6,
-      }
+        firstNodeOffset: 4,
+        finalNodeCoverLength: 6,
+      },
     ];
     expect(checkNodeExample(node, reads)).toBe(undefined);
     expect(coverage(node, reads)).toBe(2.17);
-  })
+  });
   // TEST #4
-  it('can handle node of length of 30 with 2 incoming reads, 4 internal reads, and 3 outgoing reads', async () => {
-    const node = {        
-      nodename: '4',    
+  it("can handle node of length of 30 with 2 incoming reads, 4 internal reads, and 3 outgoing reads", async () => {
+    const node = {
+      nodename: "4",
       sequenceLength: 30,
-      incomingReads: [[0, 1], [1, 1]],
+      incomingReads: [
+        [0, 1],
+        [1, 1],
+      ],
       internalReads: [2, 3, 4, 5],
-      outgoingReads: [[6, 0], [7, 0], [8, 0]],
-    }
+      outgoingReads: [
+        [6, 0],
+        [7, 0],
+        [8, 0],
+      ],
+    };
     const reads = [
       {
-        "id": 1,
-        "sequenceNew": [
+        id: 1,
+        sequenceNew: [
           {
-            "nodeName": "12",
-            "mismatches": []
+            nodeName: "12",
+            mismatches: [],
           },
           {
-            "nodeName": "4",
-            "mismatches": []
+            nodeName: "4",
+            mismatches: [],
           },
           {
-            "nodeName": "13",
-            "mismatches": []
-          }
+            nodeName: "13",
+            mismatches: [],
+          },
         ],
-        "firstNodeOffset": 0,
-        "finalNodeCoverLength": 5,
+        firstNodeOffset: 0,
+        finalNodeCoverLength: 5,
       },
       {
-        "id": 2,
-        "sequenceNew": [
+        id: 2,
+        sequenceNew: [
           {
-            "nodeName": "12",
-            "mismatches": []
+            nodeName: "12",
+            mismatches: [],
           },
           {
-            "nodeName": "4",
-            "mismatches": []
+            nodeName: "4",
+            mismatches: [],
           },
           {
-            "nodeName": "13",
-            "mismatches": []
-          }
+            nodeName: "13",
+            mismatches: [],
+          },
         ],
-        "firstNodeOffset": 3,
-        "finalNodeCoverLength": 7,
-      }, 
+        firstNodeOffset: 3,
+        finalNodeCoverLength: 7,
+      },
       {
-        "id": 3,
-        "sequenceNew": [
+        id: 3,
+        sequenceNew: [
           {
-            "nodeName": "4",
-            "mismatches": []
+            nodeName: "4",
+            mismatches: [],
           },
         ],
-        "firstNodeOffset": 16,
-        "finalNodeCoverLength": 28,
+        firstNodeOffset: 16,
+        finalNodeCoverLength: 28,
       },
       {
-        "id": 4,
-        "sourceTrackID": "1",
-        "sequenceNew": [
+        id: 4,
+        sourceTrackID: "1",
+        sequenceNew: [
           {
-            "nodeName": "4",
-            "mismatches": []
+            nodeName: "4",
+            mismatches: [],
           },
         ],
-        "firstNodeOffset": 7,
-        "finalNodeCoverLength": 27,
+        firstNodeOffset: 7,
+        finalNodeCoverLength: 27,
       },
       {
-        "id": 5,
-        "sourceTrackID": "1",
-        "sequenceNew": [
+        id: 5,
+        sourceTrackID: "1",
+        sequenceNew: [
           {
-            "nodeName": "4",
-            "mismatches": []
+            nodeName: "4",
+            mismatches: [],
           },
         ],
-        "firstNodeOffset": 3,
-        "finalNodeCoverLength": 20,
-      }, 
+        firstNodeOffset: 3,
+        finalNodeCoverLength: 20,
+      },
       {
-        "id": 6,
-        "sourceTrackID": "1",
-        "sequenceNew": [
+        id: 6,
+        sourceTrackID: "1",
+        sequenceNew: [
           {
-            "nodeName": "4",
-            "mismatches": []
+            nodeName: "4",
+            mismatches: [],
           },
         ],
-        "firstNodeOffset": 20,
-        "finalNodeCoverLength": 29,
+        firstNodeOffset: 20,
+        finalNodeCoverLength: 29,
       },
       {
-        "id": 7,
-        "sourceTrackID": "1",
-        "sequenceNew": [
+        id: 7,
+        sourceTrackID: "1",
+        sequenceNew: [
           {
-            "nodeName": "4",
-            "mismatches": []
+            nodeName: "4",
+            mismatches: [],
           },
           {
-            "nodeName": "7",
-            "mismatches": []
+            nodeName: "7",
+            mismatches: [],
           },
           {
-            "nodeName": "9",
-            "mismatches": []
-          }
+            nodeName: "9",
+            mismatches: [],
+          },
         ],
-        "firstNodeOffset": 1,
-        "finalNodeCoverLength": 29,
+        firstNodeOffset: 1,
+        finalNodeCoverLength: 29,
       },
       {
-        "id": 8,
-        "sourceTrackID": "1",
-        "sequenceNew": [
+        id: 8,
+        sourceTrackID: "1",
+        sequenceNew: [
           {
-            "nodeName": "4",
-            "mismatches": []
+            nodeName: "4",
+            mismatches: [],
           },
           {
-            "nodeName": "13",
-            "mismatches": []
+            nodeName: "13",
+            mismatches: [],
           },
           {
-            "nodeName": "12",
-            "mismatches": []
+            nodeName: "12",
+            mismatches: [],
           },
         ],
-        "firstNodeOffset": 7,
-        "finalNodeCoverLength": 30,
+        firstNodeOffset: 7,
+        finalNodeCoverLength: 30,
       },
       {
-        "id": 9,
-        "sourceTrackID": "1",
-        "sequenceNew": [
+        id: 9,
+        sourceTrackID: "1",
+        sequenceNew: [
           {
-            "nodeName": "4",
-            "mismatches": []
+            nodeName: "4",
+            mismatches: [],
           },
           {
-            "nodeName": "10",
-            "mismatches": []
+            nodeName: "10",
+            mismatches: [],
           },
           {
-            "nodeName": "11",
-            "mismatches": []
+            nodeName: "11",
+            mismatches: [],
           },
         ],
-        "firstNodeOffset": 3,
-        "finalNodeCoverLength": 29,
+        firstNodeOffset: 3,
+        finalNodeCoverLength: 29,
       },
     ];
     expect(checkNodeExample(node, reads)).toBe(undefined);
     expect(coverage(node, reads)).toBe(6.57);
-  })
+  });
   // TEST #5
-  it('it can handle nodes with deletions in 1 read', async () => {
-    const node = {        
-      nodename: '3',    
+  it("it can handle nodes with deletions in 1 read", async () => {
+    const node = {
+      nodename: "3",
       sequenceLength: 6,
       incomingReads: [],
       internalReads: [0, 1],
-      outgoingReads: [[2, 0], [3, 0]]
-    }
+      outgoingReads: [
+        [2, 0],
+        [3, 0],
+      ],
+    };
     const reads = [
       {
-        "id": 1,
-        "sequenceNew": [
+        id: 1,
+        sequenceNew: [
           {
-            "nodeName": "1",
-            "mismatches": [
+            nodeName: "1",
+            mismatches: [
               {
-                "type": "deletion",
-                "pos": 0,
-                "length": 2
-              }
-            ]
-          }
+                type: "deletion",
+                pos: 0,
+                length: 2,
+              },
+            ],
+          },
         ],
-        "firstNodeOffset": 0,
-        "finalNodeCoverLength": 3,
+        firstNodeOffset: 0,
+        finalNodeCoverLength: 3,
       },
       {
-        "id": 2,
-        "sequenceNew": [
+        id: 2,
+        sequenceNew: [
           {
-            "nodeName": "1",
-            "mismatches": [
+            nodeName: "1",
+            mismatches: [
               {
-                "type": "insertion",
-                "pos": 0,
-                "seq": "TCAAGAACAGTCATTCATG"
-              }
-            ]
-          }
+                type: "insertion",
+                pos: 0,
+                seq: "TCAAGAACAGTCATTCATG",
+              },
+            ],
+          },
         ],
-        "firstNodeOffset": 1,
-        "finalNodeCoverLength": 5,
-      }, 
+        firstNodeOffset: 1,
+        finalNodeCoverLength: 5,
+      },
       {
-        "id": 3,
-        "sequenceNew": [
-            {
-              "nodeName": "1",
-              "mismatches": []
-            },
-            {
-              "nodeName": "11",
-              "mismatches": []
-            },
-            {
-              "nodeName": "13",
-              "mismatches": []
-            }
+        id: 3,
+        sequenceNew: [
+          {
+            nodeName: "1",
+            mismatches: [],
+          },
+          {
+            nodeName: "11",
+            mismatches: [],
+          },
+          {
+            nodeName: "13",
+            mismatches: [],
+          },
         ],
-        "firstNodeOffset": 2,
-        "finalNodeCoverLength": 6,
+        firstNodeOffset: 2,
+        finalNodeCoverLength: 6,
       },
       {
-        "id": 4,
-        "sourceTrackID": "1",
-        "sequence": [
-          "1",
-          "12",
-          "13"
-        ],
-        "sequenceNew": [
-            {
-              "nodeName": "1",
-              "mismatches": []
-            },
-            {
-              "nodeName": "12",
-              "mismatches": []
-            },
-            {
-              "nodeName": "13",
-              "mismatches": []
-            }
+        id: 4,
+        sourceTrackID: "1",
+        sequence: ["1", "12", "13"],
+        sequenceNew: [
+          {
+            nodeName: "1",
+            mismatches: [],
+          },
+          {
+            nodeName: "12",
+            mismatches: [],
+          },
+          {
+            nodeName: "13",
+            mismatches: [],
+          },
         ],
-        "firstNodeOffset": 4,
-        "finalNodeCoverLength": 6,
-      }
+        firstNodeOffset: 4,
+        finalNodeCoverLength: 6,
+      },
     ];
     //expect(checkNodeExample(node, reads)).toBe(undefined);
     //console.log("coverage(node, reads) for test 5:", coverage(node, reads))
     expect(coverage(node, reads)).toBe(1.83);
-  })
+  });
   // TEST #6
-  it('it can handle larger node with deletions in all reads', async () => {
-    const node = {        
-      nodename: '3',    
+  it("it can handle larger node with deletions in all reads", async () => {
+    const node = {
+      nodename: "3",
       sequenceLength: 24,
       incomingReads: [[0, 1]],
       internalReads: [1, 2],
-      outgoingReads: [[3, 0], [4, 0]]
-    }
+      outgoingReads: [
+        [3, 0],
+        [4, 0],
+      ],
+    };
     const reads = [
       {
-        "id": 1,
-        "sequenceNew": [
+        id: 1,
+        sequenceNew: [
           {
-            "nodeName": "1",
-            "mismatches": [
+            nodeName: "1",
+            mismatches: [
               {
-                "type": "deletion",
-                "pos": 0,
-                "length": 1
-              }
-            ]
-          }
+                type: "deletion",
+                pos: 0,
+                length: 1,
+              },
+            ],
+          },
         ],
-        "firstNodeOffset": 1,
-        "finalNodeCoverLength": 10,
+        firstNodeOffset: 1,
+        finalNodeCoverLength: 10,
       },
       {
-        "id": 2,
-        "sequenceNew": [
+        id: 2,
+        sequenceNew: [
           {
-            "nodeName": "1",
-            "mismatches": [
+            nodeName: "1",
+            mismatches: [
               {
-                "type": "deletion",
-                "pos": 0,
-                "length": 1
-              }
-            ]
-          }
+                type: "deletion",
+                pos: 0,
+                length: 1,
+              },
+            ],
+          },
         ],
-        "firstNodeOffset": 4,
-        "finalNodeCoverLength": 15,
-      }, 
+        firstNodeOffset: 4,
+        finalNodeCoverLength: 15,
+      },
       {
-        "id": 3,
-        "sequenceNew": [
-            {
-              "nodeName": "1",
-              "mismatches": [
-                {
-                  "type": "deletion",
-                  "pos": 0,
-                  "length": 1
-                }
-              ]
-            },
-            {
-              "nodeName": "11",
-              "mismatches": [
-                {
-                  "type": "deletion",
-                  "pos": 0,
-                  "length": 2
-                }
-              ]
-            },
-            {
-              "nodeName": "13",
-              "mismatches": [
-                {
-                  "type": "deletion",
-                  "pos": 0,
-                  "length": 1
-                }
-              ]
-            }
+        id: 3,
+        sequenceNew: [
+          {
+            nodeName: "1",
+            mismatches: [
+              {
+                type: "deletion",
+                pos: 0,
+                length: 1,
+              },
+            ],
+          },
+          {
+            nodeName: "11",
+            mismatches: [
+              {
+                type: "deletion",
+                pos: 0,
+                length: 2,
+              },
+            ],
+          },
+          {
+            nodeName: "13",
+            mismatches: [
+              {
+                type: "deletion",
+                pos: 0,
+                length: 1,
+              },
+            ],
+          },
         ],
-        "firstNodeOffset": 2,
-        "finalNodeCoverLength": 8,
+        firstNodeOffset: 2,
+        finalNodeCoverLength: 8,
       },
       {
-        "id": 4,
-        "sourceTrackID": "1",
-        "sequence": [
-          "1",
-          "12",
-          "13"
-        ],
-        "sequenceNew": [
-            {
-              "nodeName": "1",
-              "mismatches": [
-                {
-                  "type": "deletion",
-                  "pos": 0,
-                  "length": 1
-                }
-              ]
-            },
-            {
-              "nodeName": "12",
-              "mismatches": [
-                {
-                  "type": "deletion",
-                  "pos": 0,
-                  "length": 1
-                }
-              ]
-            },
-            {
-              "nodeName": "13",
-              "mismatches": [
-                {
-                  "type": "deletion",
-                  "pos": 0,
-                  "length": 1
-                }
-              ]
-            }
+        id: 4,
+        sourceTrackID: "1",
+        sequence: ["1", "12", "13"],
+        sequenceNew: [
+          {
+            nodeName: "1",
+            mismatches: [
+              {
+                type: "deletion",
+                pos: 0,
+                length: 1,
+              },
+            ],
+          },
+          {
+            nodeName: "12",
+            mismatches: [
+              {
+                type: "deletion",
+                pos: 0,
+                length: 1,
+              },
+            ],
+          },
+          {
+            nodeName: "13",
+            mismatches: [
+              {
+                type: "deletion",
+                pos: 0,
+                length: 1,
+              },
+            ],
+          },
         ],
-        "firstNodeOffset": 9,
-        "finalNodeCoverLength": 12,
+        firstNodeOffset: 9,
+        finalNodeCoverLength: 12,
       },
       {
-        "id": 5,
-        "sequenceNew": [
+        id: 5,
+        sequenceNew: [
           {
-            "nodeName": "1",
-            "mismatches": [
+            nodeName: "1",
+            mismatches: [
               {
-                "type": "deletion",
-                "pos": 0,
-                "length": 2
-              }
-            ]
-          }
+                type: "deletion",
+                pos: 0,
+                length: 2,
+              },
+            ],
+          },
         ],
-        "firstNodeOffset": 2,
-        "finalNodeCoverLength": 14,
+        firstNodeOffset: 2,
+        finalNodeCoverLength: 14,
       },
     ];
     expect(coverage(node, reads)).toBe(2.79);
-  })
-})
+  });
+});