add reset button to examples

examples/ContextBandit.jsx

@@ -84,6 +84,14 @@ function ContextFruitBandit() {
     generateNewRecommendation();
   };
 
+  const HandleReset = () => {
+    setTrainingData([]);
+    setActionIdFeatures(true);
+    setActionFeatures(true);
+    setContextActionIdInteractions(true);
+    setContextActionFeatureInteractions(true);
+  };
+
   return (
     <div>
       <h3>Context dependent recommendations</h3>
@@ -221,6 +229,7 @@ function ContextFruitBandit() {
       <div>{JSON.stringify(trainingData)}</div>
       <h3>JSON serialized bandit</h3>
       <div>{serializedBandit}</div>
+      <button onClick={HandleReset}>Reset</button>
     </div>
   );
 }

examples/SlateBandit.jsx

@@ -21,11 +21,13 @@ function SlateFruitBandit() {
         cake: { fruit: -1, treat: 1 },
       },
       temperature: 0.2,
-      slateSize: 3,
+      slateSize: slateSize,
       slateNegativeSampleWeight: 0.5,
     });
+    banditInstance.train(trainingData);
+    setSerializedBandit(banditInstance.toJSON());
     setBandit(banditInstance);
-  }, []);
+  }, [slateSize]);
 
   useEffect(() => {
     if (bandit) {
@@ -34,7 +36,7 @@ function SlateFruitBandit() {
   }, [bandit, slateSize]);
 
   const generateNewRecommendation = () => {
-    setSlate(bandit.slate({}, { slateSize: slateSize }));
+    setSlate(bandit.slate());
     const _scoredActions = bandit.getScoredActions();
     _scoredActions.forEach((scoredAction) => {
       const actionFeatures = bandit.actionsMap[scoredAction.actionId].features;
@@ -61,6 +63,11 @@ function SlateFruitBandit() {
     generateNewRecommendation();
   };
 
+  const handleReset = () => {
+    setTrainingData([]);
+    setSlateSize(3);
+  };
+
   return (
     <div>
       <h3>Slate of multiple recommendations</h3>
@@ -133,6 +140,7 @@ function SlateFruitBandit() {
       <div>{JSON.stringify(trainingData)}</div>
       <h3>JSON serialized bandit</h3>
       <div>{serializedBandit}</div>
+      <button onClick={handleReset}>Reset</button>
     </div>
   );
 }

examples/TemperatureBandit.jsx

@@ -48,6 +48,12 @@ function TemperatureFruitBandit() {
     generateNewRecommendation();
   };
 
+  const handleReset = () => {
+    setTrainingData([]);
+    setLearningRate(0.1);
+    setTemperature(0.1);
+  };
+
   return (
     <div>
       <h3>Adjusting the Fruit Bandit</h3>
@@ -124,6 +130,7 @@ function TemperatureFruitBandit() {
       )}
       <button onClick={handleAccept}>Accept</button>
       <button onClick={handleReject}>Reject</button>
+
       <h3>Training Data</h3>
       <p>
         You can see the training data that is generated by accepting and
@@ -133,6 +140,7 @@ function TemperatureFruitBandit() {
       <h3>JSON serialized bandit</h3>
       <p>You can serialize the bandit to JSON and then rehydrate it later.</p>
       <div>{serializedBandit}</div>
+      <button onClick={handleReset}>Reset</button>
     </div>
   );
 }

examples/WeightedBandit.jsx

@@ -12,20 +12,16 @@ function WeightedFruitBandit() {
   const [starRating, setStarRating] = useState(null);
 
   useEffect(() => {
-    let oldClickOracleWeights = bandit ? { ...bandit.oracle[0].weights } : {};
     const clickOracle = new SimpleOracle({
       learningRate: 0.1,
       targetLabel: "click",
       oracleWeight: clickWeight,
-      weights: oldClickOracleWeights,
     });
 
-    let oldStarsOracleWeights = bandit ? { ...bandit.oracle[1].weights } : {};
     const starsOracle = new SimpleOracle({
       learningRate: 0.1,
       targetLabel: "stars",
       oracleWeight: 1 - clickWeight,
-      weights: oldStarsOracleWeights,
     });
 
     const banditInstance = new SimpleBandit({
@@ -39,10 +35,10 @@ function WeightedFruitBandit() {
         cake: { treat: 1 },
       },
       temperature: 0.2,
-      slateSize: 3,
     });
+    setSerializedBandit(banditInstance.toJSON());
+    banditInstance.train(trainingData);
     setBandit(banditInstance);
-    setSerializedBandit(bandit ? bandit.toJSON() : "");
   }, [clickWeight]);
 
   useEffect(() => {
@@ -87,6 +83,13 @@ function WeightedFruitBandit() {
     setClickWeight(newWeight);
   };
 
+  const handleReset = () => {
+    setTrainingData([]);
+    setSelectedAction(null);
+    setStarRating(null);
+    setClickWeight(0.5);
+  };
+
   return (
     <div>
       <h3>Weighted oracles</h3>
@@ -197,6 +200,7 @@ function WeightedFruitBandit() {
       <div>{JSON.stringify(trainingData)}</div>
       <h3>JSON serialized bandit</h3>
       <div>{serializedBandit}</div>
+      <button onClick={handleReset}>Reset</button>
     </div>
   );
 }