add test dataset btn with CM and getTreeSize

src/components/Tree.jsx

@@ -2,6 +2,9 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Box,
   Button,
+  ButtonGroup,
+  FormControl,
+  FormLabel,
   HStack,
   Input,
   InputGroup,
@@ -9,6 +12,7 @@ import {
   InputRightAddon,
   Spinner,
   Stack,
+  Switch,
 } from '@chakra-ui/react';
 import { GrTechnology, GrDocumentUpload } from 'react-icons/gr';
 import { AiOutlinePercentage } from 'react-icons/ai';
@@ -16,8 +20,8 @@ import Node from './Node';
 import { useLoadingContext } from '../contexts/LoadingContext';
 import { executeAlgorithm } from '../utils/algorithm-executor';
 import TestSetFileReader from './TestSetFileReader';
-import Predicter from './Predicter';
 import ConfusionMatrix from './ConfusionMatrix';
+import { getSizeTree } from '../utils/size-checker';
 
 /**
  * @typedef {import('../utils/decision-tree.js').DecisionTreeBuilder} DecisionTreeBuilder
@@ -38,9 +42,12 @@ const Tree = ({ options }) => {
   //   console.log('Call to doSomething took ' + (t1 - t0) + ' milliseconds.');
   //   return r;
   // }, [options]);
-  const [accuracy, setAccuracy] = useState(0);
+  const [accuracyTraining, setAccuracyTraining] = useState(0);
+  const [accuracyTest, setAccuracyTest] = useState(0);
   const [root, setRoot] = useState(null);
+  const [sizeTree, setSizeTree] = useState({ joints: 0, leafs: 0 });
   const [testSet, setTestSet] = useState([]);
+  const [showTestTree, setShowTestTree] = useState(false);
   const { isLoading, setIsLoading } = useLoadingContext();
 
   useEffect(() => {
@@ -68,7 +75,10 @@ const Tree = ({ options }) => {
   }, [options, setIsLoading]);
 
   useEffect(() => {
-    logTree(root);
+    //logTree(root);
+    if (root !== null) {
+      setSizeTree(getSizeTree(root));
+    }
     //setAccuracy(Math.random() * 10);
   }, [root]);
 
@@ -76,53 +86,52 @@ const Tree = ({ options }) => {
 
   function handleGetTestSet({ data }) {
     setTestSet(data);
-    console.log(data);
   }
-  function predict(root) {
-    console.log('predict');
+  function handleShowTestTree(e) {
+    setShowTestTree(e.target.checked);
   }
 
   return (
     <div id="tree">
-      <Stack spacing={5} direction="row" justifyContent="flex-end" wrap={'wrap'} pr={5}>
-        <Box>
-          <InputGroup size="sm">
-            <InputLeftAddon
-              children="Accuracy:"
-              fontWeight={700}
-              bg={'#ddd'}
-              color="#black"
-              borderRadius="0.375rem"
+      <Stack spacing={5} direction="row" justifyContent="space-between" pr={5} pl={5}>
+        <Stack id={'trainingTree'} spacing={5} direction="row" justifyContent="space-between">
+          <Box>
+            <InputGroup size="sm">
+              <InputLeftAddon
+                children="Accuracy:"
+                fontWeight={700}
+                bg={'#ddd'}
+                color="#black"
+                borderRadius="0.375rem"
+              />
+              <Input
+                value={accuracyTraining.toFixed(3)}
+                readOnly
+                textAlign="center"
+                width={70}
+                pl={1}
+                pr={1}
+              />
+              <InputRightAddon
+                children="%"
+                fontWeight={700}
+                bg={'#ddd'}
+                color="#black"
+                borderRadius="0.375rem"
+              />
+            </InputGroup>
+          </Box>
+          <Box>
+            <ConfusionMatrix
+              tree={root}
+              data={options.trainingSet}
+              allClasses={options.allClasses}
+              categoryAttr={options.categoryAttr}
+              onChange={setAccuracyTraining}
+              disabled={isLoading}
             />
-            <Input value={accuracy.toFixed(3)} readOnly textAlign="center" />
-            <InputRightAddon
-              children="%"
-              fontWeight={700}
-              bg={'#ddd'}
-              color="#black"
-              borderRadius="0.375rem"
-            />
-          </InputGroup>
-        </Box>
-        <Box>
-          {/* <Button
-            bg={'#ddd'}
-            color="#black"
-            _hover={{ bg: '#aaa' }}
-            onClick={() => console.log('confusion matrix')}
-            size="sm"
-          >
-            Confusion Matrix
-          </Button> */}
-          <ConfusionMatrix
-            tree={root}
-            data={options.trainingSet}
-            allClasses={options.allClasses}
-            categoryAttr={options.categoryAttr}
-            onChange={setAccuracy}
-            disabled={isLoading}
-          />
-        </Box>
+          </Box>
+        </Stack>
         <Box>
           <Button
             leftIcon={<GrTechnology />}
@@ -134,11 +143,60 @@ const Tree = ({ options }) => {
           >
             Log tree
           </Button>
+          {/* tree size */}
         </Box>
-        {/* <Box>
-          <TestSetFileReader onChange={handleGetTestSet} isHeaders={false} />
+        <Box>
+          <ButtonGroup size="sm" isAttached>
+            <Button mr="-px" disabled>
+              Joints: {sizeTree.joints}
+            </Button>
+            <Button mr="-px" disabled>
+              Leafs: {sizeTree.leafs}
+            </Button>
+          </ButtonGroup>
         </Box>
-        <Predicter tree={root} testSet={testSet} onChange={predict} /> */}
+        <Stack id={'testTree'} spacing={5} direction="row" justifyContent="space-between">
+          <Box>
+            <InputGroup size="sm">
+              <InputLeftAddon
+                children="Accuracy:"
+                fontWeight={700}
+                bg={'#ddd'}
+                color="#black"
+                borderRadius="0.375rem"
+              />
+              <Input value={accuracyTest.toFixed(3)} readOnly textAlign="center" width={70} pl={1} pr={1} />
+              <InputRightAddon
+                children="%"
+                fontWeight={700}
+                bg={'#ddd'}
+                color="#black"
+                borderRadius="0.375rem"
+              />
+            </InputGroup>
+          </Box>
+          <Box>
+            <TestSetFileReader onChange={handleGetTestSet} isHeaders={true} />
+          </Box>
+          <Box>
+            <ConfusionMatrix
+              tree={root}
+              data={testSet}
+              allClasses={options.allClasses}
+              categoryAttr={options.categoryAttr}
+              onChange={setAccuracyTest}
+              disabled={isLoading}
+            />
+          </Box>
+          <Box>
+            <FormControl display="flex" alignItems="center">
+              <FormLabel htmlFor="show-tree" mb="0">
+                Show test tree
+              </FormLabel>
+              <Switch id="show-tree-switch" onChange={handleShowTestTree} />
+            </FormControl>
+          </Box>
+        </Stack>
       </Stack>
       {isLoading && <Spinner size="xl" />}
       <Box p={5}>
@@ -146,10 +204,16 @@ const Tree = ({ options }) => {
         {!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} /> */}
-          // </Box>
+          <Box d="flex" flexDirection="row">
+            <Box width="100%">
+              Training tree
+              <Node node={root} onChange={() => {}} requestChildChange={requestChildChange} side={true} />
+            </Box>
+            <Box width="100%" d={showTestTree ? '' : 'none'}>
+              Test tree
+              <Node node={root} onChange={() => {}} requestChildChange={requestChildChange} side={true} />
+            </Box>
+          </Box>
         )}
       </Box>
     </div>