hise-flow-graphs 1.1.19 → 1.1.21

package/dist/state/GraphContext.d.ts

@@ -0,0 +1,21 @@
+import { Node } from 'reactflow';
+import { Certificate, Replica, NodeLayers } from '../@types/CertificateTypes';
+type GraphContextType = {
+    certificate: Certificate | any;
+    node: Node | any;
+    setNode: (p: Node | object) => void;
+    type: string;
+    replica: Replica | any;
+    nodesState: any;
+    edgesState: any;
+    nodeLayers: NodeLayers;
+    setNodeLayers: (p: NodeLayers) => void;
+};
+declare const GraphProvider: (props: {
+    type: string;
+    certificate: Certificate;
+    replica?: Replica;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useGraph: () => GraphContextType;
+export default GraphProvider;

package/dist/utils/getCertificateBody.d.ts

@@ -0,0 +1,3 @@
+export declare const certificateSchemesEndpoint: (schemesId: string, baseUrl: string, isPublic: boolean) => string;
+declare const getCertificateBody: (certificateId: string, baseUrl: string, isPublic?: boolean, setResponse?: Function) => Promise<any>;
+export default getCertificateBody;

package/package.json

@@ -1,52 +1,52 @@
 {
-  "name": "hise-flow-graphs",
-  "version": "1.1.19",
-  "description": "This package manages ReactFlow graphs for HISE.",
-  "private": false,
-  "type": "module",
-  "main": "dist/index.umd.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "vite build && tsc --project tsconfig.app.json",
-    "start": "vite build --mode development && chokidar 'src/**/*.{ts,tsx,js,jsx,css,scss}' -c 'vite build --mode development'",
-    "build:dev": "vite build --mode development",
-    "build:stage": "vite build --mode staging",
-    "build:prod": "vite build --mode production",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@xyflow/react": "^12.8.4",
-    "bootstrap": "5.1.3",
-    "dagre": "^0.8.5",
-    "hise-components": "^1.0.0",
-    "ramda": "0.27.1",
-    "react-quill": "^2.0.0",
-    "react-toastify": "^9.1.3",
-    "reactflow": "^11.8.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.33.0",
-    "@types/dagre": "^0.7.49",
-    "@types/node": "^22.15.24",
-    "@types/ramda": "^0.29.3",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@vitejs/plugin-react": "^4.3.4",
-    "chokidar-cli": "^3.0.0",
-    "eslint": "^9.33.0",
-    "eslint-plugin-react": "^7.33.1",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "globals": "^16.3.0",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.2",
-    "vite-tsconfig-paths": "^5.1.1"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  }
+    "name": "hise-flow-graphs",
+    "version": "1.1.21",
+    "description": "This package manages ReactFlow graphs for HISE.",
+    "private": false,
+    "type": "module",
+    "main": "dist/index.umd.js",
+    "module": "dist/index.es.js",
+    "types": "dist/index.d.ts",
+    "scripts": {
+        "build": "vite build && tsc --project tsconfig.app.json",
+        "start": "vite build --mode development && chokidar 'src/**/*.{ts,tsx,js,jsx,css,scss}' -c 'vite build --mode development'",
+        "build:dev": "vite build --mode development",
+        "build:stage": "vite build --mode staging",
+        "build:prod": "vite build --mode production",
+        "lint": "eslint .",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "@xyflow/react": "^12.8.4",
+        "bootstrap": "5.1.3",
+        "dagre": "^0.8.5",
+        "hise-components": "^2.0.0",
+        "ramda": "0.27.1",
+        "react-quill": "^2.0.0",
+        "react-toastify": "^9.1.3",
+        "reactflow": "^11.8.1"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.33.0",
+        "@types/dagre": "^0.7.49",
+        "@types/node": "^22.15.24",
+        "@types/ramda": "^0.29.3",
+        "@types/react": "^18.3.18",
+        "@types/react-dom": "^18.3.5",
+        "@vitejs/plugin-react": "^4.3.4",
+        "chokidar-cli": "^3.0.0",
+        "eslint": "^9.33.0",
+        "eslint-plugin-react": "^7.33.1",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-react-refresh": "^0.4.20",
+        "globals": "^16.3.0",
+        "typescript": "~5.8.3",
+        "typescript-eslint": "^8.39.1",
+        "vite": "^7.1.2",
+        "vite-tsconfig-paths": "^5.1.1"
+    },
+    "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+    }
 }

package/src/components/Certificates/CertificateGraph/helpers.tsx

@@ -173,6 +173,7 @@ export const getStyle = (type: string) => {
             style.borderColor = '#285222'; // dark green
             break;
 
+        case 'Certificate':
         case 'DirectUpload':
             style.borderColor = '#F78383'; // light red
             break;
@@ -260,10 +261,9 @@ export const getNodeLabel = (type: string, desc: any) => {
         case 'Cohort':
         case 'Pipeline':
         case 'Submission':
-            return type;
-
+        case 'Certificate':
         default:
-            return null;
+            return type;
     }
 };
 
@@ -298,6 +298,12 @@ export const getNodeDescription = (type: string, desc: any) => {
                         </>
                     )}
                     <span className="font-italic">{desc['File Size']}</span>
+                    <br />
+                    {desc['File Availability'] && (
+                        <span className="badge rounded-pill bg-secondary p-1 ps-2 fs-6 text-white">
+                            {desc['File Availability']}
+                        </span>
+                    )}
                 </>
             );
 

