solid_litequeen 0.10.3 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8bea5f5d1e8b1ca9a1c3cc11443592734bad832f263f61c70bace53c74881f42
-  data.tar.gz: f4e91d3189ca8e38c3acce297f1da104d99adff11b5ede2b32a02ab3a49f2f0f
+  metadata.gz: 20c5e5b3dda06319b2fc54f414d021f38b8bce98a343c1ab3a9085658255956f
+  data.tar.gz: aeef980f3988611b19ad8300944659c2ef619d5c71206aa4be56108a09919d46
 SHA512:
-  metadata.gz: 2b67cf3712f2f5931fbc43e7ba3d53cc77324d8f231de9d24041068dc5704d000ba53e977914355d8a09b168a88ef9cdff8ec44eee0ec01a36a2e927fb9e9277
-  data.tar.gz: 80cff9bb4a94b9ef65eaa3be3cfc72819b03a820f61bfbcac334607897d8ca6c724fe823e5303df2f5bb6d9d13f9e64978a1d0951d0da8c5b077eab10d2d4d8c
+  metadata.gz: 06af085c8332f1d5a3fb8412c2108101b316ecfb4cd64f7eceb9a82720f0d700fa3bf4ca9c3248183e539b7736de04553405f5ab5634f22eca5778e5193d7445
+  data.tar.gz: d8a8255598db402cf2b7d9b4db1785ddc0f7b91956bf8dbe962aef69fa29d3e6954eef0a08396042924b4b2784b3934ba9cdd2bbac026dea7d2929991ca8b3ae

data/app/assets/images/solid_litequeen/icons/workflow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-workflow"><rect width="8" height="8" x="3" y="3" rx="2"></rect><path d="M7 11v4a2 2 0 0 0 2 2h4"></path><rect width="8" height="8" x="13" y="13" rx="2"></rect></svg>

data/app/assets/images/solid_litequeen/icons/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>

data/app/controllers/solid_litequeen/databases_controller.rb

@@ -18,11 +18,46 @@ module SolidLitequeen
 
       tables = DynamicDatabase.connection.tables
 
+      foreign_keys = []
 
       @tables = tables.map do |table|
+        fk = DynamicDatabase.connection.foreign_keys(table)
+        foreign_keys.concat(fk) unless fk.empty?
+
         row_count = DynamicDatabase.connection.select_value("SELECT COUNT(*) FROM #{table}").to_i
         { name: table, row_count: row_count }
       end
+
+      tables = {}
+      relations = []
+
+      foreign_keys.each do |rel|
+        from_table = rel[:from_table]
+        to_table = rel[:to_table]
+        fk_field =  rel.dig(:options).dig(:column)
+        pk_field = rel.dig(:options).dig(:primary_key)
+
+        # Initialize tables if not already present
+        tables[from_table] ||= { name: from_table, fields: [] }
+        tables[to_table]   ||= { name: to_table, fields: [] }
+
+        # Add fields if not already included
+        tables[from_table][:fields] << fk_field unless tables[from_table][:fields].include?(fk_field)
+        tables[to_table][:fields] << pk_field unless tables[to_table][:fields].include?(pk_field)
+
+        # Build a simplified relation object
+        relations << {
+          from_table: from_table,
+          from_field: fk_field,
+          to_table: to_table,
+          to_field: pk_field
+        }
+      end
+
+      @table_relations = {
+        tables: tables.values,
+        relations: relations
+      }
     end
 
     def table_rows

data/app/javascript/solid_litequeen/controllers/table_relations_controller.js

