From 5a2dbfa69c9cf9bb155ef35fb8aa8ada63709f1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hubert=20Soko=C5=82owski?= <hubert.sokool@gmail.com>
Date: Wed, 24 Feb 2021 20:57:34 +0100
Subject: [PATCH] add modal onclick node

---
 src/components/Navigation/index.jsx | 112 ++--------------------------
 src/components/Node/Joint.jsx       |  50 ++++++++++---
 src/components/Node/Leaf.jsx        |  40 ++++++++--
 src/components/Tree.jsx             |   6 +-
 src/css/inputs.scss                 |   4 +
 src/css/main.scss                   |   2 +
 6 files changed, 94 insertions(+), 120 deletions(-)

diff --git a/src/components/Navigation/index.jsx b/src/components/Navigation/index.jsx
index e0d8052..2a62e3b 100644
--- a/src/components/Navigation/index.jsx
+++ b/src/components/Navigation/index.jsx
@@ -46,28 +46,7 @@ function Navigation({ onPrepareConfig }) {
     { value: 'fries', name: 'Fries' },
     { value: 'milkshake', name: 'Milkshake' },
   ]);
-
-  // useEffect(() => {
-  //   //window.addEventListener('resize', () => handleResizeButtonsStyle());
-  // }, []);
-
-  const handleSetAttributes = () => {
-    let array = [];
-    builder.allAttributes.forEach(element => {
-      if (decisionAttribute != null && element === decisionAttribute)
-        array.push({ value: element, name: element, disabled: true });
-      else array.push({ value: element, name: element });
-    });
-    return array;
-  };
-  // const handleResizeButtonsStyle = () => {
-  //   const windowSize = window.innerWidth;
-  //   if (windowSize < 6000) setSize('xl');
-  //   if (windowSize < 3000) setSize('lg');
-  //   if (windowSize < 1900) setSize('md');
-  //   if (windowSize < 1200) setSize('sm');
-  //   if (windowSize < 530) setSize('xs');
-  // };
+  const [isLoad, setIsLoad] = useState(false);
 
   function handleSelectDecision(value) {
     //console.log(value);
@@ -95,7 +74,7 @@ function Navigation({ onPrepareConfig }) {
    *
    */
   function handleGetAllAttributes({ allAttributes, data }) {
-    //console.log(allAttributes, data);
+    console.log(allAttributes, data);
     let array = [];
     allAttributes.forEach(element => {
       array.push({ value: element, name: element });
@@ -123,6 +102,8 @@ function Navigation({ onPrepareConfig }) {
   function handleDrawTree() {
     setConfig(prepareConfig());
     onPrepareConfig(prepareConfig());
+    setIsLoad(true);
+    setTimeout(() => setIsLoad(false), 500);
   }
 
   return (
@@ -135,7 +116,7 @@ function Navigation({ onPrepareConfig }) {
       backgroundColor={'#a9bcd0ff'}
       fontSize={['xs', 'xs', 'sm', 'sm', 'md']}
     >
-      <Collapse in={isOpen} animateOpacity>
+      <Collapse in={isOpen} animateOpacity style={{ overflow: 'visible' }}>
         <Stack
           spacing={2}
           direction={['column', 'column', 'row']}
@@ -144,6 +125,7 @@ function Navigation({ onPrepareConfig }) {
           justify="center"
           px={2}
           py={3}
+          zIndex={2}
         >
           <Box w={'100%'}>
             <FormControl id="deploySet" width="auto">
@@ -152,7 +134,7 @@ function Navigation({ onPrepareConfig }) {
             </FormControl>
           </Box>
           <Box w={'100%'}>
-            <FormControl id="decisionAttr" width="auto">
+            <FormControl id="decisionAttr" width="auto" zIndex={2}>
               <FormLabel fontSize={['md', 'md', 'xs', 'sm', 'md']}>Decision attribute</FormLabel>
               <SearchBar
                 placeholder="Select decision attribute"
@@ -218,6 +200,7 @@ function Navigation({ onPrepareConfig }) {
                 onClick={handleDrawTree}
                 w="100%"
                 h={10}
+                isLoading={isLoad}
               >
                 Draw
               </Button>
@@ -230,85 +213,6 @@ function Navigation({ onPrepareConfig }) {
         <DrawerRoll />
       </Stack>
     </Box>
-    // <div id="navigation-navbar" className="center-horizontal">
-    //   <div style={{ padding: '10px' }}>
-    //     <Stack spacing={4} direction="row" align="center" alignContent="center" justify="center">
-    //       <FormControl id="deploySet" width="auto">
-    //         <FormLabel>Deploy Set</FormLabel>
-    //         <FileReader size={size} onChange={handleGetAllAttributes} isHeaders={false} />
-    //       </FormControl>
-    //       <FormControl id="decisionAttr" width="auto">
-    //         <FormLabel>Decision attribute</FormLabel>
-    //         <SearchBar
-    //           placeholder="Select decision attribute"
-    //           onChange={handleSelectDecision}
-    //           options={options}
-    //           multiple={false}
-    //           closeOnSelect={true}
-    //         />
-    //         <FormHelperText width={size}>
-    //           <Builder size={size} builder={prepareConfig()} />
-    //         </FormHelperText>
-    //       </FormControl>
-    //       <FormControl id="ignoreAttr" width="auto">
-    //         <FormLabel>Ignore attributes</FormLabel>
-    //         <SearchBar
-    //           placeholder="Select ignore attributes"
-    //           onChange={handleSelectIgnore}
-    //           options={options}
-    //           multiple={true}
-    //           closeOnSelect={false}
-    //         />
-    //         {ignoredAttributes.length != 0 ? (
-    //           <FormHelperText width={size}>
-    //             <IgnoredAttributes size={size} ignoredAttributes={ignoredAttributes} />
-    //           </FormHelperText>
-    //         ) : (
-    //           <div></div>
-    //         )}
-    //       </FormControl>
-    //       <FormControlNumberInput
-    //         size={size}
-    //         htmlId="minItemsCount"
-    //         label="Min items count"
-    //         defaultValue={minItems}
-    //         min={1}
-    //         onChange={handleSetMinItems}
-    //       />
-    //       <FormControlNumberInput
-    //         size={size}
-    //         htmlId="maxDepth"
-    //         label="Max tree depth"
-    //         defaultValue={maxDepth}
-    //         min={1}
-    //         onChange={handleSetMaxDepth}
-    //       />
-    //       <FormControlNumberInput
-    //         size={size}
-    //         htmlId="entropy"
-    //         label="Entropy threshold"
-    //         defaultValue={entropy}
-    //         min={0}
-    //         max={1}
-    //         step={0.1}
-    //         onChange={handleSetEntropy}
-    //       />
-    //       <FormControl id="drawTree" width="auto">
-    //         <FormLabel>Draw tree</FormLabel>
-    //         <Button
-    //           leftIcon={<Icon as={GiLightningTree} />}
-    //           size={size}
-    //           colorScheme="teal"
-    //           variant="outline"
-    //           aria-label="Deploy set"
-    //           onClick={handleDrawTree}
-    //         >
-    //           Draw
-    //         </Button>
-    //       </FormControl>
-    //     </Stack>
-    //   </div>
-    // </div>
   );
 }
 
diff --git a/src/components/Node/Joint.jsx b/src/components/Node/Joint.jsx
index d5a5e85..071d3c1 100644
--- a/src/components/Node/Joint.jsx
+++ b/src/components/Node/Joint.jsx
@@ -1,21 +1,53 @@
-import React from 'react';
+import {
+  Badge,
+  Box,
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure,
+} from '@chakra-ui/react';
+import React, { useState } from 'react';
 
 function Joint({ children, attr2, predicateName, pivot, match, notMatch, onChange }) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [size, setSize] = useState('lg');
+
+  const handleSizeClick = () => {
+    onOpen();
+  };
   return (
-    <div>
-      <p>
+    <Box onClick={handleSizeClick}>
+      <Badge borderRadius="full" px="2" py="1" colorScheme="teal">
         {attr2} <b>{predicateName}</b> {pivot}
-      </p>
-      <div>
+      </Badge>
+      <Modal onClose={onClose} size={size} 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>
+      {/* <div>
         Match
-        {/* {JSON.stringify(match)} */}
+        {JSON.stringify(match)}
       </div>
       <div>
         notMatch
-        {/* {JSON.stringify(notMatch)} */}
-      </div>
+        {JSON.stringify(notMatch)}
+      </div> */}
       {children}
-    </div>
+    </Box>
   );
 }
 
diff --git a/src/components/Node/Leaf.jsx b/src/components/Node/Leaf.jsx
index de1337a..d077d87 100644
--- a/src/components/Node/Leaf.jsx
+++ b/src/components/Node/Leaf.jsx
@@ -1,12 +1,42 @@
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 function Leaf({ category, matchedCount, notMatchedCount, quality }) {
   return (
-    <div>
-      <p>
-        {category} {matchedCount} {notMatchedCount} {quality}
-      </p>
-    </div>
+    <Box
+      d="flex"
+      alignItems="baseline"
+      borderWidth="1px"
+      borderRadius="lg"
+      flexDirection="column"
+      maxW="sm"
+      p="1"
+      my="2"
+    >
+      <Box
+        color="gray.500"
+        fontWeight="semibold"
+        letterSpacing="wide"
+        fontSize="sm"
+        textTransform="uppercase"
+        ml="2"
+      >
+        Category: {category}
+      </Box>
+      <Box
+        color="gray.500"
+        fontWeight="semibold"
+        letterSpacing="wide"
+        fontSize="sm"
+        textTransform="uppercase"
+        ml="2"
+      >
+        {matchedCount} good &bull; {notMatchedCount} bad
+      </Box>
+      <Box mt="1" ml="2" fontWeight="semibold" as="h4" lineHeight="tight" isTruncated>
+        {quality}%
+      </Box>
+    </Box>
   );
 }
 
diff --git a/src/components/Tree.jsx b/src/components/Tree.jsx
index b3aeae5..6ca6fc8 100644
--- a/src/components/Tree.jsx
+++ b/src/components/Tree.jsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo } from 'react';
+import { Box } from '@chakra-ui/react';
 import { buildDecisionTree } from '../utils/decision-tree';
 // import { start } from '../services/Playground';
 // import { dt } from '../services/TSP';
@@ -29,10 +30,11 @@ const Tree = ({ options }) => {
         <button onClick={logTree}>Log tree</button>
       </p>
       <h2>Nodes:</h2>
-      <Node node={root} onChange={() => {}} />
+      <Box>
+        <Node node={root} onChange={() => {}} />
+      </Box>
     </div>
   );
 };
-//{/*  */}
 
 export default Tree;
diff --git a/src/css/inputs.scss b/src/css/inputs.scss
index f1d822b..7a4a547 100644
--- a/src/css/inputs.scss
+++ b/src/css/inputs.scss
@@ -5,3 +5,7 @@
     border-radius: 0.375rem;
   }
 }
+.select-search__value {
+  z-index: 2;
+  position: absolute;
+}
diff --git a/src/css/main.scss b/src/css/main.scss
index 18d65ce..a4f7b46 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -53,6 +53,7 @@ $gradient-radial: radial-gradient(#d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51ff, #1
   transition: all 0.5s;
   background: white;
   color: #333;
+  // width: 50%;
 }
 .node.highlight {
   background: #09f;
@@ -61,4 +62,5 @@ $gradient-radial: radial-gradient(#d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51ff, #1
 
 #tree {
   text-align: left;
+  //background-color: green;
 }