Added port descriptions and improved port display in GraphInspector

Author: scar17off

src/components/GraphInspector.js

@@ -2,6 +2,23 @@ import React from 'react';
 import styles from './GraphInspector.module.css';
 import { getIconForNodeType } from './ContextMenu';
 
+const PortItem = ({ port, isDarkTheme }) => (
+  <div className={`${styles.portContainer} ${isDarkTheme ? styles.portContainerDark : styles.portContainerLight}`}>
+    <div className={port.type === 'control' ? styles.portIconControl : styles.portIconData} />
+    <div className={styles.portInfo}>
+      <div className={styles.portNameRow}>
+        <span>"{port.name}"</span>
+        <span className={styles.portType}>({port.type})</span>
+      </div>
+      {port.description && (
+        <div className={`${styles.portDescription} ${isDarkTheme ? styles.portDescriptionDark : styles.portDescriptionLight}`}>
+          {port.description}
+        </div>
+      )}
+    </div>
+  </div>
+);
+
 const GraphInspector = ({
   selectedNodes,
   nodeTypes,
@@ -95,11 +112,7 @@ const GraphInspector = ({
           Input Ports
         </div>
         {nodeType.inputs.map((input, index) => (
-          <div key={index} className={`${styles.portContainer} ${config.isDarkTheme ? styles.portContainerDark : styles.portContainerLight}`}>
-            <div className={input.type === 'control' ? styles.portIconControl : styles.portIconData} />
-            <span>"{input.name}"</span>
-            <span className={styles.portType}>({input.type})</span>
-          </div>
+          <PortItem key={index} port={input} isDarkTheme={config.isDarkTheme} />
         ))}
 
         {/* Output Ports */}
@@ -108,11 +121,7 @@ const GraphInspector = ({
           Output Ports
         </div>
         {nodeType.outputs.map((output, index) => (
-          <div key={index} className={`${styles.portContainer} ${config.isDarkTheme ? styles.portContainerDark : styles.portContainerLight}`}>
-            <div className={output.type === 'control' ? styles.portIconControl : styles.portIconData} />
-            <span>"{output.name}"</span>
-            <span className={styles.portType}>({output.type})</span>
-          </div>
+          <PortItem key={index} port={output} isDarkTheme={config.isDarkTheme} />
         ))}
       </div>
     </div>

src/components/GraphInspector.module.css

@@ -226,4 +226,32 @@
   left: 0;
   border-left: none;
   border-right: 6px solid #4CAF50;
+}
+
+.portInfo {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.portNameRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.portDescription {
+  font-size: 0.85em;
+  color: #666;
+  font-style: italic;
+  margin-left: 4px;
+}
+
+.portDescriptionDark {
+  color: #999;
+}
+
+.portDescriptionLight {
+  color: #666;
 } 

src/nodeDefinitions.js

@@ -2,16 +2,32 @@ export const nodeTypes = {
   OnStart: {
     color: '#4CAF50',
     inputs: [],
-    outputs: [{ type: 'control', name: 'Next' }],
+    outputs: [{ 
+      type: 'control', 
+      name: 'Next',
+      description: 'Triggered when the script begins execution'
+    }],
     description: 'Triggered when the script starts'
   },
   Log: {
     color: '#FF5722',
     inputs: [
-      { type: 'control', name: 'In' },
-      { type: 'data', name: 'Message' }
+      { 
+        type: 'control', 
+        name: 'In',
+        description: 'Triggers the log operation'
+      },
+      { 
+        type: 'data', 
+        name: 'Message',
+        description: 'The message to be logged'
+      }
     ],
-    outputs: [{ type: 'control', name: 'Out' }],
+    outputs: [{ 
+      type: 'control', 
+      name: 'Out',
+      description: 'Triggered after the message is logged'
+    }],
     description: 'Logs a message to the console',
     properties: [
       { name: 'message', type: 'string', default: '' },