@@ -0,0 +1,295 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="table-relations"
+export default class extends Controller {
+	connect() {
+		const table_relations_data = JSON.parse(
+			table_relationships.dataset.relations,
+		);
+		this.tables = table_relations_data.tables;
+		this.relations = table_relations_data.relations;
+
+		// graph manages the data structure and state of the diagram
+		this.graph = new joint.dia.Graph();
+
+		// paper handles rendering and user interaction
+		this.paper = new joint.dia.Paper({
+			el: document.getElementById("paper"),
+			model: this.graph,
+			width: 1000,
+			height: 600,
+			gridSize: 10,
+			drawGrid: true,
+			background: {
+				color: "#f8f9fa",
+			},
+			interactive: (cellView) => {
+				// If this cell is embedded (a field node),
+				// return false so that it doesn't capture pointer events.
+				// this way it gets delegated to the parent
+				if (cellView.model.parent()) {
+					return false;
+				}
+				return true;
+			},
+		});
+
+		// so we can render stuff when we open the dialog to avoid render issues with wrong sizes
+		this.#observeDialogOpenStatus();
+	}
+
+	disconnect() {
+		console.log("disconnected...");
+	}
+
+	#buildTables() {
+		this.tables.forEach((table, index) => {
+			// Initial position - will be adjusted by layout algorithm
+			const position = { x: 100, y: 100 };
+			// Create table node for each table with its fields
+			const tableCells = this.#createTableNode(
+				table.name,
+				table.name,
+				table.fields,
+				position,
+			);
+			this.graph.addCells(tableCells);
+		});
+	}
+
+	#buildLinks() {
+		// biome-ignore lint/complexity/noForEach: <explanation>
+		this.relations.forEach((relation) => {
+			const sourceId = `${relation.from_table}-${relation.from_field}`;
+			const targetId = `${relation.to_table}-${relation.to_field}`;
+
+			const link = new joint.shapes.standard.Link({
+				source: { id: sourceId },
+				target: { id: targetId },
+				attrs: {
+					line: {
+						stroke: "#333",
+						strokeWidth: 2,
+						targetMarker: {
+							type: "path",
+							d: "M 10 -5 0 0 10 5 z",
+						},
+					},
+				},
+				router: { name: "manhattan" },
+				connector: { name: "rounded" },
+			});
+
+			this.graph.addCell(link);
+		});
+	}
+
+	#createTableNode(id, tableName, fields, position) {
+		// Calculate height based on number of fields
+		const headerHeight = 30;
+		const fieldHeight = 25;
+		const width = 270;
+		const height = headerHeight + fields.length * fieldHeight;
+
+		// Create the main table node
+		const tableNode = new joint.shapes.standard.HeaderedRectangle({
+			id: id,
+			position: position,
+			size: { width: width, height: height },
+			attrs: {
+				body: {
+					fill: "#f5f5f5",
+					strokeWidth: 2,
+					stroke: "#ccc",
+				},
+				header: {
+					fill: "#e0e0e0",
+					strokeWidth: 1,
+					stroke: "#ccc",
+					height: headerHeight,
+				},
+				headerText: {
+					text: tableName,
+					fill: "#000",
+					fontWeight: "bold",
+					fontSize: 16,
+				},
+			},
+		});
+
+		// Create field nodes
+		const fieldNodes = fields.map((field, index) => {
+			const fieldNode = new joint.shapes.standard.Rectangle({
+				id: `${id}-${field}`,
+				position: {
+					x: position.x,
+					y: position.y + headerHeight + index * fieldHeight,
+				},
+				size: { width: width, height: fieldHeight },
+				attrs: {
+					body: {
+						fill: "#ffffff",
+						strokeWidth: 1,
+						stroke: "#ddd",
+					},
+					label: {
+						text: field,
+						fill: "#333",
+						fontSize: 14,
+					},
+				},
+				ports: {
+					groups: {
+						left: {
+							position: "left",
+							attrs: {
+								circle: {
+									r: 4,
+									magnet: true,
+									fill: "transparent",
+									stroke: "transparent",
+								},
+							},
+						},
+						right: {
+							position: "right",
+							attrs: {
+								circle: {
+									r: 4,
+									magnet: true,
+									fill: "transparent",
+									stroke: "transparent",
+								},
+							},
+						},
+					},
+				},
+			});
+
+			// Add ports for connections on left and right sides
+			fieldNode.addPort({ group: "left" });
+			fieldNode.addPort({ group: "right" });
+
+			// Allow events to bubble to the parent by not stopping delegation.
+			fieldNode.set("stopDelegation", false);
+			return fieldNode;
+		});
+
+		// Embed header and fields in the table node
+		// biome-ignore lint/complexity/noForEach: <explanation>
+		fieldNodes.forEach((fieldNode) => {
+			tableNode.embed(fieldNode);
+		});
+
+		return [tableNode, ...fieldNodes];
+	}
+
+	#applyLayout() {
+		// Create a new directed graph
+		const g = new dagre.graphlib.Graph();
+
+		// Set an object for the graph label
+		g.setGraph({
+			rankdir: "LR",
+			nodesep: 80,
+			edgesep: 50,
+			ranksep: 150,
+			marginx: 50,
+			marginy: 50,
+		});
+
+		// Default to assigning a new object as a label for each new edge.
+		g.setDefaultEdgeLabel(() => ({}));
+
+		// Get all the root elements (tables, not fields)
+		const elements = this.graph.getElements().filter((el) => !el.parent());
+
+		// Add nodes to the graph
+		// biome-ignore lint/complexity/noForEach: <explanation>
+		elements.forEach((element) => {
+			g.setNode(element.id, {
+				width: element.get("size").width,
+				height: element.get("size").height,
+			});
+		});
+
+		// Add edges to the graph
+		// biome-ignore lint/complexity/noForEach: <explanation>
+		this.graph.getLinks().forEach((link) => {
+			const source = this.graph.getCell(link.get("source").id);
+			const target = this.graph.getCell(link.get("target").id);
+
+			// Only add edges between parent elements
+			if (source && target) {
+				const sourceParent = source.parent()
+					? this.graph.getCell(source.parent())
+					: source;
+				const targetParent = target.parent()
+					? this.graph.getCell(target.parent())
+					: target;
+
+				if (sourceParent.id !== targetParent.id) {
+					g.setEdge(sourceParent.id, targetParent.id);
+				}
+			}
+		});
+
+		// Run the layout
+		dagre.layout(g);
+
+		// Apply the layout to the JointJS graph
+		// biome-ignore lint/complexity/noForEach: <explanation>
+		g.nodes().forEach((nodeId) => {
+			const element = this.graph.getCell(nodeId);
+			if (element) {
+				const node = g.node(nodeId);
+
+				// Position the element at the center of the node position
+				element.position(node.x - node.width / 2, node.y - node.height / 2);
+
+				// Adjust the position of embedded elements (fields)
+				const embeds = element.getEmbeddedCells();
+				if (embeds.length > 0) {
+					const position = element.position();
+					const headerHeight = 30;
+					const fieldHeight = 25;
+
+					embeds.forEach((embed, index) => {
+						embed.position(
+							position.x,
+							position.y + headerHeight + index * fieldHeight,
+						);
+					});
+				}
+			}
+		});
+
+		// Fit the content to the paper
+		this.paper.fitToContent({
+			padding: 50,
+			allowNewOrigin: "any",
+		});
+	}
+
+	#observeDialogOpenStatus() {
+		const observer = new MutationObserver((mutations) => {
+			for (const mutation of mutations) {
+				if (
+					mutation.type === "attributes" &&
+					mutation.attributeName === "open"
+				) {
+					if (this.element.hasAttribute("open")) {
+						// The dialog has been opened – run your code
+						setTimeout(() => {
+							this.#buildTables();
+							this.#buildLinks();
+							this.#applyLayout();
+						}, 50);
+					}
+				}
+			}
+		});
+
+		observer.observe(this.element, { attributes: true });
+	}
+}

