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

feat(gui): wrap different statistics into accordion #946

Merged
merged 3 commits into from
Jul 8, 2022
Merged

feat(gui): wrap different statistics into accordion #946

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
81d7198
feat(gui): wrap different statistics into accordion
lars-reimann Jul 8, 2022
346f011
Merge branch 'main' into 936-select-statistics-to-be-shown-in-statist…
lars-reimann Jul 8, 2022
2b4dca0
Merge branch 'main' into 936-select-statistics-to-be-shown-in-statist…
lars-reimann Jul 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 20 additions & 27 deletions api-editor/gui/src/features/statistics/AnnotationStatistics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Button, Heading, SimpleGrid, VStack } from '@chakra-ui/react';
import { Button, SimpleGrid } from '@chakra-ui/react';
import { selectAnnotationStore } from '../annotations/annotationSlice';
import { Annotation } from '../annotations/versioning/AnnotationStoreV2';
import { useAppDispatch, useAppSelector } from '../../app/hooks';
Expand Down Expand Up @@ -52,33 +52,26 @@ export const AnnotationStatistics = function () {
};

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

<Button onClick={() => filterAction('annotation:@boundary')}>
{'@Boundary: ' + nBoundaryAnnotations}
</Button>
<Button onClick={() => filterAction('annotation:@calledAfter')}>
{'@CalledAfter: ' + nCalledAfterAnnotations}
</Button>
<Button onClick={() => filterAction('annotation:@description')}>
{'@Description: ' + nDescriptionAnnotations}
</Button>
<Button onClick={() => filterAction('annotation:@enum')}>{'@Enum: ' + nEnumAnnotations}</Button>
<Button onClick={() => filterAction('annotation:@group')}>{'@Group: ' + nGroupAnnotations}</Button>
<Button onClick={() => filterAction('annotation:@move')}>{'@Move: ' + nMoveAnnotations}</Button>
<Button onClick={() => filterAction('annotation:@pure')}>{'@Pure: ' + nPureAnnotations}</Button>
<Button onClick={() => filterAction('annotation:@remove')}>{'@Remove: ' + nRemoveAnnotations}</Button>
<Button onClick={() => filterAction('annotation:@rename')}>{'@Rename: ' + nRenameAnnotations}</Button>
<Button onClick={() => filterAction('annotation:@todo')}>{'@Todo: ' + nTodoAnnotations}</Button>
<Button onClick={() => filterAction('annotation:@value')}>{'@Value: ' + nValueAnnotations}</Button>
</SimpleGrid>
</VStack>
<Button onClick={() => filterAction('annotation:@boundary')}>{'@Boundary: ' + nBoundaryAnnotations}</Button>
<Button onClick={() => filterAction('annotation:@calledAfter')}>
{'@CalledAfter: ' + nCalledAfterAnnotations}
</Button>
<Button onClick={() => filterAction('annotation:@description')}>
{'@Description: ' + nDescriptionAnnotations}
</Button>
<Button onClick={() => filterAction('annotation:@enum')}>{'@Enum: ' + nEnumAnnotations}</Button>
<Button onClick={() => filterAction('annotation:@group')}>{'@Group: ' + nGroupAnnotations}</Button>
<Button onClick={() => filterAction('annotation:@move')}>{'@Move: ' + nMoveAnnotations}</Button>
<Button onClick={() => filterAction('annotation:@pure')}>{'@Pure: ' + nPureAnnotations}</Button>
<Button onClick={() => filterAction('annotation:@remove')}>{'@Remove: ' + nRemoveAnnotations}</Button>
<Button onClick={() => filterAction('annotation:@rename')}>{'@Rename: ' + nRenameAnnotations}</Button>
<Button onClick={() => filterAction('annotation:@todo')}>{'@Todo: ' + nTodoAnnotations}</Button>
<Button onClick={() => filterAction('annotation:@value')}>{'@Value: ' + nValueAnnotations}</Button>
</SimpleGrid>
);
};

