Skip to content
This repository was archived by the owner on Jan 19, 2025. It is now read-only.

Commit 0540d30

Browse files
lars-reimannlars-reimann
authored
feat(gui): wrap different statistics into accordion (#946)
1 parent 88d07a0 commit 0540d30

File tree

6 files changed

+173
-116
lines changed

6 files changed

+173
-116
lines changed

‎api-editor/gui/src/features/statistics/AnnotationStatistics.tsx‎

Lines changed: 20 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Button, Heading, SimpleGrid, VStack } from '@chakra-ui/react';
2+
import { Button, SimpleGrid } from '@chakra-ui/react';
33
import { selectAnnotationStore } from '../annotations/annotationSlice';
44
import { Annotation } from '../annotations/versioning/AnnotationStoreV2';
55
import { useAppDispatch, useAppSelector } from '../../app/hooks';
@@ -52,33 +52,26 @@ export const AnnotationStatistics = function () {
5252
};
5353

5454
return (
55-
<VStack spacing={4}>
56-
<Heading as="h3" size="md">
57-
Annotations on Matched Elements
58-
</Heading>
59-
<SimpleGrid columns={{ base: 1, fullHD: 2 }} spacing={2}>
60-
<Button onClick={() => filterAction('')}>Clear Filter</Button>
61-
<Button onClick={() => filterAction('annotation:any')}>{'Any: ' + sum}</Button>
55+
<SimpleGrid columns={{ base: 1, fullHD: 2 }} spacing={2}>
56+
<Button onClick={() => filterAction('')}>Clear Filter</Button>
57+
<Button onClick={() => filterAction('annotation:any')}>{'Any: ' + sum}</Button>
6258

63-
<Button onClick={() => filterAction('annotation:@boundary')}>
64-
{'@Boundary: ' + nBoundaryAnnotations}
65-
</Button>
66-
<Button onClick={() => filterAction('annotation:@calledAfter')}>
67-
{'@CalledAfter: ' + nCalledAfterAnnotations}
68-
</Button>
69-
<Button onClick={() => filterAction('annotation:@description')}>
70-
{'@Description: ' + nDescriptionAnnotations}
71-
</Button>
72-
<Button onClick={() => filterAction('annotation:@enum')}>{'@Enum: ' + nEnumAnnotations}</Button>
73-
<Button onClick={() => filterAction('annotation:@group')}>{'@Group: ' + nGroupAnnotations}</Button>
74-
<Button onClick={() => filterAction('annotation:@move')}>{'@Move: ' + nMoveAnnotations}</Button>
75-
<Button onClick={() => filterAction('annotation:@pure')}>{'@Pure: ' + nPureAnnotations}</Button>
76-
<Button onClick={() => filterAction('annotation:@remove')}>{'@Remove: ' + nRemoveAnnotations}</Button>
77-
<Button onClick={() => filterAction('annotation:@rename')}>{'@Rename: ' + nRenameAnnotations}</Button>
78-
<Button onClick={() => filterAction('annotation:@todo')}>{'@Todo: ' + nTodoAnnotations}</Button>
79-
<Button onClick={() => filterAction('annotation:@value')}>{'@Value: ' + nValueAnnotations}</Button>
80-
</SimpleGrid>
81-
</VStack>
59+
<Button onClick={() => filterAction('annotation:@boundary')}>{'@Boundary: ' + nBoundaryAnnotations}</Button>
60+
<Button onClick={() => filterAction('annotation:@calledAfter')}>
61+
{'@CalledAfter: ' + nCalledAfterAnnotations}
62+
</Button>
63+
<Button onClick={() => filterAction('annotation:@description')}>
64+
{'@Description: ' + nDescriptionAnnotations}
65+
</Button>
66+
<Button onClick={() => filterAction('annotation:@enum')}>{'@Enum: ' + nEnumAnnotations}</Button>
67+
<Button onClick={() => filterAction('annotation:@group')}>{'@Group: ' + nGroupAnnotations}</Button>
68+
<Button onClick={() => filterAction('annotation:@move')}>{'@Move: ' + nMoveAnnotations}</Button>
69+
<Button onClick={() => filterAction('annotation:@pure')}>{'@Pure: ' + nPureAnnotations}</Button>
70+
<Button onClick={() => filterAction('annotation:@remove')}>{'@Remove: ' + nRemoveAnnotations}</Button>
71+
<Button onClick={() => filterAction('annotation:@rename')}>{'@Rename: ' + nRenameAnnotations}</Button>
72+
<Button onClick={() => filterAction('annotation:@todo')}>{'@Todo: ' + nTodoAnnotations}</Button>
73+
<Button onClick={() => filterAction('annotation:@value')}>{'@Value: ' + nValueAnnotations}</Button>
74+
</SimpleGrid>
8275
);
8376
};
8477

