Visualize Calm Instance Without Uploading File (finos#1020)

* WIP: Visualize Calm Instance Without Uploading File

* WIP: Visualize Calm Instance from  Uploading File and Calm Hub

* finos#989 correct removed file

* finos#989 added data as a dependecy to the use affect

---------

Co-authored-by: jpgough-ms <152306432+jpgough-ms@users.noreply.github.com>
Co-authored-by: Olivia Johnson <35664512+oliviajanejohns@users.noreply.github.com>

Author: 3 people

calm-hub-ui/src/hub/Hub.tsx

@@ -7,9 +7,7 @@ import {
     FlowID,
     ArchitectureID,
     Version,
-    Pattern,
-    Flow,
-    Architecture,
+    Data,
 } from '../model/calm.js';
 import {
     fetchNamespaces,
@@ -35,7 +33,7 @@ function Hub() {
     const [currentVersion, setCurrentVersion] = useState<Version | undefined>();
     const [currentCalmType, setCurrentCalmType] = useState<string | undefined>();
 
-    const [data, setData] = useState<Pattern | Flow | Architecture | undefined>();
+    const [data, setData] = useState<Data | undefined>();
     const [versions, setVersions] = useState<Version[]>([]);
 
     useEffect(() => {
@@ -152,7 +150,7 @@ function Hub() {
                         />
                     )}
                 </div>
-                <JsonRenderer jsonString={data} />
+                <JsonRenderer jsonString={ data } />
             </div>
         </>
     );

calm-hub-ui/src/hub/components/json-view.tsx

@@ -1,17 +1,31 @@
+import { useNavigate } from 'react-router-dom';
 import { allExpanded, defaultStyles, JsonView } from 'react-json-view-lite';
 import 'react-json-view-lite/dist/index.css';
+import { Data } from '../../model/calm.js';
 
 interface JsonRendererProps {
-    jsonString: string | undefined;
+    jsonString: Data | undefined;
 }
 
 export function JsonRenderer({ jsonString }: JsonRendererProps) {
     const defaultMessage = <div className=" text-center">Please select a document to load.</div>;
+    const navigate = useNavigate();
     const jsonView = (
-        <JsonView data={jsonString || ''} shouldExpandNode={allExpanded} style={defaultStyles} />
+        <div>
+            <button className="bg-primary hover:bg-blue-500 text-white font-bold py-2 px-4 rounded float-right" onClick={handleClick}>
+                Visualize
+            </button>
+            <JsonView data={jsonString || ''} shouldExpandNode={allExpanded} style={defaultStyles} />
+        </div>
+        
     );
+    function handleClick() {
+        navigate('/visualizer', { state: jsonString });
+      }
 
     const content = jsonString ? jsonView : defaultMessage;
 
-    return <div className="p-5 flex-1 overflow-auto bg-[#eee]">{content}</div>;
+    return (
+        <div className="p-5 flex-1 overflow-auto bg-[#eee]">{content}</div>
+    );
 }

calm-hub-ui/src/model/calm.tsx

@@ -6,3 +6,7 @@ export type ArchitectureID = string;
 export type FlowID = string;
 export type Flow = string;
 export type Version = string;
+export type Data = {
+    name: Namespace,
+    data: Pattern | Architecture | Flow | undefined
+};

calm-hub-ui/src/service/calm-service.tsx

@@ -1,12 +1,10 @@
 import {
     Namespace,
-    Pattern,
     PatternID,
     Version,
-    Flow,
     FlowID,
-    Architecture,
     ArchitectureID,
+    Data,
 } from '../model/calm.js';
 import { getToken } from "../authService";
 
@@ -113,7 +111,7 @@ export async function fetchPattern(
     namespace: string,
     patternID: string,
     version: string,
-    setPattern: (pattern: Pattern) => void
+    setPattern: (pattern: Data) => void
 ) {
     try {
         const accessToken = await getToken();
@@ -122,7 +120,8 @@ export async function fetchPattern(
                 method: 'GET',
                 headers: {'Authorization': `Bearer ${accessToken}`,},
             });
-        const data = await res.json();
+        const response = await res.json();
+        const data: Data = { name: namespace, data: response}
         setPattern(data);
     } catch (error) {
         console.error(
@@ -139,7 +138,7 @@ export async function fetchFlow(
     namespace: string,
     flowID: string,
     version: string,
-    setFlow: (flow: Flow) => void
+    setFlow: (flow: Data) => void
 ) {
     try {
         const accessToken = await getToken();
@@ -148,7 +147,8 @@ export async function fetchFlow(
                  method: 'GET',
                  headers: {'Authorization': `Bearer ${accessToken}`,},
              });
-        const data = await res.json();
+        const response = await res.json();
+        const data: Data = { name: namespace, data: response}
         setFlow(data);
     } catch (error) {
         console.error(
@@ -207,7 +207,7 @@ export async function fetchArchitecture(
     namespace: string,
     architectureID: string,
     version: string,
-    setArchitecture: (architecture: Architecture) => void
+    setArchitecture: (architecture: Data) => void
 ) {
     try {
         const accessToken = await getToken();
@@ -216,7 +216,8 @@ export async function fetchArchitecture(
                 method: 'GET',
                 headers: {'Authorization': `Bearer ${accessToken}`,},
             });
-        const data = await res.json();
+        const response = await res.json();
+        const data: Data = { name: namespace, data: response}
         setArchitecture(data);
     } catch (error) {
         console.error(

calm-hub-ui/src/visualizer/Visualizer.tsx

@@ -1,18 +1,22 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import './Visualizer.css';
 import Drawer from './components/drawer/Drawer.js';
 import Navbar from '../components/navbar/Navbar.js';
 import React from 'react';
 import { ZoomProvider } from './components/zoom-context.provider.js';
 import { CALMArchitecture } from '../../../shared/src/types.js';
 import Menu from './components/menu/Menu.js';
+import { useLocation } from "react-router-dom";
 
 function Visualizer() {
     const [title, setTitle] = useState<string | undefined>(undefined);
     const [instance, setCALMInstance] = useState<CALMArchitecture | undefined>(undefined);
     const [isConDescActive, setConDescActive] = React.useState(false);
     const [isNodeDescActive, setNodeDescActive] = React.useState(false);
 
+    const location = useLocation();
+    const data = location.state || {};
+    
     async function handleFile(instanceFile: File) {
         const title = instanceFile.name;
         const file = await instanceFile.text();
@@ -21,6 +25,11 @@ function Visualizer() {
         setTitle(title);
         setCALMInstance(instance);
     }
+    
+    useEffect(() => {
+        setTitle(data?.name)
+        setCALMInstance(data?.data);
+      }, [data]);
 
     return (
         <ZoomProvider>