completing eslint pass

1 files changed, 53 insertions, 61 deletions

diff --git a/src/client/views/nodes/SliderBox-components.tsx b/src/client/views/nodes/SliderBox-components.tsx
index e19f28f08..b9f215d77 100644
--- a/src/client/views/nodes/SliderBox-components.tsx
+++ b/src/client/views/nodes/SliderBox-components.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
-import { SliderItem } from "react-compound-slider";
-import "./SliderBox-tooltip.css";
+import * as React from 'react';
+import { SliderItem } from 'react-compound-slider';
+import './SliderBox-tooltip.css';
 
 const { Component, Fragment } = React;
 
@@ -8,24 +8,24 @@ const { Component, Fragment } = React;
 // TOOLTIP RAIL
 // *******************************************************
 const railStyle: React.CSSProperties = {
-    position: "absolute",
-    width: "100%",
+    position: 'absolute',
+    width: '100%',
     height: 40,
     borderRadius: 7,
-    cursor: "pointer",
+    cursor: 'pointer',
     opacity: 0.3,
     zIndex: 300,
-    border: "1px solid grey"
+    border: '1px solid grey',
 };
 
 const railCenterStyle: React.CSSProperties = {
-    position: "absolute",
-    width: "100%",
+    position: 'absolute',
+    width: '100%',
     height: 14,
     borderRadius: 7,
-    cursor: "pointer",
-    pointerEvents: "none",
-    backgroundColor: "rgb(155,155,155)"
+    cursor: 'pointer',
+    pointerEvents: 'none',
+    backgroundColor: 'rgb(155,155,155)',
 };
 
 interface TooltipRailProps {
@@ -37,21 +37,21 @@ interface TooltipRailProps {
 export class TooltipRail extends Component<TooltipRailProps> {
     state = {
         value: null,
-        percent: null
+        percent: null,
     };
 
     static defaultProps = {
-        disabled: false
+        disabled: false,
     };
 
     onMouseEnter = () => {
-        document.addEventListener("mousemove", this.onMouseMove);
-    }
+        document.addEventListener('mousemove', this.onMouseMove);
+    };
 
     onMouseLeave = () => {
         this.setState({ value: null, percent: null });
-        document.removeEventListener("mousemove", this.onMouseMove);
-    }
+        document.removeEventListener('mousemove', this.onMouseMove);
+    };
 
     onMouseMove = (e: Event) => {
         const { activeHandleID, getEventData } = this.props;
@@ -61,7 +61,7 @@ export class TooltipRail extends Component<TooltipRailProps> {
         } else {
             this.setState(getEventData(e));
         }
-    }
+    };
 
     render() {
         const { value, percent } = this.state;
@@ -73,11 +73,10 @@ export class TooltipRail extends Component<TooltipRailProps> {
                     <div
                         style={{
                             left: `${percent}%`,
-                            position: "absolute",
-                            marginLeft: "-11px",
-                            marginTop: "-35px"
-                        }}
-                    >
+                            position: 'absolute',
+                            marginLeft: '-11px',
+                            marginTop: '-35px',
+                        }}>
                         <div className="tooltip">
                             <span className="tooltiptext">Value: {value}</span>
                         </div>
