Merge pull request #343 from XpressAI/paul/component-library-docs

Overhaul Component Library
XpressAI · Jul 18, 2024 · efaea63 · efaea63
2 parents a63375a + 52aa5ba
commit efaea63
Show file tree

Hide file tree

Showing 18 changed files with 1,355 additions and 147 deletions.
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
   "dependencies": {
     "@jupyterlab/application": "^4.0.0",
     "@jupyterlab/coreutils": "^6.0.0",
+    "@jupyterlab/fileeditor": "4.0.9",
     "@jupyterlab/launcher": "^4.0.9",
     "@jupyterlab/logconsole": "^4.0.9",
     "@jupyterlab/services": "^7.0.0",

diff --git a/src/XircuitsFactory.ts b/src/XircuitsFactory.ts
@@ -46,6 +46,7 @@ export class XircuitsFactory extends ABCWidgetFactory<DocumentWidget> {
   reloadAllNodesSignal: Signal<this, any>;
   toggleAllLinkAnimationSignal: Signal<this, any>;
   refreshComponentsSignal: Signal<this, any>;
+  toggleDisplayNodesInLibrary: Signal<this, any>;
 
   constructor(options: any) {
     super(options);
@@ -63,6 +64,7 @@ export class XircuitsFactory extends ABCWidgetFactory<DocumentWidget> {
     this.reloadAllNodesSignal = new Signal<this, any>(this);
     this.toggleAllLinkAnimationSignal = new Signal<this, any>(this);
     this.refreshComponentsSignal = new Signal<this, any>(this);
+    this.toggleDisplayNodesInLibrary = new Signal<this, any>(this);
   }
 
   protected createNewWidget(context: DocumentRegistry.Context): DocumentWidget {
@@ -83,6 +85,7 @@ export class XircuitsFactory extends ABCWidgetFactory<DocumentWidget> {
       reloadAllNodesSignal: this.reloadAllNodesSignal,
       toggleAllLinkAnimationSignal: this.toggleAllLinkAnimationSignal,
       refreshComponentsSignal: this.refreshComponentsSignal,
+      toggleDisplayNodesInLibrary: this.toggleDisplayNodesInLibrary
     };
 
     const content = new XircuitsPanel(props);

diff --git a/src/commands/CommandIDs.tsx b/src/commands/CommandIDs.tsx
@@ -34,5 +34,6 @@ export const commandIDs = {
   outputMsg: "Xircuit-log:logOutputMessage",
   executeToOutputPanel: "Xircuit-output-panel:execute",
   createNewComponentLibrary: "Xircuit-editor:new-component-library",
-  refreshComponentList: "xircuits-sidebar:refresh-component-list"
+  refreshComponentList: "xircuits-sidebar:refresh-component-list",
+  toggleDisplayNodesInLibrary: "xircuits-sidebar:toggle-display-nodes-in-library"
 };
diff --git a/src/commands/LibraryActionCommands.tsx b/src/commands/LibraryActionCommands.tsx
@@ -10,6 +10,7 @@ import { requestAPI } from '../server/handler';
 import { checkInput } from '../helpers/InputSanitizer';
 import { XircuitsFactory } from '../XircuitsFactory';
 import { commandIDs } from "./CommandIDs";
+import { addIcon, listIcon, refreshIcon } from "@jupyterlab/ui-components";
 
 /**
  * Add the commands for node actions.
@@ -34,12 +35,24 @@ export function addLibraryActionCommands(
     }
 
     commands.addCommand(commandIDs.refreshComponentList, {
+        label: "Refresh Component Library",
+        icon: refreshIcon,
         execute: async (args) => {
             factory.refreshComponentsSignal.emit(args);
         }
     })
 
+    commands.addCommand(commandIDs.toggleDisplayNodesInLibrary, {
+        label: "Toggle Display Nodes in Library",
+        icon: listIcon,
+        execute: async (args) => {
+            factory.toggleDisplayNodesInLibrary.emit(args);
+        }
+    })
+
     commands.addCommand(commandIDs.createNewComponentLibrary, {
+        label: "Create new Component Library",
+        icon: addIcon,
         execute: async (args) => {
 
             let componentCode = args['componentCode'] as any;

diff --git a/src/components/node/CustomNodeWidget.tsx b/src/components/node/CustomNodeWidget.tsx
@@ -24,23 +24,26 @@ import {
     setVariableComponentIcon, 
     getVariableComponentIcon } from '../../ui-components/icons';
 import  circuitBoardSvg from '../../../style/icons/circuit-board-bg.svg';
+import { LegacyRef, MutableRefObject } from "react";
 
 
 
-var S;
-(function (S) {
-
-    S.Node = styled.div<{ borderColor: string, background: string; selected: boolean; }>`
+export namespace S {
+    export const Node = styled.div<{ borderColor: string, background: string; selected: boolean; }>`
         box-shadow: 1px 1px 10px ${(p) => p.selected ? '3px rgb(0 192 255 / 0.5)' : '0px rgb(0 0 0 / 0.5)'};
+        cursor: grab;
         border-radius: 5px;
         font-family: sans-serif;
         color: white;
         overflow: visible;
         font-size: 11px;
         border: solid 1px ${(p) => (p.selected ? (p.borderColor == undefined ? 'rgb(0,192,255)' : p.borderColor) : 'black')};
+        & .grabbing {
+            cursor: grabbing;
+        }
     `;
 
-    S.Title = styled.div<{ background: string; }>`
+    export const Title = styled.div<{ background: string; }>`
         background-image: ${(p) => {
             const color = new Color(p.background);
             color.alpha = 0.75;
@@ -61,12 +64,12 @@ var S;
         border-top-right-radius: 5px;
     `;
 
-    S.TitleName = styled.div`
+    export const TitleName = styled.div`
         flex-grow: 1;
         padding: 5px 5px 5px 5px;
     `;
 
-    S.IconContainer = styled.div`
+    export const IconContainer = styled.div`
         padding: 5px 5px 5px 5px;
         display: flex;
         align-items: center;
@@ -79,7 +82,7 @@ var S;
         }
     `;
 
-    S.CommentContainer = styled.div<{ selected: boolean; }>`
+    export const CommentContainer = styled.div<{ selected: boolean; }>`
         background: rgba(0, 0, 0, 0.3);
         border-radius: 5px;
         font-family: sans-serif;
@@ -90,15 +93,15 @@ var S;
         padding: 5px;
     `;
 
-    S.DescriptionName = styled.div<{ color: string }>`
+    export const 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`
+    export const Ports = styled.div`
         display: flex;
         background-image: linear-gradient(oklch(10% 0 0 / 0.7), oklch(10% 0 0 / 0.9));
         border-bottom-left-radius: 5px;
@@ -109,8 +112,9 @@ var S;
         }
     `;
 
-    S.PortsContainer = styled.div`
+    export const PortsContainer = styled.div`
         max-width: 640px;
+        min-width: 0;
         white-space: pre;
         flex-grow: 1;
         display: flex;
@@ -125,18 +129,17 @@ var S;
         }
     `;
 
-    S.WorkflowNode = styled(S.Node)`
+    export const WorkflowNode = styled(S.Node)`
     `;
-})(S || (S = {}));
-
+}
 export interface DefaultNodeProps {
     node: DefaultNodeModel;
     engine: DiagramEngine;
     app: JupyterFrontEnd;
     shell: ILabShell;
 }
 
-const getNodeIcon = (type) => {
+export const getNodeIcon = (type) => {
     switch (type) {
         case 'Start':
         case 'startFinish':
@@ -163,6 +166,14 @@ const getNodeIcon = (type) => {
     }
 };
 
+function addGrabbing(e){
+  e.target.classList.add('grabbing');
+}
+
+function removeGrabbing(e){
+  e.target.classList.remove('grabbing');
+}
+
 const CommentNode = ({ node }) => {
     const [commentInput, setCommentInput] = React.useState(node['extras']['commentInput']);
 
@@ -183,7 +194,7 @@ const CommentNode = ({ node }) => {
     };
 
     return (
-        <S.CommentContainer onDoubleClick={handleEditComment} selected={node.isSelected()}>
+        <S.CommentContainer onDoubleClick={handleEditComment} selected={node.isSelected()} onMouseDown={addGrabbing} onMouseUp={removeGrabbing}>
             <S.TitleName><b>{node.getOptions().name}</b></S.TitleName>
             <div className='comment-component-content'>
                 {commentInput}
@@ -219,6 +230,7 @@ const ParameterNode = ({ node, engine, app }) => {
 
     return (
         <S.Node
+            onMouseDown={addGrabbing} onMouseUp={removeGrabbing}
             borderColor={node.getOptions().extras["borderColor"]}
             data-default-node-name={node.getOptions().name}
             selected={node.isSelected()}
@@ -237,6 +249,7 @@ const ParameterNode = ({ node, engine, app }) => {
 
 const StartFinishNode = ({ node, engine, handleDeletableNode, app }) => (
     <S.Node
+        onMouseDown={addGrabbing} onMouseUp={removeGrabbing}
         borderColor={node.getOptions().extras["borderColor"]}
         data-default-node-name={node.getOptions().name}
         selected={node.isSelected()}
@@ -255,11 +268,10 @@ const StartFinishNode = ({ node, engine, handleDeletableNode, app }) => (
 );
 
 const WorkflowNode = ({ node, engine, app, handleDeletableNode }) => {
-    const elementRef = React.useRef<HTMLElement>(null);
     return (
         <div style={{ position: "relative" }}>
             <S.WorkflowNode
-                ref={elementRef}
+                onMouseDown={addGrabbing} onMouseUp={removeGrabbing}
                 data-tip data-for={node.getOptions().id}
                 borderColor={node.getOptions().extras["borderColor"]}
                 data-default-node-name={node.getOptions().name}
@@ -321,7 +333,8 @@ const ComponentLibraryNode = ({ node, engine, shell, app, handleDeletableNode })
                 </div>
             </div>}
             <S.Node
-                ref={elementRef}
+                onMouseDown={addGrabbing} onMouseUp={removeGrabbing}
+                ref={(elementRef as LegacyRef<HTMLDivElement>)}
                 data-tip data-for={node.getOptions().id}
                 borderColor={node.getOptions().extras["borderColor"]}
                 data-default-node-name={node.getOptions().name}

diff --git a/src/components/port/CustomPortLabel.tsx b/src/components/port/CustomPortLabel.tsx
@@ -13,7 +13,7 @@ export interface CustomPortLabelProps {
 	app: JupyterFrontEnd;
 }
 
-namespace S {
+export namespace S {
 	export const PortLabel = styled.div`
 		display: flex;
 		margin-top: 1px;
@@ -25,6 +25,7 @@ namespace S {
 		flex-grow: 1;
 		white-space: pre-wrap; // Preserve line breaks and wrap text to the next line
 		overflow:hidden;
+		text-overflow: ellipsis;
 		max-width: 40ch;
 	`;
 
@@ -125,23 +126,7 @@ const PortLabel = ({nodeType, port}) => {
 	);
 }
 
-export class CustomPortLabel extends React.Component<CustomPortLabelProps> {
-	render() {
-		let portName = this.props.port.getOptions().name;
-		let portType;
-		let symbolLabel;
-		let isOutPort;
-		if(portName.includes('parameter-out')){
-			portType = portName.split("-")[2];
-			isOutPort = true;
-		} else {
-			portType = portName.split("-")[1];
-		}
-		if (portType.includes(',')) {
-			portType = 'union';
-		}
-
-		const symbolMap = {
+export const symbolMap = {
 			"string": '" "',
 			"int": ' 1',
 			"float": '1.0',
@@ -159,6 +144,22 @@ export class CustomPortLabel extends React.Component<CustomPortLabelProps> {
 			"0": null,
 			"flow": null
 		};
+
+export class CustomPortLabel extends React.Component<CustomPortLabelProps> {
+	render() {
+		let portName = this.props.port.getOptions().name;
+		let portType;
+		let symbolLabel;
+		let isOutPort;
+		if(portName.includes('parameter-out')){
+			portType = portName.split("-")[2];
+			isOutPort = true;
+		} else {
+			portType = portName.split("-")[1];
+		}
+		if (portType.includes(',')) {
+			portType = 'union';
+		}
 
 		if (portType in symbolMap) {
 			symbolLabel = symbolMap[portType];

diff --git a/src/context-menu/ComponentsPanel.tsx b/src/context-menu/ComponentsPanel.tsx
@@ -168,7 +168,7 @@ export default function ComponentsPanel(props: ComponentsPanelProps) {
                         </div>
                         {
                             allowableComponents.filter((val) => {
-                                if (searchTerm != "" && val.task.toLowerCase().includes(searchTerm.toLowerCase())) {
+                                if (searchTerm != "" && (val.task.toLowerCase().includes(searchTerm.toLowerCase()) || (val.docstring && val.docstring.toLowerCase().includes(searchTerm.toLowerCase())))) {
                                     return val
                                 }
                             }).map((val, i) => {