package/src/components/Certificates/WalkingGraph/helpers.ts

@@ -1,7 +1,7 @@
-import dagre from "dagre";
-import { Edge, Node, Position } from "reactflow";
-import { Certificate } from "../../../@types/CertificateTypes";
-import { getStyle } from "../CertificateGraph/helpers";
+import dagre from 'dagre';
+import { Edge, Node, Position } from 'reactflow';
+import { Certificate } from '../../../@types/CertificateTypes';
+import { getStyle } from '../CertificateGraph/helpers';
 
 export const nodeWidth = 250;
 export const nodeHeight = 120;
@@ -9,7 +9,7 @@ export const nodeHeight = 120;
 export const getWalkingNodesAndEdges = (
     nodes: Array<Node>,
     edges: Array<Edge>,
-    direction = "LR"
+    direction = 'LR'
 ) => {
     const dagreGraph = new dagre.graphlib.Graph();
     dagreGraph.setDefaultEdgeLabel(() => ({}));
@@ -29,12 +29,14 @@ export const getWalkingNodesAndEdges = (
     nodes.forEach((node: Node) => {
         const nodeWithPosition = dagreGraph.node(node.id);
 
-        node.targetPosition = direction === "LR" ? Position.Right : Position.Left;
-        node.sourcePosition = direction === "LR" ? Position.Left : Position.Right;
+        node.targetPosition =
+            direction === 'LR' ? Position.Right : Position.Left;
+        node.sourcePosition =
+            direction === 'LR' ? Position.Left : Position.Right;
 
         node.position = {
-        x: nodeWithPosition.x - nodeWidth / 2,
-        y: nodeWithPosition.y - nodeHeight / 2,
+            x: nodeWithPosition.x - nodeWidth / 2,
+            y: nodeWithPosition.y - nodeHeight / 2
         };
 
         return node;
@@ -43,28 +45,37 @@ export const getWalkingNodesAndEdges = (
     return { nodes, edges };
 };
 
-export const getUpdatedNodes = (currentNodes: Array<Node>, newNodes: Certificate['vertices'], certificate: Certificate, isUpdate = true) => {
+export const getUpdatedNodes = (
+    currentNodes: Array<Node>,
+    newNodes: Certificate['vertices'],
+    certificate: Certificate,
+    isUpdate = true
+) => {
     let updatedNodes = [...currentNodes];
 
     newNodes.forEach((nodeId: Node['id']) => {
-        const isNodeAlreadyLoaded = currentNodes.find(n => n.id === nodeId);
-        const isLayerInSubgraph = nodeId.includes('Layer') ? !Boolean(certificate.subgraphs[nodeId]) : false;
+        const isNodeAlreadyLoaded = currentNodes.find((n) => n.id === nodeId);
+        const isLayerInSubgraph = nodeId.includes('Layer')
+            ? !Boolean(certificate.subgraphs[nodeId])
+            : false;
 
         if (!isNodeAlreadyLoaded) {
-            if ((isUpdate && isLayerInSubgraph)) {
+            if (isUpdate && isLayerInSubgraph) {
                 updatedNodes = updatedNodes;
             } else {
                 const [type] = nodeId.split('/');
-                const description = certificate.customLabels?.[nodeId] || certificate.generatedLabels?.[nodeId];
+                const description =
+                    certificate.customLabels?.[nodeId] ||
+                    certificate.generatedLabels?.[nodeId];
 
                 const newNode = {
                     id: nodeId,
                     position: { x: 0, y: 0 },
                     type: 'walkingNode',
                     data: {
-                        description,
+                        description
                     },
-                    style: getStyle(type),
+                    style: getStyle(type)
                 };
 
                 updatedNodes = [...updatedNodes, newNode];
@@ -75,7 +86,10 @@ export const getUpdatedNodes = (currentNodes: Array<Node>, newNodes: Certificate
     return updatedNodes;
 };
 
-export const getUpdatedEdges = (currentEdges: Array<Edge>, newEdges: Certificate['edges']) => {
+export const getUpdatedEdges = (
+    currentEdges: Array<Edge>,
+    newEdges: Certificate['edges']
+) => {
     let updatedEdges = [...currentEdges];
 
     const newEdgesEntries = Object.entries(newEdges || {});
@@ -84,19 +98,21 @@ export const getUpdatedEdges = (currentEdges: Array<Edge>, newEdges: Certificate
         const [source, targets] = entry;
 
         targets.map((target: Node['id']) => {
-            const isEdgeAlreadyLoaded = currentEdges.find(e => e.id.match(source) && e.id.match(target));
-    
+            const isEdgeAlreadyLoaded = currentEdges.find(
+                (e) => e.id.match(source) && e.id.match(target)
+            );
+
             if (!isEdgeAlreadyLoaded) {
                 const newEdge = {
                     id: `${source}-${target}`,
                     source,
                     target,
-                    animated: true,
+                    animated: true
                 };
 
                 updatedEdges = [...updatedEdges, newEdge];
             }
-        })
+        });
     });
 
     return updatedEdges;
@@ -138,7 +154,6 @@ export const getLink = (id: Node['id']) => {
         case 'Cohort':
             return `/#/cohorts/${guid}`;
 
-
         // case 'Trace':
         // case 'Specimen':
         // case 'DirectUpload':