Merge pull request #792 from oliviajanejohns/explore-cytoscape-merge

Add CALM Visualizer to README / CodeOwners

Author: oliviajanejohns

.github/CODEOWNERS

@@ -6,6 +6,8 @@
 
 /cli/ @aidanm3341 @lbulanti-ms @willosborne @grahampacker-ms @jpgough-ms @rocketstack-matt @Thels
 
+/calm-visualizer/ @oliviajanejohns @aidanm3341 @aamanrebello @yoofitt96
+
 /shared/ @aidanm3341 @lbulanti-ms @willosborne @grahampacker-ms @jpgough-ms @rocketstack-matt @Thels
 
 /translator/ @Budlee @matthewgardner @jpgough-ms @rocketstack-matt

.github/labeler.yml

@@ -8,6 +8,8 @@ calm-hub:
   - "calm-hub/**"
 calm:
   - "calm/**"
+calm-visualizer:
+  - "calm-visualizer/**"
 config:
   - "pom.xml"
   - "**/package.json"

.github/workflows/build-visualizer.yml

@@ -0,0 +1,39 @@
+name: Build CALM Visualizer
+
+on:
+  pull_request:
+    branches:
+      - "main"
+    paths:
+      - "calm-visualizer/**"
+  push:
+    branches:
+      - "main"
+    paths:
+      - "calm-visualizer/**"
+
+jobs:
+  shared:
+    name: Build, Test, and Lint Shared Module
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout PR Branch
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: v20
+
+      - name: Install workspace
+        run: npm ci
+
+      - name: Lint Shared Module
+        run: npm run lint --workspace=calm-visualizer
+
+      - name: Build workspace
+        run: npm run build --workspace=calm-visualizer
+
+      - name: Run tests for Shared
+        run: npm run test --workspace=calm-visualizer

README.md

@@ -24,12 +24,13 @@ your project.
 
 ## Projects
 
