Skip to content

Commit

Permalink
Merge branch 'main' into renovate/react-json-view-lite-2.x-lockfile
Browse files Browse the repository at this point in the history
  • Loading branch information
jpgough-ms authored Jan 16, 2025
2 parents ea523af + d822669 commit aea5314
Show file tree
Hide file tree
Showing 16 changed files with 30,423 additions and 27,042 deletions.
2 changes: 2 additions & 0 deletions .github/CODEOWNERS
Original file line number Diff line number Diff line change
Expand Up @@ -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
2 changes: 2 additions & 0 deletions .github/labeler.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ calm-hub:
- "calm-hub/**"
calm:
- "calm/**"
calm-visualizer:
- "calm-visualizer/**"
config:
- "pom.xml"
- "**/package.json"
Expand Down
39 changes: 39 additions & 0 deletions .github/workflows/build-visualizer.yml
Original file line number Diff line number Diff line change
@@ -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
16 changes: 7 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand Down
75 changes: 35 additions & 40 deletions calm-visualizer/README.md
Original file line number Diff line number Diff line change
@@ -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)
2 changes: 1 addition & 1 deletion calm-visualizer/index.html
Original file line number Diff line number Diff line change
@@ -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" />
Expand Down
45 changes: 45 additions & 0 deletions calm-visualizer/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions calm-visualizer/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions calm-visualizer/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export type Edge = {
};
};


interface Props {
title?: string;
isNodeDescActive: boolean;
Expand All @@ -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',
Expand Down Expand Up @@ -128,7 +130,7 @@ const CytoscapeRenderer = ({
cy.destroy();
};
}
}, [cy]);
}, [cy, isNodeDescActive]);

useEffect(() => {
// Initialize Cytoscape instance
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,3 @@
margin-top: 10px;
color: black;
}

.relationship-label {
background-color: white;
}
Loading

0 comments on commit aea5314

Please sign in to comment.