diff --git a/.prettierrc b/.prettierrc
index 5b4d2b6..e5b3938 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,6 +1,6 @@
 {
   "arrowParens": "avoid",
-  "printWidth": 120,
+  "printWidth": 110,
   "bracketSpacing": true,
   "endOfLine": "lf",
   "trailingComma": "es5",
diff --git a/src/components/Node/Configurator.jsx b/src/components/Node/Configurator.jsx
new file mode 100644
index 0000000..96504ec
--- /dev/null
+++ b/src/components/Node/Configurator.jsx
@@ -0,0 +1,7 @@
+import React, { useState } from 'react';
+
+function Configurator() {
+  return <div>Configurator</div>;
+}
+
+export default Configurator;
diff --git a/src/components/Node/Joint.jsx b/src/components/Node/Joint.jsx
index fed0e5d..2a74729 100644
--- a/src/components/Node/Joint.jsx
+++ b/src/components/Node/Joint.jsx
@@ -12,17 +12,29 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 import React, { useState } from 'react';
+import Configurator from './Configurator';
 
 function Joint({ children, attr2, predicateName, pivot, match, notMatch, onChange }) {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [size, setSize] = useState('lg');
 
   const handleOpenModalClick = () => {
+    buildNewNode();
     onOpen();
   };
+  const buildNewNode = () => {
+    onChange();
+  };
   return (
     <Box>
-      <Badge borderRadius="full" px="2" py="1" colorScheme="teal" onClick={handleOpenModalClick}>
+      <Badge
+        borderRadius="full"
+        px="2"
+        py="1"
+        colorScheme="teal"
+        onClick={handleOpenModalClick}
+        className={'badge'}
+      >
         {attr2} <b>{predicateName}</b> {pivot}
       </Badge>
       <Modal onClose={onClose} size={size} isOpen={isOpen}>
@@ -32,7 +44,10 @@ function Joint({ children, attr2, predicateName, pivot, match, notMatch, onChang
             {attr2} <b>{predicateName}</b> {pivot}
           </ModalHeader>
           <ModalCloseButton />
-          <ModalBody>Text ( kolejny komponent z konfiguratorem)</ModalBody>
+          <ModalBody>
+            Text ( kolejny komponent z konfiguratorem)
+            <Configurator />
+          </ModalBody>
           <ModalFooter>
             <Button onClick={onClose}>Close</Button>
           </ModalFooter>
diff --git a/src/components/Node/ModalPopup.jsx b/src/components/Node/ModalPopup.jsx
new file mode 100644
index 0000000..9c7aae8
--- /dev/null
+++ b/src/components/Node/ModalPopup.jsx
@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import {
+  Badge,
+  Box,
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure,
+} from '@chakra-ui/react';
+
+function ModalPopup({ attr2, predicateName, pivot }) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const handleOpenModalClick = () => {
+    onOpen();
+  };
+
+  <Modal onClose={onClose} size={'lg'} isOpen={isOpen}>
+    <ModalOverlay />
+    <ModalContent>
+      <ModalHeader>
+        {attr2} <b>{predicateName}</b> {pivot}
+      </ModalHeader>
+      <ModalCloseButton />
+      <ModalBody>Text ( kolejny komponent z konfiguratorem)</ModalBody>
+      <ModalFooter>
+        <Button onClick={onClose}>Close</Button>
+      </ModalFooter>
+    </ModalContent>
+  </Modal>;
+}
+
+export default ModalPopup;
diff --git a/src/components/Node/index.jsx b/src/components/Node/index.jsx
index ee47d15..5caf70a 100644
--- a/src/components/Node/index.jsx
+++ b/src/components/Node/index.jsx
@@ -5,24 +5,14 @@ import Joint from './Joint';
 import Leaf from './Leaf';
 
 const Node = props => {
-  console.log(props.node);
+  //console.log(props.node);
   const [highlighted, setHighlighted] = useState(false);
   const [node, setNode] = useState(props.node || {});
   useEffect(() => setNode(props.node || {}), [props.node, setNode]);
-  const {
-    category,
-    quality,
-    matchedCount,
-    notMatchedCount,
-    match,
-    notMatch,
-    attr2,
-    predicateName,
-    pivot,
-  } = node;
+  const { category, quality, matchedCount, notMatchedCount, match, notMatch, attr2, predicateName, pivot } = node;
 
   const onNodeClicked = e => {
-    console.log(e);
+    //console.log(e);
     e.stopPropagation();
     console.log('Node clicked', node);
     //const changed = addComment(node);
@@ -34,9 +24,12 @@ const Node = props => {
 
   const onChange = useMemo(() => {
     return node => {
-      const index = match.findIndex(c => c.id === node.id);
-      match.splice(index, 1, node);
-      props.node.match = [...match];
+      console.log(node);
+      // const index = match.findIndex(c => c.id === node.id);
+      // console.log(index);
+      // console.log(match);
+      // match.splice(index, 1, node);
+      // props.node.match = [...match];
     };
   }, [match, props.node]);
 
@@ -47,12 +40,7 @@ const Node = props => {
   return (
     <div className={`node ${highlighted ? 'highlight' : ''}`} onClick={onNodeClicked}>
       {category ? (
-        <Leaf
-          category={category}
-          matchedCount={matchedCount}
-          notMatchedCount={notMatchedCount}
-          quality={quality}
-        />
+        <Leaf category={category} matchedCount={matchedCount} notMatchedCount={notMatchedCount} quality={quality} />
       ) : (
         <Joint
           attr2={attr2}
diff --git a/src/css/main.scss b/src/css/main.scss
index a4f7b46..1df92e1 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -9,23 +9,9 @@ $gradient-right: linear-gradient(90deg, #d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51
 $gradient-bottom: linear-gradient(180deg, #d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51ff, #1b1b1eff);
 $gradient-left: linear-gradient(270deg, #d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51ff, #1b1b1eff);
 $gradient-top-right: linear-gradient(45deg, #d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51ff, #1b1b1eff);
-$gradient-bottom-right: linear-gradient(
-  135deg,
-  #d8dbe2ff,
-  #a9bcd0ff,
-  #58a4b0ff,
-  #373f51ff,
-  #1b1b1eff
-);
+$gradient-bottom-right: linear-gradient(135deg, #d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51ff, #1b1b1eff);
 $gradient-top-left: linear-gradient(225deg, #d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51ff, #1b1b1eff);
-$gradient-bottom-left: linear-gradient(
-  315deg,
-  #d8dbe2ff,
-  #a9bcd0ff,
-  #58a4b0ff,
-  #373f51ff,
-  #1b1b1eff
-);
+$gradient-bottom-left: linear-gradient(315deg, #d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51ff, #1b1b1eff);
 $gradient-radial: radial-gradient(#d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51ff, #1b1b1eff);
 
 .center-horizontal {
@@ -64,3 +50,8 @@ $gradient-radial: radial-gradient(#d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51ff, #1
   text-align: left;
   //background-color: green;
 }
+.badge {
+  &:hover {
+    cursor: pointer;
+  }
+}
diff --git a/src/utils/algorithms/c45-tree.js b/src/utils/algorithms/c45-tree.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/utils/algorithms/tsp-tree.js b/src/utils/algorithms/tsp-tree.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/utils/algorithms/tsp-weight-tree.js b/src/utils/algorithms/tsp-weight-tree.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/utils/decision-tree.js b/src/utils/decision-tree.js
index 4c14245..4424b27 100644
--- a/src/utils/decision-tree.js
+++ b/src/utils/decision-tree.js
@@ -17,32 +17,15 @@
  * @param {boolean} isChanged
  */
 //TSP
-export function buildDecisionTree(
-  _builder,
-  isChanged = false,
-  changedAttribute1 = null,
-  changedAttribute2 = null
-) {
+export function buildDecisionTree(_builder, isChanged = false, changedAttribute1 = null, changedAttribute2 = null) {
   //debugger;
   const builder = { ..._builder };
-  const {
-    trainingSet,
-    minItemsCount,
-    categoryAttr,
-    entropyThrehold,
-    maxTreeDepth,
-    ignoredAttributes,
-  } = builder;
+  const { trainingSet, minItemsCount, categoryAttr, entropyThrehold, maxTreeDepth, ignoredAttributes } = builder;
   //console.log("########## NOWY WEZEL ########", trainingSet.length);
   /** @type {string | number} */
   var _quality = 0;
   if (maxTreeDepth === 0 || trainingSet.length <= minItemsCount) {
-    //console.log(
-    //  "LISC BO MAX TREE DEPTH",
-    //  maxTreeDepth,
-    //  "LISC ILOSC",
-    //  trainingSet.length
-    //);
+    console.log('LISC BO MAX TREE DEPTH', maxTreeDepth, 'LISC ILOSC', trainingSet.length);
     //gger;
     let _category = mostFrequentValue(trainingSet, categoryAttr);
     let _positiveCounter = 0;
@@ -80,20 +63,14 @@ export function buildDecisionTree(
   var directrion = '<';
   var leftList = [],
     rightList = [],
-    classMatrix = [
-      new Array(builder.allClasses.length).fill(0),
-      new Array(builder.allClasses.length).fill(0),
-    ],
+    classMatrix = [new Array(builder.allClasses.length).fill(0), new Array(builder.allClasses.length).fill(0)],
     match = [],
     notMatch = [];
   if (isChanged) {
     right = left = 0;
     leftList = [];
     rightList = [];
-    classMatrix = [
-      new Array(builder.allClasses.length).fill(0),
-      new Array(builder.allClasses.length).fill(0),
-    ];
+    classMatrix = [new Array(builder.allClasses.length).fill(0), new Array(builder.allClasses.length).fill(0)];
 
     for (let index = 0; index < trainingSet.length; index++) {
       const element = trainingSet[index];
@@ -122,8 +99,7 @@ export function buildDecisionTree(
     }
     //console.log("Rank Lewy",rankL,"Rank Prawy",rankR);
 
-    var currentDif =
-      (right / trainingSet.length) * (1 - rankR) + (left / trainingSet.length) * (1 - rankL);
+    var currentDif = (right / trainingSet.length) * (1 - rankR) + (left / trainingSet.length) * (1 - rankL);
     if (currentDif < maxDif) {
       //console.log("------Zapisanie maxDif-------");
       //console.log(attr1,attr2);
@@ -146,10 +122,7 @@ export function buildDecisionTree(
           right = left = 0;
           leftList = [];
           rightList = [];
-          classMatrix = [
-            new Array(builder.allClasses.length).fill(0),
-            new Array(builder.allClasses.length).fill(0),
-          ];
+          classMatrix = [new Array(builder.allClasses.length).fill(0), new Array(builder.allClasses.length).fill(0)];
 
           for (let index = 0; index < trainingSet.length; index++) {
             const element = trainingSet[index];
@@ -178,8 +151,7 @@ export function buildDecisionTree(
           }
           //console.log("Rank Lewy",rankL,"Rank Prawy",rankR);
 
-          var currentDif =
-            (right / trainingSet.length) * (1 - rankR) + (left / trainingSet.length) * (1 - rankL);
+          var currentDif = (right / trainingSet.length) * (1 - rankR) + (left / trainingSet.length) * (1 - rankL);
           if (currentDif < maxDif) {
             //console.log("------Zapisanie maxDif-------");
             //console.log(attr1,attr2);
@@ -202,7 +174,7 @@ export function buildDecisionTree(
   //console.log(attribute1, attribute2);
   //console.log("L/R ", match.length + ":" + notMatch.length);
   //console.log(podzial);
-  //console.log("MaxDifference:", maxDif);
+  console.log('MaxDifference:', maxDif);
   if (!maxDif) {
     //console.log("LISC BO MAX DIF ZERO", trainingSet.length);
     let _category = mostFrequentValue(trainingSet, categoryAttr);
@@ -227,7 +199,7 @@ export function buildDecisionTree(
   // sprawdzic
   // wssytskies stringi do ignored
   if (match.length === 0 || notMatch.length === 0) {
-    //console.log("LISC BO JEDNA ZE STRON MA 0");
+    console.log('LISC BO JEDNA ZE STRON MA 0');
     let _category = mostFrequentValue(trainingSet, categoryAttr);
     let _positiveCounter = 0;
     //console.log(_category);