✨Add Component's Description Tooltip

src/components/CustomNodeWidget.tsx

@@ -53,6 +53,14 @@ var S;
 		font-size: 12px;
         border: solid 2px ${(p) => p.selected ? 'rgb(0,192,255)':'black'};
         padding: 5px;
+    `;
+
+    S.DescriptionName = styled.div<{ color:string }>`
+        color: ${(p) => p.color ?? 'rgb(0, 0, 0)'};
+        text-align: justify;
+        font-family: 'Roboto', sans-serif;
+        font-weight: 700;
+        font-size: 13px;
 	`;
 
     S.Ports = styled.div`
@@ -100,6 +108,7 @@ export class CustomNodeWidget extends React.Component<DefaultNodeProps> {
         isTooltipActive: false,
         nodeDeletable: false,
         commentInput: this.props.node['extras']['commentInput'],
+        showDescription: false,
 
         imageGalleryItems:[
         {
@@ -188,6 +197,31 @@ export class CustomNodeWidget extends React.Component<DefaultNodeProps> {
         this.handleOnChangeCanvas();
     }
 
+    tooltipStyle = {
+        style: {
+            background: 'rgb(255,255,255)',
+            maxWidth: 450,
+            maxHeight: 250,
+            borderRadius: 10,
+            border: '2px solid rgba(0, 253, 232,.5)',
+            padding: '20px 20px 0px 20px',
+            overflow: 'auto',
+            boxShadow: '5px 5px 3px rgba(0,0,0,.5)'
+        },
+        arrowStyle: {
+            visibility:'hidden'
+        }
+    }
+    /**
+     * Show/Hide Component's Description Tooltip
+     */
+     handleDescription() {
+         const noDescription = <i>No description provided</i>;
+         const nodeDescription = this.props.node['extras']['description'];
+         this.props.node.getOptions().extras["descrpt"] = nodeDescription ?? noDescription;
+         this.setState({showDescription:!this.state.showDescription});
+    }
+
     render() {
 
         if(this.props.node.getOptions().extras["tip"]!=undefined&&this.props.node.getOptions().extras["tip"]!=""){
@@ -286,11 +320,17 @@ export class CustomNodeWidget extends React.Component<DefaultNodeProps> {
         else if(this.props.node.getOptions()["name"] !== 'Start' && this.props.node.getOptions()["name"] !== 'Finish'){
             return (
                 <S.Node
+                    ref={(element) => { this.element = element }}
                     borderColor={this.props.node.getOptions().extras["borderColor"]}
                     data-default-node-name={this.props.node.getOptions().name}
                     selected={this.props.node.isSelected()}
                     background={this.props.node.getOptions().color}
                     onDoubleClick={this.handleEditLiteral.bind(this)}>
+                    <ToolTip active={this.state.showDescription} position="top" arrow="center" tooltipTimeout={0} parent={this.element} style={this.tooltipStyle}>
+                        <S.DescriptionName color={this.props.node.getOptions().color}>{this.props.node.getOptions()["name"]}</S.DescriptionName>
+                        <p className='description-title'>Description:</p>
+                        <pre className='description-text'>{this.props.node.getOptions().extras["descrpt"]}</pre>
+                    </ToolTip>
                     <S.Title>
                         <S.TitleName>{this.props.node.getOptions().name}</S.TitleName>
                         <label>
@@ -299,6 +339,12 @@ export class CustomNodeWidget extends React.Component<DefaultNodeProps> {
                                 checked={this.props.node.isLocked()}
                                 onChange={this.handleDeletableNode.bind(this, 'nodeDeletable')}
                             />
+                            <Toggle
+                                className='description'
+                                name='Description'
+                                checked={this.state.showDescription}
+                                onChange={this.handleDescription.bind(this)}
+                            />
                         </label>
                     </S.Title>
                     <S.Ports>

src/tray_library/AdvanceComponentLib.tsx

@@ -30,7 +30,8 @@ export function AdvancedComponentLibrary(props: AdvancedComponentLibraryProps) {
         color: nodeData.color,
         extras: {
             "type": nodeData.type,
-            "path": nodeData.file_path
+            "path": nodeData.file_path,
+            "description": nodeData.docstring
         }
     });
     node.addInPortEnhance('▶', 'in-0');
@@ -42,7 +43,7 @@ export function AdvancedComponentLibrary(props: AdvancedComponentLibraryProps) {
         "str": "string"
     }
 
-    props.model["variables"].forEach(variable => {
+    nodeData["variables"].forEach(variable => {
         let name = variable["name"];
         let type = type_name_remappings[variable["type"]] || variable["type"];
 

src/tray_library/Sidebar.tsx

@@ -220,7 +220,8 @@ export default function Sidebar(props: SidebarProps) {
                                                                             type: componentVal.type,
                                                                             name: componentVal.task,
                                                                             color: componentVal.color,
-                                                                            path: componentVal.file_path
+                                                                            path: componentVal.file_path,
+                                                                            docstring: componentVal.docstring
                                                                         }}
                                                                         name={componentVal.task}
                                                                         color={componentVal.color}
@@ -251,7 +252,8 @@ export default function Sidebar(props: SidebarProps) {
                                                 type: val.type, 
                                                 name: val.task,
                                                 color: val.color,
-                                                path: val.file_path
+                                                path: val.file_path,
+                                                docstring: val.docstring
                                             }}
                                             name={val.task}
                                             color={val.color}

style/ComponentInfo.css

@@ -0,0 +1,14 @@
+.description-text{
+    text-align: justify;
+    font-family: sans-serif;
+    font-weight: 400;
+    font-size: 11px;
+    white-space:pre-wrap;
+}
+
+.description-title{
+    text-align: justify;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 700;
+    font-size: 13px;
+}

style/index.css

@@ -3,4 +3,5 @@
 @import url('Sidebar.css');
 @import url('ComponentsPanel.css');
 @import url('NodeActionPanel.css');
-@import url('Comment.css');
+@import url('Comment.css');
+@import url('ComponentInfo.css');

style/index.js

@@ -3,4 +3,5 @@ import './toggle.css';
 import './Sidebar.css';
 import './ComponentsPanel.css';
 import './NodeActionPanel.css';
-import './Comment.css';
+import './Comment.css';
+import './ComponentInfo.css';

style/toggle.css

@@ -147,4 +147,12 @@ background-color: #128D15;
 
 .lock.react-toggle--checked .react-toggle-track {
     background: url(../style/icons/lock-nodes.svg) no-repeat;
+}
+
+.description.react-toggle .react-toggle-track {
+    background: url(../style/icons/3-vertical-dot.svg) no-repeat;
+}
+
+.description.react-toggle--checked .react-toggle-track {
+    background: url(../style/icons/3-vertical-dot.svg) #FAFAFA no-repeat;
 }

xircuits/handlers/components.py

@@ -157,6 +157,8 @@ def extract_component(self, node: ast.ClassDef, file_path, python_path):
             for v in node.body if is_arg(v)
         ]
 
+        docstring = ast.get_docstring(node)
+
         output = {
             "class": name,
             "package_name": ("xai_components." if python_path is None else "") + file_path.as_posix().replace("/", ".")[:-3],
@@ -167,7 +169,8 @@ def extract_component(self, node: ast.ClassDef, file_path, python_path):
             "header": GROUP_ADVANCED,
             "category": category,
             "type": "debug",
-            "variables": variables
+            "variables": variables,
+            "docstring": docstring
         }
         output.update(keywords)