mirror/iTree
1
0
Fork 0
mirror of https://github.com/hsokolowski/iTree.git synced 2026-04-18 12:26:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

add modal onclick node

Browse Source
This commit is contained in:
Hubert Sokołowski
2021-02-24 20:57:34 +01:00
parent 060decad2a
commit 5a2dbfa69c
6 changed files with 94 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/components/Navigation/index.jsx
View File

@@ -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>
);
}

50
src/components/Node/Joint.jsx
View File

@@ -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>
);
}

40
src/components/Node/Leaf.jsx
View File

@@ -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>
);
}

6
src/components/Tree.jsx
View File

@@ -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;

4
src/css/inputs.scss
View File

@@ -5,3 +5,7 @@
border-radius: 0.375rem;
}
}
.select-search__value {
z-index: 2;
position: absolute;
}

2
src/css/main.scss
View File

@@ -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;
}