Merge pull request #49 from lars-reimann/Pfad_in_Parameteransicht_anz…

…eigen Pfad in parameteransicht anzeigen
Safe-DS · Jun 18, 2021 · 4ee9cdb · 4ee9cdb
2 parents a0d5986 + 2a5b5be
commit 4ee9cdb
Show file tree

Hide file tree

Showing 10 changed files with 137 additions and 111 deletions.
diff --git a/client/src/Components/App/App.tsx b/client/src/Components/App/App.tsx
@@ -4,13 +4,18 @@ import ParameterView from "../ParameterView/ParameterView";
 import TreeView from "../TreeView/TreeView";
 
 function App() {
+
     const [parameters, setParameters] = useState([]);
+    const [selection, setSelection ] = useState([]);
 
     return (
         <div className="App">
-
-            <TreeView setParameters={setParameters}/>
-            <ParameterView inputParameters={parameters}/>
+            <TreeView setParameters = { setParameters }
+                      selection = { selection }
+                      setSelection = { setSelection }/>
+            <ParameterView inputParameters = { parameters }
+                           selection = { selection }
+                           setSelection = { setSelection }/>
         </div>
     );
 }

diff --git a/client/src/Components/ParameterView/ParameterView.css b/client/src/Components/ParameterView/ParameterView.css
@@ -1,18 +1,16 @@
-.parameterViewDiv{
+.parameter-view {
+    padding: 1rem;
     position: -webkit-sticky;
     position: sticky;
     top: 0;
-    padding-right: 1rem;
 }
 
 .parameterViewDiv h2{
     padding-top: 1rem;
-    padding-left: 1rem;
 }
 
 .parameterViewDiv h5{
     padding-top: 1rem;
-    padding-left: 1rem;
 }
 
 .parameterViewDiv a{
@@ -58,3 +56,7 @@
 .documentation-text {
     clear: both;
 }
+
+.parameter-view-path {
+    height: 1.5rem;
+}
diff --git a/client/src/Components/ParameterView/ParameterView.tsx b/client/src/Components/ParameterView/ParameterView.tsx
@@ -2,14 +2,25 @@ import ParameterNode from "./ParameterNode";
 import React from "react";
 import PythonParameter from "../../model/PythonParameter";
 
-type ParameterViewProps = {inputParameters: PythonParameter[]}
+type ParameterViewProps = {
+    inputParameters: PythonParameter[],
+    selection: string[],
+    setSelection: any
+};
 
-const ParameterView = ({inputParameters}: ParameterViewProps) => {
+const ParameterView = ({inputParameters, selection, setSelection }: ParameterViewProps) => {
 
     const hasInputParameters = inputParameters.length > 0;
+    console.log(selection);
 
     return (
-        <div className="parameterViewDiv">
+        <div className="parameter-view">
+            <div className="parameter-view-path" >
+                { selection.length > 0 ?
+                    selection.map<React.ReactNode>(n => <a href="#">{n}</a>)
+                             .reduce((p, c) => [p, (<span> / </span>), c]) :
+                    "" }
+            </div>
             <h2 className={"parameter-title"}>Parameters</h2>
             {
                 inputParameters?.map(function (parameters) {
@@ -18,7 +29,7 @@ const ParameterView = ({inputParameters}: ParameterViewProps) => {
             }
             {
                 !hasInputParameters &&
-                    <h5>No Parameters available</h5>
+                    <span>There are no Parameters.</span>
             }
 
         </div>

diff --git a/client/src/Components/Tree/ClassNode.tsx b/client/src/Components/Tree/ClassNode.tsx
@@ -5,63 +5,53 @@ import FunctionNode from "./FunctionNode";
 import {isEmptyList} from "../../Utility/listOperations";
 
 type ClassNodeProps = {
+    parentPath: string[],
     pythonClass: PythonClass,
-    selection: string,
-    setSelection: (newValue: string) => void,
+    selection: string[],
+    setSelection: (newValue: string[]) => void,
     moduleName: string,
     setParameters: any,
 }
 
-const ClassNode = ({pythonClass, selection, setSelection, moduleName, setParameters}: ClassNodeProps) => {
-    const [childVisible, setChildVisibility] = useState(false);
+const ClassNode = ({parentPath, pythonClass, selection, setSelection, moduleName, setParameters}: ClassNodeProps) => {
 
+    const [childVisible, setChildVisibility] = useState(false);
     const hasMethods = isEmptyList(pythonClass.methods);
-
-    const fullQualifiedName = moduleName + "." + pythonClass.name;
-
+    const path = parentPath.concat(pythonClass.name);
     const cssClasses = classNames(
         "pl-3rem", "tree-view-row",
         {
             "text-muted": !hasMethods,
             "cursor-na":!hasMethods,
-            "selected": selection === fullQualifiedName,
+            "selected": (selection.join() === path.join()) && hasMethods,
         }
     );
 
     return (
         <div className="class-node">
             <div className={cssClasses}
                  onClick={() => {
-                     setSelection(fullQualifiedName)
+                     setSelection(path);
                      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>
+                 { 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}
-                                      setParameters={setParameters}
-                        />
-                    ))}
-                </>
-            }
+            { hasMethods && childVisible && <div>
+                { pythonClass.methods.map(method => (
+                    <FunctionNode parentPath={ path }
+                                  key = { method.name }
+                                  pythonFunction = { method }
+                                  selection = { selection }
+                                  setSelection = { setSelection }
+                                  isMethod = { true }
+                                  setParameters = { setParameters } />
+                ))}
+            </div> }
         </div>
-    )
+    );
 };
 
 export default ClassNode;
diff --git a/client/src/Components/Tree/FunctionNode.tsx b/client/src/Components/Tree/FunctionNode.tsx
@@ -5,38 +5,36 @@ import {isEmptyList} from "../../Utility/listOperations";
 
 type FunctionNodeProps = {
     pythonFunction: PythonFunction,
-    selection: string,
-    setSelection: (newValue: string) => void,
+    selection: string[],
+    setSelection: (newValue: string[]) => void,
     setParameters: any,
     isMethod?: boolean,
+
     /** A parent of a Python class can be a class or a Python module. */
-    parentFullQualifiedName: string,
+    parentPath: string[],
 }
 
-const FunctionNode = ({pythonFunction, selection, setSelection, setParameters, parentFullQualifiedName, isMethod=false}:FunctionNodeProps) => {
-
-    const fullQualifiedName = parentFullQualifiedName + "." + pythonFunction.name;
+const FunctionNode = ({pythonFunction, selection, setSelection, setParameters, parentPath, isMethod = false} : FunctionNodeProps) => {
 
+    const path = parentPath.concat(pythonFunction.name)
     const hasParameters = isEmptyList(pythonFunction.parameters);
-
     const cssClasses = classNames(
-        "tree-view-row",
-        {
+        "tree-view-row", {
             "text-muted": !hasParameters,
             "cursor-na": !hasParameters,
             "pl-3-5rem": !isMethod,
             "pl-5rem": isMethod,
-            "selected": selection === fullQualifiedName && hasParameters,
+            "selected": (selection.join() === path.join()) && hasParameters
         }
     );
 
     return (
         <div className="function-node">
-            <div className={cssClasses}
-                 onClick={() => {
-                     setSelection(fullQualifiedName);
-                     setParameters(pythonFunction.parameters)
-                 }}>
+            <div className = { cssClasses }
+                onClick = {() => {
+                    setSelection(path);
+                    setParameters(pythonFunction.parameters)
+                }}>
                 <span className="indicator">
                     𝑓
                 </span>

diff --git a/client/src/Components/Tree/ModuleNode.tsx b/client/src/Components/Tree/ModuleNode.tsx
@@ -6,39 +6,43 @@ import classNames from "classnames";
 import PythonModule from "../../model/PythonModule";
 
 type ModuleNodeProps = {
+    parentPath: string[],
     pythonModule: PythonModule,
-    selection: string,
-    setSelection: (newValue: string) => void,
+    selection: string[],
+    setSelection: (newValue: string[]) => void,
     setParameters: any,
 }
 
-const ModuleNode = ({pythonModule, selection, setSelection, setParameters}: ModuleNodeProps) => {
-    const [childVisible, setChildVisibility] = useState(false);
+const ModuleNode = ({parentPath, pythonModule, selection, setSelection, setParameters}: ModuleNodeProps) => {
+
+    /** This is the Name of this module without its packages name prefixed. */
 
+    const [_, ...moduleName] = pythonModule.name.split(".");
+
+    const path = parentPath.concat(moduleName)
+    const [childVisible, setChildVisibility] = useState(false);
     let hasClasses = isEmptyList(pythonModule.classes);
     let hasFunctions = isEmptyList(pythonModule.functions);
+    const hasChildren = hasClasses || hasFunctions;
 
     const cssClasses = classNames(
-        "tree-view-row",
-        {
-            "text-muted": !(hasClasses || hasFunctions),
-            "cursor-na":!(hasClasses || hasFunctions),
-            "pl-2rem": !(hasClasses || hasFunctions),
-            "pl-1-5rem": (hasClasses || hasFunctions),
-            "selected": (selection === pythonModule.name) && (hasClasses || hasFunctions),
+        "tree-view-row", {
+            "text-muted": !hasChildren,
+            "cursor-na":!hasChildren,
+            "pl-2rem": !hasChildren,
+            "pl-1-5rem": hasChildren,
+            "selected": (selection.join() === path.join()) && hasChildren,
         }
     );
 
-         return (
+    return (
         <div className="module-node">
             <div className={cssClasses}
                 onClick={() => {
-                    setSelection(pythonModule.name)
+                    setSelection(path)
                     setChildVisibility(!childVisible)
-                 }}>
-                { (hasClasses || hasFunctions) &&
-                    <span className="indicator visibility-indicator">{ childVisible ? "▼" : "▶" }</span>
-                }
+                }}>
+                { (hasClasses || hasFunctions) && <span className="indicator visibility-indicator">{ childVisible ? "▼" : "▶" }</span> }
                 <span className="indicator">
                     □
                 </span>
@@ -48,34 +52,27 @@ const ModuleNode = ({pythonModule, selection, setSelection, setParameters}: Modu
                 </span>
             </div>
             <div>
-                {
-                    hasClasses && childVisible &&
-                        <div>
-                            {pythonModule.classes.map(moduleClass => (
-                                <ClassNode key={moduleClass.name}
-                                           pythonClass={moduleClass}
-                                           selection={selection}
-                                           setSelection={setSelection}
-                                           moduleName={pythonModule.name}
-                                           setParameters={setParameters}
-                                />
-                            ))}
-                        </div>
-                }
-                {
-                    hasFunctions && childVisible &&
-                    <div>
-                        {pythonModule.functions.map(moduleFunction => (
-                            <FunctionNode parentFullQualifiedName={pythonModule.name}
-                                          key={moduleFunction.name}
-                                          pythonFunction={moduleFunction}
-                                          selection={selection}
-                                          setSelection={setSelection}
-                                          setParameters={setParameters}
-                            />
-                        ))}
-                    </div>
-                }
+                { hasClasses && childVisible && <div>
+                    { pythonModule.classes.map(moduleClass => (
+                        <ClassNode key = { moduleClass.name }
+                                   parentPath = { path }
+                                   pythonClass = {moduleClass }
+                                   selection = { selection }
+                                   setSelection = { setSelection }
+                                   moduleName = { pythonModule.name }
+                                   setParameters = { setParameters } />
+                    ))}
+                </div> }
+                { hasFunctions && childVisible && <div>
+                    { pythonModule.functions.map(moduleFunction => (
+                        <FunctionNode parentPath = { path }
+                                      key = { moduleFunction.name }
+                                      pythonFunction = { moduleFunction }
+                                      selection = { selection }
+                                      setSelection = { setSelection }
+                                      setParameters = { setParameters } />
+                    ))}
+                </div> }
             </div>
         </div>
     )

diff --git a/client/src/Components/Tree/Tree.tsx b/client/src/Components/Tree/Tree.tsx
@@ -1,20 +1,23 @@
-import React, {useState} from 'react'
+import React from 'react'
 import ModuleNode from "./ModuleNode";
 import PythonPackage from "../../model/PythonPackage";
 
 type TreeProps = {
     pythonPackage: PythonPackage,
     setParameters: any,
+    selection: string[],
+    setSelection: any
 }
 
-const Tree = ({pythonPackage, setParameters}: TreeProps) => {
+const Tree = ({pythonPackage, setParameters, selection, setSelection}: TreeProps) => {
 
-    const [selection, setSelection ] = useState("");
+    const path = [pythonPackage.name];
 
     return (
         <div className="tree">
             {pythonPackage.modules.map(module => (
-                <ModuleNode key={module.name}
+                <ModuleNode parentPath = { path }
+                            key={module.name}
                             pythonModule={module}
                             selection={selection}
                             setSelection={setSelection}

diff --git a/client/src/Components/TreeView/TreeView.tsx b/client/src/Components/TreeView/TreeView.tsx
@@ -6,13 +6,19 @@ import PythonPackageBuilder from "../../model/PythonPackageBuilder";
 
 type TreeViewProps = {
     setParameters: any,
+    selection: string[],
+    setSelection: any
 }
-const TreeView = ({setParameters}:TreeViewProps) => {
+
+const TreeView = ({setParameters, selection, setSelection}: TreeViewProps) => {
     let pythonPackage = PythonPackageBuilder.make(packageJson);
     return(
         <div className="tree-view">
             <h2 className="package-name">{pythonPackage.name}</h2>
-            <Tree pythonPackage={pythonPackage} setParameters={setParameters}/>
+            <Tree pythonPackage = { pythonPackage }
+                  setParameters = { setParameters }
+                  selection = { selection }
+                  setSelection = { setSelection }/>
         </div>
     )
 }