fix c45 update and fix tabs

public/algorithms/c45-tree.js

@@ -44,7 +44,7 @@ function buildDecisionTreeC45(
 
   //LEAF
   var initialEntropy = entropy(trainingSet, categoryAttr);
-  console.log('initial entropy', initialEntropy);
+  //console.log('initial entropy', initialEntropy);
   if (initialEntropy <= entropyThrehold && !isChanged && !isUpdate) {
     console.log('LEAF initial entropy', initialEntropy);
     return MakeLeaf(trainingSet, categoryAttr);
@@ -115,7 +115,7 @@ function buildDecisionTreeC45(
     newEntropy += notMatchEntropy * currSplit.notMatch.length;
     newEntropy /= trainingSet.length;
     currGain = initialEntropy - newEntropy;
-    console.log('IS CHAANGED CURRENT GAIN ' + currGain);
+    //console.log('IS CHAANGED CURRENT GAIN ' + currGain);
     if (currGain > bestSplit.gain) {
       // remember pairs 'attribute-predicate-value'
       // which provides informational gain
@@ -125,6 +125,7 @@ function buildDecisionTreeC45(
       bestSplit.attribute = attr;
       bestSplit.pivot = pivot;
       bestSplit.gain = currGain;
+      console.log('@ IS CHANGE ', bestSplit);
     }
     if (!currGain) {
       // remember pairs 'attribute-predicate-value'
@@ -135,16 +136,18 @@ function buildDecisionTreeC45(
       bestSplit.attribute = attr;
       bestSplit.pivot = pivot;
       bestSplit.gain = currGain;
+      console.log('@ IS CHANGE ', bestSplit);
     }
 
     isChanged = false;
   } else if (isUpdate && !isChanged) {
+    console.log('# IS UPDATE');
     if (oldTree?.category) {
-      console.log('oldTree?.category', oldTree?.category);
-      //if (maxTreeDepth === 0) {
-      let _category = oldTree.category;
+      console.log('# IS UPDATE - oldTree?.category', oldTree?.category);
+
+      let _category = oldTree?.category;
       if (trainingSet.length === 0) {
-        console.log('trainigSet pusty', trainingSet);
+        console.log('# IS UPDATE - trainingSet.length = 0');
         return {
           category: _category,
           quality: 0,
@@ -153,9 +156,24 @@ function buildDecisionTreeC45(
           trainingSet2: [],
         };
       }
-      return MakeLeaf(trainingSet, _category);
+      var _quality = 0;
+      let _positiveCounter = 0;
+      for (let element of trainingSet) {
+        if (element[categoryAttr] === _category) _positiveCounter++;
+      }
+      let _negativeCounter = trainingSet.length - _positiveCounter;
+      _quality = _positiveCounter / trainingSet.length;
+      _quality = _quality * 100;
+
+      return {
+        category: _category,
+        quality: _quality.toFixed(2),
+        matchedCount: _positiveCounter,
+        notMatchedCount: _negativeCounter,
+        trainingSet2: trainingSet,
+      };
     } else {
-      console.log('################### NODE ##############3');
+      console.log('# IS UPDATE - NODE');
       let attr = oldTree.attr2;
       pivot = oldTree.pivot;
 
@@ -274,14 +292,14 @@ function buildDecisionTreeC45(
       }
     }
   }
-  console.log('bestSplit.gain', bestSplit.gain);
+  //console.log('bestSplit.gain', bestSplit.gain);
   if (!bestSplit.gain && !isUpdate) {
     return MakeLeaf(trainingSet, categoryAttr);
   }
 
   // building subtrees
   builder.maxTreeDepth = maxTreeDepth - 1;
-  console.log('BestSpLIT', bestSplit);
+  //console.log('BestSpLIT', bestSplit);
   var matchSubTree = buildDecisionTreeC45({
     ...builder,
     trainingSet: bestSplit.match?.length ? bestSplit.match : [],
@@ -306,10 +324,11 @@ function buildDecisionTreeC45(
     notMatch: notMatchSubTree,
     matchedCount: bestSplit.match?.length ? bestSplit.match.length : 0,
     notMatchedCount: bestSplit.notMatch?.length ? bestSplit.notMatch.length : 0,
-    nodeSet:
-      bestSplit.match?.length && bestSplit.notMatch?.length
-        ? bestSplit.match?.concat(bestSplit.notMatch)
-        : [],
+    // nodeSet:
+    //   bestSplit.match?.length && bestSplit.notMatch?.length
+    //     ? bestSplit.match?.concat(bestSplit.notMatch)
+    //     : [],
+    nodeSet: trainingSet,
   };
 }
 

src/components/Navigation/index.jsx

@@ -139,7 +139,7 @@ function Navigation({ onPrepareConfig }) {
             </FormControl>
           </WrapItem>
           <WrapItem>
-            <FormControl id="algorithm" zIndex={2}>
+            <FormControl id="algorithm" zIndex={2} w={100}>
               <FormHelperText mb={2} mt={0}>
                 Algorithm
               </FormHelperText>
@@ -160,7 +160,7 @@ function Navigation({ onPrepareConfig }) {
             </FormControl>
           </WrapItem>
           <WrapItem>
-            <FormControl id="decisionAttr" width="auto" zIndex={2}>
+            <FormControl id="decisionAttr" width="auto" zIndex={2} w={130}>
               <FormHelperText mb={2} mt={0}>
                 Decision attr.
               </FormHelperText>

src/components/Node/Configurator/TabC45.jsx

@@ -22,12 +22,19 @@ export default function TabC45({ attribute, value, changeValues }) {
         multiple={false}
         closeOnSelect={true}
       />
-      <IconContext.Provider value={{ style: { height: 40 } }}>
+      <IconContext.Provider value={{ style: { height: 32 } }}>
         <FaGreaterThan size={50} />
         <FaEquals size={50} />
       </IconContext.Provider>
 
-      <Input variant="filled" value={value} size="md" name="c45-value" onChange={onPivotChange} />
+      <Input
+        variant="filled"
+        value={value}
+        size="sm"
+        name="c45-value"
+        onChange={onPivotChange}
+        borderRadius={'0.375rem'}
+      />
     </Stack>
   );
 }

src/components/Node/Configurator/TabTSP.jsx

@@ -21,7 +21,7 @@ export default function TabTSP({ attribute, value, changeValues }) {
         multiple={false}
         closeOnSelect={true}
       />
-      <IconContext.Provider value={{ style: { height: 40 } }}>
+      <IconContext.Provider value={{ style: { height: 32 } }}>
         <FaLessThan size={50} />
       </IconContext.Provider>
       <SearchBar

src/components/Node/Configurator/TabTSPW.jsx

@@ -23,11 +23,18 @@ export default function TabTSPW({ attribute, value, weight, changeValues }) {
         multiple={false}
         closeOnSelect={true}
       />
-      <IconContext.Provider value={{ style: { height: 40 } }}>
+      <IconContext.Provider value={{ style: { height: 32 } }}>
         <FaLessThan size={50} />
       </IconContext.Provider>
-      <Input variant="filled" value={weight} size="md" onChange={onWeightChange} />
-      <IconContext.Provider value={{ style: { height: 40 } }}>
+      <Input
+        variant="filled"
+        value={weight}
+        size="sm"
+        onChange={onWeightChange}
+        w={70}
+        borderRadius={'0.375rem'}
+      />
+      <IconContext.Provider value={{ style: { height: 32 } }}>
         <FaTimes size={50} />
       </IconContext.Provider>
       <SearchBar

src/components/Node/ModalPopup.jsx

@@ -8,6 +8,7 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Stack,
 } from '@chakra-ui/react';
 import Configurator from './Configurator';
 
@@ -37,12 +38,14 @@ function ModalPopup({ attr2, predicateName, pivot, weight, isOpen, nodeSet, onOp
           <Configurator onChange={handleOnChange} attribute={attr2} pivot={pivot} weight={weight} />
         </ModalBody>
         <ModalFooter>
-          <Button colorScheme="gray" onClick={handleUpdate}>
-            Update
-          </Button>
-          <Button colorScheme="blue" onClick={handleConfirm}>
-            Rebuild
-          </Button>
+          <Stack spacing={5} direction="row">
+            <Button colorScheme="gray" onClick={handleUpdate}>
+              Update
+            </Button>
+            <Button colorScheme="blue" onClick={handleConfirm}>
+              Rebuild
+            </Button>
+          </Stack>
         </ModalFooter>
       </ModalContent>
     </Modal>

src/components/Node/index.jsx

@@ -55,7 +55,7 @@ const Node = props => {
 
     const builderModel = {
       ...builderConfig,
-      //trainingSet: node.nodeSet,
+      trainingSet: node.nodeSet,
       oldTree: JSON.parse(JSON.stringify(node)),
       isUpdate: options.isUpdate || false,
       algorithm: options.algorithm.map(item => item.toLowerCase()),

src/css/searchBar.scss

@@ -44,7 +44,7 @@ $raisin-black: #1b1b1eff;
 .select-search__input {
   display: block;
   height: 32px;
-  width: 200px;
+  width: 100%;
   padding: 0 16px;
   background: #fff;
   border: 1px solid #e2e8f0;