trying fix trees

This commit is contained in:
Hubert Sokołowski
2022-08-22 20:13:03 +02:00
parent 121a02ad68
commit d1ac2dbc86
6 changed files with 57 additions and 60 deletions

3
package-lock.json generated
View File

@@ -16689,8 +16689,7 @@
"uuid": {
"version": "8.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
"optional": true
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
},
"uuid4": {
"version": "1.1.4",

View File

@@ -23,6 +23,7 @@
"react-scripts": "4.0.1",
"react-select-search": "^2.2.4",
"react-table": "^7.6.3",
"uuid": "^8.3.2",
"web-vitals": "^0.2.4"
},
"scripts": {

View File

@@ -13,6 +13,7 @@ import {
ModalFooter,
useDisclosure,
} from '@chakra-ui/react';
import { v4 as uuidv4 } from 'uuid';
import { Table, Thead, Tbody, Tfoot, Tr, Th, Td, TableCaption } from '@chakra-ui/react';
import { predict } from '../../utils/predict';
@@ -34,7 +35,7 @@ function TableComponent({ confusionMatrix, headers }) {
<Th></Th>
<Th></Th>
{headers.map(x => (
<Th key={Math.random() + 5}>{x}</Th>
<Th key={uuidv4()}>{x}</Th>
))}
</Tr>
</Thead>
@@ -42,7 +43,7 @@ function TableComponent({ confusionMatrix, headers }) {
{confusionMatrix.map((x, idx) => {
console.log(x, idx);
return (
<Tr key={Math.random() + 51}>
<Tr key={uuidv4()}>
{idx === 0 ? (
<Th
rowSpan={confusionMatrix.length}
@@ -60,7 +61,7 @@ function TableComponent({ confusionMatrix, headers }) {
)}
<Th>{headers[idx]}</Th>
{x.map(y => (
<Td key={Math.random() + 511}>{y}</Td>
<Td key={uuidv4()}>{y}</Td>
))}
</Tr>
);

View File

@@ -1,5 +1,6 @@
import { Box, SimpleGrid, Stack, StackDivider } from '@chakra-ui/react';
import React, { useState, useMemo } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { mergeChunksWithoutChosen } from '../../utils/cross-valid';
import ConfusionMatrix from '../ConfusionMatrix';
import SmallConfusionMatrix from './SmallConfusionMatrix';
@@ -23,29 +24,31 @@ import TreePrinter from '../TreePrinter';
* @param {Array} props.chunks
* @param {Object} props.treeModels
* @returns
* @return
*/
function CrossValidator({ builder, chunks, treeModels }) {
const [allAccuracy, setAllAccuracy] = useState([]);
const AllAccuracyObject = useMemo(() => Object.values(allAccuracy), [allAccuracy]);
const [allAccuracy, setAllAccuracy] = useState({});
const [selectedTree, setSelectedTree] = useState(null);
const [selectedIndex, setSelectedIndex] = useState(0);
const [acc, setAcc] = useState({});
function updateAccuracy(e, i) {
console.log('Accuracy');
console.log(e, i);
if (allAccuracy.length != chunks.length) {
//setAllAccuracy([...allAccuracy, e]);
useEffect(() => {
console.log(JSON.parse(JSON.stringify(allAccuracy)));
}, [allAccuracy]);
function updateAccuracy({ train, test, index }) {
if (allAccuracy[index]?.train === train && allAccuracy[index]?.test === test) {
return;
}
// setAllAccuracy(prevState => ({
// ...prevState,
// [i]: e,
// }));
console.log(allAccuracy);
setAllAccuracy(m => ({ ...m, [index]: { train, test } }));
}
const [trainAcc, testAcc] = useMemo(() => {
const items = Object.values(allAccuracy);
const avg = key => items.reduce((acc, x) => acc + x[key], 0) / items.length;
return [avg('train'), avg('test')];
}, [allAccuracy]);
// useEffect(() => {
// function getAccuracy() {
// const values = Object.values(AllAccuracyObject);
@@ -88,7 +91,7 @@ function CrossValidator({ builder, chunks, treeModels }) {
>
{treeModels.map((x, i) => (
<SampleTreeItem
key={Math.random() + i}
key={uuidv4()}
builder={builder}
chunks={chunks}
item={x}
@@ -99,13 +102,8 @@ function CrossValidator({ builder, chunks, treeModels }) {
))}
</SimpleGrid>
<div>
<p>
Training accuracy:{' '}
{allAccuracy?.reduce((partialSum, a) => partialSum + a.training, 0) / allAccuracy.length}
</p>
<p>
Test accuracy: {allAccuracy?.reduce((partialSum, a) => partialSum + a.test, 0) / allAccuracy.length}
</p>
<p>Training accuracy: {trainAcc}</p>
<p>Test accuracy: {testAcc}</p>
</div>
<div>
<p>Tree {selectedIndex + 1}</p>
@@ -118,7 +116,7 @@ function CrossValidator({ builder, chunks, treeModels }) {
</div>
{/* <div>
{treeModels.map((x, i) => (
<p key={Math.random() + 5}>
<p key={uuidv4()}>
Tree {i}{' '}
<ConfusionMatrix
tree={x}
@@ -150,15 +148,23 @@ export default CrossValidator;
function SampleTreeItem({ builder, chunks, item, index, onGetResults, onSelectedTree }) {
const [trainAcc, setTrainAcc] = useState(null);
const [testAcc, setTestAcc] = useState(null);
const [acc, setAcc] = useState({
training: null,
test: null,
});
const [data, setData] = useState(null);
useEffect(() => {
setData(mergeChunksWithoutChosen(chunks, index));
}, []);
function clickSelectTree(tree, index) {
onSelectedTree(tree, index);
}
useEffect(() => {
if (trainAcc === null || testAcc === null) {
return;
}
onGetResults({ train: trainAcc, test: testAcc, index });
}, [trainAcc, testAcc]);
function getTreningAccuracy(value) {
setTrainAcc(value);
//onGetResults({ ...acc, training: value });
@@ -169,34 +175,22 @@ function SampleTreeItem({ builder, chunks, item, index, onGetResults, onSelected
//onGetResults({ ...acc, test: value });
}
useEffect(() => {
// console.log('usseeffececct', acc);
// if (acc.training != null && acc.test != null) {
// onGetResults(acc);
// }
}, [acc, onGetResults]);
return (
<Box
key={Math.random() + 5}
padding={1}
width={220}
height={55}
border={'1px solid black'}
borderRadius={5}
>
<Box key={uuidv4()} padding={1} width={220} height={55} border={'1px solid black'} borderRadius={5}>
<p className="sampleTreeItem" style={{ textAlign: 'left' }} onClick={e => clickSelectTree(item, index)}>
<b>Tree {index + 1}</b>
</p>
<SimpleGrid columns={2} spacing={1}>
<SmallConfusionMatrix
tree={item}
data={mergeChunksWithoutChosen(chunks, index)}
allClasses={builder.allClasses}
categoryAttr={builder.categoryAttr}
onChange={getTreningAccuracy}
type={'Trening'}
/>
{data && (
<SmallConfusionMatrix
tree={item}
data={data}
allClasses={builder.allClasses}
categoryAttr={builder.categoryAttr}
onChange={getTreningAccuracy}
type={'Trening'}
/>
)}
<SmallConfusionMatrix
tree={item}
data={chunks[index]}

View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useMemo, useState } from 'react';
import '../../css/main.scss';
import '../../css/inputs.scss';
import { Checkbox, Collapse, FormHelperText, Icon, useDisclosure, Wrap, WrapItem } from '@chakra-ui/react';
@@ -36,6 +36,7 @@ function Navigation({ onPrepareConfig, setHeaders, onCrossValidation }) {
const [folds, setFolds] = useState(10);
const { attributes: options, onAttributesChange } = useAttributesContext();
//const { attributes: ignoredAttributes, onIgnoredChange } = useIgnoredContext();
const optionsViewModel = useMemo(() => options.map(model => ({ ...model, key: model.value })), [options]);
const { isLoading } = useLoadingContext();
function handleSelectDecision(value) {
@@ -196,7 +197,7 @@ function Navigation({ onPrepareConfig, setHeaders, onCrossValidation }) {
placeholder="Select algorithm"
onChange={handleSetAlgorithm}
value={algorithm}
options={['c45', 'tsp', 'tspw'].map(v => ({ value: v, name: v.toUpperCase() }))}
options={['c45', 'tsp', 'tspw'].map(v => ({ value: v, name: v.toUpperCase(), key: v }))}
multiple={true}
closeOnSelect={false}
/>
@@ -216,7 +217,7 @@ function Navigation({ onPrepareConfig, setHeaders, onCrossValidation }) {
<SearchBar
placeholder="Select decision attribute"
onChange={handleSelectDecision}
options={options}
options={optionsViewModel}
multiple={false}
closeOnSelect={true}
value={decisionAttribute}
@@ -237,7 +238,7 @@ function Navigation({ onPrepareConfig, setHeaders, onCrossValidation }) {
<SearchBar
placeholder="Select ignore attributes"
onChange={handleSelectIgnore}
options={options}
options={optionsViewModel}
multiple={true}
closeOnSelect={false}
value={ignoredAttributes}

View File

@@ -17,6 +17,7 @@ import {
Tooltip,
useDisclosure,
} from '@chakra-ui/react';
import { v4 as uuidv4 } from 'uuid';
import { CgDatabase } from 'react-icons/cg';
import { AiOutlineArrowDown, AiOutlineArrowUp } from 'react-icons/ai';
import DataViewerTable from './DataViewerTable';
@@ -49,7 +50,7 @@ function DataViewer({ node, side, onChange, hide }) {
}
const NodeCountClass = Object.entries(nodeCountness).map(v => (
<Tag key={Math.random() + 10} ml={3} colorScheme="blackAlpha">
<Tag key={uuidv4()} ml={3} colorScheme="blackAlpha">
{v[0]} ({v[1]})
</Tag>
));