From 1f79af659a9c6a602bfb44ea1cbd0d8508f5f3f8 Mon Sep 17 00:00:00 2001 From: Lars Reimann Date: Tue, 21 Jun 2022 17:45:16 +0200 Subject: [PATCH 1/9] feat(gui): reorder sections in statistics view --- .../selectionView/StatisticsView.tsx | 61 ++++++++++--------- 1 file changed, 32 insertions(+), 29 deletions(-) diff --git a/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx b/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx index e7eca57bc..2013ff116 100644 --- a/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx +++ b/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx @@ -101,35 +101,6 @@ export const StatisticsView: React.FC = function () { return ( - - Statistics - - - - - {classBarChart} - - - {functionBarChart} - - - {parameterBarChart} - - - - - - - {classLineChart} - - - {functionLineChart} - - - {parameterLineChart} - - - Annotations @@ -189,6 +160,38 @@ export const StatisticsView: React.FC = function () { + + API Size + + + + + {classBarChart} + + + {functionBarChart} + + + {parameterBarChart} + + + + + API Size per Usefulness Threshold + + + + + {classLineChart} + + + {functionLineChart} + + + {parameterLineChart} + + + ); }; From ee1449b1f5faf902292f055f134ea9e1e6cacf5b Mon Sep 17 00:00:00 2001 From: Lars Reimann Date: Tue, 21 Jun 2022 18:01:21 +0200 Subject: [PATCH 2/9] feat(gui): improve labels --- .../selectionView/StatisticsView.tsx | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx b/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx index 2013ff116..cbbfff6df 100644 --- a/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx +++ b/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx @@ -64,21 +64,24 @@ export const StatisticsView: React.FC = function () { rawPythonPackage, thresholds, usages.getNumberOfUsedPublicClasses, - 'Classes per Threshold', + 'Classes', + 'Minimum usefulness', ); const functionLineChart = createLineChart( usages, rawPythonPackage, thresholds, usages.getNumberOfUsedPublicFunctions, - 'Functions per Threshold', + 'Functions', + 'Minimum usefulness', ); const parameterLineChart = createLineChart( usages, rawPythonPackage, thresholds, usages.getNumberOfUsefulPublicParameters, - 'Parameters per Threshold', + 'Parameters', + 'Minimum usefulness', ); const filterAction = (annotation: string) => { @@ -160,7 +163,7 @@ export const StatisticsView: React.FC = function () { - + API Size @@ -177,7 +180,7 @@ export const StatisticsView: React.FC = function () { - API Size per Usefulness Threshold + API Size per Minimum Usefulness Threshold @@ -275,6 +278,7 @@ let createLineChart = function ( labels: number[], getValue: Function, title: string, + xAxisLabel: string, ): ReactElement { const options = { responsive: true, @@ -287,6 +291,14 @@ let createLineChart = function ( text: title, }, }, + scales: { + x: { + title: { + display: true, + text: xAxisLabel, + }, + }, + }, }; const dataValues = new Map(); @@ -301,6 +313,7 @@ let createLineChart = function ( data: labels.map((key) => dataValues.get(key)), borderColor: 'rgb(255, 99, 132)', backgroundColor: 'rgba(255, 99, 132, 0.5)', + // xAxisID: 'x' }, ], }; From b0a40c9a1e32b74e1c02a5c23c26c018e87c648e Mon Sep 17 00:00:00 2001 From: Lars Reimann Date: Tue, 21 Jun 2022 18:21:11 +0200 Subject: [PATCH 3/9] feat(gui): statistics always visible --- api-editor/gui/src/app/App.tsx | 29 +++++++++++++++---- .../selectionView/SelectionView.tsx | 10 ------- 2 files changed, 23 insertions(+), 16 deletions(-) diff --git a/api-editor/gui/src/app/App.tsx b/api-editor/gui/src/app/App.tsx index 118d2628a..28c48cb6d 100644 --- a/api-editor/gui/src/app/App.tsx +++ b/api-editor/gui/src/app/App.tsx @@ -69,6 +69,7 @@ import { AbstractPythonFilter } from '../features/filter/model/AbstractPythonFil import { UsageCountStore } from '../features/usages/model/UsageCountStore'; import { PythonDeclaration } from '../features/packageData/model/PythonDeclaration'; import { SaveFilterDialog } from '../features/filter/SaveFilterDialog'; +import { StatisticsView } from '../features/packageData/selectionView/StatisticsView'; export const App: React.FC = function () { useIndexedDB(); @@ -93,17 +94,17 @@ export const App: React.FC = function () { const showUsagesImportDialog = useAppSelector(selectShowUsageImportDialog); const batchMode = useAppSelector(selectBatchMode); const showAddFilterDialog = useAppSelector(selectShowAddFilterDialog); - + return ( <> - + } - + {batchMode === BatchMode.None && } @@ -196,7 +197,23 @@ export const App: React.FC = function () { )} - + + {/*{location === '/statistics-view' && (*/} + + + + {/*)}*/} + + {currentUserAction.type === 'none' && } diff --git a/api-editor/gui/src/features/packageData/selectionView/SelectionView.tsx b/api-editor/gui/src/features/packageData/selectionView/SelectionView.tsx index 3d6dcc489..5336902ac 100644 --- a/api-editor/gui/src/features/packageData/selectionView/SelectionView.tsx +++ b/api-editor/gui/src/features/packageData/selectionView/SelectionView.tsx @@ -11,20 +11,10 @@ import { ModuleView } from './ModuleView'; import { ParameterView } from './ParameterView'; import { useAppSelector } from '../../../app/hooks'; import { selectRawPythonPackage } from '../apiSlice'; -import { StatisticsView } from './StatisticsView'; export const SelectionView: React.FC = function () { const rawPythonPackage = useAppSelector(selectRawPythonPackage); const declaration = rawPythonPackage.getDeclarationById(useLocation().pathname.split('/').splice(1).join('/')); - const location = useLocation().pathname; - - if (location === '/statistics-view') { - return ( - - - - ); - } if (!declaration) { return null; From c5e452606affa221b67ebdc46f04ec17dae57130 Mon Sep 17 00:00:00 2001 From: Lars Reimann Date: Tue, 21 Jun 2022 18:24:55 +0200 Subject: [PATCH 4/9] feat(gui): adjust width of left pane --- api-editor/gui/src/app/App.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/api-editor/gui/src/app/App.tsx b/api-editor/gui/src/app/App.tsx index 28c48cb6d..3bbb684f0 100644 --- a/api-editor/gui/src/app/App.tsx +++ b/api-editor/gui/src/app/App.tsx @@ -94,7 +94,7 @@ export const App: React.FC = function () { const showUsagesImportDialog = useAppSelector(selectShowUsageImportDialog); const batchMode = useAppSelector(selectBatchMode); const showAddFilterDialog = useAppSelector(selectShowAddFilterDialog); - + return ( <> Date: Tue, 21 Jun 2022 18:41:00 +0200 Subject: [PATCH 5/9] feat(gui): make statistics view toggleable again --- api-editor/gui/src/app/App.tsx | 26 ++++++++-------- api-editor/gui/src/common/MenuBar.tsx | 36 +++++++++++++---------- api-editor/gui/src/features/ui/uiSlice.ts | 7 +++++ 3 files changed, 41 insertions(+), 28 deletions(-) diff --git a/api-editor/gui/src/app/App.tsx b/api-editor/gui/src/app/App.tsx index 3bbb684f0..5ee2b1598 100644 --- a/api-editor/gui/src/app/App.tsx +++ b/api-editor/gui/src/app/App.tsx @@ -51,6 +51,7 @@ import { selectShowUsageImportDialog, selectUI, selectShowAddFilterDialog, + selectShowStatistics, } from '../features/ui/uiSlice'; import { initializeUsages, persistUsages, selectUsages } from '../features/usages/usageSlice'; import { initializePythonPackage, selectRawPythonPackage } from '../features/packageData/apiSlice'; @@ -94,6 +95,7 @@ export const App: React.FC = function () { const showUsagesImportDialog = useAppSelector(selectShowUsageImportDialog); const batchMode = useAppSelector(selectBatchMode); const showAddFilterDialog = useAppSelector(selectShowAddFilterDialog); + const showStatistics = useAppSelector(selectShowStatistics); return ( <> @@ -197,22 +199,20 @@ export const App: React.FC = function () { )} - - {/*{location === '/statistics-view' && (*/} + {showStatistics && ( + - {/*)}*/} - + + )} {currentUserAction.type === 'none' && } diff --git a/api-editor/gui/src/common/MenuBar.tsx b/api-editor/gui/src/common/MenuBar.tsx index af6dd5a6e..a35ee8592 100644 --- a/api-editor/gui/src/common/MenuBar.tsx +++ b/api-editor/gui/src/common/MenuBar.tsx @@ -23,6 +23,7 @@ import { BatchMode, HeatMapMode, selectHeatMapMode, + selectShowStatistics, selectSortingMode, setBatchMode, setHeatMapMode, @@ -30,11 +31,11 @@ import { SortingMode, toggleAnnotationImportDialog, toggleAPIImportDialog, + toggleStatisticsView, toggleUsageImportDialog, } from '../features/ui/uiSlice'; import { DeleteAllAnnotations } from './DeleteAllAnnotations'; import { GenerateAdapters } from './GenerateAdapters'; -import { useNavigate } from 'react-router-dom'; import { FilterControls } from '../features/filter/FilterControls'; interface MenuBarProps { @@ -44,11 +45,11 @@ interface MenuBarProps { export const MenuBar: React.FC = function ({ displayInferErrors }) { const { colorMode, toggleColorMode } = useColorMode(); const dispatch = useAppDispatch(); - const navigate = useNavigate(); const annotationStore = useAppSelector(selectAnnotationStore); const sortingMode = useAppSelector(selectSortingMode); const heatMapMode = useAppSelector(selectHeatMapMode); + const showStatistics = useAppSelector(selectShowStatistics); const exportAnnotations = () => { const a = document.createElement('a'); @@ -60,13 +61,12 @@ export const MenuBar: React.FC = function ({ displayInferErrors }) a.click(); }; - const setStatisticsViewPath = () => { - navigate(`/statistics-view`); - }; - - const colorModeArray: string[] = []; + const visualSettings: string[] = []; if (colorMode === 'dark') { - colorModeArray.push('darkMode'); + visualSettings.push('darkMode'); + } + if (showStatistics) { + visualSettings.push('statistics'); } return ( @@ -133,19 +133,25 @@ export const MenuBar: React.FC = function ({ displayInferErrors }) - - }> Settings - - - Dark Mode - - + + + + Dark Mode + + dispatch(toggleStatisticsView())} + > + Show Statistics + + + ) { state.batchMode = action.payload; }, + toggleStatisticsView(state) { + state.showStatistics = !state.showStatistics; + } }, extraReducers(builder) { builder.addCase(initializeUI.fulfilled, (state, action) => action.payload); @@ -371,6 +376,7 @@ export const { removeFilter, setSortingMode, setBatchMode, + toggleStatisticsView, } = actions; export const uiReducer = reducer; @@ -406,3 +412,4 @@ export const selectFilter = createSelector( ); export const selectSortingMode = (state: RootState): SortingMode => selectUI(state).sortingMode; export const selectBatchMode = (state: RootState): BatchMode => selectUI(state).batchMode; +export const selectShowStatistics = (state: RootState): boolean => selectUI(state).showStatistics; From 9775c5c504c98539b63e2461ecd2b400f0ae40c5 Mon Sep 17 00:00:00 2001 From: Lars Reimann Date: Tue, 21 Jun 2022 18:53:01 +0200 Subject: [PATCH 6/9] feat(gui): cleaner annotation statistics --- .../selectionView/StatisticsView.tsx | 80 ++++++------------- 1 file changed, 23 insertions(+), 57 deletions(-) diff --git a/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx b/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx index cbbfff6df..03f7c88d3 100644 --- a/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx +++ b/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx @@ -12,7 +12,7 @@ import { import { Bar, Line } from 'react-chartjs-2'; import { PythonPackage } from '../model/PythonPackage'; import { UsageCountStore } from '../../usages/model/UsageCountStore'; -import { Box, Flex, Button, Heading, VStack, Wrap, WrapItem } from '@chakra-ui/react'; +import { Box, Button, Flex, Heading, SimpleGrid, VStack } from '@chakra-ui/react'; import { selectAnnotationStore } from '../../annotations/annotationSlice'; import { useAppDispatch, useAppSelector } from '../../../app/hooks'; import { selectFilterString, setFilterString } from '../../ui/uiSlice'; @@ -107,62 +107,28 @@ export const StatisticsView: React.FC = function () { Annotations - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + API Size From eb31b1686fde10da1a157fe40f526475b6802fbb Mon Sep 17 00:00:00 2001 From: lars-reimann Date: Tue, 21 Jun 2022 16:59:36 +0000 Subject: [PATCH 7/9] style: apply automatic fixes of linters --- api-editor/gui/src/features/ui/uiSlice.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/api-editor/gui/src/features/ui/uiSlice.ts b/api-editor/gui/src/features/ui/uiSlice.ts index b1e0d46a7..eeaca0000 100644 --- a/api-editor/gui/src/features/ui/uiSlice.ts +++ b/api-editor/gui/src/features/ui/uiSlice.ts @@ -334,7 +334,7 @@ const uiSlice = createSlice({ }, toggleStatisticsView(state) { state.showStatistics = !state.showStatistics; - } + }, }, extraReducers(builder) { builder.addCase(initializeUI.fulfilled, (state, action) => action.payload); From bfa3814e05bd3f0f3401204f6e108ff9cf350880 Mon Sep 17 00:00:00 2001 From: Lars Reimann Date: Tue, 21 Jun 2022 19:02:17 +0200 Subject: [PATCH 8/9] style(gui): remove commented out code --- .../src/features/packageData/selectionView/StatisticsView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx b/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx index 03f7c88d3..dd9bbd16b 100644 --- a/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx +++ b/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx @@ -279,7 +279,6 @@ let createLineChart = function ( data: labels.map((key) => dataValues.get(key)), borderColor: 'rgb(255, 99, 132)', backgroundColor: 'rgba(255, 99, 132, 0.5)', - // xAxisID: 'x' }, ], }; From 61783126bb388d09ec856fde4a699d14d223c8a1 Mon Sep 17 00:00:00 2001 From: Lars Reimann Date: Tue, 21 Jun 2022 19:06:29 +0200 Subject: [PATCH 9/9] feat(gui): consistent spacing --- .../src/features/packageData/selectionView/StatisticsView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx b/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx index dd9bbd16b..1bf5dde4f 100644 --- a/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx +++ b/api-editor/gui/src/features/packageData/selectionView/StatisticsView.tsx @@ -103,11 +103,11 @@ export const StatisticsView: React.FC = function () { }; return ( - + Annotations - +