Skip to content
This repository has been archived by the owner on Nov 29, 2023. It is now read-only.

Pfad in parameteransicht anzeigen #49

Merged
merged 3 commits into from
Jun 18, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions client/src/Components/App/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down
10 changes: 6 additions & 4 deletions client/src/Components/ParameterView/ParameterView.css
Original file line number Diff line number Diff line change
@@ -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{
Expand Down Expand Up @@ -58,3 +56,7 @@
.documentation-text {
clear: both;
}

.parameter-view-path {
height: 1.5rem;
}
19 changes: 15 additions & 4 deletions client/src/Components/ParameterView/ParameterView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -18,7 +29,7 @@ const ParameterView = ({inputParameters}: ParameterViewProps) => {
}
{
!hasInputParameters &&
<h5>No Parameters available</h5>
<span>There are no Parameters.</span>
}

</div>
Expand Down
58 changes: 24 additions & 34 deletions client/src/Components/Tree/ClassNode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
28 changes: 13 additions & 15 deletions client/src/Components/Tree/FunctionNode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
87 changes: 42 additions & 45 deletions client/src/Components/Tree/ModuleNode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
)
Expand Down
11 changes: 7 additions & 4 deletions client/src/Components/Tree/Tree.tsx
Original file line number Diff line number Diff line change
@@ -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}
Expand Down
10 changes: 8 additions & 2 deletions client/src/Components/TreeView/TreeView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}
Expand Down
Loading