data/app/views/layouts/solid_litequeen/application.html.erb

@@ -10,6 +10,8 @@
 
   <%= stylesheet_link_tag "solid_litequeen/application", media: "all", "data-turbo-track": "reload" %>
   <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@joint/core@4.0.1/dist/joint.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/dagre/0.8.5/dagre.min.js"></script>
   <style type="text/tailwindcss">
     @plugins "form";
    

data/app/views/solid_litequeen/databases/_table-relationships-dialog.html.erb

@@ -0,0 +1,10 @@
+<dialog id="table_relationships" data-controller="table-relations" data-relations="<%= @table_relations.to_json %>" class="w-[1200px] h-full m-auto overscroll-y-contain">
+    <form method="submit" class="flex  flex-row-reverse">
+        <button formmethod="dialog" class="cursor-pointer mr-4 mt-2 outline-none"> 
+            <%= image_tag "solid_litequeen/icons/x.svg", class: "size-5" %>
+        </button>
+    </form>
+    <h1 class="text-black text-center mt-4">Table Relationships</h1>
+
+    <div id="paper" class="m-auto my-10 w-full h-[600px] border rounded"></div>
+</dialog>

data/app/views/solid_litequeen/databases/show.html.erb

@@ -7,7 +7,20 @@
     </h1>
 
     <div class="mb-6">