@@ -87,7 +86,7 @@ export class TooltipRail extends Component<TooltipRailProps> {
                     style={railStyle}
                     {...getRailProps({
                         onMouseEnter: this.onMouseEnter,
-                        onMouseLeave: this.onMouseLeave
+                        onMouseLeave: this.onMouseLeave,
                     })}
                 />
                 <div style={railCenterStyle} />
@@ -110,20 +109,20 @@ interface HandleProps {
 
 export class Handle extends Component<HandleProps> {
     static defaultProps = {
-        disabled: false
+        disabled: false,
     };
 
     state = {
-        mouseOver: false
+        mouseOver: false,
     };
 
     onMouseEnter = () => {
         this.setState({ mouseOver: true });
-    }
+    };
 
     onMouseLeave = () => {
         this.setState({ mouseOver: false });
-    }
+    };
 
     render() {
         const {
@@ -131,7 +130,7 @@ export class Handle extends Component<HandleProps> {
             handle: { id, value, percent },
             isActive,
             disabled,
-            getHandleProps
+            getHandleProps,
         } = this.props;
         const { mouseOver } = this.state;
 
@@ -141,11 +140,10 @@ export class Handle extends Component<HandleProps> {
                     <div
                         style={{
                             left: `${percent}%`,
-                            position: "absolute",
-                            marginLeft: "-11px",
-                            marginTop: "-35px"
-                        }}
-                    >
+                            position: 'absolute',
+                            marginLeft: '-11px',
+                            marginTop: '-35px',
+                        }}>
                         <div className="tooltip">
                             <span className="tooltiptext">Value: {value}</span>
                         </div>
@@ -158,21 +156,21 @@ export class Handle extends Component<HandleProps> {
                     aria-valuenow={value}
                     style={{
                         left: `${percent}%`,
-                        position: "absolute",
-                        marginLeft: "-11px",
-                        marginTop: "-6px",
+                        position: 'absolute',
+                        marginLeft: '-11px',
+                        marginTop: '-6px',
                         zIndex: 400,
                         width: 24,
                         height: 24,
-                        cursor: "pointer",
+                        cursor: 'pointer',
                         border: 0,
-                        borderRadius: "50%",
-                        boxShadow: "1px 1px 1px 1px rgba(0, 0, 0, 0.4)",
-                        backgroundColor: disabled ? "#666" : "#3e1db3"
+                        borderRadius: '50%',
+                        boxShadow: '1px 1px 1px 1px rgba(0, 0, 0, 0.4)',
+                        backgroundColor: disabled ? '#666' : '#3e1db3',
                     }}
                     {...getHandleProps(id, {
                         onMouseEnter: this.onMouseEnter,
-                        onMouseLeave: this.onMouseLeave
+                        onMouseLeave: this.onMouseLeave,
                     })}
                 />
             </Fragment>
@@ -190,23 +188,18 @@ interface TrackProps {
     getTrackProps: () => object;
 }
 
-export function Track({
-    source,
-    target,
-    getTrackProps,
-    disabled = false
-}: TrackProps) {
+export function Track({ source, target, getTrackProps, disabled = false }: TrackProps) {
     return (
         <div
             style={{
-                position: "absolute",
+                position: 'absolute',
                 height: 14,
                 zIndex: 1,
-                backgroundColor: disabled ? "#999" : "#3e1db3",
+                backgroundColor: disabled ? '#999' : '#3e1db3',
                 borderRadius: 7,
-                cursor: "pointer",
+                cursor: 'pointer',
                 left: `${source.percent}%`,
-                width: `${target.percent - source.percent}%`
+                width: `${target.percent - source.percent}%`,
             }}
             {...getTrackProps()}
         />
@@ -229,25 +222,24 @@ export function Tick({ tick, count, format = defaultFormat }: TickProps) {
         <div>
             <div
                 style={{
-                    position: "absolute",
+                    position: 'absolute',
                     marginTop: 20,
                     width: 1,
                     height: 5,
-                    backgroundColor: "rgb(200,200,200)",
-                    left: `${tick.percent}%`
+                    backgroundColor: 'rgb(200,200,200)',
+                    left: `${tick.percent}%`,
                 }}
             />
             <div
                 style={{
-                    position: "absolute",
+                    position: 'absolute',
                     marginTop: 25,
                     fontSize: 10,
-                    textAlign: "center",
+                    textAlign: 'center',
                     marginLeft: `${-(100 / count) / 2}%`,
                     width: `${100 / count}%`,
-                    left: `${tick.percent}%`
-                }}
-            >
+                    left: `${tick.percent}%`,
+                }}>
                 {format(tick.value)}
             </div>
         </div>