feat: option to show likes, dislikes or both

src/Analysis.tsx

@@ -33,7 +33,7 @@ interface Params {
   distance: number;
   weighting: boolean;
   popularity: boolean;
-  dislike: boolean;
+  show: number;
 }
 
 interface DeferredProps {
@@ -53,10 +53,10 @@ export default function Analysis() {
     distance: 2,
     weighting: true,
     popularity: true,
-    dislike: false,
+    show: 2,
   });
   const [showControlPanel, setShowControlPanel] = useState(false);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
 
   // Function to generate and fetch the graph image
   async function loadImage() {
@@ -84,6 +84,14 @@ export default function Analysis() {
     }, 1000);
   }, [params]);
 
+  function showLabel() {
+    switch (params.show) {
+      case 0: return "dislike";
+      case 1: return "both";
+      case 2: return "like";
+    }
+  }
+
   return (
     <div className="stack column dropdown">
       <button onClick={() => setShowControlPanel(!showControlPanel)}>
@@ -92,14 +100,27 @@ export default function Analysis() {
       <div id="control-panel" className={showControlPanel ? "opened" : ""}>
 
         <div className="control">
-          <div className="checkBox">
+          <datalist id="markers">
+            <option value="0"></option>
+            <option value="1"></option>
+            <option value="2"></option>
+          </datalist>
+          <div id="three-slider">
+            <label>😬</label>
             <input
-              type="checkbox"
-              checked={params.dislike}
-              onChange={(evt) => setParams({ ...params, dislike: evt.target.checked })}
+              type="range"
+              list="markers"
+              min="0"
+              max="2"
+              step="1"
+              width="16px"
+              onChange={(evt) => setParams({ ...params, show: Number(evt.target.value) })}
             />
-            <label>show dislike</label>
+            <label>😍</label>
           </div>
+          {showLabel()}
+        </div>
+        <div className="control">
           <div className="checkBox">
             <input
               type="checkbox"

src/App.css

@@ -151,6 +151,11 @@ button {
   padding: 8px 16px;
 }
 
+#three-slider input {
+  margin: 4px;
+  width: 50%;
+}
+
 @media only screen and (max-width: 1000px) {
   #control-panel {
     grid-template-columns: repeat(2, 1fr);