🎯 ER Diagram Visualization Feature

[Lucki2g]

This is a comprehensive addition of an Entity Relationship (ER) Diagram visualization feature to the Data Model Viewer. This feature transforms the existing tabular data model view into an interactive, visual diagram that displays entities, their attributes, and relationships in a graph-based layout.

Adding data to the diagram

You will initially have the first group in your data to work with, but can easily add entire groups or single entities to the diagram. For entities you can:

• Add / Remove attributes (lookups will automatically create paths to the related table)
• Remove the entity from the diagram

Styling your Realtionships

Relationships can be modified to:

• have different colors
• have different styles
• have a label (option to get the name of the relationship)

Other shapes

Currently you can only add two simple shapes.

• The square to highlight groupings of entities
• Texts to add notes or names on the diagram

Saving and Loading diagram

You can save your diagram to local Disc for later reloading

Explore

The detailed diagram version is inspired by the Microsoft Plan Designer, and can be used to explore your data.

[Copilot]

Pull Request Overview

This PR adds a comprehensive Entity Relationship (ER) Diagram visualization feature to the Data Model Viewer, transforming the existing tabular view into an interactive, visual diagram with graph-based layouts. Users can create diagrams showing entities, their attributes, and relationships, with support for styling, annotations, and persistence.

Key changes include:

• Complete ER diagram visualization system with JointJS and libavoid-js for interactive diagrams and smart routing
• Support for both simple and detailed entity views with attribute management
• Comprehensive styling and annotation tools including squares, text elements, and relationship customization
• Diagram persistence with save/load functionality and group-based diagram management

Reviewed Changes

Copilot reviewed 44 out of 46 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
Website/package.json	Adds diagram visualization dependencies (@joint/core, libavoid-js, @radix-ui components)
Website/middleware.ts	Extends route protection to include diagram page
Website/lib/Types.ts	Extends entity and relationship types with diagram-specific properties
Website/hooks/*	Core diagram management hooks and utilities
Website/contexts/*	React context for diagram state management
Website/components/ui/*	New UI components (checkbox, card) for diagram interface
Website/components/diagram/*	Complete diagram rendering and interaction system

Files not reviewed (1)

• Website/package-lock.json: Language not supported

[Copilot]

Loading WASM files from a fixed path without validation could be a security risk. Consider validating the file integrity or using a secure CDN.

Suggested change

	await AvoidLib.load("/libavoid.wasm");
	// Fetch the WASM file as an ArrayBuffer
	const response = await fetch("/libavoid.wasm");
	if (!response.ok) {
	throw new Error("Failed to fetch WASM file");
	}
	const wasmBuffer = await response.arrayBuffer();
	// Compute SHA-256 hash of the WASM file
	const hashBuffer = await crypto.subtle.digest('SHA-256', wasmBuffer);
	const hashArray = Array.from(new Uint8Array(hashBuffer));
	const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
	// Replace this with the actual expected hash of your WASM file
	const expectedHash = "REPLACE_WITH_ACTUAL_SHA256_HASH";
	if (hashHex !== expectedHash) {
	throw new Error("WASM file integrity check failed");
	}
	// Load the WASM file from the buffer if supported
	await AvoidLib.load(wasmBuffer);

[mzodelegatedk]

Det ser rigtig lækkert ud Kaare :)

Her er et forslag til hvordan det evt. kan komme videre til næste niveau:

• I stedet for at man kan gemme lokalt, så skal man kunne gemme online, så alle kan se de samme diagrammer. Den største værdi i diagrammerne er at alle kan se dem let, uden selv at skulle gøre andet end at trykke på menupunktet.
  • Det kræver selvfølgelig noget "state" i Azure RG´en, det kunne være en storage account.
  • Man bør kunne give sit diagram et "Navn" og bør kunne sætte et diagram som "Default diagram", dette viser følgende confirm-boks "Are you sure you want to set '[diagram name] as the default diagram in Data Model Viewer? It will be so for all users not just yourself.". Evt. også en "Beskrivelse".
  • Man bør kunne slette diagrammer igen (med en advarsel). Bemærk at vi jo ikke har noget særligt "sikkerhed" her, så alle med adgang til sitet kan oprette/ændre diagrammer. En yderligere sikring kunne være at man har et "administrator-password" til sitet, udover det almindelige password. Og bliver spurgt om det hvis man prøver at slette diagrammer eller sætte dem til standard (evt. også ved oprettelse/redigering).
  • Hvis man alligevel har etableret "state", så kunne man også første gang genereringen kører i en DMV instans, lave et system-genereret default-diagram. Det skal dog være muligt for brugeren at slette og så skal det ikke genereres igen. Men det kunne være nice med en "Generér standard-diagram"-knap så man kan genskabe det senere.

[pksorensen]

Hvis i introducere state/storage. Overvej i hvilken grad i kan udgå at bruge azure resoruces og gøre så løsningen kan køre i en simpel container.

Så hvis man skal have persistant storage så kan man altid mount et persistant storage på (volumen i docker)

Men kommer jo an på hvad i gør i forvejen, men herfra er det fedt hvis det er nemt at køre alle steder og ikke er afhængig af at skal sætte ting op på på azure nødvendigvis.

PS ser fedt Kaare :)