‎api-editor/gui/src/features/statistics/ApiSizeStatistics.tsx‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Box, Flex, Heading, VStack } from '@chakra-ui/react';
2+
import { Box, Flex } from '@chakra-ui/react';
33
import { useAppSelector } from '../../app/hooks';
44
import { selectRawPythonPackage } from '../packageData/apiSlice';
55
import { selectUsages } from '../usages/usageSlice';
@@ -26,24 +26,19 @@ export const ApiSizeStatistics = function () {
2626
const parameterBarChart = <CustomBarChart labels={parameterLabels} values={parameterValues} title={'Parameters'} />;
2727

2828
return (
29-
<VStack spacing={2}>
30-
<Heading as="h3" size="md">
31-
API Size
32-
</Heading>
33-
<Box width="100%">
34-
<Flex wrap="wrap">
35-
<Box minWidth="350px" flex="1 1 33%">
36-
{classBarChart}
37-
</Box>
38-
<Box minWidth="350px" flex="1 1 33%">
39-
{functionBarChart}
40-
</Box>
41-
<Box minWidth="350px" flex="1 33%">
42-
{parameterBarChart}
43-
</Box>
44-
</Flex>
45-
</Box>
46-
</VStack>
29+
<Box width="100%">
30+
<Flex wrap="wrap">
31+
<Box minWidth="350px" flex="1 1 33%">
32+
{classBarChart}
33+
</Box>
34+
<Box minWidth="350px" flex="1 1 33%">
35+
{functionBarChart}
36+
</Box>
37+
<Box minWidth="350px" flex="1 33%">
38+
{parameterBarChart}
39+
</Box>
40+
</Flex>
41+
</Box>
4742
);
4843
};
4944

‎api-editor/gui/src/features/statistics/ApiSizeVsUsefulnessStatistics.tsx‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Box, Flex, Heading, VStack } from '@chakra-ui/react';
2+
import { Box, Flex } from '@chakra-ui/react';
33
import { useAppSelector } from '../../app/hooks';
44
import { selectRawPythonPackage } from '../packageData/apiSlice';
55
import { selectUsages } from '../usages/usageSlice';
@@ -43,23 +43,18 @@ export const ApiSizeVsUsefulnessStatistics = function () {
4343
);
4444

4545
return (
46-
<VStack spacing={2}>
47-
<Heading as="h3" size="md">
48-
API Size per Minimum Usefulness Threshold
49-
</Heading>
50-
<Box width="100%">
51-
<Flex wrap="wrap">
52-
<Box minWidth="350px" flex="1 1 33%">
53-
{classLineChart}
54-
</Box>
55-
<Box minWidth="350px" flex="1 1 33%">
56-
{functionLineChart}
57-
</Box>
58-
<Box minWidth="350px" flex="1 1 33%">
59-
{parameterLineChart}
60-
</Box>
61-
</Flex>
62-
</Box>
63-
</VStack>
46+
<Box width="100%">
47+
<Flex wrap="wrap">
48+
<Box minWidth="350px" flex="1 1 33%">
49+
{classLineChart}
50+
</Box>
51+
<Box minWidth="350px" flex="1 1 33%">
52+
{functionLineChart}
53+
</Box>
54+
<Box minWidth="350px" flex="1 1 33%">
55+
{parameterLineChart}
56+
</Box>
57+
</Flex>
58+
</Box>
6459
);
6560
};

