new navbar with drawer roll

src/App.jsx

@@ -1,18 +1,21 @@
-import React from "react";
+import React from 'react';
 //import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
-import "./css/App.scss";
-import Main from './components/Main'
-import { ChakraProvider , CSSReset } from "@chakra-ui/react";
+import './css/App.scss';
+import Main from './components/Main';
+import { ChakraProvider, CSSReset, extendTheme } from '@chakra-ui/react';
+import theme from './theme';
+
+const themes = extendTheme({ ...theme });
 
 function App() {
-    return (
-        <ChakraProvider >
-            <CSSReset />
-            <div id="app" className="App">
-                <Main></Main>
-            </div>
-        </ChakraProvider>
-    );
+  return (
+    <ChakraProvider theme={themes}>
+      <CSSReset />
+      <div id="app" className="App">
+        <Main></Main>
+      </div>
+    </ChakraProvider>
+  );
 }
 
 export default App;

src/components/FileReader.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import ReactFileReader from 'react-file-reader';
 import { Button } from '@chakra-ui/react';
-import { AddIcon, ArrowUpIcon } from '@chakra-ui/icons';
+import { AddIcon } from '@chakra-ui/icons';
 import { readLocalFile } from '../utils/file-reader';
 import parseCsv from 'csv-parse/lib/sync';
 
@@ -42,10 +42,12 @@ function FileReader(props) {
       <ReactFileReader multipleFiles={false} fileTypes={['.csv']} handleFiles={handleFiles}>
         <Button
           leftIcon={<AddIcon />}
-          size={props.size}
+          //size={buttonSize}
           colorScheme="teal"
           variant="outline"
           aria-label="Deploy set"
+          w="100%"
+          h={10}
         >
           Deploy
         </Button>

src/components/Navigation/DrawerRoll.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  Button,
+  useDisclosure,
+  Drawer,
+  DrawerHeader,
+  DrawerBody,
+  DrawerOverlay,
+  DrawerContent,
+} from '@chakra-ui/react';
+
+function DrawerRoll() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <>
+      <Button onClick={onOpen}>Open Drawer</Button>
+      <Drawer placement="right" onClose={onClose} isOpen={isOpen}>
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerHeader borderBottomWidth="1px">Basic Drawer</DrawerHeader>
+          <DrawerBody>
+            <p>Some contents...</p>
+            <p>Some contents...</p>
+            <p>Some contents...</p>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}
+
+export default DrawerRoll;

src/components/Navigation/FormControlNumberInput.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import {
+  FormControl,
+  FormLabel,
+  NumberInput,
+  NumberInputStepper,
+  NumberInputField,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+} from '@chakra-ui/react';
+
+/**
+ * @param {Object} props
+ * @param {number} props.defaultValue
+ * @param {number} props.min
+ * @param {number} [props.max]
+ * @param {number} [props.step]
+ * @param {function} props.onChange
+ * @param {string} props.label
+ * @param {string} props.htmlId
+ *
+ */
+function FormControlNumberInput({ defaultValue, min, max, step, onChange, label, htmlId }) {
+  function handleChange(e) {
+    console.log(e);
+    onChange(e);
+  }
+
+  return (
+    <FormControl id={htmlId} width="auto">
+      <FormLabel fontSize={['md', 'md', 'xs', 'sm', 'md']}>{label}</FormLabel>
+      <NumberInput
+        defaultValue={defaultValue}
+        min={min}
+        step={step}
+        max={max}
+        variant="solid"
+        onChange={handleChange}
+        shadow={'md'}
+        //border="1px solid #E2E8F0"
+        borderRadius="0.375rem"
+        _hover={{
+          borderColor: '#2fcc8b',
+        }}
+      >
+        <NumberInputField />
+        <NumberInputStepper>
+          <NumberIncrementStepper />
+          <NumberDecrementStepper />
+        </NumberInputStepper>
+      </NumberInput>
+    </FormControl>
+  );
+}
+
+export default FormControlNumberInput;

