feat(gui): quality view for automatically generated annotations (#811)

lars-reimann · web-flow · commit d2d3a066f0d5 · 2022-06-27T17:22:47.000+02:00
* feat(gui): improve contract of charts in dark mode

* feat(gui): quality view for annotations

* feat(gui): treat changed annotations still as autogenerated

* style: fix lint error

* style: apply automatic fixes of linters

Co-authored-by: lars-reimann &lt;lars-reimann@users.noreply.github.com&gt;
diff --git a/api-editor/gui/package.json b/api-editor/gui/package.json
@@ -8,7 +8,7 @@
         "serve": "vite preview",
         "test": "jest src",
         "test-with-coverage": "jest src --coverage",
-        "gen:theme-typings": "chakra-cli tokens src/theme/index.ts -- out src/theme/index.d.ts",
+        "gen:theme-typings": "chakra-cli tokens src/theme/index.ts",
         "postinstall": "npm run gen:theme-typings"
     },
     "prettier": "@lars-reimann/prettier-config",
diff --git a/api-editor/gui/src/features/annotations/annotationSlice.ts b/api-editor/gui/src/features/annotations/annotationSlice.ts
@@ -977,7 +977,7 @@ const removeAnnotation = (state: AnnotationSlice, parent: { [key: string]: Annot
 
 const isAutogenerated = (annotation: Annotation) => {
     const authors = annotation.authors ?? [];
-    return authors.length === 1 && authors[0] === '$autogen$';
+    return authors.includes('$autogen$');
 };
 
 const updateQueue = function (state: AnnotationSlice) {
diff --git a/api-editor/gui/src/features/packageData/selectionView/ParameterView.tsx b/api-editor/gui/src/features/packageData/selectionView/ParameterView.tsx
@@ -1,4 +1,4 @@
-import { Box, Heading, Stack, Text as ChakraText } from '@chakra-ui/react';
+import { Box, Heading, Stack, Text as ChakraText, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 import { PythonParameter } from '../model/PythonParameter';
 import { ParameterNode } from './ParameterNode';
@@ -54,15 +54,22 @@ export const ParameterView: React.FC<ParameterViewProps> = function ({ pythonPar
                         Most Common Values
                     </Heading>
                     <Box w="30vw" maxWidth="640px">
-                        {createBarChart(parameterUsages)}
+                        <CustomBarChart parameterUsages={parameterUsages} />
                     </Box>
                 </Stack>
             )}
         </Stack>
     );
 };
 
-const createBarChart = function (parameterUsages: Map<string, number>): React.ReactElement {
+interface CustomBarChartProps {
+    parameterUsages: Map<string, number>;
+}
+
+const CustomBarChart: React.FC<CustomBarChartProps> = function ({ parameterUsages }) {
+    const gridColor = useColorModeValue('#BBB', '#555');
+    const textColor = useColorModeValue('#000', '#FFF');
+
     const options = {
         indexAxis: 'y' as const,
         elements: {
@@ -82,6 +89,24 @@ const createBarChart = function (parameterUsages: Map<string, number>): React.Re
                 intersect: false,
             },
         },
+        scales: {
+            x: {
+                grid: {
+                    color: gridColor,
+                },
+                ticks: {
+                    color: textColor,
+                },
+            },
+            y: {
+                grid: {
+                    color: gridColor,
+                },
+                ticks: {
+                    color: textColor,
+                },
+            },
+        },
     };
 
     const sortedParameterUsages = new Map([...parameterUsages.entries()].sort((a, b) => b[1] - a[1]));
diff --git a/api-editor/gui/src/features/statistics/ApiSizeStatistics.tsx b/api-editor/gui/src/features/statistics/ApiSizeStatistics.tsx
@@ -3,9 +3,9 @@ import { Box, Flex, Heading } from '@chakra-ui/react';
 import { useAppSelector } from '../../app/hooks';
 import { selectRawPythonPackage } from '../packageData/apiSlice';
 import { selectUsages } from '../usages/usageSlice';
-import { createBarChart } from './ChartWrappers';
 import { PythonPackage } from '../packageData/model/PythonPackage';
 import { UsageCountStore } from '../usages/model/UsageCountStore';
+import { CustomBarChart } from './ChartWrappers';
 
 export const ApiSizeStatistics = function () {
     const rawPythonPackage = useAppSelector(selectRawPythonPackage);
@@ -15,15 +15,15 @@ export const ApiSizeStatistics = function () {
 
     const classLabels = ['full', 'public', 'used'];
     const classValues = getClassValues(rawPythonPackage, usages, usedThreshold);
-    const classBarChart = createBarChart(classLabels, classValues, 'Classes');
+    const classBarChart = <CustomBarChart labels={classLabels} values={classValues} title="Classes" />;
 
     const functionLabels = ['full', 'public', 'used'];
     const functionValues = getFunctionValues(rawPythonPackage, usages, usedThreshold);
-    const functionBarChart = createBarChart(functionLabels, functionValues, 'Functions');
+    const functionBarChart = <CustomBarChart labels={functionLabels} values={functionValues} title="Functions" />;
 
     const parameterLabels = ['full', 'public', 'used', 'useful'];
     const parameterValues = getParameterValues(rawPythonPackage, usages, usedThreshold);
-    const parameterBarChart = createBarChart(parameterLabels, parameterValues, 'Parameters');
+    const parameterBarChart = <CustomBarChart labels={parameterLabels} values={parameterValues} title={'Parameters'} />;
 
     return (
         <>
diff --git a/api-editor/gui/src/features/statistics/ApiSizeVsUsefulnessStatistics.tsx b/api-editor/gui/src/features/statistics/ApiSizeVsUsefulnessStatistics.tsx
@@ -3,37 +3,43 @@ import { Box, Flex, Heading } from '@chakra-ui/react';
 import { useAppSelector } from '../../app/hooks';
 import { selectRawPythonPackage } from '../packageData/apiSlice';
 import { selectUsages } from '../usages/usageSlice';
-import { createLineChart } from './ChartWrappers';
+import { CustomLineChart } from './ChartWrappers';
 
 export const ApiSizeVsUsefulnessStatistics = function () {
     const rawPythonPackage = useAppSelector(selectRawPythonPackage);
     const usages = useAppSelector(selectUsages);
 
     const thresholds = [...Array(26).keys()];
     thresholds.shift();
-    const classLineChart = createLineChart(
-        usages,
-        rawPythonPackage,
-        thresholds,
-        usages.getNumberOfUsedPublicClasses,
-        'Classes',
-        'Minimum usefulness',
+    const classLineChart = (
+        <CustomLineChart
+            usages={usages}
+            pythonPackage={rawPythonPackage}
+            labels={thresholds}
+            getValue={usages.getNumberOfUsedPublicClasses}
+            title={'Classes'}
+            xAxisLabel={'Minimum usefulness'}
+        />
     );
-    const functionLineChart = createLineChart(
-        usages,
-        rawPythonPackage,
-        thresholds,
-        usages.getNumberOfUsedPublicFunctions,
-        'Functions',
-        'Minimum usefulness',
+    const functionLineChart = (
+        <CustomLineChart
+            usages={usages}
+            pythonPackage={rawPythonPackage}
+            labels={thresholds}
+            getValue={usages.getNumberOfUsedPublicFunctions}
+            title={'Functions'}
+            xAxisLabel={'Minimum usefulness'}
+        />
     );
-    const parameterLineChart = createLineChart(
-        usages,
-        rawPythonPackage,
-        thresholds,
-        usages.getNumberOfUsefulPublicParameters,
-        'Parameters',
-        'Minimum usefulness',
+    const parameterLineChart = (
+        <CustomLineChart
+            usages={usages}
+            pythonPackage={rawPythonPackage}
+            labels={thresholds}
+            getValue={usages.getNumberOfUsefulPublicParameters}
+            title={'Parameters'}
+            xAxisLabel={'Minimum usefulness'}
+        />
     );
 
     return (
diff --git a/api-editor/gui/src/features/statistics/ChartWrappers.tsx b/api-editor/gui/src/features/statistics/ChartWrappers.tsx
@@ -1,6 +1,6 @@
 import { UsageCountStore } from '../usages/model/UsageCountStore';
 import { PythonPackage } from '../packageData/model/PythonPackage';
-import React, { ReactElement } from 'react';
+import React from 'react';
 import { Bar, Line } from 'react-chartjs-2';
 import {
     ArcElement,
@@ -13,10 +13,20 @@ import {
     Title,
     Tooltip,
 } from 'chart.js';
+import { useColorModeValue } from '@chakra-ui/react';
 
 ChartJS.register(ArcElement, CategoryScale, PointElement, LineElement, LinearScale, BarElement, Title, Tooltip);
 
-export const createBarChart = function (labels: string[], values: number[], title: string): ReactElement {
+interface CustomBarChartProps {
+    labels: string[];
+    values: number[];
+    title: string;
+}
+
+export const CustomBarChart: React.FC<CustomBarChartProps> = function ({ labels, values, title }) {
+    const gridColor = useColorModeValue('#BBB', '#555');
+    const textColor = useColorModeValue('#000', '#FFF');
+
     const options = {
         indexAxis: 'y' as const,
         elements: {
@@ -32,6 +42,7 @@ export const createBarChart = function (labels: string[], values: number[], titl
             title: {
                 display: true,
                 text: title,
+                color: textColor,
             },
             tooltip: {
                 interaction: {
@@ -40,6 +51,24 @@ export const createBarChart = function (labels: string[], values: number[], titl
                 intersect: false,
             },
         },
+        scales: {
+            x: {
+                grid: {
+                    color: gridColor,
+                },
+                ticks: {
+                    color: textColor,
+                },
+            },
+            y: {
+                grid: {
+                    color: gridColor,
+                },
+                ticks: {
+                    color: textColor,
+                },
+            },
+        },
     };
 
     const dataValues = new Map();
@@ -61,14 +90,26 @@ export const createBarChart = function (labels: string[], values: number[], titl
     return <Bar options={options} data={data} />;
 };
 
-export const createLineChart = function (
-    usages: UsageCountStore,
-    pythonPackage: PythonPackage,
-    labels: number[],
-    getValue: Function,
-    title: string,
-    xAxisLabel: string,
-): ReactElement {
+interface CustomLineChartProps {
+    usages: UsageCountStore;
+    pythonPackage: PythonPackage;
+    labels: number[];
+    getValue: Function;
+    title: string;
+    xAxisLabel: string;
+}
+
+export const CustomLineChart: React.FC<CustomLineChartProps> = function ({
+    usages,
+    pythonPackage,
+    labels,
+    getValue,
+    title,
+    xAxisLabel,
+}) {
+    const gridColor = useColorModeValue('#BBB', '#555');
+    const textColor = useColorModeValue('#000', '#FFF');
+
     const options = {
         responsive: true,
         plugins: {
@@ -78,13 +119,29 @@ export const createLineChart = function (
             title: {
                 display: true,
                 text: title,
+                color: textColor,
             },
         },
         scales: {
             x: {
                 title: {
                     display: true,
                     text: xAxisLabel,
+                    color: textColor,
+                },
+                grid: {
+                    color: gridColor,
+                },
+                ticks: {
+                    color: textColor,
+                },
+            },
+            y: {
+                grid: {
+                    color: gridColor,
+                },
+                ticks: {
+                    color: textColor,
                 },
             },
         },
diff --git a/api-editor/gui/src/features/statistics/ProgressStatistics.tsx b/api-editor/gui/src/features/statistics/ProgressStatistics.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Heading, HStack } from '@chakra-ui/react';
+import { Box, Heading, HStack, useColorModeValue } from '@chakra-ui/react';
 import { useAppSelector } from '../../app/hooks';
 import { selectMatchedNodes } from '../packageData/apiSlice';
 import { selectAllAnnotationsOnTargets, selectAnnotationStore } from '../annotations/annotationSlice';
@@ -10,19 +10,27 @@ import { ArcElement, Chart as ChartJS, Title, Tooltip } from 'chart.js';
 ChartJS.register(ArcElement, Title, Tooltip);
 
 export const ProgressStatistics = function () {
+    const completeOrCorrectBg = useColorModeValue('#38a169', '#68d391');
+    const completeOrCorrectBorder = useColorModeValue('#2f855a', '#99e6b3');
+
+    const uncheckedBg = useColorModeValue('#CCC', '#888');
+    const uncheckedBorder = useColorModeValue('#AAA', '#AAA');
+
+    const textColor = useColorModeValue('#000', '#FFF');
+
     // Completion Progress
     const completed = useAppSelector(selectAnnotationStore).completes;
     const matchedNodes = useAppSelector(selectMatchedNodes);
     const numberOfMatchedNodes = matchedNodes.length;
     const numberOfCompleteMatchedNodes = matchedNodes.filter((it) => it.id in completed).length;
 
     const completionData = {
-        labels: ['Complete', 'Incomplete?'],
+        labels: ['Complete', 'Unchecked'],
         datasets: [
             {
                 data: [numberOfCompleteMatchedNodes, numberOfMatchedNodes - numberOfCompleteMatchedNodes],
-                backgroundColor: ['rgba(164,255,99,0.2)', 'rgba(162,162,162,0.2)'],
-                borderColor: ['rgba(92,154,45,0.2)', 'rgba(115,115,115,0.2)'],
+                backgroundColor: [completeOrCorrectBg, uncheckedBg],
+                borderColor: [completeOrCorrectBorder, uncheckedBorder],
                 borderWidth: 1,
             },
         ],
@@ -33,6 +41,7 @@ export const ProgressStatistics = function () {
             title: {
                 display: true,
                 text: 'Completion Progress',
+                color: textColor,
             },
         },
     };
@@ -43,12 +52,12 @@ export const ProgressStatistics = function () {
     const numberOfReviewedAnnotations = allAnnotations.filter((it) => (it.reviewers?.length ?? 0) > 0).length;
 
     const correctnessData = {
-        labels: ['Correct', 'Incorrect?'],
+        labels: ['Correct', 'Unchecked'],
         datasets: [
             {
                 data: [numberOfReviewedAnnotations, numberOfAnnotations - numberOfReviewedAnnotations],
-                backgroundColor: ['rgba(164,255,99,0.2)', 'rgba(162,162,162,0.2)'],
-                borderColor: ['rgba(92,154,45,0.2)', 'rgba(115,115,115,0.2)'],
+                backgroundColor: [completeOrCorrectBg, uncheckedBg],
+                borderColor: [completeOrCorrectBorder, uncheckedBorder],
                 borderWidth: 1,
             },
         ],
@@ -59,6 +68,7 @@ export const ProgressStatistics = function () {
             title: {
                 display: true,
                 text: 'Review Progress',
+                color: textColor,
             },
         },
     };
diff --git a/api-editor/gui/src/features/statistics/QualityStatistics.tsx b/api-editor/gui/src/features/statistics/QualityStatistics.tsx
diff --git a/api-editor/gui/src/features/statistics/StatisticsView.tsx b/api-editor/gui/src/features/statistics/StatisticsView.tsx
diff --git a/api-editor/gui/src/theme/index.d.ts b/api-editor/gui/src/theme/index.d.ts