‎api-editor/gui/src/features/statistics/ProgressStatistics.tsx‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Box, Heading, SimpleGrid, useColorModeValue, VStack } from '@chakra-ui/react';
2+
import { Box, SimpleGrid, useColorModeValue } from '@chakra-ui/react';
33
import { useAppSelector } from '../../app/hooks';
44
import { selectMatchedNodes } from '../packageData/apiSlice';
55
import { selectAllAnnotationsOnTargets, selectAnnotationStore } from '../annotations/annotationSlice';
@@ -74,20 +74,15 @@ export const ProgressStatistics = function () {
7474
};
7575

7676
return (
77-
<VStack spacing={2}>
78-
<Heading as="h3" size="md">
79-
Progress on Matched Elements
80-
</Heading>
81-
<Box width="100%">
82-
<SimpleGrid columns={{ base: 1, fullHD: 2 }} width="100%">
83-
<Box>
84-
<Pie data={completionData} options={completionOptions} />
85-
</Box>
86-
<Box>
87-
<Pie data={correctnessData} options={correctnessOptions} />
88-
</Box>
89-
</SimpleGrid>
90-
</Box>
91-
</VStack>
77+
<Box width="100%">
78+
<SimpleGrid columns={{ base: 1, fullHD: 2 }} width="100%">
79+
<Box>
80+
<Pie data={completionData} options={completionOptions} />
81+
</Box>
82+
<Box>
83+
<Pie data={correctnessData} options={correctnessOptions} />
84+
</Box>
85+
</SimpleGrid>
86+
</Box>
9287
);
9388
};

‎api-editor/gui/src/features/statistics/QualityStatistics.tsx‎

Lines changed: 15 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Box, Heading, SimpleGrid, useColorModeValue, VStack } from '@chakra-ui/react';
2+
import { Box, SimpleGrid, useColorModeValue } from '@chakra-ui/react';
33
import { useAppSelector } from '../../app/hooks';
44
import { Pie } from 'react-chartjs-2';
55

@@ -13,31 +13,20 @@ export const QualityStatistics = function () {
1313
const annotationStore = useAppSelector(selectAnnotationStore);
1414

1515
return (
16-
<VStack spacing={2}>
17-
<Heading as="h3" size="md">
18-
Quality of Autogenerated Annotations
19-
</Heading>
20-
<Box width="100%">
21-
<SimpleGrid columns={{ base: 1, fullHD: 2 }} width="100%">
22-
<QualityPieChart
23-
annotationType="Boundary"
24-
annotations={Object.values(annotationStore.boundaryAnnotations)}
25-
/>
26-
<QualityPieChart
27-
annotationType="Enum"
28-
annotations={Object.values(annotationStore.enumAnnotations)}
29-
/>
30-
<QualityPieChart
31-
annotationType="Remove"
32-
annotations={Object.values(annotationStore.removeAnnotations)}
33-
/>
34-
<QualityPieChart
35-
annotationType="Value"
36-
annotations={Object.values(annotationStore.valueAnnotations)}
37-
/>
38-
</SimpleGrid>
39-
</Box>
40-
</VStack>
16+
<Box width="100%">
17+
<SimpleGrid columns={{ base: 1, fullHD: 2 }} width="100%">
18+
<QualityPieChart
19+
annotationType="Boundary"
20+
annotations={Object.values(annotationStore.boundaryAnnotations)}
21+
/>
22+
<QualityPieChart annotationType="Enum" annotations={Object.values(annotationStore.enumAnnotations)} />
23+
<QualityPieChart
24+
annotationType="Remove"
25+
annotations={Object.values(annotationStore.removeAnnotations)}
26+
/>
27+
<QualityPieChart annotationType="Value" annotations={Object.values(annotationStore.valueAnnotations)} />
28+
</SimpleGrid>
29+
</Box>
4130
);
4231
};
4332

‎api-editor/gui/src/features/statistics/StatisticsView.tsx‎