src/components/Navigation/index.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import '../../css/main.scss';
-import { Icon } from '@chakra-ui/react';
+import '../../css/inputs.scss';
+import { Collapse, Icon, useDisclosure } from '@chakra-ui/react';
 import { GiLightningTree } from 'react-icons/gi';
 import {
   Button,
@@ -13,6 +14,7 @@ import {
   NumberDecrementStepper,
   FormControl,
   FormLabel,
+  Box,
 } from '@chakra-ui/react';
 import FileReader from '../FileReader';
 import { Search as SearchBar } from '../SearchBar';
@@ -21,13 +23,15 @@ import { builder } from '../../services/Playground';
 
 import IgnoredAttributes from './IgnoredAttributes';
 import Builder from './Builder';
+import FormControlNumberInput from './FormControlNumberInput';
+import DrawerRoll from './DrawerRoll';
 
 /**
  * @typedef {import('../../utils/decision-tree.js').DecisionTreeBuilder} DecisionTreeBuilder
  */
 
 function Navigation({ onPrepareConfig }) {
-  const [size, setSize] = useState('md');
+  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
   const [dataSet, setDataSet] = useState(null);
   const [decisionAttribute, setDecisionAttribute] = useState(null);
   const [ignoredAttributes, setIgnoredAttributes] = useState([]);
@@ -43,9 +47,9 @@ function Navigation({ onPrepareConfig }) {
     { value: 'milkshake', name: 'Milkshake' },
   ]);
 
-  useEffect(() => {
-    window.addEventListener('resize', () => handleResizeButtonsStyle());
-  }, []);
+  // useEffect(() => {
+  //   //window.addEventListener('resize', () => handleResizeButtonsStyle());
+  // }, []);
 
   const handleSetAttributes = () => {
     let array = [];
@@ -56,14 +60,14 @@ function Navigation({ onPrepareConfig }) {
     });
     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 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');
+  // };
 
   function handleSelectDecision(value) {
     //console.log(value);
@@ -122,112 +126,189 @@ function Navigation({ onPrepareConfig }) {
   }
 
   return (
-    <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}>
+    <Box
+      boxShadow="md"
+      p={1}
+      //borderBottom={'1px solid #1b1b1eff'}
+      borderBottomLeftRadius={'0.975rem'}
+      borderBottomRightRadius={'0.975rem'}
+      backgroundColor={'#a9bcd0ff'}
+      fontSize={['xs', 'xs', 'sm', 'sm', 'md']}
+    >
+      <Collapse in={isOpen} animateOpacity>
+        <Stack
+          spacing={2}
+          direction={['column', 'column', 'row']}
+          align="center"
+          alignContent="center"
+          justify="center"
+          px={2}
+          py={3}
+        >
+          <Box w={'100%'}>
+            <FormControl id="deploySet" width="auto">
+              <FormLabel fontSize={['md', 'md', 'xs', 'sm', 'md']}>Deploy Set</FormLabel>
+              <FileReader onChange={handleGetAllAttributes} isHeaders={false} />{' '}
+            </FormControl>
+          </Box>
+          <Box w={'100%'}>
+            <FormControl id="decisionAttr" width="auto">
+              <FormLabel fontSize={['md', 'md', 'xs', 'sm', 'md']}>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>
-          <FormControl id="minItemsCount" width="auto">
-            <FormLabel>Min items count</FormLabel>
-            <NumberInput
+            </FormHelperText> */}
+            </FormControl>
+          </Box>
+          <Box w={'100%'}>
+            <FormControl id="ignoreAttr" width="auto">
+              <FormLabel fontSize={['md', 'md', 'xs', 'sm', 'md']}>Ignore attributes</FormLabel>
+              <SearchBar
+                placeholder="Select ignore attributes"
+                onChange={handleSelectIgnore}
+                options={options}
+                multiple={true}
+                closeOnSelect={false}
+              />
+            </FormControl>
+          </Box>
+          <Box w={'100%'}>
+            <FormControlNumberInput
+              htmlId="minItemsCount"
+              label="Min items count"
               defaultValue={minItems}
               min={1}
-              size={size}
-              width="auto"
-              variant="solid"
               onChange={handleSetMinItems}
-            >
-              <NumberInputField />
-              <NumberInputStepper>
-                <NumberIncrementStepper />
-                <NumberDecrementStepper />
-              </NumberInputStepper>
-            </NumberInput>
-          </FormControl>
-          <FormControl id="maxDepth" width="auto">
-            <FormLabel>Max tree depth</FormLabel>
-            <NumberInput
+            />
+          </Box>
+          <Box w={'100%'}>
+            <FormControlNumberInput
+              htmlId="maxDepth"
+              label="Max tree depth"
               defaultValue={maxDepth}
               min={1}
-              size={size}
-              width="auto"
-              variant="solid"
               onChange={handleSetMaxDepth}
-            >
-              <NumberInputField />
-              <NumberInputStepper>
-                <NumberIncrementStepper />
-                <NumberDecrementStepper />
-              </NumberInputStepper>
-            </NumberInput>
-          </FormControl>
-          <FormControl id="entropy" width="auto">
-            <FormLabel>Entropy threshold</FormLabel>
-            <NumberInput
-              max={1}
-              min={0}
-              step={0.1}
+            />
+          </Box>
+          <Box w={'100%'}>
+            <FormControlNumberInput
+              htmlId="entropy"
+              label="Entropy threshold"
               defaultValue={entropy}
-              size={size}
-              width="auto"
-              variant="solid"
+              min={0}
+              max={1}
+              step={0.1}
               onChange={handleSetEntropy}
-            >
-              <NumberInputField />
-              <NumberInputStepper>
-                <NumberIncrementStepper />
-                <NumberDecrementStepper />
-              </NumberInputStepper>
-            </NumberInput>
-          </FormControl>
-          <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>
+            />
+          </Box>
+          <Box w={'100%'}>
+            <FormControl id="drawTree" width="auto">
+              <FormLabel fontSize={['md', 'md', 'xs', 'sm', 'md']}>Draw tree</FormLabel>
+              <Button
+                leftIcon={<Icon as={GiLightningTree} />}
+                colorScheme="teal"
+                variant="outline"
+                aria-label="Deploy set"
+                onClick={handleDrawTree}
+                w="100%"
+                h={10}
+              >
+                Draw
+              </Button>
+            </FormControl>
+          </Box>
         </Stack>
-      </div>
-    </div>
+      </Collapse>
+      <Stack spacing={2} direction={['row']} align="center" alignContent="center" justify="center">
+        <Button onClick={onToggle}>{isOpen ? 'HIDE' : 'SHOW'}</Button>
+        <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>
   );
 }
 

