Skip to content

Commit a42d19d

Browse files
rarescodemartrarescodemart
committed
WID-100: add functionality to display the description of the component arguments
1 parent 2daab9e commit a42d19d

File tree

11 files changed

+195
-19
lines changed

11 files changed

+195
-19
lines changed

‎.gitignore‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,4 +136,7 @@ labextension/
136136
mlruns/
137137

138138
# Pytorch dataset default dir
139-
data
139+
data
140+
141+
# pycharm files
142+
/.idea/

‎src/components/CustomNodeModel.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,13 @@ export class CustomNodeModel extends DefaultNodeModel {
4141
this.extras=event.data.extras;
4242
}
4343

44-
addOutPortEnhance(label: string, name: string, after: boolean = true, id?: string): CustomPortModel {
44+
addOutPortEnhance(label: string, name: string, after: boolean = true, id?: string, description: string = ""): CustomPortModel {
4545

4646
//check if portID is passed, if not SR will generate a new port ID
4747
const p = (id) ? new CustomPortModel({in: false, name: name, label: label, id:id}) :
4848
new CustomPortModel({in: false, name: name, label: label});
49+
50+
p.description = description;
4951

5052
if (!after) {
5153
this.portsOut.splice(0, 0, p);
@@ -54,12 +56,14 @@ export class CustomNodeModel extends DefaultNodeModel {
5456
return this.addPort(p);
5557
}
5658

57-
addInPortEnhance(label: string, name: string, after: boolean = true, id?: string): CustomPortModel {
59+
addInPortEnhance(label: string, name: string, after: boolean = true, id?: string, description: string = ""): CustomPortModel {
5860

5961
//check if portID is passed, if not SR will generate a new port ID
6062
const p = (id) ? new CustomPortModel({in: true, name: name, label: label, id:id}) :
6163
new CustomPortModel({in: true, name: name, label: label});
6264

65+
p.description = description;
66+
6367
if (!after) {
6468
this.portsOut.splice(0, 0, p);
6569
}

‎src/components/CustomNodeWidget.tsx‎

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -102,9 +102,7 @@ export interface DefaultNodeProps {
102102
*/
103103
export class CustomNodeWidget extends React.Component<DefaultNodeProps> {
104104

105-
generatePort = (port) => {
106-
return <CustomPortLabel engine={this.props.engine} port={port} key={port.getID()} node={this.props.node} />;
107-
};
105+
108106
element:Object;
109107
state = {
110108

@@ -127,7 +125,46 @@ export class CustomNodeWidget extends React.Component<DefaultNodeProps> {
127125
original: 'https://picsum.photos/id/1019/1000/600/',
128126
thumbnail: 'https://picsum.photos/id/1019/250/150/'
129127
},
130-
]
128+
],
129+
showParamDescriptionList: new Array(this.props.node.getInPorts().length + this.props.node.getOutPorts().length).fill(false)
130+
};
131+
132+
/**
133+
* creates a particular function for each component so that it can set only it's state
134+
* @param id
135+
*/
136+
setShowParamDescription = (id : number) => {
137+
const _setShowParamDescription = (newShowDescription : boolean) => {
138+
this.setState({
139+
showParamDescriptionList: this.state.showParamDescriptionList.map((value, index) => (
140+
id === index ? newShowDescription : false
141+
)
142+
)
143+
})
144+
}
145+
return _setShowParamDescription;
146+
}
147+
148+
generatePort = (port, index) => {
149+
const argumentDescriptions = this.props.node['extras']['argumentDescriptions'];
150+
151+
const description = argumentDescriptions && (port.getOptions().label in argumentDescriptions) ? argumentDescriptions[port.getOptions().label] : "";
152+
153+
const isOutPort = port.getOptions().name.includes('parameter-out');
154+
155+
index = isOutPort ? index + this.props.node.getInPorts().length: index;
156+
157+
return (
158+
<CustomPortLabel
159+
engine={this.props.engine}
160+
port={port}
161+
key={port.getID()}
162+
node={this.props.node}
163+
showDescription={this.state.showParamDescriptionList[index]}
164+
setShowDescription={this.setShowParamDescription(index)}
165+
description={description}
166+
/>
167+
);
131168
};
132169

133170
showTooltip() {
@@ -295,7 +332,7 @@ export class CustomNodeWidget extends React.Component<DefaultNodeProps> {
295332
/>
296333
</label>
297334
</S.Title>
298-
<S.Ports>
335+
<S.Ports>{/*aici se pun intrarile*/}
299336
<S.PortsContainer>{_.map(this.props.node.getInPorts(), this.generatePort)}</S.PortsContainer>
300337
<S.PortsContainer>{_.map(this.props.node.getOutPorts(), this.generatePort)}</S.PortsContainer>
301338
</S.Ports>

‎src/components/port/CustomPortLabel.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,16 @@ import * as React from 'react';
22
import { DiagramEngine, PortWidget } from '@projectstorm/react-diagrams-core';
33
import { DefaultNodeModel, DefaultPortModel } from "@projectstorm/react-diagrams";
44
import styled from '@emotion/styled';
5+
import WithToggle from "./WithToggle";
6+
57

68
export interface CustomPortLabelProps {
79
port: DefaultPortModel;
810
engine: DiagramEngine;
911
node: DefaultNodeModel;
12+
showDescription: boolean;
13+
setShowDescription: any;
14+
description : string;
1015
}
1116

1217
namespace S {
@@ -122,7 +127,14 @@ export class CustomPortLabel extends React.Component<CustomPortLabelProps> {
122127

123128
const label = (
124129
<S.Label>
125-
{this.props.port.getOptions().label}
130+
<WithToggle
131+
renderToggleBeforeChildren={!this.props.port.getOptions().in}
132+
showDescription={this.props.showDescription}
133+
setShowDescription={this.props.setShowDescription}
134+
description={this.props.description}
135+
>
136+
{this.props.port.getOptions().label}
137+
</WithToggle>
126138
</S.Label>);
127139

128140
return (

‎src/components/port/CustomPortModel.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,17 @@ import {PortModel} from "@projectstorm/react-diagrams-core";
88
*/
99
export class CustomPortModel extends DefaultPortModel {
1010

11+
private _description : string;
12+
13+
get description(): string {
14+
return this._description;
15+
}
16+
17+
set description(value: string) {
18+
this._description = value;
19+
}
20+
21+
1122

1223
canLinkToPort(port: PortModel): boolean {
1324
if (port instanceof DefaultPortModel) {

‎src/components/port/WithToggle.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import * as React from "react";
2+
import Toggle from 'react-toggle'
3+
import {useRef} from "react";
4+
import {WithToggleProps} from "./types";
5+
import ToolTip from 'react-portal-tooltip';
6+
7+
8+
export default function WithToggle(props: WithToggleProps){
9+
const ref = useRef(null);
10+
11+
return (
12+
<div ref ={ref} className="alignToggle">
13+
{props.renderToggleBeforeChildren ?
14+
<>
15+
{
16+
props.description &&
17+
<Toggle
18+
className='description'
19+
name='Description'
20+
checked={props.showDescription}
21+
onChange={() => props.setShowDescription(!props.showDescription)}
22+
/>
23+
}
24+
<span>
25+
{props.children}
26+
</span>
27+
</>
28+
:
29+
<>
30+
<span>
31+
{props.children}
32+
</span>
33+
{
34+
props.description &&
35+
<Toggle
36+
className='description'
37+
name='Description'
38+
checked={props.showDescription}
39+
onChange={() => props.setShowDescription(!props.showDescription)}
40+
/>
41+
}
42+
</>
43+
}
44+
45+
{props.showDescription &&
46+
<ToolTip active={props.showDescription} position="left" arrow="center" parent={ref.current}>
47+
<div>{props.description}</div>
48+
</ToolTip>
49+
}
50+
</div>
51+
)
52+
}

‎src/components/port/types.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import {ReactElement} from "react";
2+
3+
export type WithToggleProps = {
4+
renderToggleBeforeChildren : boolean;
5+
children: ReactElement[] | ReactElement | string;
6+
showDescription: boolean;
7+
setShowDescription: any;
8+
description: string;
9+
}
10+
11+
export type WithToggleState = {
12+
showDescription : boolean
13+
}

‎src/tray_library/AdvanceComponentLib.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ export function AdvancedComponentLibrary(props: AdvancedComponentLibraryProps) {
3131
extras: {
3232
"type": nodeData.type,
3333
"path": nodeData.file_path,
34-
"description": nodeData.docstring,
34+
"description": nodeData["json_description"]["description"] || nodeData.docstring,
35+
"argumentDescriptions" : nodeData["json_description"]["arguments"],
3536
"lineNo": nodeData.lineno
3637
}
3738
});
@@ -44,19 +45,24 @@ export function AdvancedComponentLibrary(props: AdvancedComponentLibraryProps) {
4445
"str": "string"
4546
}
4647

47-
nodeData["variables"].forEach(variable => {
48-
let name = variable["name"];
49-
let type = type_name_remappings[variable["type"]] || variable["type"];
48+
const argumentDescriptions = nodeData["json_description"]["arguments"];
49+
50+
51+
nodeData["variables"].forEach((variable, _) => {
52+
const name = variable["name"];
53+
const type = type_name_remappings[variable["type"]] || variable["type"];
54+
55+
const description = argumentDescriptions ? argumentDescriptions[name] || "" : "";
5056

5157
switch (variable["kind"]) {
5258
case "InCompArg":
53-
node.addInPortEnhance(`★${name}`, `parameter-${type}-${name}`);
59+
node.addInPortEnhance(`★${name}`, `parameter-${type}-${name}`, true, null, description);
5460
break;
5561
case "InArg":
56-
node.addInPortEnhance(name, `parameter-${type}-${name}`);
62+
node.addInPortEnhance(name, `parameter-${type}-${name}`, true, null, description);
5763
break;
5864
case "OutArg":
59-
node.addOutPortEnhance(name, `parameter-out-${type}-${name}`);
65+
node.addOutPortEnhance(name, `parameter-out-${type}-${name}`, true, null, description);
6066
break;
6167
default:
6268
console.warn("Unknown variable kind for variable", variable)

‎style/base.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,4 +54,17 @@ input[type=number]::-webkit-inner-spin-button {
5454
/* Fix arrow position of HTMLSelect tag on run dialog */
5555
.jp-Dialog-content .f1ozlkqi {
5656
position: relative;
57+
}
58+
59+
.alignToggle {
60+
display: flex;
61+
flex-direction: row;
62+
align-items: center;
63+
justify-content: flex-start;
64+
}
65+
66+
.alignToggle span, div {
67+
display: inline-block;
68+
padding: 0;
69+
margin: 0;
5770
}

‎xai_components/xai_learning/description/kerastransferlearningmodel.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"description" : "keras_transfer_learning description",
3+
"arguments" : {
4+
"base_model_name" : "base_model_name description",
5+
"include_top" : "include_top description",
6+
"weights" : "weights description",
7+
"input_shape" : "input_shape description",
8+
"freeze_all" : "freeze_all description",
9+
"fine_tune_from" : "fine_tune_from description",
10+
"classes" : "classes description",
11+
"binary" : "binary description",
12+
"classifier_activation" : "classifier_activation description",
13+
"kwargs" : "kwargs description",
14+
"model" : "model description"
15+
}
16+
}

0 commit comments

Comments
 (0)