Merge branch 'master' into Dokumenations-Anzeige-Schoen-Machen

.gitlab-ci.yml

@@ -0,0 +1,18 @@
+image: node
+
+pages:
+  stage: deploy
+  cache:
+    paths:
+      - node_modules/
+  script:
+    - npm install
+    - npm run build
+    - rm -rf client/source
+    - cp build/index.html build/404.html
+    - mv build client/source
+  artifacts:
+    paths:
+      - client/source
+  only:
+    - master

client/src/Components/App/App.css

@@ -26,3 +26,7 @@
   height: 40vmin;
   pointer-events: none;
 }
+
+.class-node:hover, .function-node:hover, .module-node:hover {
+  cursor: pointer;
+}

client/src/Components/App/App.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React from 'react';
 import './App.css';
 import ParameterView from "../ParameterView/ParameterView";
 import TreeView from "../TreeView/TreeView";
@@ -8,7 +8,6 @@ function App() {
 
     return (
         <div className="App">
-
             <TreeView setParameters={setParameters}/>
             <ParameterView inputParameters={parameters}/>
         </div>

client/src/Components/Tree/ClassNode.tsx

@@ -0,0 +1,63 @@
+import React, {useState} from "react";
+import PythonClass from "../../model/PythonClass";
+import classNames from "classnames";
+import FunctionNode from "./FunctionNode";
+import {isEmptyList} from "../../Utility/listOperations";
+
+type ClassNodeProps = {
+    pythonClass: PythonClass,
+    selection: string,
+    setSelection: (newValue: string) => void,
+    moduleName: string
+}
+
+const ClassNode = ({pythonClass, selection, setSelection, moduleName}: ClassNodeProps) => {
+    const [childVisible, setChildVisibility] = useState(false);
+
+    const hasMethods = isEmptyList(pythonClass.methods);
+
+    const fullQualifiedName = moduleName + "." + pythonClass.name;
+
+    const cssClasses = classNames(
+        "pl-3rem", "tree-view-row",
+        {
+            "selected": selection === fullQualifiedName,
+        }
+    );
+
+    return (
+        <div className="class-node">
+            <div className={cssClasses}
+                 onClick={() => {
+                     setSelection(fullQualifiedName)
+                     setChildVisibility(!childVisible);
+                     console.log(pythonClass.name + " has been selected.");
+                 }}>
+                { hasMethods && <span className="indicator visibility-indicator">{ childVisible ? "▼" : "▶" }</span>}
+                <span className="indicator">
+                    𝒞
+                </span>
+                { " " }
+                <span>
+                    {pythonClass.name}
+                </span>
+            </div>
+            {
+                hasMethods && childVisible &&
+                <>
+                    {pythonClass.methods.map(method => (
+                        <FunctionNode parentFullQualifiedName={fullQualifiedName}
+                                      key={method.name}
+                                      pythonFunction={method}
+                                      selection={selection}
+                                      setSelection={setSelection}
+                                      isMethod={true}
+                        />
+                    ))}
+                </>
+            }
+        </div>
+    )
+};
+
+export default ClassNode;

client/src/Components/Tree/FunctionNode.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import PythonFunction from "../../model/PythonFunction";
+import classNames from "classnames";
+
+type FunctionNodeProps = {
+    pythonFunction: PythonFunction,
+    selection: string,
+    setSelection: (newValue: string) => void,
+    isMethod?: boolean,
+    /** A parent of a Python class can be a class or a Python module. */
+    parentFullQualifiedName: string
+}
+
+const FunctionNode = ({pythonFunction, selection, setSelection, parentFullQualifiedName, isMethod=false}:FunctionNodeProps) => {
+
+    const fullQualifiedName = parentFullQualifiedName + "." + pythonFunction.name;
+
+    const cssClasses = classNames(
+        "tree-view-row",
+        {
+            "pl-3-5rem": !isMethod,
+            "pl-5rem": isMethod,
+            "selected": selection === fullQualifiedName,
+        }
+    );
+
+    return (
+        <div className="function-node">
+            <div className={cssClasses}
+                 onClick={() => {
+                     setSelection(fullQualifiedName);
+                     console.log(fullQualifiedName + " has been selected.");
+                     console.log(pythonFunction.parameters);
+                 }}>
+                <span className="indicator">
+                    𝑓
+                </span>
+                { " " }
+                <span>
+                    {pythonFunction.name}
+                </span>
+            </div>
+        </div>
+    );
+};
+
+export default FunctionNode;

client/src/Components/Tree/ModuleNode.tsx

@@ -0,0 +1,79 @@
+import React, {useState} from "react";
+import ClassNode from "./ClassNode";
+import FunctionNode from "./FunctionNode";
+import {isEmptyList} from "../../Utility/listOperations";
+import classNames from "classnames";
+import PythonModule from "../../model/PythonModule";
+
+type ModuleNodeProps = {
+    pythonModule: PythonModule,
+    selection: string,
+    setSelection: (newValue: string) => void,
+}
+
+const ModuleNode = ({pythonModule, selection, setSelection}: ModuleNodeProps) => {
+    const [childVisible, setChildVisibility] = useState(false);
+
+    let hasClasses = isEmptyList(pythonModule.classes);
+    let hasFunctions = isEmptyList(pythonModule.functions);
+
+    const cssClasses = classNames(
+        "tree-view-row",
+        {
+            "pl-2rem": !(hasClasses || hasFunctions),
+            "pl-1-5rem": (hasClasses || hasFunctions),
+            "selected": selection === pythonModule.name,
+        }
+    );
+
+         return (
+        <div className="module-node">
+            <div className={cssClasses}
+                onClick={() => {
+                     setSelection(pythonModule.name)
+                    setChildVisibility(!childVisible)
+                    console.log(pythonModule.name + " has been selected.");
+                 }}>
+                { (hasClasses || hasFunctions) &&
+                    <span className="indicator visibility-indicator">{ childVisible ? "▼" : "▶" }</span>
+                }
+                <span className="indicator">
+                    □
+                </span>
+                { " " }
+                <span>
+                    { pythonModule.name }
+                </span>
+            </div>
+            <div>
+                {
+                    hasClasses && childVisible &&
+                        <div>
+                            {pythonModule.classes.map(moduleClass => (
+                                <ClassNode key={moduleClass.name}
+                                           pythonClass={moduleClass}
+                                           selection={selection}
+                                           setSelection={setSelection}
+                                           moduleName={pythonModule.name}
+                                />
+                            ))}
+                        </div>
+                }
+                {
+                    hasFunctions && childVisible &&
+                    <div>
+                        {pythonModule.functions.map(moduleFunction => (
+                            <FunctionNode parentFullQualifiedName={pythonModule.name}
+                                          key={moduleFunction.name}
+                                          pythonFunction={moduleFunction}
+                                          selection={selection}
+                                          setSelection={setSelection}/>
+                        ))}
+                    </div>
+                }
+            </div>
+        </div>
+    )
+};
+
+export default ModuleNode;

client/src/Components/Tree/Tree.tsx

@@ -0,0 +1,25 @@
+import React, {useState} from 'react'
+import ModuleNode from "./ModuleNode";
+import PythonPackage from "../../model/PythonPackage";
+
+type TreeProps = {
+    pythonPackage: PythonPackage,
+}
+
+const Tree = ({pythonPackage}: TreeProps) => {
+
+    const [selection, setSelection ] = useState("");
+
+    return (
+        <div className="tree">
+            {pythonPackage.modules.map(module => (
+                <ModuleNode key={module.name}
+                            pythonModule={module}
+                            selection={selection}
+                            setSelection={setSelection}/>
+            ))}
+        </div>
+    );
+}
+
+export default Tree;