From 3d44dc46dd88c6c50853bc867bb1c5d840366721 Mon Sep 17 00:00:00 2001
From: Ali Abid <you@example.comgit>
Date: Sat, 7 Aug 2021 00:20:16 +0000
Subject: [PATCH] fix trailing comma

---
 frontend/.eslintrc.js                         |  7 -----
 frontend/package.json                         |  5 ++--
 frontend/src/components.jsx                   | 22 ++++++++--------
 frontend/src/components/input/audio.jsx       |  6 ++---
 frontend/src/components/input/checkbox.jsx    |  6 ++---
 .../src/components/input/checkbox_group.jsx   |  6 ++---
 frontend/src/components/input/dataframe.jsx   |  2 +-
 frontend/src/components/input/dropdown.jsx    |  2 +-
 frontend/src/components/input/file.jsx        |  2 +-
 frontend/src/components/input/image.jsx       |  8 +++---
 frontend/src/components/input/radio.jsx       |  4 +--
 frontend/src/components/output/carousel.jsx   |  4 +--
 frontend/src/components/output/dataframe.jsx  |  6 ++---
 .../components/output/highlighted_text.jsx    |  2 +-
 frontend/src/components/output/json.jsx       |  2 +-
 frontend/src/components/output/label.jsx      |  2 +-
 frontend/src/gradio.jsx                       | 24 ++++++++---------
 frontend/src/index.jsx                        |  4 +--
 frontend/src/utils.jsx                        |  2 +-
 frontend/tailwind.config.js                   | 26 +++++++++----------
 20 files changed, 67 insertions(+), 75 deletions(-)
 delete mode 100644 frontend/.eslintrc.js

diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
deleted file mode 100644
index c3300650df..0000000000
--- a/frontend/.eslintrc.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-    plugins: ['prettier'],
-    extends: ['prettier'],
-    rules: {
-        'prettier/prettier': 'warn',
-    },
-};
diff --git a/frontend/package.json b/frontend/package.json
index efb595686c..8d5d2f524a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -30,14 +30,13 @@
   },
   "scripts": {
     "start": "REACT_APP_BACKEND_URL='http://localhost:7860/' craco start",
-    "format": "prettier-eslint --eslint-config-path ./.eslintrc.js --write '**/*.js*'",
+    "format": "prettier-eslint --write '**/*.js*'",
     "build": "REACT_APP_BACKEND_URL='' craco build",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
+      "prettier"
     ]
   },
   "browserslist": {
diff --git a/frontend/src/components.jsx b/frontend/src/components.jsx
index e453afaa81..03f96635c3 100644
--- a/frontend/src/components.jsx
+++ b/frontend/src/components.jsx
@@ -3,19 +3,19 @@ import React from "react";
 import { AudioInput, AudioInputExample } from "./components/input/audio";
 import {
   CheckboxGroupInput,
-  CheckboxGroupInputExample,
+  CheckboxGroupInputExample
 } from "./components/input/checkbox_group";
 import {
   CheckboxInput,
-  CheckboxInputExample,
+  CheckboxInputExample
 } from "./components/input/checkbox";
 import {
   DataframeInput,
-  DataframeInputExample,
+  DataframeInputExample
 } from "./components/input/dataframe";
 import {
   DropdownInput,
-  DropdownInputExample,
+  DropdownInputExample
 } from "./components/input/dropdown";
 import { FileInput, FileInputExample } from "./components/input/file";
 import { ImageInput, ImageInputExample } from "./components/input/image";
@@ -28,28 +28,28 @@ import { VideoInput, VideoInputExample } from "./components/input/video";
 import { AudioOutput, AudioOutputExample } from "./components/output/audio";
 import {
   CarouselOutput,
-  CarouselOutputExample,
+  CarouselOutputExample
 } from "./components/output/carousel";
 import {
   DataframeOutput,
-  DataframeOutputExample,
+  DataframeOutputExample
 } from "./components/output/dataframe";
 import { FileOutput, FileOutputExample } from "./components/output/file";
 import {
   HighlightedTextOutput,
-  HighlightedTextOutputExample,
+  HighlightedTextOutputExample
 } from "./components/output/highlighted_text";
 import { HTMLOutput, HTMLOutputExample } from "./components/output/html";
 import { ImageOutput, ImageOutputExample } from "./components/output/image";
 import { JSONOutput, JSONOutputExample } from "./components/output/json";
 import {
   KeyValuesOutput,
-  KeyValuesOutputExample,
+  KeyValuesOutputExample
 } from "./components/output/key_values";
 import { LabelOutput, LabelOutputExample } from "./components/output/label";
 import {
   TextboxOutput,
-  TextboxOutputExample,
+  TextboxOutputExample
 } from "./components/output/textbox";
 import { VideoOutput, VideoOutputExample } from "./components/output/video";
 
@@ -65,7 +65,7 @@ let input_component_map = {
   radio: [RadioInput, RadioInputExample],
   slider: [SliderInput, SliderInputExample],
   textbox: [TextboxInput, TextboxInputExample],
-  video: [VideoInput, VideoInputExample],
+  video: [VideoInput, VideoInputExample]
 };
 let output_component_map = {
   audio: [AudioOutput, AudioOutputExample],
@@ -79,7 +79,7 @@ let output_component_map = {
   keyvalues: [KeyValuesOutput, KeyValuesOutputExample],
   label: [LabelOutput, LabelOutputExample],
   textbox: [TextboxOutput, TextboxOutputExample],
-  video: [VideoOutput, VideoOutputExample],
+  video: [VideoOutput, VideoOutputExample]
 };
 
 for (let component_map of [input_component_map, output_component_map]) {
diff --git a/frontend/src/components/input/audio.jsx b/frontend/src/components/input/audio.jsx
index 59157dfadf..cc67ab7387 100644
--- a/frontend/src/components/input/audio.jsx
+++ b/frontend/src/components/input/audio.jsx
@@ -8,7 +8,7 @@ class AudioInput extends BaseComponent {
   constructor(props) {
     super(props);
     this.state = {
-      recordState: RecordState.STOP,
+      recordState: RecordState.STOP
     };
     this.src = null;
     this.key = 0; // needed to prevent audio caching
@@ -17,12 +17,12 @@ class AudioInput extends BaseComponent {
   }
   start = () => {
     this.setState({
-      recordState: RecordState.START,
+      recordState: RecordState.START
     });
   };
   stop = () => {
     this.setState({
-      recordState: RecordState.STOP,
+      recordState: RecordState.STOP
     });
   };
   onStop = (audioData) => {
diff --git a/frontend/src/components/input/checkbox.jsx b/frontend/src/components/input/checkbox.jsx
index 10c630a249..8582dddc0e 100644
--- a/frontend/src/components/input/checkbox.jsx
+++ b/frontend/src/components/input/checkbox.jsx
@@ -17,7 +17,7 @@ class CheckboxInput extends BaseComponent {
       <div className="input_checkbox">
         <div
           className={classNames("checkbox_item", {
-            selected: this.props.value,
+            selected: this.props.value
           })}
           onClick={this.handleChange}
         >
@@ -35,7 +35,7 @@ class CheckboxInput extends BaseComponent {
                 style={{
                   backgroundColor: getSaliencyColor(
                     this.props.interpretation[0]
-                  ),
+                  )
                 }}
               ></div>
               <div
@@ -43,7 +43,7 @@ class CheckboxInput extends BaseComponent {
                 style={{
                   backgroundColor: getSaliencyColor(
                     this.props.interpretation[1]
-                  ),
+                  )
                 }}
               >
                 <svg className="interpret_check" viewBox="-10 -10 20 20">
diff --git a/frontend/src/components/input/checkbox_group.jsx b/frontend/src/components/input/checkbox_group.jsx
index 9b43ebc5a5..1bc45cea0d 100644
--- a/frontend/src/components/input/checkbox_group.jsx
+++ b/frontend/src/components/input/checkbox_group.jsx
@@ -24,7 +24,7 @@ class CheckboxGroupInput extends BaseComponent {
           return (
             <div
               className={classNames("checkbox_item", {
-                selected: this.props.value.includes(item),
+                selected: this.props.value.includes(item)
               })}
               onClick={this.handleChange.bind(this, item)}
               key={index}
@@ -43,7 +43,7 @@ class CheckboxGroupInput extends BaseComponent {
                     style={{
                       backgroundColor: getSaliencyColor(
                         this.props.interpretation[index][0]
-                      ),
+                      )
                     }}
                   ></div>
                   <div
@@ -51,7 +51,7 @@ class CheckboxGroupInput extends BaseComponent {
                     style={{
                       backgroundColor: getSaliencyColor(
                         this.props.interpretation[index][1]
-                      ),
+                      )
                     }}
                   >
                     <svg className="interpret_check" viewBox="-10 -10 20 20">
diff --git a/frontend/src/components/input/dataframe.jsx b/frontend/src/components/input/dataframe.jsx
index e25dc52d55..15158d69fe 100644
--- a/frontend/src/components/input/dataframe.jsx
+++ b/frontend/src/components/input/dataframe.jsx
@@ -29,7 +29,7 @@ class DataframeInput extends BaseComponent {
             str: "text",
             bool: "checkbox",
             number: "numeric",
-            date: "calendar",
+            date: "calendar"
           };
           column.type = datatype_map[datatype];
         }
diff --git a/frontend/src/components/input/dropdown.jsx b/frontend/src/components/input/dropdown.jsx
index 13314b9587..522a7eb624 100644
--- a/frontend/src/components/input/dropdown.jsx
+++ b/frontend/src/components/input/dropdown.jsx
@@ -28,7 +28,7 @@ class DropdownInput extends BaseComponent {
                 return (
                   <li
                     className={classNames("dropdown_item", {
-                      selected: item === this.props.value,
+                      selected: item === this.props.value
                     })}
                     onClick={this.handleChange.bind(this, item)}
                     key={index}
diff --git a/frontend/src/components/input/file.jsx b/frontend/src/components/input/file.jsx
index 92816a8698..8919a03de9 100644
--- a/frontend/src/components/input/file.jsx
+++ b/frontend/src/components/input/file.jsx
@@ -98,7 +98,7 @@ class FileInput extends BaseComponent {
       name: file.name,
       size: file.size,
       data: reader.result,
-      is_local_example: false,
+      is_local_example: false
     });
     if (this.file_data.length === file_count) {
       this.handleChange(this.file_data);
diff --git a/frontend/src/components/input/image.jsx b/frontend/src/components/input/image.jsx
index 9e08d0b06a..3a8342eef5 100644
--- a/frontend/src/components/input/image.jsx
+++ b/frontend/src/components/input/image.jsx
@@ -55,8 +55,8 @@ class ImageInput extends BaseComponent {
     this.setState({
       dimensions: {
         height: img.offsetHeight,
-        width: img.offsetWidth,
-      },
+        width: img.offsetWidth
+      }
     });
   }
   openEditor() {
@@ -119,9 +119,9 @@ class ImageInput extends BaseComponent {
                     loadImage: { path: this.props.value, name: "value" },
                     uiSize: {
                       width: "800px",
-                      height: "600px",
+                      height: "600px"
                     },
-                    menuBarPosition: "left",
+                    menuBarPosition: "left"
                   }}
                   cssMaxHeight={500}
                   cssMaxWidth={700}
diff --git a/frontend/src/components/input/radio.jsx b/frontend/src/components/input/radio.jsx
index 2c06208b11..c8a11334a0 100644
--- a/frontend/src/components/input/radio.jsx
+++ b/frontend/src/components/input/radio.jsx
@@ -20,7 +20,7 @@ class RadioInput extends BaseComponent {
             <div key={index}>
               <div
                 className={classNames("radio_item", {
-                  selected: item === this.props.value,
+                  selected: item === this.props.value
                 })}
                 onClick={this.handleChange.bind(this, item)}
               >
@@ -32,7 +32,7 @@ class RadioInput extends BaseComponent {
                     style={{
                       backgroundColor: getSaliencyColor(
                         this.props.interpretation[index]
-                      ),
+                      )
                     }}
                   ></div>
                 )}
diff --git a/frontend/src/components/output/carousel.jsx b/frontend/src/components/output/carousel.jsx
index bd1a4457b1..06ab4cbdcb 100644
--- a/frontend/src/components/output/carousel.jsx
+++ b/frontend/src/components/output/carousel.jsx
@@ -14,14 +14,14 @@ class CarouselOutput extends BaseComponent {
     this.setState({
       carousel_index:
         (this.state.carousel_index - 1 + this.props.value.length) %
-        this.props.value.length,
+        this.props.value.length
     });
   }
   next() {
     this.setState({
       carousel_index:
         (this.state.carousel_index + 1 + this.props.value.length) %
-        this.props.value.length,
+        this.props.value.length
     });
   }
   render() {
diff --git a/frontend/src/components/output/dataframe.jsx b/frontend/src/components/output/dataframe.jsx
index 3e423a1fff..395528ce58 100644
--- a/frontend/src/components/output/dataframe.jsx
+++ b/frontend/src/components/output/dataframe.jsx
@@ -13,7 +13,7 @@ class DataframeOutput extends BaseComponent {
     return {
       page: 0,
       sort_by: null,
-      sort_descending: false,
+      sort_descending: false
     };
   }
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -91,7 +91,7 @@ class DataframeOutput extends BaseComponent {
     if (this.props.max_cols !== null && col_count > this.props.max_cols) {
       let [hidden_col_start, hidden_col_end] = [
         Math.ceil(this.props.max_cols / 2),
-        col_count - Math.floor(this.props.max_cols / 2) - 1,
+        col_count - Math.floor(this.props.max_cols / 2) - 1
       ];
       headers =
         headers.slice(0, hidden_col_start) +
@@ -142,7 +142,7 @@ class DataframeOutput extends BaseComponent {
               ) : (
                 <button
                   className={classNames("page", {
-                    selected: page === this.state.page,
+                    selected: page === this.state.page
                   })}
                   key={page}
                   onClick={this.set_page.bind(this, page)}
diff --git a/frontend/src/components/output/highlighted_text.jsx b/frontend/src/components/output/highlighted_text.jsx
index aeea732c0d..0b25f6505e 100644
--- a/frontend/src/components/output/highlighted_text.jsx
+++ b/frontend/src/components/output/highlighted_text.jsx
@@ -20,7 +20,7 @@ class HighlightedTextOutput extends BaseComponent {
       "khaki",
       "cyan",
       "moccasin",
-      "lightgray",
+      "lightgray"
     ];
     for (let category in category_map) {
       if (category in this.color_map) {
diff --git a/frontend/src/components/output/json.jsx b/frontend/src/components/output/json.jsx
index 42c96d2730..58e3b59743 100644
--- a/frontend/src/components/output/json.jsx
+++ b/frontend/src/components/output/json.jsx
@@ -25,7 +25,7 @@ class JSONOutput extends BaseComponent {
             base0C: "#DDD",
             base0D: "#EEE",
             base0E: "#EFEFEF",
-            base0F: "#FFF",
+            base0F: "#FFF"
           }}
           invertTheme={true}
         />
diff --git a/frontend/src/components/output/label.jsx b/frontend/src/components/output/label.jsx
index 49fae946a9..fc577d2969 100644
--- a/frontend/src/components/output/label.jsx
+++ b/frontend/src/components/output/label.jsx
@@ -21,7 +21,7 @@ class LabelOutput extends BaseComponent {
             className="confidence"
             title={confidence}
             style={{
-              minWidth: "calc(" + confidence + " - 12px)",
+              minWidth: "calc(" + confidence + " - 12px)"
             }}
           >
             {confidence}
diff --git a/frontend/src/gradio.jsx b/frontend/src/gradio.jsx
index 832d0f96f5..68464f222e 100644
--- a/frontend/src/gradio.jsx
+++ b/frontend/src/gradio.jsx
@@ -99,7 +99,7 @@ export class GradioInterface extends React.Component {
       submitting: true,
       has_changed: false,
       error: false,
-      flag_index: null,
+      flag_index: null
     });
     this.props
       .fn(input_state, "predict")
@@ -123,7 +123,7 @@ export class GradioInterface extends React.Component {
         console.error(e);
         this.setState({
           error: true,
-          submitting: false,
+          submitting: false
         });
       });
   };
@@ -168,14 +168,14 @@ export class GradioInterface extends React.Component {
       .then((output) => {
         this.setState({
           interpretation: output["interpretation_scores"],
-          submitting: false,
+          submitting: false
         });
       })
       .catch((e) => {
         console.error(e);
         this.setState({
           error: true,
-          submitting: false,
+          submitting: false
         });
       });
   };
@@ -236,13 +236,13 @@ export class GradioInterface extends React.Component {
           className={classNames("panels", {
             "items-start": this.props.layout === "unaligned",
             "items-stretch": this.props.layout !== "unaligned",
-            "flex-col": this.props.layout === "vertical",
+            "flex-col": this.props.layout === "vertical"
           })}
         >
           <div
             className={classNames("panel", {
               flex: this.props.layout === "horizontal",
-              "flex-col": this.props.layout === "horizontal",
+              "flex-col": this.props.layout === "horizontal"
             })}
           >
             <div className="component_set">
@@ -282,12 +282,12 @@ export class GradioInterface extends React.Component {
           <div
             className={classNames("panel", {
               flex: this.props.layout === "horizontal",
-              "flex-col": this.props.layout === "horizontal",
+              "flex-col": this.props.layout === "horizontal"
             })}
           >
             <div
               className={classNames("component_set", "relative", {
-                "opacity-50": status && !this.props.live,
+                "opacity-50": status && !this.props.live
               })}
             >
               {status}
@@ -313,7 +313,7 @@ export class GradioInterface extends React.Component {
                 this.state.interpretation === null ? (
                   <button
                     className={classNames("panel_button", {
-                      disabled: this.state.complete === false,
+                      disabled: this.state.complete === false
                     })}
                     onClick={this.interpret}
                   >
@@ -341,7 +341,7 @@ export class GradioInterface extends React.Component {
                 this.props.flagging_options === null ? (
                   <button
                     className={classNames("panel_button", "flag", {
-                      disabled: this.state.complete === false,
+                      disabled: this.state.complete === false
                     })}
                     onClick={this.flag.bind(this, null)}
                   >
@@ -350,7 +350,7 @@ export class GradioInterface extends React.Component {
                 ) : (
                   <button
                     className={classNames("panel_button", "flag", {
-                      disabled: this.state.complete === false,
+                      disabled: this.state.complete === false
                     })}
                   >
                     {this.state.just_flagged ? "Flagged" : "Flag ▼"}
@@ -443,7 +443,7 @@ class GradioInterfaceExamples extends React.Component {
                 <tr
                   key={i}
                   className={classNames({
-                    selected: i === this.props.example_id,
+                    selected: i === this.props.example_id
                   })}
                   onClick={() => this.props.handleExampleChange(i)}
                 >
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 0588004ebf..fd9cc71088 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -10,8 +10,8 @@ let fn = async (data, action) => {
       method: "POST",
       body: JSON.stringify({ data: data }),
       headers: {
-        "Content-Type": "application/json",
-      },
+        "Content-Type": "application/json"
+      }
     }
   );
   return await output.json();
diff --git a/frontend/src/utils.jsx b/frontend/src/utils.jsx
index f56cbece95..9ffaa7b2de 100644
--- a/frontend/src/utils.jsx
+++ b/frontend/src/utils.jsx
@@ -61,7 +61,7 @@ export function getObjectFitSize(
     width: targetWidth,
     height: targetHeight,
     x: (containerWidth - targetWidth) / 2,
-    y: (containerHeight - targetHeight) / 2,
+    y: (containerHeight - targetHeight) / 2
   };
 }
 
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 2ff7fcba27..9c6fd3eb47 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -7,30 +7,30 @@ module.exports = {
         DEFAULT: {
           css: {
             h1: {
-              fontWeight: "semibold",
+              fontWeight: "semibold"
             },
             h2: {
-              fontWeight: "semibold",
+              fontWeight: "semibold"
             },
             h3: {
-              fontWeight: "semibold",
+              fontWeight: "semibold"
             },
             h4: {
-              fontWeight: "semibold",
+              fontWeight: "semibold"
             },
             h5: {
-              fontWeight: "semibold",
+              fontWeight: "semibold"
             },
             h6: {
-              fontWeight: "semibold",
-            },
-          },
-        },
-      },
-    },
+              fontWeight: "semibold"
+            }
+          }
+        }
+      }
+    }
   },
   variants: {
-    extend: {},
+    extend: {}
   },
-  plugins: [require("@tailwindcss/typography")],
+  plugins: [require("@tailwindcss/typography")]
 };