feat(gui): show default value from code and documentation in selection view (#947)

* The default value of the code and the default value of the documentation will be showed, now.

* style: apply automatic fixes of linters

* Missing values are replaced by their corresponding messages.

* style: apply automatic fixes of linters

* fix(gui): clone method of parameter

* fix(gui): merge two paragraphs

Co-authored-by: Lars Reimann <[email protected]>
Co-authored-by: lars-reimann <[email protected]>
Co-authored-by: nvollroth <[email protected]>

Author: nvollroth

api-editor/gui/src/features/packageData/model/APIJsonData.ts

@@ -68,6 +68,7 @@ export interface PythonParameterJson {
     docstring: {
         type: Optional<string>;
         description: Optional<string>;
+        default_value: Optional<string>;
     };
     type: object; // TODO parse type
 }

api-editor/gui/src/features/packageData/model/PythonPackageBuilder.ts

@@ -159,6 +159,7 @@ const parsePythonParameterJson = function (
         parameterJson.docstring.type ?? '',
         parameterJson.docstring.description ?? '',
         parameterJson.type,
+        parameterJson.docstring.default_value ?? '',
     );
     idToDeclaration.set(parameterJson.id, result);
     return result;

api-editor/gui/src/features/packageData/model/PythonParameter.ts

@@ -29,6 +29,7 @@ export class PythonParameter extends PythonDeclaration {
         readonly typeInDocs: string = '',
         readonly description: string = '',
         readonly type: object = {},
+        readonly defaultValueInDocs: Optional<string> = null,
     ) {
         super();
 
@@ -85,6 +86,7 @@ export class PythonParameter extends PythonDeclaration {
             docstring: {
                 type: this.typeInDocs,
                 description: this.description,
+                default_value: this.defaultValueInDocs,
             },
             type: this.type,
         };
@@ -100,6 +102,8 @@ export class PythonParameter extends PythonDeclaration {
             this.isPublic,
             this.typeInDocs,
             this.description,
+            this.type,
+            this.defaultValueInDocs,
         );
         result.containingFunction = this.containingFunction;
         return result;

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, HStack, Stack, Text as ChakraText, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 import { PythonParameter } from '../model/PythonParameter';
 import { ParameterNode } from './ParameterNode';
@@ -39,12 +39,36 @@ export const ParameterView: React.FC<ParameterViewProps> = function ({ pythonPar
                 </Stack>
             )}
 
-            {pythonParameter.defaultValue && (
+            {pythonParameter && (
                 <Stack spacing={4}>
                     <Heading as="h4" size="md">
                         Default Value
                     </Heading>
-                    <ChakraText paddingLeft={4}>{pythonParameter.defaultValue}</ChakraText>
+
+                    {pythonParameter.defaultValue ? (
+                        <Stack>
+                            <ChakraText paddingLeft={4}>Code: {pythonParameter.defaultValue}</ChakraText>
+
+                            {pythonParameter.defaultValueInDocs ? (
+                                <ChakraText paddingLeft={4}>
+                                    Documentation: {pythonParameter.defaultValueInDocs}
+                                </ChakraText>
+                            ) : (
+                                <HStack>
+                                    <ChakraText paddingLeft={4}>
+                                        Documentation:{' '}
+                                        <Box as="span" color="gray.500">
+                                            The documentation does not specify a default value.
+                                        </Box>
+                                    </ChakraText>
+                                </HStack>
+                            )}
+                        </Stack>
+                    ) : (
+                        <ChakraText paddingLeft={4} color="gray.500">
+                            The parameter is required.
+                        </ChakraText>
+                    )}
                 </Stack>
             )}
 
@@ -126,12 +150,8 @@ const CustomBarChart: React.FC<CustomBarChartProps> = function ({ parameterUsage
         datasets: [
             {
                 data: labels.map((key) => sortedParameterUsages.get(key)),
-                borderColor: labels.map((key) =>
-                    isStringifiedLiteral(key) ? 'rgba(137, 87, 229, 1)' : 'rgba(136, 136, 136, 1)',
-                ),
-                backgroundColor: labels.map((key) =>
-                    isStringifiedLiteral(key) ? 'rgba(137, 87, 229, 0.2)' : 'rgba(136, 136, 136, 0.2)',
-                ),
+                borderColor: labels.map((key) => (isStringifiedLiteral(key) ? '#871F78' : '#888888')),
+                backgroundColor: labels.map((key) => (isStringifiedLiteral(key) ? '#871F78' : '#888888')),
             },
         ],
     };