Expand Down
33 changes: 14 additions & 19 deletions api-editor/gui/src/features/statistics/ApiSizeStatistics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Box, Flex, Heading, VStack } from '@chakra-ui/react';
import { Box, Flex } from '@chakra-ui/react';
import { useAppSelector } from '../../app/hooks';
import { selectRawPythonPackage } from '../packageData/apiSlice';
import { selectUsages } from '../usages/usageSlice';
Expand All @@ -26,24 +26,19 @@ export const ApiSizeStatistics = function () {
const parameterBarChart = <CustomBarChart labels={parameterLabels} values={parameterValues} title={'Parameters'} />;

return (
<VStack spacing={2}>
<Heading as="h3" size="md">
API Size
</Heading>
<Box width="100%">
<Flex wrap="wrap">
<Box minWidth="350px" flex="1 1 33%">
{classBarChart}
</Box>
<Box minWidth="350px" flex="1 1 33%">
{functionBarChart}
</Box>
<Box minWidth="350px" flex="1 33%">
{parameterBarChart}
</Box>
</Flex>
</Box>
</VStack>
<Box width="100%">
<Flex wrap="wrap">
<Box minWidth="350px" flex="1 1 33%">
{classBarChart}
</Box>
<Box minWidth="350px" flex="1 1 33%">
{functionBarChart}
</Box>
<Box minWidth="350px" flex="1 33%">
{parameterBarChart}
</Box>
</Flex>
</Box>
);
};

Expand Down
33 changes: 14 additions & 19 deletions api-editor/gui/src/features/statistics/ApiSizeVsUsefulnessStatistics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Box, Flex, Heading, VStack } from '@chakra-ui/react';
import { Box, Flex } from '@chakra-ui/react';
import { useAppSelector } from '../../app/hooks';
import { selectRawPythonPackage } from '../packageData/apiSlice';
import { selectUsages } from '../usages/usageSlice';
Expand Down Expand Up @@ -43,23 +43,18 @@ export const ApiSizeVsUsefulnessStatistics = function () {
);

return (
<VStack spacing={2}>
<Heading as="h3" size="md">
API Size per Minimum Usefulness Threshold
</Heading>
<Box width="100%">
<Flex wrap="wrap">
<Box minWidth="350px" flex="1 1 33%">
{classLineChart}
</Box>
<Box minWidth="350px" flex="1 1 33%">
{functionLineChart}
</Box>
<Box minWidth="350px" flex="1 1 33%">
{parameterLineChart}
</Box>
</Flex>
</Box>
</VStack>
<Box width="100%">
<Flex wrap="wrap">
<Box minWidth="350px" flex="1 1 33%">
{classLineChart}
</Box>
<Box minWidth="350px" flex="1 1 33%">
{functionLineChart}
</Box>
<Box minWidth="350px" flex="1 1 33%">
{parameterLineChart}
</Box>
</Flex>
</Box>
);
};
27 changes: 11 additions & 16 deletions api-editor/gui/src/features/statistics/ProgressStatistics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Box, Heading, SimpleGrid, useColorModeValue, VStack } from '@chakra-ui/react';
import { Box, SimpleGrid, useColorModeValue } from '@chakra-ui/react';
import { useAppSelector } from '../../app/hooks';
import { selectMatchedNodes } from '../packageData/apiSlice';
import { selectAllAnnotationsOnTargets, selectAnnotationStore } from '../annotations/annotationSlice';
Expand Down Expand Up @@ -74,20 +74,15 @@ export const ProgressStatistics = function () {
};

