init(visualizer): base HTML and @antv/g6@v5

rapidstream-org · Jan 16, 2025 · 6b097e2 · 6b097e2
1 parent dd70200
commit 6b097e2
Show file tree

Hide file tree

Showing 13 changed files with 3,975 additions and 0 deletions.
diff --git a/tapa-visualizer/.editorconfig b/tapa-visualizer/.editorconfig
@@ -0,0 +1,18 @@
+# Copyright (c) 2024 RapidStream Design Automation, Inc. and contributors.
+# All rights reserved. The contributor(s) of this file has/have agreed to the
+# RapidStream Contributor License Agreement.
+
+# https://EditorConfig.org
+
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{js,jsx,ts,tsx,mjs,cjs}]
+indent_style = space
+indent_size = 2
diff --git a/tapa-visualizer/css/button.css b/tapa-visualizer/css/button.css
@@ -0,0 +1,76 @@
+/*
+# Copyright (c) 2024 RapidStream Design Automation, Inc. and contributors.
+# All rights reserved. The contributor(s) of this file has/have agreed to the
+# RapidStream Contributor License Agreement.
+*/
+
+.btn {
+	position: relative;
+	padding: 2px;
+	border: 1px solid #CCC;
+	border-radius: 2px;
+	font-size: smaller; /* for non-<button> .btn element like <label> */
+}
+
+/* button text tooltip
+	set top / right / bottom / left to position the text tooltip;
+	Center .btn-text in the parent element, instead of translate(-50%) */
+.btn > .btn-text {
+	position: absolute;
+	padding: .5rem;
+	border: 1px solid;
+	border-radius: 4px;
+	background-color: white;
+	line-height: 1;
+}
+
+/* triangle of the tooltip
+	set top / right / bottom / left to position triangle of the tooltip;
+	set transform: rotate(xxxdeg) to rotate the triangle. */
+.btn > .btn-text::before {
+	content: "";
+	position: absolute;
+	box-sizing: border-box;
+	display: block;
+	width: 8px;
+	height: 8px;
+	border: 1px solid;
+	border-color: currentColor transparent transparent currentColor;
+	background: linear-gradient(-45deg, transparent 33%, white 33%);
+}
+.btn:not(:hover):not(:focus) > .btn-text {
+	display: none;
+}
+
+header .btn {
+	display: inline-flex;
+	flex-direction: column;
+	align-items: center;
+}
+header .btn > .btn-text {
+	top: 1.9rem;
+}
+header .btn > .btn-text::before {
+	top: -4px;
+	left: calc(50% - 4px);
+	transform: rotate(45deg);
+}
+
+/* Don't wrap "Toggle Sidebar" on wide screen */
+@media (min-width: 75em) { /* 75em * 16px = 1200px = xl in Bootstrap */
+	header { padding: .1rem 2.5rem; }
+	header .btn > .btn-text { white-space: pre; }
+}
+
+aside > .tabs .btn {
+	display: flex;
+	align-items: center;
+}
+aside > .tabs .btn > .btn-text {
+	right: 1.5rem;
+}
+aside > .tabs .btn > .btn-text::before {
+	top: calc(50% - 4px);
+	right: -4px;
+	transform: rotate(135deg);
+}
diff --git a/tapa-visualizer/css/style.css b/tapa-visualizer/css/style.css
@@ -0,0 +1,82 @@
+/*
+# Copyright (c) 2024 RapidStream Design Automation, Inc. and contributors.
+# All rights reserved. The contributor(s) of this file has/have agreed to the
+# RapidStream Contributor License Agreement.
+*/
+
+@import url("./button.css");
+
+/* reset */
+header ul,
+aside ul {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+}
+
+
+/* body */
+body {
+	display: grid;
+	grid-template: auto 1fr / auto 1fr;
+}
+
+/* header */
+header {
+	grid-column: 1 / -1;
+	box-sizing: border-box;
+	min-height: 2rem;
+	padding: .1rem 1rem;
+	border-bottom: 1px solid gray;
+}
+
+header,
+header .flex {
+	display: flex;
+	align-items: center;
+	gap: .5rem;
+}
+
+header .tools { margin-left: auto; }
+header .tools hr { height: 1rem; margin: 0; }
+
+header .grouping > li > label:hover {
+	background-color: #EEE;
+}
+header .grouping > li > label:has(:checked) {
+	background-color: #CCC;
+}
+
+/* main */
+
+main {
+	width: 75vw;
+	min-width: 40vw;
+	max-width: 85vw;
+	overflow: auto;
+	resize: horizontal;
+}
+
+main > .graph-container > .tooltip {
+	overflow-wrap: anywhere;
+}
+
+/* aside */
+
+aside {
+	display: flex;
+}
+
+aside > .tabs {
+	display: flex;
+	flex-direction: column;
+	gap: .5rem;
+	padding: .5rem;
+	border-left: 1px solid gray;
+	border-right: 1px solid gray;
+}
+
+
+aside > .contents {
+	flex: 1;
+}
diff --git a/tapa-visualizer/eslint.config.mjs b/tapa-visualizer/eslint.config.mjs
@@ -0,0 +1,92 @@
+// Copyright (c) 2024 RapidStream Design Automation, Inc. and contributors.
+// All rights reserved. The contributor(s) of this file has/have agreed to the
+// RapidStream Contributor License Agreement.
+
+import globals from "globals";
+import js from "@eslint/js";
+import ts from "typescript-eslint";
+
+/** Global ignores
+ * Global ignores can't have any other property then ignores (and name)
+ * https://eslint.org/docs/latest/use/configure/configuration-files#globally-ignoring-files-with-ignores
+ *  @type {Pick<import("eslint").Linter.Config, "name" | "ignores">} */
+const globalIgnores = {
+  name: "global ignores",
+  ignores: [],
+};
+
+/** @type {import("eslint").Linter.Config[]} */
+const config = [
+
+  globalIgnores,
+
+  {
+    name: "languageOptions/globals/browser",
+    languageOptions: { globals: globals.browser },
+  },
+  {
+    name: "languageOptions/globals/nodeBuiltin",
+    files: ["*.config.{js,mjs,cjs,ts}"],
+    languageOptions: { globals: globals.nodeBuiltin },
+  },
+
+  // JavaScript
+  {
+    name: "@eslint/js/recommended",
+    ...js.configs.recommended,
+  },
+  {
+    name: "@eslint/js/custom",
+    rules: {
+      'no-undef': "off",
+      "no-plusplus": ["error", { allowForLoopAfterthoughts: true }],
+      "prefer-object-has-own": "error",
+      "prefer-object-spread": "error",
+      "prefer-template": "error",
+      "sort-imports": ["warn", { allowSeparatedGroups: true }],
+      "sort-vars": "warn",
+    },
+  },
+
+  // TypeScript
+  ...ts.configs.recommendedTypeChecked,
+  {
+    name: "typescript-eslint/custom",
+    languageOptions: {
+      parserOptions: {
+        project: true,
+        projectService: true,
+      },
+    },
+    rules: {
+      "@typescript-eslint/naming-convention": [
+        "warn",
+        {
+          selector: "variable",
+          format: ["camelCase", "PascalCase", "UPPER_CASE"],
+          leadingUnderscore: "allow",
+          trailingUnderscore: "allow",
+        },
+      ],
+      "@typescript-eslint/no-unused-expressions": [
+        "warn",
+        {
+          allowShortCircuit: true,
+          allowTernary: true,
+          enforceForJSX: true,
+        },
+      ],
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_|e",
+        },
+      ],
+    },
+  }
+
+];
+
+export default config;
diff --git a/tapa-visualizer/index.html b/tapa-visualizer/index.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+
+<!--
+Copyright (c) 2024 RapidStream Design Automation, Inc. and contributors.
+All rights reserved. The contributor(s) of this file has/have agreed to the
+RapidStream Contributor License Agreement.
+-->
+
+<!-- Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as
+part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide
+Contributors 2022. -->
+
+<!-- Disable security.fileuri.strict_origin_policy if you need to open this
+file directly through file:// URI on Firefox. -->
+
+<html lang="en">
+
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>TAPA Visualizer</title>
+<style>
+html, body, .graph-container { height: 100%; }
+body { margin: 0; }
+.lucide { width: 1rem; height: 1rem; }
+</style>
+<link rel="stylesheet" href="./css/style.css">
+
+<header>
+
+	<div class="file flex">
+		<input class="fileInput" type="file" accept=".json,application/json">
+		<button class="btn btn-clearGraph" disabled>
+			<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 d="m6 6 12 12"/></svg>
+			<span class="btn-text">Clear Graph</span>
+		</button>
+	</div>
+
+	<div class="tools flex">
+		<ul class="grouping flex">
+			<li><label class="btn" tabindex="0">
+				<input type="radio" name="grouping" value="default" hidden checked>
+				<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-square-square"><rect x="3" y="3" width="18" height="18" rx="2"/><rect x="8" y="8" width="8" height="8" rx="1"/></svg>
+				<span class="btn-text">Default Grouping</span>
+			</label></li>
+			<li><label class="btn" tabindex="0">
+				<input type="radio" name="grouping" value="flat" hidden>
+				<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-network"><rect x="16" y="16" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="9" y="2" width="6" height="6" rx="1"/><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/><path d="M12 12V8"/></svg>
+				<span class="btn-text">No Grouping</span>
+			</label></li>
+		</ul>
+
+		<hr>
+
+		<button class="btn btn-refreshGraph" disabled>
+			<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-refresh-cw"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
+			<span class="btn-text">Refresh Graph</span>
+		</button>
+		<button class="btn btn-fitCenter" disabled>
+			<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-fullscreen"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><rect width="10" height="8" x="7" y="8" rx="1"/></svg>
+			<span class="btn-text">Fit Center</span>
+		</button>
+		<button class="btn btn-fitView" disabled>
+			<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-expand"><path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8"/><path d="M3 16.2V21m0 0h4.8M3 21l6-6"/><path d="M21 7.8V3m0 0h-4.8M21 3l-6 6"/><path d="M3 7.8V3m0 0h4.8M3 3l6 6"/></svg>
+			<span class="btn-text">Fit View</span>
+		</button>
+
+		<hr>
+
+		<button class="btn btn-toggleSidebar" disabled>
+			<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-panel-right"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/></svg>
+			<span class="btn-text">Toggle Sidebar</span>
+		</button>
+	</div>
+
+</header>
+
+<main>
+	<div class="graph-container"></div>
+
+</main>
+
+<aside>
+	<!-- <ul class="tooltips">
+		<li class="details">Details</li>
+		<li class="connections">Connections</li>
+	</ul> -->
+	<ul class="tabs">
+		<li class="details"><label class="btn btn-details" tabindex="0">
+			<input type="radio" name="sidebar" value="details" hidden checked>
+			<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-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+			<span class="btn-text">Details</span>
+		</label></li>
+		<li class="connections"><label class="btn btn-connections" tabindex="0">
+			<input type="radio" name="sidebar" value="connections" hidden>
+			<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-waypoints"><circle cx="12" cy="4.5" r="2.5"/><path d="m10.2 6.3-3.9 3.9"/><circle cx="4.5" cy="12" r="2.5"/><path d="M7 12h10"/><circle cx="19.5" cy="12" r="2.5"/><path d="m13.8 17.7 3.9-3.9"/><circle cx="12" cy="19.5" r="2.5"/></svg>
+			<span class="btn-text">Connections</span>
+		</label></li>
+	</ul>
+	<ul class="contents">
+		<li class="details">TODO</li>
+		<li class="connections"></li>
+	</ul>
+</aside>
+
+<script>
+// Inline scripts aren't covered by ESlint & TypeScript, be careful
+(() => {
+	const sidebar = document.querySelector("aside");
+	/** @type { HTMLButtonElement | null } */
+	const toggleSidebar = document.querySelector(".btn-toggleSidebar");
+	if (sidebar && toggleSidebar) {
+		// FIXME: expand main after hide sidebar
+		toggleSidebar.addEventListener("click", () => {
+			const newValue = sidebar.style.display !== "none" ? "none" : null;
+			sidebar.style.setProperty("display", newValue);
+		});
+		toggleSidebar.disabled = false;
+	}
+})();
+</script>
+
+<script src="https://unpkg.com/@antv/[email protected]/dist/g6.min.js"></script>
+
+<script type="module" src="./js/graph.js"></script>
+
+</html>