Lines changed: 99 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
import React from 'react';
2-
import { VStack } from '@chakra-ui/react';
2+
import {
3+
Accordion,
4+
AccordionButton,
5+
AccordionIcon,
6+
AccordionItem,
7+
AccordionPanel,
8+
Box,
9+
VStack,
10+
} from '@chakra-ui/react';
311
import { AnnotationStatistics } from './AnnotationStatistics';
412
import { ApiSizeStatistics } from './ApiSizeStatistics';
513
import { ApiSizeVsUsefulnessStatistics } from './ApiSizeVsUsefulnessStatistics';
@@ -9,13 +17,95 @@ import { QualityStatistics } from './QualityStatistics';
917

1018
export const StatisticsView: React.FC = function () {
1119
return (
12-
<VStack spacing={8}>
13-
<ProgressStatistics />
14-
<AnnotationStatistics />
15-
<ApiSizeStatistics />
16-
<ApiSizeVsUsefulnessStatistics />
17-
<QualityStatistics />
18-
<AchievementDisplay />
19-
</VStack>
20+
<Accordion defaultIndex={0} allowToggle>
21+
<AccordionItem>
22+
<h2>
23+
<AccordionButton>
24+
<Box flex="1" textAlign="left">
25+
Progress on Matched Elements
26+
</Box>
27+
<AccordionIcon />
28+
</AccordionButton>
29+
</h2>
30+
<AccordionPanel pb={4}>
31+
<VStack spacing={8}>
32+
<ProgressStatistics />
33+
</VStack>
34+
</AccordionPanel>
35+
</AccordionItem>
36+
<AccordionItem>
37+
<h2>
38+
<AccordionButton>
39+
<Box flex="1" textAlign="left">
40+
Annotations on Matched Elements
41+
</Box>
42+
<AccordionIcon />
43+
</AccordionButton>
44+
</h2>
45+
<AccordionPanel pb={4}>
46+
<AnnotationStatistics />
47+
</AccordionPanel>
48+
</AccordionItem>
49+
<AccordionItem>
50+
<h2>
51+
<AccordionButton>
52+
<Box flex="1" textAlign="left">
53+
API Size
54+
</Box>
55+
<AccordionIcon />
56+
</AccordionButton>
57+
</h2>
58+
<AccordionPanel pb={4}>
59+
<VStack spacing={8}>
60+
<ApiSizeStatistics />
61+
</VStack>
62+
</AccordionPanel>
63+
</AccordionItem>
64+
<AccordionItem>
65+
<h2>
66+
<AccordionButton>
67+
<Box flex="1" textAlign="left">
68+
API Size per Minimum Usefulness Threshold
69+
</Box>
70+
<AccordionIcon />
71+
</AccordionButton>
72+
</h2>
73+
<AccordionPanel pb={4}>
74+
<VStack spacing={8}>
75+
<ApiSizeVsUsefulnessStatistics />
76+
</VStack>
77+
</AccordionPanel>
78+
</AccordionItem>
79+
<AccordionItem>
80+
<h2>
81+
<AccordionButton>
82+
<Box flex="1" textAlign="left">
83+
Quality of Autogenerated Annotations
84+
</Box>
85+
<AccordionIcon />
86+
</AccordionButton>
87+
</h2>
88+
<AccordionPanel pb={4}>
89+
<VStack spacing={8}>
90+
<QualityStatistics />
91+
</VStack>
92+
</AccordionPanel>
93+
</AccordionItem>
94+
<AccordionItem>
95+
<h2>
96+
<AccordionButton>
97+
<Box flex="1" textAlign="left">
98+
Achievements
99+
</Box>
100+
<AccordionIcon />
101+
</AccordionButton>
102+
</h2>
103+
<AccordionPanel pb={4}>
104+
<VStack spacing={8}>
105+
<AchievementDisplay />
106+
</VStack>
107+
</AccordionPanel>
108+
</AccordionItem>
109+
</Accordion>
20110
);
21111
};

0 commit comments

Comments
 (0)