return (
<VStack spacing={2}>
<Heading as="h3" size="md">
Progress on Matched Elements
</Heading>
<Box width="100%">
<SimpleGrid columns={{ base: 1, fullHD: 2 }} width="100%">
<Box>
<Pie data={completionData} options={completionOptions} />
</Box>
<Box>
<Pie data={correctnessData} options={correctnessOptions} />
</Box>
</SimpleGrid>
</Box>
</VStack>
<Box width="100%">
<SimpleGrid columns={{ base: 1, fullHD: 2 }} width="100%">
<Box>
<Pie data={completionData} options={completionOptions} />
</Box>
<Box>
<Pie data={correctnessData} options={correctnessOptions} />
</Box>
</SimpleGrid>
</Box>
);
};
41 changes: 15 additions & 26 deletions api-editor/gui/src/features/statistics/QualityStatistics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Box, Heading, SimpleGrid, useColorModeValue, VStack } from '@chakra-ui/react';
import { Box, SimpleGrid, useColorModeValue } from '@chakra-ui/react';
import { useAppSelector } from '../../app/hooks';
import { Pie } from 'react-chartjs-2';

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

return (
<VStack spacing={2}>
<Heading as="h3" size="md">
Quality of Autogenerated Annotations
</Heading>
<Box width="100%">
<SimpleGrid columns={{ base: 1, fullHD: 2 }} width="100%">
<QualityPieChart
annotationType="Boundary"
annotations={Object.values(annotationStore.boundaryAnnotations)}
/>
<QualityPieChart
annotationType="Enum"
annotations={Object.values(annotationStore.enumAnnotations)}
/>
<QualityPieChart
annotationType="Remove"
annotations={Object.values(annotationStore.removeAnnotations)}
/>
<QualityPieChart
annotationType="Value"
annotations={Object.values(annotationStore.valueAnnotations)}
/>
</SimpleGrid>
</Box>
</VStack>
<Box width="100%">
<SimpleGrid columns={{ base: 1, fullHD: 2 }} width="100%">
<QualityPieChart
annotationType="Boundary"
annotations={Object.values(annotationStore.boundaryAnnotations)}
/>
<QualityPieChart annotationType="Enum" annotations={Object.values(annotationStore.enumAnnotations)} />
<QualityPieChart
annotationType="Remove"
annotations={Object.values(annotationStore.removeAnnotations)}
/>
<QualityPieChart annotationType="Value" annotations={Object.values(annotationStore.valueAnnotations)} />
</SimpleGrid>
</Box>
);
};

Expand Down
108 changes: 99 additions & 9 deletions api-editor/gui/src/features/statistics/StatisticsView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
import React from 'react';
import { VStack } from '@chakra-ui/react';
import {
Accordion,
AccordionButton,
AccordionIcon,
AccordionItem,
AccordionPanel,
Box,
VStack,
} from '@chakra-ui/react';
import { AnnotationStatistics } from './AnnotationStatistics';
import { ApiSizeStatistics } from './ApiSizeStatistics';
import { ApiSizeVsUsefulnessStatistics } from './ApiSizeVsUsefulnessStatistics';
Expand All @@ -9,13 +17,95 @@ import { QualityStatistics } from './QualityStatistics';

export const StatisticsView: React.FC = function () {
return (
<VStack spacing={8}>
<ProgressStatistics />
<AnnotationStatistics />
<ApiSizeStatistics />
<ApiSizeVsUsefulnessStatistics />
<QualityStatistics />
<AchievementDisplay />
</VStack>
<Accordion defaultIndex={0} allowToggle>
<AccordionItem>
<h2>
<AccordionButton>
<Box flex="1" textAlign="left">
Progress on Matched Elements
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
<VStack spacing={8}>
<ProgressStatistics />
</VStack>
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Box flex="1" textAlign="left">
Annotations on Matched Elements
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
<AnnotationStatistics />
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Box flex="1" textAlign="left">
API Size
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
<VStack spacing={8}>
<ApiSizeStatistics />
</VStack>
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Box flex="1" textAlign="left">
API Size per Minimum Usefulness Threshold
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
<VStack spacing={8}>
<ApiSizeVsUsefulnessStatistics />
</VStack>
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Box flex="1" textAlign="left">
Quality of Autogenerated Annotations
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
<VStack spacing={8}>
<QualityStatistics />
</VStack>
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Box flex="1" textAlign="left">
Achievements
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
<VStack spacing={8}>
<AchievementDisplay />
</VStack>
</AccordionPanel>
</AccordionItem>
</Accordion>
);
};