From db107261dc84164ed721b94a41232b440433354c Mon Sep 17 00:00:00 2001
From: nvollroth <100927440+nvollroth@users.noreply.github.com>
Date: Fri, 8 Jul 2022 11:07:36 +0200
Subject: [PATCH 1/3] Added the count of Usages to Selection View

---
 .../selectionView/ParameterView.tsx           | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/api-editor/gui/src/features/packageData/selectionView/ParameterView.tsx b/api-editor/gui/src/features/packageData/selectionView/ParameterView.tsx
index 156fddf31..b7f7e1a29 100644
--- 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, useColorModeValue } from '@chakra-ui/react';
+import {Box, ComponentWithAs, Heading, Stack, Text as ChakraText, TextProps, useColorModeValue} from '@chakra-ui/react';
 import React from 'react';
 import { PythonParameter } from '../model/PythonParameter';
 import { ParameterNode } from './ParameterNode';
@@ -48,6 +48,15 @@ export const ParameterView: React.FC<ParameterViewProps> = function ({ pythonPar
                 </Stack>
             )}
 
+            {parameterUsages && (
+                <Stack spacing={4}>
+                    <Heading as="h4" size="md">
+                        Usages
+                    </Heading>
+                    <UsageSum parameterUsages={parameterUsages}/>
+                </Stack>
+            )}
+
             {parameterUsages && (
                 <Stack spacing={4}>
                     <Heading as="h4" size="md">
@@ -66,6 +75,7 @@ interface CustomBarChartProps {
     parameterUsages: Map<string, number>;
 }
 
+
 const CustomBarChart: React.FC<CustomBarChartProps> = function ({ parameterUsages }) {
     const gridColor = useColorModeValue('#BBB', '#555');
     const textColor = useColorModeValue('#000', '#FFF');
@@ -141,3 +151,13 @@ const isStringifiedLiteral = function (value: string): boolean {
     }
     return !Number.isNaN(Number.parseFloat(value));
 };
+
+const UsageSum: React.FC<CustomBarChartProps>  = function ({ parameterUsages }) {
+    let usage = 0;
+
+    parameterUsages.forEach(value => {
+        usage += value;
+    })
+
+    return <ChakraText paddingLeft={4}>{usage}</ChakraText>
+}

From 29b1e34d6961eea04818624837357eb006ad4f33 Mon Sep 17 00:00:00 2001
From: nvollroth <100927440+nvollroth@users.noreply.github.com>
Date: Fri, 8 Jul 2022 11:09:21 +0200
Subject: [PATCH 2/3] Removed unused imports

---
 .../src/features/packageData/selectionView/ParameterView.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api-editor/gui/src/features/packageData/selectionView/ParameterView.tsx b/api-editor/gui/src/features/packageData/selectionView/ParameterView.tsx
index b7f7e1a29..712407fb9 100644
--- 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, ComponentWithAs, Heading, Stack, Text as ChakraText, TextProps, useColorModeValue} 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';

From 204e6a815d655287ee9938ae867cfe2d401fc9cb Mon Sep 17 00:00:00 2001
From: nvollroth <nvollroth@users.noreply.github.com>
Date: Fri, 8 Jul 2022 09:17:11 +0000
Subject: [PATCH 3/3] style: apply automatic fixes of linters

---
 .../packageData/selectionView/ParameterView.tsx   | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/api-editor/gui/src/features/packageData/selectionView/ParameterView.tsx b/api-editor/gui/src/features/packageData/selectionView/ParameterView.tsx
index 712407fb9..5f1d8cd79 100644
--- 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, useColorModeValue} 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';
@@ -53,7 +53,7 @@ export const ParameterView: React.FC<ParameterViewProps> = function ({ pythonPar
                     <Heading as="h4" size="md">
                         Usages
                     </Heading>
-                    <UsageSum parameterUsages={parameterUsages}/>
+                    <UsageSum parameterUsages={parameterUsages} />
                 </Stack>
             )}
 
@@ -75,7 +75,6 @@ interface CustomBarChartProps {
     parameterUsages: Map<string, number>;
 }
 
-
 const CustomBarChart: React.FC<CustomBarChartProps> = function ({ parameterUsages }) {
     const gridColor = useColorModeValue('#BBB', '#555');
     const textColor = useColorModeValue('#000', '#FFF');
@@ -152,12 +151,12 @@ const isStringifiedLiteral = function (value: string): boolean {
     return !Number.isNaN(Number.parseFloat(value));
 };
 
-const UsageSum: React.FC<CustomBarChartProps>  = function ({ parameterUsages }) {
+const UsageSum: React.FC<CustomBarChartProps> = function ({ parameterUsages }) {
     let usage = 0;
 
-    parameterUsages.forEach(value => {
+    parameterUsages.forEach((value) => {
         usage += value;
-    })
+    });
 
-    return <ChakraText paddingLeft={4}>{usage}</ChakraText>
-}
+    return <ChakraText paddingLeft={4}>{usage}</ChakraText>;
+};