Edited Data viewer

WSE-research · Oct 26, 2023 · 209ec95 · 209ec95
1 parent 55c4bcb
commit 209ec95
Showing 1 changed file with 8 additions and 30 deletions.
diff --git a/client/src/datasetViewer/DatasetViewer.js b/client/src/datasetViewer/DatasetViewer.js
@@ -1,9 +1,11 @@
 import "./DatasetViewer.css";
-import data from "../json.json";
+import data from "../json2.json";
 import { useState } from "react";
 
 export default function DatasetViewer() {
 
+    const [counter, setCounter] = useState(0);
+
     const goldenExplanations = data.explanations.map((datum) => {
         return datum.testData.explanation;
     })
@@ -14,57 +16,33 @@ export default function DatasetViewer() {
 
     const arrayLength = data.explanations.length;
 
-    function decreaseCounter() {
-        if(counter > 0) {
-            setCounter(counter-1);
-            setExplanation();
-        }
-    }
-
-    function increaseCounter() {
-        if(counter < arrayLength) {
-            setCounter(counter+1)
-            console.log(counter)
-            setExplanation();
-        }
-    }
-
-    function setExplanation() {
-        setGoldenExplanation(goldenExplanations[counter])
-        setGptExplanation(gptExplanations[counter])
-    }
-
-    const [goldenExplanation, setGoldenExplanation] = useState("");
-    const [gptExplanation, setGptExplanation] = useState("");
-    const [counter, setCounter] = useState(0);
-
     return(
         <div className="container">
-            {counter}
+            Current Explanation: {counter+1} / {arrayLength}
             <div className="viewerContainer">
                 <div className="viewer">
                     <p style={{ fontSize: 28, top: '10 %'}}>Golden standard</p>
                     <div className="explanation">
-                        <p className="explanationText">{goldenExplanation}</p>
+                        <p className="explanationText">{goldenExplanations[counter]}</p>
                     </div>
                 </div>
             </div>
             <div className="viewerContainer">
                 <div className="viewer">
                     <p style={{ fontSize: 28, top: '10 %'}}>GPT Explanation</p>
                     <div className="explanation">
-                        <div className="explanationText">{gptExplanation}</div>
+                        <div className="explanationText">{gptExplanations[counter]}</div>
                     </div>
                 </div>
             </div>
             <div className="buttons">
                 <div style={{marginTop: 50}}>
-                    <button onClick={decreaseCounter}>
+                    <button onClick={() => counter > 0 ? setCounter(counter-1) : null}>
                         Vorheriges
                     </button>
                 </div>
                 <div style={{bottom: 0, marginBottom: 50}}>
-                    <button onClick={increaseCounter}>
+                    <button onClick={() => counter < arrayLength ? setCounter(counter+1) : null}>
                         Nachfolgendes
                     </button>
                 </div>