-| Project                                      | Lead Maintainers                                                                                                                                                                                                                        | Builds                                                                                                                                                                                                                                                                                                                                                                                               |
-|----------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| [Common Architecture Language Model](./calm) | [@rocketstack-matt](https://github.com/rocketstack-matt), [@jpgough-ms](https://github.com/jpgough-ms)                                                                                                                                  | [![Validation of CALM Samples](https://github.com/finos/architecture-as-code/actions/workflows/validate-spectral.yml/badge.svg)](https://github.com/finos/architecture-as-code/actions/workflows/validate-spectral.yml)    |
-| [Docs](./docs)                               | [@rocketstack-matt](https://github.com/rocketstack-matt)                                                                                                                                                                                | [![Sync Docs to S3](https://github.com/finos/architecture-as-code/actions/workflows/s3-docs-sync.yml/badge.svg)](https://github.com/finos/architecture-as-code/actions/workflows/s3-docs-sync.yml) [![Build Docs](https://github.com/finos/architecture-as-code/actions/workflows/build-docs.yml/badge.svg)](https://github.com/finos/architecture-as-code/actions/workflows/build-docs.yml)         |
-| [CLI](./cli) & [Shared](./shared)            | [@aidanm3341](https://github.com/aidanm3341), [@lbulanti-ms](https://github.com/lbulanti-ms), [@willosborne](https://github.com/willosborne), [@grahampacker-ms](https://github.com/grahampacker-ms) [@Thels](https://github.com/Thels) | [![Build CLI](https://github.com/finos/architecture-as-code/actions/workflows/build-cli.yml/badge.svg)](https://github.com/finos/architecture-as-code/actions/workflows/build-cli.yml)|
-| [Translators](./translator)                  | [@Budlee](https://github.com/Budlee) [@matthewgardner](https://github.com/matthewgardner) [@jpgough-ms](https://github.com/jpgough-ms)                                                                                                  | [![Build Translator](https://github.com/finos/architecture-as-code/actions/workflows/build-translator.yml/badge.svg)](https://github.com/finos/architecture-as-code/actions/workflows/build-translator.yml)                                                                                                                                                                                          |
+| Project                                      | Lead Maintainers                                                                                                                                                                                                                        | Builds                                                                                                                                                                                                                                                                                                                                                                                       |
+| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Common Architecture Language Model](./calm) | [@rocketstack-matt](https://github.com/rocketstack-matt), [@jpgough-ms](https://github.com/jpgough-ms)                                                                                                                                  | [![Validation of CALM Samples](https://github.com/finos/architecture-as-code/actions/workflows/validate-spectral.yml/badge.svg)](https://github.com/finos/architecture-as-code/actions/workflows/validate-spectral.yml)                                                                                                                                                                      |
+| [Docs](./docs)                               | [@rocketstack-matt](https://github.com/rocketstack-matt)                                                                                                                                                                                | [![Sync Docs to S3](https://github.com/finos/architecture-as-code/actions/workflows/s3-docs-sync.yml/badge.svg)](https://github.com/finos/architecture-as-code/actions/workflows/s3-docs-sync.yml) [![Build Docs](https://github.com/finos/architecture-as-code/actions/workflows/build-docs.yml/badge.svg)](https://github.com/finos/architecture-as-code/actions/workflows/build-docs.yml) |
+| [CLI](./cli) & [Shared](./shared)            | [@aidanm3341](https://github.com/aidanm3341), [@lbulanti-ms](https://github.com/lbulanti-ms), [@willosborne](https://github.com/willosborne), [@grahampacker-ms](https://github.com/grahampacker-ms) [@Thels](https://github.com/Thels) | [![Build CLI](https://github.com/finos/architecture-as-code/actions/workflows/build-cli.yml/badge.svg)](https://github.com/finos/architecture-as-code/actions/workflows/build-cli.yml)                                                                                                                                                                                                       |
+| [Visualizer](./calm-visualizer)              | [@oliviajanejohns](https://github.com/oliviajanejohns) [@aidanm3341](https://github.com/aidanm3341) [@aamanrebello](https://github.com/aamanrebello) [@yoofitt96](https://github.com/YoofiTT96)                                         |
+| [Translators](./translator)                  | [@Budlee](https://github.com/Budlee) [@matthewgardner](https://github.com/matthewgardner) [@jpgough-ms](https://github.com/jpgough-ms)                                                                                                  | [![Build Translator](https://github.com/finos/architecture-as-code/actions/workflows/build-translator.yml/badge.svg)](https://github.com/finos/architecture-as-code/actions/workflows/build-translator.yml)                                                                                                                                                                                  |
 
 ## Getting Involved
 
@@ -58,22 +59,19 @@ We accept contributions via Pull Request, to make a contribution:
 6. Push to the branch (`git push origin feature/fooBar`)
 7. Create a new Pull Request
 
-
 ## GitHub actions
 
 There aren't many standards to follow when it comes to Github actions - but some good rules of thumb for this project are;
 
 - GitHub actions should follow the naming conventions of pre-existing actions to maintain consistency. So that users can find other build-related steps in the same place.
 - Ensure that any obscure actions are documented so that others can follow and maintain them.
 
-
 ## Language Dependencies
 
 ### TypeScript Packages
 
 Currently we have three typescript packages - two of which are managed via `npm workspaces` and one which is just raw `npm`. How these are built and manages slightly differs until they are all under the same worksapce - please look at their related github actions to learn how to build/test each of them.
 
-
 ## License
 
 Copyright 2024 FINOS

calm-visualizer/README.md

@@ -1,50 +1,45 @@
-# React + TypeScript + Vite
+## Calm Visualizer
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Calm Visualizer is a tool designed to help visualize and manage software architecture through a UI.
 
-Currently, two official plugins are available:
+### Features
 
--   [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
--   [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- Visualize uploaded architecure JSON file using cytoscape JS
+- Toggle connection and node descriptions
 
-## Expanding the ESLint configuration
+### Installation
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+To install Calm Visualizer, clone the repository and install the dependencies:
 
--   Configure the top-level `parserOptions` property like this:
+```sh
+cd calm-visualizer
+npm install
+```
+
+### Usage
+
+To start the UI, run:
 
-```js
-export default tseslint.config({
-    languageOptions: {
-        // other options...
-        parserOptions: {
-            project: ['./tsconfig.node.json', './tsconfig.app.json'],
-            tsconfigRootDir: import.meta.dirname,
-        },
-    },
-});
+```sh
+npm run dev
 ```
 
--   Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
--   Optionally add `...tseslint.configs.stylisticTypeChecked`
--   Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react';
-
-export default tseslint.config({
-    // Set the react version
-    settings: { react: { version: '18.3' } },
-    plugins: {
-        // Add the react plugin
-        react,
-    },
-    rules: {
-        // other rules...
-        // Enable its recommended rules
-        ...react.configs.recommended.rules,
-        ...react.configs['jsx-runtime'].rules,
-    },
-});
+This will start the UI and you can access the application at `http://localhost:5174`.
+
+### Building for Production
+
+To build the application for production, run:
+
+```sh
+npm run build
 ```
+
+This will create a `dist` directory with the production build of the application.
+
+## License
+
+Copyright 2024 FINOS
+
+Distributed under the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0).
+
+SPDX-License-Identifier: [Apache-2.0](https://spdx.org/licenses/Apache-2.0)

calm-visualizer/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-theme="cupcake">
+<html lang="en" data-theme="emerald">
     <head>
         <meta charset="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/vite.svg" />

calm-visualizer/package-lock.json

@@ -27,6 +27,7 @@
     },
     "devDependencies": {
         "@eslint/js": "^9.14.0",
+        "@tailwindcss/typography": "^0.5.16",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.1.0",
         "@testing-library/user-event": "^14.5.2",

calm-visualizer/package.json

@@ -2,12 +2,12 @@ import { useState } from 'react';
 import './App.css';
 import Drawer from './components/drawer/Drawer';
 import Navbar from './components/navbar/Navbar';
-import { CALMInstantiation } from '../../shared/src/types';
+import { CALMArchitecture } from '../../shared/src/types';
 import React from 'react';
 
 function App() {
     const [title, setTitle] = useState<string | undefined>(undefined);
-    const [instance, setCALMInstance] = useState<CALMInstantiation | undefined>(undefined);
+    const [instance, setCALMInstance] = useState<CALMArchitecture | undefined>(undefined);
     const [isConDescActive, setConDescActive] = React.useState(false);
     const [isNodeDescActive, setNodeDescActive] = React.useState(false);
 

calm-visualizer/src/App.tsx

@@ -69,6 +69,7 @@ export type Edge = {
     };
 };
 
+
 interface Props {
     title?: string;
     isNodeDescActive: boolean;
@@ -91,7 +92,8 @@ const CytoscapeRenderer = ({
 
     useEffect(() => {
         if (cy) {
-            (cy as any).nodeHtmlLabel([
+            /* eslint-disable @typescript-eslint/no-explicit-any */
+            (cy as Core & { nodeHtmlLabel: any }).nodeHtmlLabel([
                 {
                     query: '.node',
                     halign: 'center',
@@ -128,7 +130,7 @@ const CytoscapeRenderer = ({
                 cy.destroy();
             };
         }
-    }, [cy]);
+    }, [cy, isNodeDescActive]);
 
     useEffect(() => {
         // Initialize Cytoscape instance
@@ -164,13 +166,14 @@ const CytoscapeRenderer = ({
                 layout: fcoseLayoutOptions,
             })
         );
-    }, [nodes, edges]); // Re-render on cy, nodes or edges change
+    }, [nodes, edges, isConDescActive]); // Re-render on cy, nodes or edges change
 
     return (
         <div className="relative flex m-auto border">
             {title && (
-                <div className="graph-title absolute m-5 bg-primary-content shadow-md">
-                    <span className="text-m">Architecture: {title}</span>
+                <div className="graph-title absolute m-5 bg-primary shadow-md">
+                    <span className="text-m font-thin">Architecture: </span>
+                    <span className="text-m font-semibold">{title}</span>
                 </div>
             )}
             <div