Adds an Info button that links to docs (#539)

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -6,16 +6,7 @@ import {
 } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
 import { typesContext } from "../../contexts/typesContext";
-import {
-  useContext,
-  useState,
-  useEffect,
-  useRef,
-  ForwardRefExoticComponent,
-  ComponentType,
-  SVGProps,
-  ReactNode,
-} from "react";
+import { useContext, useState, useEffect, useRef } from "react";
 import { NodeDataType } from "../../types/flow";
 import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
@@ -23,10 +14,9 @@ import NodeModal from "../../modals/NodeModal";
 import Tooltip from "../../components/TooltipComponent";
 import { NodeToolbar } from "reactflow";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
-
+import { FileText, Info } from "lucide-react";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import { useSSE } from "../../contexts/SSEContext";
-import { ReactElement } from "react-markdown/lib/react-markdown";
 
 export default function GenericNode({
   data,
@@ -46,6 +36,7 @@ export default function GenericNode({
   const [validationStatus, setValidationStatus] = useState(null);
   // State for outline color
   const { sseData, isBuilding } = useSSE();
+  const refHtml = useRef(null);
 
   // useEffect(() => {
   //   if (reactFlowInstance) {
@@ -79,6 +70,22 @@ export default function GenericNode({
 
   useEffect(() => {}, [closePopUp, data.node.template]);
 
+  useEffect(() => {
+    refHtml.current = (
+      <div className="flex">
+        <span>{`${data.node.display_name} Documentation`}</span>
+        <span
+          className="self-center"
+          style={{
+            color: nodeColors[types[data.type]] ?? nodeColors.unknown,
+          }}
+        >
+          <FileText className="h-4 w-4 ml-2" />
+        </span>
+      </div>
+    );
+  }, []);
+
   return (
     <>
       <NodeToolbar>
@@ -103,7 +110,7 @@ export default function GenericNode({
                 color: nodeColors[types[data.type]] ?? nodeColors.unknown,
               }}
             />
-            <div className="ml-2 truncate">
+            <div className="ml-2 truncate flex">
               <ShadTooltip
                 delayDuration={1500}
                 content={data.node.display_name}
@@ -112,6 +119,29 @@ export default function GenericNode({
                   {data.node.display_name}
                 </div>
               </ShadTooltip>
+              <div className="">
+                {data.node.documentation !== "" && (
+                  <ShadTooltip
+                    open={true}
+                    delayDuration={1000}
+                    content={refHtml.current}
+                  >
+                    <a
+                      href={data.node.documentation}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <Info
+                        style={{
+                          color:
+                            nodeColors[types[data.type]] ?? nodeColors.unknown,
+                        }}
+                        className="ml-2 self-center w-4 h-4"
+                      />
+                    </a>
+                  </ShadTooltip>
+                )}
+              </div>
             </div>
           </div>
           <div className="flex gap-3">

src/frontend/src/contexts/tabsContext.tsx

@@ -192,39 +192,49 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   }
 
   function processFlowEdges(flow) {
-    if(!flow.data || !flow.data.edges) return;
+    if (!flow.data || !flow.data.edges) return;
     flow.data.edges.forEach((edge) => {
       edge.className = "";
       edge.style = { stroke: "#555555" };
     });
   }
-  function updateDisplay_name(node:NodeType,template:APIClassType) {
-    node.data.node.display_name = template["display_name"]?template["display_name"]:node.data.type;
+
+  function updateDisplay_name(node: NodeType, template: APIClassType) {
+    node.data.node.display_name = template["display_name"] || node.data.type;
+  }
+
+  function updateNodeDocumentation(node: NodeType, template: APIClassType) {
+    node.data.node.documentation = template["documentation"];
   }
 
   function processFlowNodes(flow) {
-    if(!flow.data || !flow.data.nodes) return;
-    flow.data.nodes.forEach((node:NodeType) => {
+    if (!flow.data || !flow.data.nodes) return;
+    flow.data.nodes.forEach((node: NodeType) => {
       const template = templates[node.data.type];
       if (!template) {
         setErrorData({ title: `Unknown node type: ${node.data.type}` });
         return;
       }
       if (Object.keys(template["template"]).length > 0) {
-        updateDisplay_name(node,template);
+        updateDisplay_name(node, template);
         updateNodeBaseClasses(node, template);
         updateNodeEdges(flow, node, template);
         updateNodeDescription(node, template);
         updateNodeTemplate(node, template);
+        updateNodeDocumentation(node, template);
       }
     });
   }
 
-  function updateNodeBaseClasses(node:NodeType,template:APIClassType) {
+  function updateNodeBaseClasses(node: NodeType, template: APIClassType) {
     node.data.node.base_classes = template["base_classes"];
   }
 
-  function updateNodeEdges(flow:FlowType, node:NodeType,template:APIClassType) {
+  function updateNodeEdges(
+    flow: FlowType,
+    node: NodeType,
+    template: APIClassType
+  ) {
     flow.data.edges.forEach((edge) => {
       if (edge.source === node.id) {
         edge.sourceHandle = edge.sourceHandle
@@ -236,11 +246,11 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     });
   }
 
-  function updateNodeDescription(node:NodeType,template:APIClassType) {
+  function updateNodeDescription(node: NodeType, template: APIClassType) {
     node.data.node.description = template["description"];
   }
 
-  function updateNodeTemplate(node:NodeType,template:APIClassType) {
+  function updateNodeTemplate(node: NodeType, template: APIClassType) {
     node.data.node.template = updateTemplate(
       template["template"] as unknown as APITemplateType,
       node.data.node.template as APITemplateType

src/frontend/src/types/api/index.ts

@@ -12,6 +12,7 @@ export type APIClassType = {
   description: string;
   template: APITemplateType;
   display_name: string;
+  documentation: string;
   [key: string]: Array<string> | string | APITemplateType;
 };
 export type TemplateVariableType = {