-        <h2 class="text-xl font-semibold text-gray-800">Tables</h2>
+        <h2 class="text-xl font-semibold text-gray-800">
+            <span>
+                Tables
+            </span>
+            <% if @table_relations[:tables].any? %>
+
+                <%= render "table-relationships-dialog" %>
+
+                <button title="Relationships" onclick="table_relationships.showModal()" class="hover:cursor-pointer outline-none">
+                    <%= image_tag "solid_litequeen/icons/workflow.svg", class: "size-5 -mb-1" %>
+                </button>
+
+            <% end %>
+        </h2>
         <p class="text-gray-600"><%= pluralize(@tables.count, "table") %> found</p>
     </div>
 

data/config/importmap.rb

@@ -5,5 +5,7 @@ pin "application", to: "solid_litequeen/application.js", preload: true
 pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
 pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
+pin " @joint/core", to: "join.js", preload: false
+pin " @dagrejs/dagre", to: "dagre.min.js", preload: false
 pin_all_from SolidLitequeen::Engine.root.join("app/javascript/solid_litequeen/controllers"), under: "controllers", to: "solid_litequeen/controllers"
 # pin_all_from SolidLitequeen::Engine.root.join("app/javascript/solid_litequeen/helpers"), under: "helpers", to: "solid_litequeen/helpers"

data/lib/solid_litequeen/version.rb

@@ -1,3 +1,3 @@
 module SolidLitequeen
-  VERSION = "0.10.3"
+  VERSION = "0.11.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: solid_litequeen
 version: !ruby/object:Gem::Version
-  version: 0.10.3
+  version: 0.11.0
 platform: ruby
 authors:
 - Vik Borges
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-11 00:00:00.000000000 Z
+date: 2025-03-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -166,6 +166,8 @@ files:
 - app/assets/images/solid_litequeen/icons/chevron-right.svg
 - app/assets/images/solid_litequeen/icons/database.svg
 - app/assets/images/solid_litequeen/icons/info.svg
+- app/assets/images/solid_litequeen/icons/workflow.svg
+- app/assets/images/solid_litequeen/icons/x.svg
 - app/assets/stylesheets/solid_litequeen/application.css
 - app/controllers/solid_litequeen/application_controller.rb
 - app/controllers/solid_litequeen/databases_controller.rb
@@ -175,11 +177,13 @@ files:
 - app/javascript/solid_litequeen/controllers/application.js
 - app/javascript/solid_litequeen/controllers/index.js
 - app/javascript/solid_litequeen/controllers/table_controller.js
+- app/javascript/solid_litequeen/controllers/table_relations_controller.js
 - app/jobs/solid_litequeen/application_job.rb
 - app/mailers/solid_litequeen/application_mailer.rb
 - app/models/solid_litequeen/application_record.rb
 - app/views/layouts/solid_litequeen/application.html.erb
 - app/views/solid_litequeen/_database-selector.html.erb
+- app/views/solid_litequeen/databases/_table-relationships-dialog.html.erb
 - app/views/solid_litequeen/databases/index.html.erb
 - app/views/solid_litequeen/databases/show.html.erb
 - app/views/solid_litequeen/databases/table_rows.html.erb