src/css/App.scss

@@ -1,3 +1,5 @@
+@import './inputs.scss';
+
 .App {
   text-align: center;
 }

src/css/inputs.scss

@@ -0,0 +1,7 @@
+.inputss {
+  border: 1px solid transparent;
+  &:hover {
+    border: 1px solid #2fcc8b;
+    border-radius: 0.375rem;
+  }
+}

src/css/main.scss

@@ -9,9 +9,23 @@ $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 {
@@ -27,7 +41,7 @@ $gradient-radial: radial-gradient(#d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51ff, #1
 }
 .main {
   height: 100vh;
-  background-color: azure;
+  //padding: 10px;
 }
 #navigation-navbar {
   //background-color: red;

src/theme.js

@@ -0,0 +1,58 @@
+// theme.js
+import { extendTheme, useBreakpointValue } from '@chakra-ui/react';
+import { createBreakpoints } from '@chakra-ui/theme-tools';
+
+const breakpoints = createBreakpoints({
+  sm: '320px',
+  md: '768px',
+  lg: '960px',
+  xl: '1200px',
+});
+
+const theme = extendTheme({
+  breakpoints: breakpoints,
+  components: {
+    Button: {
+      // 1. We can update the base styles
+      baseStyle: {
+        fontWeight: 'bold', // Normally, it is "semibold"
+      },
+      // 2. We can add a new button size or extend existing
+      sizes: {
+        xl: {
+          h: '56px',
+          fontSize: 'lg',
+          px: '32px',
+        },
+        lg: {
+          h: '56px',
+          fontSize: 'lg',
+          px: '32px',
+        },
+        md: {
+          h: '36px',
+          fontSize: 'md',
+          px: '32px',
+        },
+        sm: {
+          h: '16px',
+          fontSize: 'lg',
+          px: '12px',
+        },
+      },
+      // 3. We can add a new visual variant
+      // variants: {
+      //   'beamed': {
+      //     bg: 'red.400',
+      //     boxShadow: '0 0 2px 2px #efdfde',
+      //   },
+      //   // 4. We can override existing variants
+      //   solid: props => ({
+      //     bg: props.colorMode === 'dark' ? 'red.300' : 'red.500',
+      //   }),
+      // },
+    },
+  },
+});
+
+export default theme;

src/utils/decision-tree.js

@@ -205,6 +205,7 @@ export function buildDecisionTree(_builder, isChanged = false) {
     notMatch: notMatchSubTree, //{category: ...}
     matchedCount: match.length,
     notMatchedCount: notMatch.length,
+    nodeSet: match.concat(notMatch),
   };
   //console.log(attributes);
 }