function predict works

src/components/Predicter/index.jsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { Button, Textarea, Box, ButtonGroup } from '@chakra-ui/react';
+import { GiWaterDivinerStick } from 'react-icons/gi';
+import { predict } from '../../utils/predict';
+
+/**
+ * @param {Object} props
+ * @param {Object} props.tree
+ * @param {Object[]} props.testSet
+ * @param {Function} props.onChange
+ */
+function Predicter({ tree, onChange, testSet }) {
+  const [allow, setAllow] = useState(true);
+
+  function handlePredict() {
+    if (allow) setAllow(false);
+    let result = [];
+    //for (let index = 0; index < testSet.length; index++) {
+    for (let index = 0; index < 1; index++) {
+      result.push(predict(tree, testSet[index]));
+    }
+    console.log(result);
+  }
+  return (
+    <Box d="flex">
+      <Box>
+        <ButtonGroup>
+          <Button leftIcon={<GiWaterDivinerStick />} onClick={handlePredict}>
+            Predict
+          </Button>
+          <Button disabled={allow}>Confusion Matrix</Button>
+        </ButtonGroup>
+      </Box>
+    </Box>
+  );
+}
+
+export default Predicter;

src/components/Tree.jsx

@@ -1,11 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Box, Button, HStack, Spinner } from '@chakra-ui/react';
+import { Box, Button, HStack, Spinner, Stack } from '@chakra-ui/react';
 import { GrTechnology, GrDocumentUpload } from 'react-icons/gr';
 import { GiWaterDivinerStick } from 'react-icons/gi';
 import Node from './Node';
 import { useLoadingContext } from '../contexts/LoadingContext';
 import { executeAlgorithm } from '../utils/algorithm-executor';
 import TestSetFileReader from './TestSetFileReader';
+import Predicter from './Predicter';
 
 /**
  * @typedef {import('../utils/decision-tree.js').DecisionTreeBuilder} DecisionTreeBuilder
@@ -69,7 +70,7 @@ const Tree = ({ options }) => {
 
   return (
     <div id="tree">
-      <HStack spacing="24px">
+      <Stack spacing={5} direction="row">
         <Box>
           <Button leftIcon={<GrTechnology />} onClick={() => logTree(root)}>
             Log tree
@@ -78,19 +79,18 @@ const Tree = ({ options }) => {
         <Box>
           <TestSetFileReader onChange={handleGetTestSet} isHeaders={false} />
         </Box>
-        <Box>
-          <Button leftIcon={<GiWaterDivinerStick />} onClick={() => predict(root)}>
-            Predict
-          </Button>
-        </Box>
-      </HStack>
+        <Predicter tree={root} testSet={testSet} onChange={predict} />
+      </Stack>
       {isLoading && <Spinner size="xl" />}
       <h1>Tree nodes:</h1>
       <Box>
         {!root ? (
           <p>No tree to show</p>
         ) : (
-          <Node node={root} onChange={() => {}} requestChildChange={requestChildChange} side={true} />
+          <Box d="flex" flexDirection="row">
+            <Node node={root} onChange={() => {}} requestChildChange={requestChildChange} side={true} />
+            {/* <Node node={root} onChange={() => {}} requestChildChange={requestChildChange} side={true} /> */}
+          </Box>
         )}
       </Box>
     </div>

src/utils/predict.js

@@ -0,0 +1,70 @@
+export function predict(tree, item) {
+  var attr1, attr2, value, predicate, pivot, match;
+
+  // Traversing tree from the root to leaf
+  while (true) {
+    if (tree.category) {
+      // only leafs contains predicted category
+      return tree.category;
+    }
+    console.log(
+      tree.predicateName,
+      tree.weight,
+      tree.predicateName === '>=',
+      tree.predicateName === '==',
+      tree.predicateName === '<'
+    );
+    if (tree.weight) {
+      attr1 = tree.attr2;
+      attr2 = tree.pivot;
+      value = item[attr1];
+      pivot = item[attr2];
+
+      predicate = predicates['w'];
+      match = predicate(value, pivot, tree.weight);
+
+      console.log('predict - waga', match);
+    }
+    if (tree.predicateName === '>=' || tree.predicateName === '==') {
+      attr1 = tree.attr2;
+      value = item[attr1];
+      pivot = tree.pivot;
+      predicate = predicates[tree.predicateName];
+      match = predicate(value, pivot);
+
+      console.log('predict - c45', match);
+    }
+    if (tree.predicateName === '<') {
+      attr1 = tree.attr2;
+      attr2 = tree.pivot;
+      value = item[attr1];
+      pivot = item[attr2];
+
+      predicate = predicates[tree.predicateName];
+      match = predicate(value, pivot);
+
+      console.log('predict - tsp', match);
+    }
+
+    // move to one of subtrees
+    if (match) {
+      tree = tree.match;
+    } else {
+      tree = tree.notMatch;
+    }
+  }
+}
+var predicates = {
+  '==': function (a, b) {
+    return a === b;
+  },
+  '>=': function (a, b) {
+    return a >= b;
+  },
+  '<': function (a, b) {
+    return a < b;
+  },
+  w: function (a, b, w) {
+    return a < w * b;
+  },
+};