diff --git a/app/src/actions/Charts.ts b/app/src/actions/Charts.ts
index 960b981..e93bfe6 100644
--- a/app/src/actions/Charts.ts
+++ b/app/src/actions/Charts.ts
@@ -45,9 +45,7 @@ export const saveCharts = () => async (dispatch: Dispatch<any>, getState: () =>
     return
   }
 
-  const charts = getState()
-    .charts.get('charts')
-    .toArray()
+  const charts = getState().charts.get('charts').toArray()
 
   let viewStates: ConnectionViewStateDictionary | undefined
   try {
@@ -69,7 +67,7 @@ export const addChart = (chartParameters: ChartParameters) => async (
   const chartExists = Boolean(
     getState()
       .charts.get('charts')
-      .find(chart => chart.topic === chartParameters.topic && chart.dotPath === chartParameters.dotPath)
+      .find((chart) => chart.topic === chartParameters.topic && chart.dotPath === chartParameters.dotPath)
   )
   if (chartExists) {
     dispatch(showNotification('Already added'))
diff --git a/app/src/actions/Connection.ts b/app/src/actions/Connection.ts
index a2e0d23..0c1801a 100644
--- a/app/src/actions/Connection.ts
+++ b/app/src/actions/Connection.ts
@@ -20,7 +20,7 @@ export const connect = (options: MqttOptions, connectionId: string) => (
   const event = makeConnectionStateEvent(connectionId)
   const host = url.parse(options.url).hostname
 
-  rendererEvents.subscribe(event, dataSourceState => {
+  rendererEvents.subscribe(event, (dataSourceState) => {
     if (dataSourceState.connected) {
       const didReconnect = Boolean(getState().connection.tree)
       if (!didReconnect) {
diff --git a/app/src/actions/ConnectionManager.ts b/app/src/actions/ConnectionManager.ts
index f11e850..8fa274c 100644
--- a/app/src/actions/ConnectionManager.ts
+++ b/app/src/actions/ConnectionManager.ts
@@ -146,7 +146,7 @@ export const deleteConnection = (connectionId: string) => (dispatch: Dispatch<an
   const connectionIds = Object.keys(getState().connectionManager.connections)
   const connectionIdLocation = connectionIds.indexOf(connectionId)
 
-  const remainingIds = connectionIds.filter(id => id !== connectionId)
+  const remainingIds = connectionIds.filter((id) => id !== connectionId)
   const nextSelectedConnectionIndex = Math.min(remainingIds.length - 1, connectionIdLocation)
   const nextSelectedConnection = remainingIds[nextSelectedConnectionIndex]
 
diff --git a/app/src/actions/Global.ts b/app/src/actions/Global.ts
index a1b3a67..30f96fa 100644
--- a/app/src/actions/Global.ts
+++ b/app/src/actions/Global.ts
@@ -22,7 +22,7 @@ export const toggleSettingsVisibility = () => (dispatch: Dispatch<any>) => {
 }
 
 export const requestConfirmation = (title: string, inquiry: string) => (dispatch: Dispatch<any>) => {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     const confirmationRequest = {
       title,
       inquiry,
diff --git a/app/src/actions/Settings.ts b/app/src/actions/Settings.ts
index e15acc6..6fa3994 100644
--- a/app/src/actions/Settings.ts
+++ b/app/src/actions/Settings.ts
@@ -105,11 +105,7 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
   const topicFilter = filterStr.toLowerCase()
 
   const nodeFilter = (node: q.TreeNode<TopicViewModel>): boolean => {
-    const topicMatches =
-      node
-        .path()
-        .toLowerCase()
-        .indexOf(topicFilter) !== -1
+    const topicMatches = node.path().toLowerCase().indexOf(topicFilter) !== -1
     if (topicMatches) {
       return true
     }
@@ -117,9 +113,7 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
     const messageMatches =
       node.message &&
       node.message.value &&
-      Base64Message.toUnicodeString(node.message.value)
-        .toLowerCase()
-        .indexOf(filterStr) !== -1
+      Base64Message.toUnicodeString(node.message.value).toLowerCase().indexOf(filterStr) !== -1
 
     return Boolean(messageMatches)
   }
diff --git a/app/src/actions/clearTopic.ts b/app/src/actions/clearTopic.ts
index 068662b..939cbe6 100644
--- a/app/src/actions/clearTopic.ts
+++ b/app/src/actions/clearTopic.ts
@@ -40,8 +40,8 @@ export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean) => async
   const publishEvent = makePublishEvent(connectionId)
 
   topicsForPurging
-    .filter(t => t.path() !== '' && t.hasMessage())
-    .map(t => t.path())
+    .filter((t) => t.path() !== '' && t.hasMessage())
+    .map((t) => t.path())
     .forEach((path, idx) => {
       const mqttMessage = {
         topic: path,
diff --git a/app/src/actions/visibleTreeTraversal.ts b/app/src/actions/visibleTreeTraversal.ts
index 233e22e..cbcbfee 100644
--- a/app/src/actions/visibleTreeTraversal.ts
+++ b/app/src/actions/visibleTreeTraversal.ts
@@ -82,7 +82,7 @@ function findNextNodeUpward(
   }
 
   const neighborNodes = sortedNodes(settings, parent)
-  const nodeIdx = neighborNodes.findIndex(n => n.path() === treeNode.path())
+  const nodeIdx = neighborNodes.findIndex((n) => n.path() === treeNode.path())
   if (nodeIdx === 0) {
     return parent
   }
@@ -125,7 +125,7 @@ function findNextNodeDownwardNeighbor(
   }
 
   const neighborNodes = sortedNodes(settings, parent).filter(isTreeNodeVisible)
-  const nodeIdx = neighborNodes.findIndex(n => n.path() === treeNode.path())
+  const nodeIdx = neighborNodes.findIndex((n) => n.path() === treeNode.path())
   const downwardNeighbor = neighborNodes[nodeIdx + 1]
   if (downwardNeighbor) {
     return downwardNeighbor
diff --git a/app/src/components/App.tsx b/app/src/components/App.tsx
index 2bb533b..2260902 100644
--- a/app/src/components/App.tsx
+++ b/app/src/components/App.tsx
@@ -157,9 +157,4 @@ const mapStateToProps = (state: AppState) => {
   }
 }
 
-export default withStyles(styles)(
-  connect(
-    mapStateToProps,
-    mapDispatchToProps
-  )(App)
-)
+export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(App))
diff --git a/app/src/components/Chart/Chart.tsx b/app/src/components/Chart/Chart.tsx
index a438680..595458b 100644
--- a/app/src/components/Chart/Chart.tsx
+++ b/app/src/components/Chart/Chart.tsx
@@ -28,7 +28,7 @@ export default withTheme(
   memo((props: Props) => {
     const [width, setWidth] = React.useState(300)
     const [tooltip, setTooltip] = React.useState<Tooltip | undefined>()
-    const detectResize = React.useCallback(newWidth => setWidth(newWidth), [])
+    const detectResize = React.useCallback((newWidth) => setWidth(newWidth), [])
 
     const hintFormatter = React.useCallback(
       (point: any) => [
diff --git a/app/src/components/Chart/effects/useCustomYDomain.tsx b/app/src/components/Chart/effects/useCustomYDomain.tsx
index dfabe86..0d64361 100644
--- a/app/src/components/Chart/effects/useCustomYDomain.tsx
+++ b/app/src/components/Chart/effects/useCustomYDomain.tsx
@@ -27,7 +27,7 @@ function domainForData(data: Array<Point>): [number, number] {
   let max = data[0].y
   let min = data[0].y
 
-  data.forEach(d => {
+  data.forEach((d) => {
     if (max < d.y) {
       max = d.y
     }
diff --git a/app/src/components/ChartPanel/ChartSettings/ColorSettings.tsx b/app/src/components/ChartPanel/ChartSettings/ColorSettings.tsx
index a1c60c7..7d7862a 100644
--- a/app/src/components/ChartPanel/ChartSettings/ColorSettings.tsx
+++ b/app/src/components/ChartPanel/ChartSettings/ColorSettings.tsx
@@ -31,7 +31,7 @@ function ColorSettings(props: {
   )
 
   const menuItems = React.useMemo(() => {
-    return colors.map(color => (
+    return colors.map((color) => (
       <MenuItem
         style={{ minWidth: '8em', minHeight: '36px', backgroundColor: color, textAlign: 'center' }}
         key={color}
@@ -65,7 +65,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(
-  undefined,
-  mapDispatchToProps
-)(memo(ColorSettings))
+export default connect(undefined, mapDispatchToProps)(memo(ColorSettings))
diff --git a/app/src/components/ChartPanel/ChartSettings/InterpolationSettings.tsx b/app/src/components/ChartPanel/ChartSettings/InterpolationSettings.tsx
index ed3c4e6..068d61f 100644
--- a/app/src/components/ChartPanel/ChartSettings/InterpolationSettings.tsx
+++ b/app/src/components/ChartPanel/ChartSettings/InterpolationSettings.tsx
@@ -38,7 +38,7 @@ function InterpolationSettings(props: {
   }, [curves])
 
   const menuItems = React.useMemo(() => {
-    return curves.map(curve => (
+    return curves.map((curve) => (
       <MenuItem key={curve} onClick={callbacks[curve]} selected={props.chart.interpolation === curve}>
         <Typography variant="inherit">{curve.replace(/_/g, ' ')}</Typography>
       </MenuItem>
@@ -60,7 +60,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(
-  undefined,
-  mapDispatchToProps
-)(InterpolationSettings)
+export default connect(undefined, mapDispatchToProps)(InterpolationSettings)
diff --git a/app/src/components/ChartPanel/ChartSettings/MoveUp.tsx b/app/src/components/ChartPanel/ChartSettings/MoveUp.tsx
index f1db8c5..829c08f 100644
--- a/app/src/components/ChartPanel/ChartSettings/MoveUp.tsx
+++ b/app/src/components/ChartPanel/ChartSettings/MoveUp.tsx
@@ -33,7 +33,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(
-  undefined,
-  mapDispatchToProps
-)(MoveUp)
+export default connect(undefined, mapDispatchToProps)(MoveUp)
diff --git a/app/src/components/ChartPanel/ChartSettings/RangeSettings.tsx b/app/src/components/ChartPanel/ChartSettings/RangeSettings.tsx
index 042b40b..c6ae7db 100644
--- a/app/src/components/ChartPanel/ChartSettings/RangeSettings.tsx
+++ b/app/src/components/ChartPanel/ChartSettings/RangeSettings.tsx
@@ -95,10 +95,7 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(
-  undefined,
-  mapDispatchToProps
-)(RangeSettings)
+export default connect(undefined, mapDispatchToProps)(RangeSettings)
 
 function useRangeStateToFireUpdateAction(
   rangeFrom: string | number | undefined,
diff --git a/app/src/components/ChartPanel/ChartSettings/Size.tsx b/app/src/components/ChartPanel/ChartSettings/Size.tsx
index 8f884b4..f736630 100644
--- a/app/src/components/ChartPanel/ChartSettings/Size.tsx
+++ b/app/src/components/ChartPanel/ChartSettings/Size.tsx
@@ -47,7 +47,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(
-  undefined,
-  mapDispatchToProps
-)(memo(Size))
+export default connect(undefined, mapDispatchToProps)(memo(Size))
diff --git a/app/src/components/ChartPanel/ChartSettings/TimeRangeSettings.tsx b/app/src/components/ChartPanel/ChartSettings/TimeRangeSettings.tsx
index db8b29e..162d26e 100644
--- a/app/src/components/ChartPanel/ChartSettings/TimeRangeSettings.tsx
+++ b/app/src/components/ChartPanel/ChartSettings/TimeRangeSettings.tsx
@@ -58,7 +58,7 @@ function TimeRangeSettings(props: Props) {
       >
         <Typography>Chart data within a time interval</Typography>
         <div style={{ padding: '0 16px', width: '275px', textAlign: 'center' }}>
-          {ranges.map(r => {
+          {ranges.map((r) => {
             return (
               <Button
                 style={{ margin: '4px', textTransform: 'none' }}
@@ -96,7 +96,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(
-  undefined,
-  mapDispatchToProps
-)(TimeRangeSettings)
+export default connect(undefined, mapDispatchToProps)(TimeRangeSettings)
diff --git a/app/src/components/ChartPanel/ChartSettings/colors.ts b/app/src/components/ChartPanel/ChartSettings/colors.ts
index 4611837..8e30952 100644
--- a/app/src/components/ChartPanel/ChartSettings/colors.ts
+++ b/app/src/components/ChartPanel/ChartSettings/colors.ts
@@ -39,7 +39,7 @@ export function colors() {
     indigo,
     yellow,
   ]
-    .map(color => [color[200], color[500], color[700]])
+    .map((color) => [color[200], color[500], color[700]])
     .reduce((a, b) => a.concat(b), [])
     .sort((a, b) => colorCompare(a, b))
   return colors
diff --git a/app/src/components/ChartPanel/TopicChart.tsx b/app/src/components/ChartPanel/TopicChart.tsx
index 8fbba9c..3500860 100644
--- a/app/src/components/ChartPanel/TopicChart.tsx
+++ b/app/src/components/ChartPanel/TopicChart.tsx
@@ -133,7 +133,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(
-  undefined,
-  mapDispatchToProps
-)(memo(TopicChart))
+export default connect(undefined, mapDispatchToProps)(memo(TopicChart))
diff --git a/app/src/components/ChartPanel/index.tsx b/app/src/components/ChartPanel/index.tsx
index 49b6204..772a681 100644
--- a/app/src/components/ChartPanel/index.tsx
+++ b/app/src/components/ChartPanel/index.tsx
@@ -63,7 +63,7 @@ function ChartPanel(props: Props) {
     }
   }, [chartsInView])
 
-  const charts = props.charts.map(chartParameters => (
+  const charts = props.charts.map((chartParameters) => (
     <CSSTransition
       key={`${chartParameters.topic}-${chartParameters.dotPath || ''}`}
       timeout={{ enter: 500, exit: 500 }}
@@ -126,7 +126,4 @@ const styles = (theme: Theme) => ({
   },
 })
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withStyles(styles)(ChartPanel))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ChartPanel))
diff --git a/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx b/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx
index b955501..04bce9e 100644
--- a/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx
+++ b/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx
@@ -36,7 +36,7 @@ class ConnectionSettings extends React.Component<Props, State> {
 
   private renderSubscriptions() {
     const connection = this.props.connection
-    return connection.subscriptions.map(subscription => (
+    return connection.subscriptions.map((subscription) => (
       <Subscription
         deleteAction={() => this.props.managerActions.deleteSubscription(subscription, connection.id)}
         subscription={subscription}
@@ -154,7 +154,4 @@ const styles = (theme: Theme) => ({
   },
 })
 
-export default connect(
-  undefined,
-  mapDispatchToProps
-)(withStyles(styles)(ConnectionSettings))
+export default connect(undefined, mapDispatchToProps)(withStyles(styles)(ConnectionSettings))
diff --git a/app/src/components/ConnectionSetup/CertificateFileSelection.tsx b/app/src/components/ConnectionSetup/CertificateFileSelection.tsx
index 9addfa6..bbeea0d 100644
--- a/app/src/components/ConnectionSetup/CertificateFileSelection.tsx
+++ b/app/src/components/ConnectionSetup/CertificateFileSelection.tsx
@@ -81,7 +81,4 @@ const styles = (theme: Theme) => ({
   },
 })
 
-export default connect(
-  undefined,
-  mapDispatchToProps
-)(withStyles(styles)(CertificateFileSelection))
+export default connect(undefined, mapDispatchToProps)(withStyles(styles)(CertificateFileSelection))
diff --git a/app/src/components/ConnectionSetup/Certificates.tsx b/app/src/components/ConnectionSetup/Certificates.tsx
index 070b8fb..0277c1a 100644
--- a/app/src/components/ConnectionSetup/Certificates.tsx
+++ b/app/src/components/ConnectionSetup/Certificates.tsx
@@ -104,7 +104,4 @@ const styles = (theme: Theme) => ({
   },
 })
 
-export default connect(
-  undefined,
-  mapDispatchToProps
-)(withStyles(styles)(Certificates))
+export default connect(undefined, mapDispatchToProps)(withStyles(styles)(Certificates))
diff --git a/app/src/components/ConnectionSetup/ConnectionSettings.tsx b/app/src/components/ConnectionSetup/ConnectionSettings.tsx
index ff68717..8c0506e 100644
--- a/app/src/components/ConnectionSetup/ConnectionSettings.tsx
+++ b/app/src/components/ConnectionSetup/ConnectionSettings.tsx
@@ -285,7 +285,4 @@ const styles = (theme: Theme) => ({
   },
 })
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withStyles(styles)(ConnectionSettings))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSettings))
diff --git a/app/src/components/ConnectionSetup/ConnectionSetup.tsx b/app/src/components/ConnectionSetup/ConnectionSetup.tsx
index 9e41014..dd499de 100644
--- a/app/src/components/ConnectionSetup/ConnectionSetup.tsx
+++ b/app/src/components/ConnectionSetup/ConnectionSetup.tsx
@@ -134,7 +134,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withStyles(styles)(ConnectionSetup))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSetup))
diff --git a/app/src/components/ConnectionSetup/ProfileList/ConnectionItem.tsx b/app/src/components/ConnectionSetup/ProfileList/ConnectionItem.tsx
index de393d2..c0c3da0 100644
--- a/app/src/components/ConnectionSetup/ProfileList/ConnectionItem.tsx
+++ b/app/src/components/ConnectionSetup/ProfileList/ConnectionItem.tsx
@@ -51,7 +51,4 @@ export const connectionItemStyle = (theme: Theme) => ({
   },
 })
 
-export default connect(
-  null,
-  mapDispatchToProps
-)(withStyles(connectionItemStyle)(ConnectionItem))
+export default connect(null, mapDispatchToProps)(withStyles(connectionItemStyle)(ConnectionItem))
diff --git a/app/src/components/ConnectionSetup/ProfileList/index.tsx b/app/src/components/ConnectionSetup/ProfileList/index.tsx
index 5f3c305..a019086 100644
--- a/app/src/components/ConnectionSetup/ProfileList/index.tsx
+++ b/app/src/components/ConnectionSetup/ProfileList/index.tsx
@@ -27,7 +27,7 @@ function ProfileList(props: Props) {
     }
     const indexDirection = dir === 'next' ? 1 : -1
     const connectionArray = Object.values(connections)
-    const selectedIndex = connectionArray.map(connection => connection.id).indexOf(selected)
+    const selectedIndex = connectionArray.map((connection) => connection.id).indexOf(selected)
     const nextConnection = connectionArray[selectedIndex + indexDirection]
     if (nextConnection) {
       actions.selectConnection(nextConnection.id)
@@ -48,7 +48,7 @@ function ProfileList(props: Props) {
   return (
     <List style={{ height: '100%' }} component="nav" subheader={createConnectionButton}>
       <div className={classes.list}>
-        {Object.values(connections).map(connection => (
+        {Object.values(connections).map((connection) => (
           <ConnectionItem connection={connection} key={connection.id} selected={selected === connection.id} />
         ))}
       </div>
@@ -77,7 +77,4 @@ const mapStateToProps = (state: AppState) => {
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withStyles(styles)(ProfileList))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ProfileList))
diff --git a/app/src/components/Demo/ShowText.tsx b/app/src/components/Demo/ShowText.tsx
index c6d212e..b0c8c86 100644
--- a/app/src/components/Demo/ShowText.tsx
+++ b/app/src/components/Demo/ShowText.tsx
@@ -65,7 +65,7 @@ class Demo extends React.Component<{ classes: any }, State> {
     let keys: Array<any> = []
     if (this.state.keys.length > 0) {
       keys = this.state.keys
-        .map(key => [<Key key={key} keyboardKey={key} />])
+        .map((key) => [<Key key={key} keyboardKey={key} />])
         .reduce((prev, current) => {
           return [prev, '+' as any, current]
         })
diff --git a/app/src/components/Layout/ContentView.tsx b/app/src/components/Layout/ContentView.tsx
index bec1f83..c732702 100644
--- a/app/src/components/Layout/ContentView.tsx
+++ b/app/src/components/Layout/ContentView.tsx
@@ -25,7 +25,7 @@ function ContentView(props: Props) {
     setDetectedHeight(newHeight)
   }, [])
 
-  const detectSidebarSize = React.useCallback(width => {
+  const detectSidebarSize = React.useCallback((width) => {
     setDetectedSidebarWidth(width)
   }, [])
 
diff --git a/app/src/components/Layout/PauseButton.tsx b/app/src/components/Layout/PauseButton.tsx
index ca61880..286a865 100644
--- a/app/src/components/Layout/PauseButton.tsx
+++ b/app/src/components/Layout/PauseButton.tsx
@@ -102,7 +102,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withStyles(styles)(PauseButton))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(PauseButton))
diff --git a/app/src/components/Layout/SearchBar.tsx b/app/src/components/Layout/SearchBar.tsx
index add54d7..f284a2b 100644
--- a/app/src/components/Layout/SearchBar.tsx
+++ b/app/src/components/Layout/SearchBar.tsx
@@ -33,7 +33,7 @@ function SearchBar(props: {
     actions.settings.filterTopics(event.target.value)
   }, [])
 
-  useGlobalKeyEventHandler(undefined, event => {
+  useGlobalKeyEventHandler(undefined, (event) => {
     const isCharacter = event.key.length === 1
     const isModifierKey = event.metaKey || event.ctrlKey
     const isAllowedControlCharacter = event.keyCode === KeyCodes.backspace || event.keyCode === KeyCodes.delete
@@ -142,7 +142,4 @@ const styles = (theme: Theme) => ({
   },
 })
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withStyles(styles)(SearchBar))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(SearchBar))
diff --git a/app/src/components/Layout/TitleBar.tsx b/app/src/components/Layout/TitleBar.tsx
index 453f8a7..ed031b6 100644
--- a/app/src/components/Layout/TitleBar.tsx
+++ b/app/src/components/Layout/TitleBar.tsx
@@ -103,7 +103,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withStyles(styles)(TitleBar))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(TitleBar))
diff --git a/app/src/components/SettingsDrawer/Settings.tsx b/app/src/components/SettingsDrawer/Settings.tsx
index 7d095b8..266e984 100644
--- a/app/src/components/SettingsDrawer/Settings.tsx
+++ b/app/src/components/SettingsDrawer/Settings.tsx
@@ -143,7 +143,7 @@ class Settings extends React.PureComponent<Props, {}> {
   private renderAutoExpand() {
     const { classes, autoExpandLimit } = this.props
 
-    const limits = autoExpandLimitSet.map(limit => (
+    const limits = autoExpandLimitSet.map((limit) => (
       <MenuItem key={limit.limit} value={limit.limit}>
         {limit.limit < 10000 && limit.limit > 0 ? `≤ ${limit.limit} topics` : limit.name}
       </MenuItem>
@@ -255,9 +255,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default withStyles(styles)(
-  connect(
-    mapStateToProps,
-    mapDispatchToProps
-  )(Settings)
-)
+export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(Settings))
diff --git a/app/src/components/SettingsDrawer/TimeLocale.tsx b/app/src/components/SettingsDrawer/TimeLocale.tsx
index c8087ba..991124b 100644
--- a/app/src/components/SettingsDrawer/TimeLocale.tsx
+++ b/app/src/components/SettingsDrawer/TimeLocale.tsx
@@ -47,7 +47,7 @@ function TimeLocaleSettings(props: Props) {
         input={<Input name="time-locale" id="time-locale-label-placeholder" />}
         name="time-locale"
         className={classes.input}
-        renderValue={v => <span>{String(v)}</span>}
+        renderValue={(v) => <span>{String(v)}</span>}
         style={{ flex: '1' }}
       >
         {localeMenuItems}
@@ -82,9 +82,4 @@ const styles = (theme: Theme) => ({
   },
 })
 
-export default withStyles(styles)(
-  connect(
-    mapStateToProps,
-    mapDispatchToProps
-  )(TimeLocaleSettings)
-)
+export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(TimeLocaleSettings))
diff --git a/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx b/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx
index e2b261e..4d430c4 100644
--- a/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx
+++ b/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx
@@ -85,7 +85,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(
-  undefined,
-  mapDispatchToProps
-)(ChartPreview)
+export default connect(undefined, mapDispatchToProps)(ChartPreview)
diff --git a/app/src/components/Sidebar/CodeDiff/DiffCount.tsx b/app/src/components/Sidebar/CodeDiff/DiffCount.tsx
index f891f7e..7615aaa 100644
--- a/app/src/components/Sidebar/CodeDiff/DiffCount.tsx
+++ b/app/src/components/Sidebar/CodeDiff/DiffCount.tsx
@@ -9,9 +9,11 @@ interface Props {
 }
 
 function changeAmount(props: Props) {
-  const additions = props.changes.map(change => (change.added === true ? change.count || 0 : 0)).reduce((a, b) => a + b)
+  const additions = props.changes
+    .map((change) => (change.added === true ? change.count || 0 : 0))
+    .reduce((a, b) => a + b)
   const deletions = props.changes
-    .map(change => (change.removed === true ? change.count || 0 : 0))
+    .map((change) => (change.removed === true ? change.count || 0 : 0))
     .reduce((a, b) => a + b)
   if (additions === 0 && deletions === 0) {
     return null
diff --git a/app/src/components/Sidebar/Publish/Publish.tsx b/app/src/components/Sidebar/Publish/Publish.tsx
index 944ab8f..fc785d8 100644
--- a/app/src/components/Sidebar/Publish/Publish.tsx
+++ b/app/src/components/Sidebar/Publish/Publish.tsx
@@ -30,7 +30,7 @@ function useHistory(): [Array<Message>, (topic: string, payload?: string) => voi
   const amendToHistory = useCallback(
     (topic: string, payload?: string) => {
       // Remove duplicates
-      let filteredHistory = history.filter(e => e.payload !== payload || e.topic !== topic)
+      let filteredHistory = history.filter((e) => e.payload !== payload || e.topic !== topic)
       filteredHistory = filteredHistory.slice(-7)
       setHistory([...filteredHistory, { topic, payload, sent: new Date() }])
     },
@@ -183,7 +183,4 @@ const mapStateToProps = (state: AppState) => {
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withTheme(Publish))
+export default connect(mapStateToProps, mapDispatchToProps)(withTheme(Publish))
diff --git a/app/src/components/Sidebar/Publish/PublishHistory.tsx b/app/src/components/Sidebar/Publish/PublishHistory.tsx
index 033b85d..22d8937 100644
--- a/app/src/components/Sidebar/Publish/PublishHistory.tsx
+++ b/app/src/components/Sidebar/Publish/PublishHistory.tsx
@@ -18,7 +18,7 @@ function PublishHistory(props: { history: Array<Message>; actions: typeof publis
   )
 
   return useMemo(() => {
-    const items = [...props.history].reverse().map(message => ({
+    const items = [...props.history].reverse().map((message) => ({
       key: sha1(message.topic + message.payload),
       title: message.topic,
       value: message.payload || '',
@@ -34,7 +34,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(
-  undefined,
-  mapDispatchToProps
-)(PublishHistory)
+export default connect(undefined, mapDispatchToProps)(PublishHistory)
diff --git a/app/src/components/Sidebar/Publish/QosSelect.tsx b/app/src/components/Sidebar/Publish/QosSelect.tsx
index 551950a..d0adce3 100644
--- a/app/src/components/Sidebar/Publish/QosSelect.tsx
+++ b/app/src/components/Sidebar/Publish/QosSelect.tsx
@@ -69,7 +69,4 @@ const mapStateToProps = (state: AppState) => {
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(QosSelect)
+export default connect(mapStateToProps, mapDispatchToProps)(QosSelect)
diff --git a/app/src/components/Sidebar/Publish/RetainSwitch.tsx b/app/src/components/Sidebar/Publish/RetainSwitch.tsx
index 4855e69..6f6a953 100644
--- a/app/src/components/Sidebar/Publish/RetainSwitch.tsx
+++ b/app/src/components/Sidebar/Publish/RetainSwitch.tsx
@@ -41,7 +41,4 @@ const mapStateToProps = (state: AppState) => {
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(RetainSwitch)
+export default connect(mapStateToProps, mapDispatchToProps)(RetainSwitch)
diff --git a/app/src/components/Sidebar/Publish/TopicInput.tsx b/app/src/components/Sidebar/Publish/TopicInput.tsx
index 2520306..e263bf6 100644
--- a/app/src/components/Sidebar/Publish/TopicInput.tsx
+++ b/app/src/components/Sidebar/Publish/TopicInput.tsx
@@ -62,7 +62,4 @@ const mapStateToProps = (state: AppState) => {
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(TopicInput)
+export default connect(mapStateToProps, mapDispatchToProps)(TopicInput)
diff --git a/app/src/components/Sidebar/Sidebar.tsx b/app/src/components/Sidebar/Sidebar.tsx
index ce20c02..4e257cf 100644
--- a/app/src/components/Sidebar/Sidebar.tsx
+++ b/app/src/components/Sidebar/Sidebar.tsx
@@ -99,9 +99,4 @@ const styles = (theme: Theme) => ({
   },
 })
 
-export default withStyles(styles)(
-  connect(
-    mapStateToProps,
-    mapDispatchToProps
-  )(Sidebar)
-)
+export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(Sidebar))
diff --git a/app/src/components/Sidebar/TopicPanel/Topic.tsx b/app/src/components/Sidebar/TopicPanel/Topic.tsx
index eeaeb13..8b180c6 100644
--- a/app/src/components/Sidebar/TopicPanel/Topic.tsx
+++ b/app/src/components/Sidebar/TopicPanel/Topic.tsx
@@ -33,9 +33,9 @@ class Topic extends React.PureComponent<Props, {}> {
     let key = 0
     const breadCrumps = node
       .branch()
-      .map(node => node.sourceEdge)
-      .filter(edge => Boolean(edge))
-      .map(edge => [
+      .map((node) => node.sourceEdge)
+      .filter((edge) => Boolean(edge))
+      .map((edge) => [
         <Button
           onClick={() => this.props.actions.selectTopic(edge!.target)}
           size="small"
@@ -66,7 +66,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(
-  null,
-  mapDispatchToProps
-)(withStyles(styles, { withTheme: true })(Topic))
+export default connect(null, mapDispatchToProps)(withStyles(styles, { withTheme: true })(Topic))
diff --git a/app/src/components/Sidebar/TopicPanel/TopicPanel.tsx b/app/src/components/Sidebar/TopicPanel/TopicPanel.tsx
index d42b34b..24ad257 100644
--- a/app/src/components/Sidebar/TopicPanel/TopicPanel.tsx
+++ b/app/src/components/Sidebar/TopicPanel/TopicPanel.tsx
@@ -43,7 +43,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(
-  undefined,
-  mapDispatchToProps
-)(TopicPanel)
+export default connect(undefined, mapDispatchToProps)(TopicPanel)
diff --git a/app/src/components/Sidebar/ValueRenderer/ActionButtons.tsx b/app/src/components/Sidebar/ValueRenderer/ActionButtons.tsx
index 35bd5f1..07cc9c6 100644
--- a/app/src/components/Sidebar/ValueRenderer/ActionButtons.tsx
+++ b/app/src/components/Sidebar/ValueRenderer/ActionButtons.tsx
@@ -73,7 +73,4 @@ const mapStateToProps = (state: AppState) => {
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withStyles(styles)(ActionButtons))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ActionButtons))
diff --git a/app/src/components/Sidebar/ValueRenderer/DeleteSelectedTopicButton.tsx b/app/src/components/Sidebar/ValueRenderer/DeleteSelectedTopicButton.tsx
index bd6ac84..f9ebc2d 100644
--- a/app/src/components/Sidebar/ValueRenderer/DeleteSelectedTopicButton.tsx
+++ b/app/src/components/Sidebar/ValueRenderer/DeleteSelectedTopicButton.tsx
@@ -33,7 +33,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(
-  undefined,
-  mapDispatchToProps
-)(DeleteSelectedTopicButton)
+export default connect(undefined, mapDispatchToProps)(DeleteSelectedTopicButton)
diff --git a/app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx b/app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx
index a63575a..2b2dfcf 100644
--- a/app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx
+++ b/app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx
@@ -120,9 +120,7 @@ class MessageHistory extends React.PureComponent<Props, State> {
               >
                 <ShowChart style={{ marginTop: '-5px' }} />
               </CustomIconButton>
-            ) : (
-              undefined
-            )
+            ) : undefined
           }
           onClick={this.displayMessage}
         >
@@ -139,7 +137,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(
-  null,
-  mapDispatchToProps
-)(MessageHistory)
+export default connect(null, mapDispatchToProps)(MessageHistory)
diff --git a/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx b/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx
index 9494f08..cf4d649 100644
--- a/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx
+++ b/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx
@@ -124,7 +124,4 @@ const styles = (theme: Theme) => ({
   },
 })
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withStyles(styles)(ValuePanel))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ValuePanel))
diff --git a/app/src/components/TopicPlot.tsx b/app/src/components/TopicPlot.tsx
index e76a179..1d8202c 100644
--- a/app/src/components/TopicPlot.tsx
+++ b/app/src/components/TopicPlot.tsx
@@ -19,7 +19,7 @@ interface Props {
 function filterUsingTimeRange(startTime: number | undefined, data: Array<q.Message>) {
   if (startTime) {
     const threshold = new Date(Date.now() - startTime)
-    return data.filter(d => d.received >= threshold)
+    return data.filter((d) => d.received >= threshold)
   }
 
   return data
@@ -31,7 +31,7 @@ function nodeToHistory(startTime: number | undefined, history: q.MessageHistory)
       const value = message.value ? toPlottableValue(Base64Message.toUnicodeString(message.value)) : NaN
       return { x: message.received.getTime(), y: toPlottableValue(value) }
     })
-    .filter(data => !isNaN(data.y as any)) as any
+    .filter((data) => !isNaN(data.y as any)) as any
 }
 
 function nodeDotPathToHistory(startTime: number | undefined, history: q.MessageHistory, dotPath: string) {
@@ -46,7 +46,7 @@ function nodeDotPathToHistory(startTime: number | undefined, history: q.MessageH
 
       return { x: message.received.getTime(), y: toPlottableValue(value) }
     })
-    .filter(data => !isNaN(data.y as any)) as any
+    .filter((data) => !isNaN(data.y as any)) as any
 }
 
 function TopicPlot(props: Props) {
diff --git a/app/src/components/Tree/TreeNode/TreeNodeSubnodes.tsx b/app/src/components/Tree/TreeNode/TreeNodeSubnodes.tsx
index 55c67e1..b843108 100644
--- a/app/src/components/Tree/TreeNode/TreeNodeSubnodes.tsx
+++ b/app/src/components/Tree/TreeNode/TreeNodeSubnodes.tsx
@@ -48,7 +48,7 @@ function TreeNodeSubnodes(props: Props) {
 
   return useMemo(() => {
     const nodes = sortedNodes(props.settings, props.treeNode).slice(0, alreadyAdded)
-    const listItems = nodes.map(node => {
+    const listItems = nodes.map((node) => {
       return (
         <TreeNode
           key={`${node.hash()}-${props.filter}`}
diff --git a/app/src/components/Tree/index.tsx b/app/src/components/Tree/index.tsx
index 2b525dd..7fb6e8c 100644
--- a/app/src/components/Tree/index.tsx
+++ b/app/src/components/Tree/index.tsx
@@ -169,7 +169,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(TreeComponent)
+export default connect(mapStateToProps, mapDispatchToProps)(TreeComponent)
diff --git a/app/src/components/UpdateNotifier.tsx b/app/src/components/UpdateNotifier.tsx
index 0db5197..b1830a9 100644
--- a/app/src/components/UpdateNotifier.tsx
+++ b/app/src/components/UpdateNotifier.tsx
@@ -51,10 +51,10 @@ class UpdateNotifier extends React.PureComponent<Props, State> {
     this.state = { newerVersions: [] }
 
     const ownVersion = electron.remote.app.getVersion()
-    this.fetchReleases().then(releases => {
+    this.fetchReleases().then((releases) => {
       const newerVersions = releases
-        .filter(release => this.allowPrereleaseIfOwnVersionIsBeta(release, ownVersion))
-        .filter(release => compareVersions(release.tag_name, ownVersion) > 0)
+        .filter((release) => this.allowPrereleaseIfOwnVersionIsBeta(release, ownVersion))
+        .filter((release) => compareVersions(release.tag_name, ownVersion) > 0)
         .sort((a, b) => compareVersions(b.tag_name, a.tag_name))
 
       if (newerVersions.length > 0) {
@@ -145,7 +145,7 @@ class UpdateNotifier extends React.PureComponent<Props, State> {
       return null
     }
     const releaseNotes = this.state.newerVersions
-      .map(release => `<p><h3>${release.tag_name}</h3><p/><p>${release.body_html}</p>`)
+      .map((release) => `<p><h3>${release.tag_name}</h3><p/><p>${release.body_html}</p>`)
       .join('<hr />')
 
     return (
@@ -195,7 +195,7 @@ class UpdateNotifier extends React.PureComponent<Props, State> {
       return null
     }
 
-    return latestUpdate.assets.filter(this.assetForCurrentPlatform).map(asset => (
+    return latestUpdate.assets.filter(this.assetForCurrentPlatform).map((asset) => (
       <div>
         <Button className={this.props.classes.download} onClick={() => this.openUrl(asset.browser_download_url)}>
           <CloudDownload />
@@ -266,9 +266,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default withStyles(styles)(
-  connect(
-    mapStateToProps,
-    mapDispatchToProps
-  )(UpdateNotifier)
-)
+export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(UpdateNotifier))
diff --git a/app/src/components/helper/ConnectionHealthIndicator.tsx b/app/src/components/helper/ConnectionHealthIndicator.tsx
index 0084d63..b4bfe3f 100644
--- a/app/src/components/helper/ConnectionHealthIndicator.tsx
+++ b/app/src/components/helper/ConnectionHealthIndicator.tsx
@@ -20,7 +20,7 @@ const styles = (theme: Theme) => ({
   icon: {
     boxShadow: theme.shadows[2]
       .split('),')
-      .map(s => `inset ${s}`)
+      .map((s) => `inset ${s}`)
       .join('),'),
     padding: '6px',
     borderRadius: '50%',
diff --git a/app/src/components/helper/Copy.tsx b/app/src/components/helper/Copy.tsx
index 81aa75d..8542c57 100644
--- a/app/src/components/helper/Copy.tsx
+++ b/app/src/components/helper/Copy.tsx
@@ -59,7 +59,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(
-  undefined,
-  mapDispatchToProps
-)(Copy)
+export default connect(undefined, mapDispatchToProps)(Copy)
diff --git a/app/src/reducers/Charts.ts b/app/src/reducers/Charts.ts
index 47644bc..039f0d9 100644
--- a/app/src/reducers/Charts.ts
+++ b/app/src/reducers/Charts.ts
@@ -81,7 +81,7 @@ function addChart(state: ChartsState, action: AddChart) {
 
 function moveUp(state: ChartsState, action: MoveUp) {
   const charts = state.get('charts')
-  const idx = charts.findIndex(chart => chart.topic === action.topic && chart.dotPath === action.dotPath)
+  const idx = charts.findIndex((chart) => chart.topic === action.topic && chart.dotPath === action.dotPath)
   const item = charts.get(idx)
   const previousItem = charts.get(idx - 1)
 
@@ -95,7 +95,7 @@ function moveUp(state: ChartsState, action: MoveUp) {
 
 function updateChart(state: ChartsState, action: UpdateChart) {
   const charts = state.get('charts')
-  const chartIdx = charts.findIndex(chart => chart.topic === action.topic && chart.dotPath === action.dotPath)
+  const chartIdx = charts.findIndex((chart) => chart.topic === action.topic && chart.dotPath === action.dotPath)
   const chart = charts.get(chartIdx)
 
   return state.set('charts', chart ? charts.set(chartIdx, { ...chart, ...action.parameters }) : charts)
@@ -103,7 +103,9 @@ function updateChart(state: ChartsState, action: UpdateChart) {
 
 function removeChart(state: ChartsState, action: RemoveChart) {
   const charts = state.get('charts')
-  const newCharts = charts.filter(chart => chart.topic !== action.chart.topic || chart.dotPath !== action.chart.dotPath)
+  const newCharts = charts.filter(
+    (chart) => chart.topic !== action.chart.topic || chart.dotPath !== action.chart.dotPath
+  )
   return state.set('charts', newCharts)
 }
 
diff --git a/app/src/reducers/ConnectionManager.ts b/app/src/reducers/ConnectionManager.ts
index f67c447..d855f21 100644
--- a/app/src/reducers/ConnectionManager.ts
+++ b/app/src/reducers/ConnectionManager.ts
@@ -160,7 +160,7 @@ function addSubscription(state: ConnectionManagerState, action: AddSubscription)
 
 function deleteSubscription(state: ConnectionManagerState, action: AddSubscription): ConnectionManagerState {
   const connection = state.connections[action.connectionId]
-  const newSubscriptions = connection.subscriptions.filter(s => s !== action.subscription)
+  const newSubscriptions = connection.subscriptions.filter((s) => s !== action.subscription)
 
   return {
     ...state,
diff --git a/app/src/reducers/Global.ts b/app/src/reducers/Global.ts
index 079b07b..82e891c 100644
--- a/app/src/reducers/Global.ts
+++ b/app/src/reducers/Global.ts
@@ -90,7 +90,7 @@ export const globalState: Reducer<Record<GlobalStateInterface>, GlobalAction> =
       }
       return state.set(
         'confirmationRequests',
-        state.get('confirmationRequests').filter(a => a !== action.confirmationRequest)
+        state.get('confirmationRequests').filter((a) => a !== action.confirmationRequest)
       )
 
     default:
diff --git a/app/src/sortedNodes.tsx b/app/src/sortedNodes.tsx
index e6cf151..7f9e852 100644
--- a/app/src/sortedNodes.tsx
+++ b/app/src/sortedNodes.tsx
@@ -9,7 +9,7 @@ export function sortedNodes(settings: SettingsState, treeNode: q.TreeNode<any>):
   if (topicOrder === TopicOrder.abc) {
     edges.sort((a, b) => a.name.localeCompare(b.name))
   }
-  const nodes = edges.map(edge => edge.target)
+  const nodes = edges.map((edge) => edge.target)
   if (topicOrder === TopicOrder.messages) {
     nodes.sort((a, b) => b.leafMessageCount() - a.leafMessageCount())
   }
diff --git a/backend/src/ConfigStorage.ts b/backend/src/ConfigStorage.ts
index 5e2e2ac..8543295 100644
--- a/backend/src/ConfigStorage.ts
+++ b/backend/src/ConfigStorage.ts
@@ -32,7 +32,7 @@ export default class ConfigStorage {
   }
 
   public async init() {
-    backendEvents.subscribe(storageStoreEvent, async event => {
+    backendEvents.subscribe(storageStoreEvent, async (event) => {
       const ack = makeStorageAcknowledgementEvent(event.transactionId)
       try {
         const db = await this.getDb()
@@ -48,7 +48,7 @@ export default class ConfigStorage {
       }
     })
 
-    backendEvents.subscribe(storageLoadEvent, async event => {
+    backendEvents.subscribe(storageLoadEvent, async (event) => {
       const responseEvent = makeStorageResponseEvent(event.transactionId)
       try {
         const db = await this.getDb()
@@ -68,7 +68,7 @@ export default class ConfigStorage {
       }
     })
 
-    backendEvents.subscribe(storageClearEvent, async event => {
+    backendEvents.subscribe(storageClearEvent, async (event) => {
       try {
         const db = await this.getDb()
         const keys = await db.keys().value()
diff --git a/backend/src/DataSource/MqttSource.ts b/backend/src/DataSource/MqttSource.ts
index a7a5ea7..081625a 100644
--- a/backend/src/DataSource/MqttSource.ts
+++ b/backend/src/DataSource/MqttSource.ts
@@ -73,7 +73,7 @@ export class MqttSource implements DataSource<MqttOptions> {
 
     client.on('connect', () => {
       this.stateMachine.setConnected(true)
-      options.subscriptions.forEach(subscription => {
+      options.subscriptions.forEach((subscription) => {
         client.subscribe(subscription, (err: Error) => {
           if (err) {
             this.stateMachine.setError(err)
diff --git a/backend/src/JsonAstParser.ts b/backend/src/JsonAstParser.ts
index 0979bdd..ee3863c 100644
--- a/backend/src/JsonAstParser.ts
+++ b/backend/src/JsonAstParser.ts
@@ -70,7 +70,7 @@ function jsonToPropertyPaths(ast: JsonAst, previousPath: Array<string> = []): Ar
   } else if (ast.type === 'Array') {
     children = ast.children.map((value, idx) => jsonToPropertyPaths(value, previousPath.slice().concat([String(idx)])))
   } else if (ast.type === 'Object') {
-    children = ast.children.map(property =>
+    children = ast.children.map((property) =>
       jsonToPropertyPaths(property.value, previousPath.slice().concat([property.key.value]))
     )
   }
diff --git a/backend/src/Model/Tree.ts b/backend/src/Model/Tree.ts
index 15e6bb0..89d830c 100644
--- a/backend/src/Model/Tree.ts
+++ b/backend/src/Model/Tree.ts
@@ -74,7 +74,7 @@ export class Tree<ViewModel extends Destroyable> extends TreeNode<ViewModel> {
   }
 
   public applyUnmergedChanges() {
-    this.unmergedMessages.popAll().forEach(bufferedItem => {
+    this.unmergedMessages.popAll().forEach((bufferedItem) => {
       const edges = bufferedItem.message.topic.split('/')
       const node = TreeNodeFactory.fromEdgesAndValue<ViewModel>(
         edges,
diff --git a/backend/src/Model/TreeNode.ts b/backend/src/Model/TreeNode.ts
index 7d8b6fe..792b216 100644
--- a/backend/src/Model/TreeNode.ts
+++ b/backend/src/Model/TreeNode.ts
@@ -156,8 +156,8 @@ export class TreeNode<ViewModel extends Destroyable> {
   public path(): string {
     if (!this.cachedPath) {
       return this.branch()
-        .map(node => node.sourceEdge && node.sourceEdge.name)
-        .filter(name => name !== undefined)
+        .map((node) => node.sourceEdge && node.sourceEdge.name)
+        .filter((name) => name !== undefined)
         .join('/')
     }
 
@@ -214,7 +214,7 @@ export class TreeNode<ViewModel extends Destroyable> {
   public leafMessageCount(): number {
     if (this.cachedLeafMessageCount === undefined) {
       this.cachedLeafMessageCount =
-        this.edgeArray.map(edge => edge.target.leafMessageCount()).reduce((a, b) => a + b, 0) + this.messages
+        this.edgeArray.map((edge) => edge.target.leafMessageCount()).reduce((a, b) => a + b, 0) + this.messages
     }
 
     return this.cachedLeafMessageCount as number
@@ -223,7 +223,7 @@ export class TreeNode<ViewModel extends Destroyable> {
   public childTopicCount(): number {
     if (this.cachedChildTopicCount === undefined) {
       this.cachedChildTopicCount = this.edgeArray
-        .map(e => e.target.childTopicCount())
+        .map((e) => e.target.childTopicCount())
         .reduce((a, b) => a + b, this.hasMessage() ? 1 : 0)
     }
 
@@ -239,7 +239,7 @@ export class TreeNode<ViewModel extends Destroyable> {
       const initialValue = this.message && this.message.value ? [this] : []
 
       this.cachedChildTopics = this.edgeArray
-        .map(e => e.target.childTopics())
+        .map((e) => e.target.childTopics())
         .reduce((a, b) => a.concat(b), initialValue)
     }
 
diff --git a/backend/src/Model/spec/EventDispatcher.spec.ts b/backend/src/Model/spec/EventDispatcher.spec.ts
index 1276bae..743ba02 100644
--- a/backend/src/Model/spec/EventDispatcher.spec.ts
+++ b/backend/src/Model/spec/EventDispatcher.spec.ts
@@ -3,13 +3,13 @@ import { expect } from 'chai'
 import 'mocha'
 
 describe('EventDispatcher', async () => {
-  it('should dispatch', async function() {
+  it('should dispatch', async function () {
     const dispatcher = new EventDispatcher<string>()
     this.timeout(300)
 
     setTimeout(() => dispatcher.dispatch('hello'), 5)
-    const response = await new Promise(resolve => {
-      dispatcher.subscribe(msg => {
+    const response = await new Promise((resolve) => {
+      dispatcher.subscribe((msg) => {
         resolve(msg)
       })
     })
@@ -17,7 +17,7 @@ describe('EventDispatcher', async () => {
     expect(response).to.eq('hello')
   })
 
-  it('should unsubscribe', async function() {
+  it('should unsubscribe', async function () {
     const dispatcher = new EventDispatcher<string>()
     this.timeout(300)
     let callbackCounter = 0
diff --git a/backend/src/index.ts b/backend/src/index.ts
index 48a0b2c..e8c7ebd 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -27,7 +27,7 @@ export class ConnectionManager {
     this.connections[connectionId] = connection
 
     const connectionStateEvent = makeConnectionStateEvent(connectionId)
-    connection.stateMachine.onUpdate.subscribe(state => {
+    connection.stateMachine.onUpdate.subscribe((state) => {
       backendEvents.emit(connectionStateEvent, state)
     })
 
@@ -72,6 +72,6 @@ export class ConnectionManager {
   }
 
   public closeAllConnections() {
-    Object.keys(this.connections).forEach(connectionId => this.removeConnection(connectionId))
+    Object.keys(this.connections).forEach((connectionId) => this.removeConnection(connectionId))
   }
 }
diff --git a/events/EventDispatcher.ts b/events/EventDispatcher.ts
index a3152b0..b150607 100644
--- a/events/EventDispatcher.ts
+++ b/events/EventDispatcher.ts
@@ -26,13 +26,13 @@ export class EventDispatcher<Message> {
   }
 
   public unsubscribe(callback: (msg: Message) => void) {
-    const item = this.callbacks.find(store => store.callback === callback)
+    const item = this.callbacks.find((store) => store.callback === callback)
     if (!item) {
       return
     }
 
     this.emitter.removeListener('event', item.wrappedCallback)
-    this.callbacks = this.callbacks.filter(a => a !== item)
+    this.callbacks = this.callbacks.filter((a) => a !== item)
   }
 
   public removeAllListeners() {
diff --git a/events/IpcRendererEventBus.ts b/events/IpcRendererEventBus.ts
index 2d34293..9108eeb 100644
--- a/events/IpcRendererEventBus.ts
+++ b/events/IpcRendererEventBus.ts
@@ -22,12 +22,12 @@ export class IpcRendererEventBus implements EventBusInterface {
     this.ipc.removeAllListeners(event.topic)
   }
   public unsubscribe<MessageType>(event: Event<MessageType>, callback: any) {
-    const item = this.callbacks.find(store => store.callback === callback)
+    const item = this.callbacks.find((store) => store.callback === callback)
     if (!item) {
       return
     }
     this.ipc.removeListener(event.topic, item.wrappedCallback)
-    this.callbacks = this.callbacks.filter(a => a !== item)
+    this.callbacks = this.callbacks.filter((a) => a !== item)
   }
   public emit<MessageType>(event: Event<MessageType>, msg: MessageType) {
     this.ipc.send(event.topic, msg)
diff --git a/package.json b/package.json
index 2a47d41..c4308b6 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
     "mustache": "^3.0.1",
     "npm-run-all": "^4.1.5",
     "nyc": "^14.1.1",
-    "prettier": "1.18.2",
+    "prettier": "2",
     "redux-thunk": "^2.3.0",
     "source-map-support": "^0.5.9",
     "spectron": "9",
diff --git a/scripts/afterPack.ts b/scripts/afterPack.ts
index 221345b..1ab9240 100644
--- a/scripts/afterPack.ts
+++ b/scripts/afterPack.ts
@@ -13,9 +13,9 @@ interface Context {
   targets: [Target]
 }
 
-export default async function(context: Context) {
+export default async function (context: Context) {
   console.log(context)
-  const isLinux = context.targets.find(target => target.name === 'appImage')
+  const isLinux = context.targets.find((target) => target.name === 'appImage')
   if (!isLinux) {
     return
   }
diff --git a/scripts/cutScenes.ts b/scripts/cutScenes.ts
index 3ef7fdb..2f336ee 100755
--- a/scripts/cutScenes.ts
+++ b/scripts/cutScenes.ts
@@ -40,8 +40,8 @@ class TransitionBuilder {
   public buildOptions(outputFile: string) {
     return {
       output: outputFile,
-      videos: this.scenes.map(s => `${s}.mp4`),
-      transitions: this.transitions.map(name => ({
+      videos: this.scenes.map((s) => `${s}.mp4`),
+      transitions: this.transitions.map((name) => ({
         name: name !== 'none' ? name : 'fade',
         duration: name !== 'none' ? 1000 : 10,
       })),
diff --git a/scripts/util.ts b/scripts/util.ts
index 17cfc4f..83ce13b 100644
--- a/scripts/util.ts
+++ b/scripts/util.ts
@@ -23,7 +23,7 @@ function redirectOutputFor(child: ChildProcess) {
 }
 
 async function waitFor(child: ChildProcess) {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     child.once('close', () => resolve())
   })
 }
diff --git a/src/autoUpdater.ts b/src/autoUpdater.ts
index 22f0c9c..fcda3d3 100644
--- a/src/autoUpdater.ts
+++ b/src/autoUpdater.ts
@@ -16,7 +16,7 @@ export function handleAutoUpdate() {
     console.log('There is an update available')
   })
 
-  autoUpdater.on('error', error => {
+  autoUpdater.on('error', (error) => {
     console.error('could not update due to error', error)
   })
 
diff --git a/src/development.ts b/src/development.ts
index acc9438..a02b65e 100644
--- a/src/development.ts
+++ b/src/development.ts
@@ -11,7 +11,7 @@ export async function waitForDevServer() {
       response = await axios.get('http://localhost:8080')
     } catch {
       console.log('Waiting for dev server')
-      await new Promise(resolve => setTimeout(resolve, 1000))
+      await new Promise((resolve) => setTimeout(resolve, 1000))
     }
   }
 }
@@ -24,9 +24,9 @@ export function loadDevTools() {
 }
 
 export function isDev() {
-  return Boolean(process.argv.find(arg => arg === '--development'))
+  return Boolean(process.argv.find((arg) => arg === '--development'))
 }
 
 export function runningUiTestOnCi() {
-  return Boolean(process.argv.find(arg => arg === '--runningUiTestOnCi'))
+  return Boolean(process.argv.find((arg) => arg === '--runningUiTestOnCi'))
 }
diff --git a/src/spec/mock-mqtt.ts b/src/spec/mock-mqtt.ts
index f9f2af8..e159cc0 100644
--- a/src/spec/mock-mqtt.ts
+++ b/src/spec/mock-mqtt.ts
@@ -2,7 +2,7 @@ import * as mqtt from 'mqtt'
 
 let mqttClient: mqtt.MqttClient
 function startServer(): Promise<mqtt.MqttClient> {
-  return new Promise(async resolve => {
+  return new Promise(async (resolve) => {
     mqttClient = await connectMqtt()
     generateData(mqttClient)
     resolve(mqttClient)
@@ -10,7 +10,7 @@ function startServer(): Promise<mqtt.MqttClient> {
 }
 
 function connectMqtt(): Promise<mqtt.MqttClient> {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     const client = mqtt.connect('mqtt://127.0.0.1:1883', {
       username: '',
       password: '',
diff --git a/src/spec/util/expandTopic.ts b/src/spec/util/expandTopic.ts
index 1d8fa5e..59d22cc 100644
--- a/src/spec/util/expandTopic.ts
+++ b/src/spec/util/expandTopic.ts
@@ -24,6 +24,6 @@ async function topicMatches(topics: Array<string>, browser: Browser) {
 }
 
 function topicSelector(topics: Array<string>) {
-  const suffix = topics.map(topic => `*[contains(text(), "${topic}")]`).join('/../..//')
+  const suffix = topics.map((topic) => `*[contains(text(), "${topic}")]`).join('/../..//')
   return `//${suffix}`
 }
diff --git a/src/spec/util/index.ts b/src/spec/util/index.ts
index 18a6893..b01bf5b 100644
--- a/src/spec/util/index.ts
+++ b/src/spec/util/index.ts
@@ -9,7 +9,7 @@ export function setFast() {
 }
 
 export function sleep(ms: number, required = false) {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     if (required) {
       setTimeout(resolve, ms)
     } else {
diff --git a/yarn.lock b/yarn.lock
index 72d4a94..9683812 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3600,10 +3600,10 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
-prettier@1.18.2:
-  version "1.18.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea"
-  integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==
+prettier@2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.4.tgz#2d1bae173e355996ee355ec9830a7a1ee05457ef"
+  integrity sha512-SVJIQ51spzFDvh4fIbCLvciiDMCrRhlN3mbZvv/+ycjvmF5E73bKdGfU8QDLNmjYJf+lsGnDBC4UUnvTe5OO0w==
 
 pretty-bytes@^1.0.2:
   version "1.0.4"