From 5ad3095d9f86681940a094940be723978c964c93 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <ryanatkn@gmail.com>
Date: Thu, 11 Mar 2021 17:53:49 -0700
Subject: [PATCH] add a build tree view and id components

---
 src/client/App.svelte                    | 83 ++++++++++++++----------
 src/client/BuildId.svelte                | 16 +++++
 src/client/BuildName.svelte              | 11 ++++
 src/client/SourceId.svelte               | 16 +++++
 src/client/SourceMetaBuildTree.svelte    | 63 ++++++++++++++++++
 src/client/SourceMetaBuildsTable.svelte  | 50 ++++++++------
 src/client/SourceMetaExpanderItem.svelte | 13 ++--
 src/client/SourceMetaRawItem.svelte      |  8 ++-
 src/client/SourceMetaTable.svelte        | 52 +++++++++------
 src/client/SourceMetaTreeExplorer.svelte |  5 +-
 src/client/index.html                    |  2 +-
 src/client/styles.css                    |  7 +-
 12 files changed, 240 insertions(+), 86 deletions(-)
 create mode 100644 src/client/BuildId.svelte
 create mode 100644 src/client/BuildName.svelte
 create mode 100644 src/client/SourceId.svelte
 create mode 100644 src/client/SourceMetaBuildTree.svelte

diff --git a/src/client/App.svelte b/src/client/App.svelte
index 7f909a4927..ef3d4bd164 100644
--- a/src/client/App.svelte
+++ b/src/client/App.svelte
@@ -1,6 +1,6 @@
 <script>
 	import {onMount} from 'svelte';
-	import {fade} from 'svelte/transition';
+	import {slide} from 'svelte/transition';
 	import {writable} from 'svelte/store';
 
 	import FilerVisualizer from './FilerVisualizer.svelte';
@@ -12,6 +12,7 @@
 	import SourceMetaExpander from './SourceMetaExpander.svelte';
 	import SourceMetaTable from './SourceMetaTable.svelte';
 	import SourceMetaBuildsTable from './SourceMetaBuildsTable.svelte';
+	import SourceMetaBuildTree from './SourceMetaBuildTree.svelte';
 	import SourceMetaTreeExplorer from './SourceMetaTreeExplorer.svelte';
 	import {createSourceTree} from './sourceTree.js';
 
@@ -27,9 +28,10 @@
 		SourceMetaExpander,
 		SourceMetaTable,
 		SourceMetaBuildsTable,
+		SourceMetaBuildTree,
 		SourceMetaTreeExplorer,
 	];
-	let activeSourceMetaViewIndex = 1;
+	let activeSourceMetaViewIndex = 4;
 	$: activeSourceMetaView = sourceMetaViews[activeSourceMetaViewIndex];
 	const setActiveSourceMetaView = (view) =>
 		(activeSourceMetaViewIndex = sourceMetaViews.indexOf(view)); // TODO handle error?
@@ -54,55 +56,55 @@
 	let showBuildTreeVisualizer = true;
 </script>
 
-<main>
-	<div class="pane">
+<div class="app">
+	<section>
 		{name}
 		<button
-			on:click={() => (showFilerVisualizer1 = !showFilerVisualizer1)}
+			on:pointerdown={() => (showFilerVisualizer1 = !showFilerVisualizer1)}
 		>{#if showFilerVisualizer1}
 				hide server filer visualizer
 			{:else}show server filer visualizer{/if}</button>
 
 		<button
-			on:click={() => (showFilerVisualizer2 = !showFilerVisualizer2)}
+			on:pointerdown={() => (showFilerVisualizer2 = !showFilerVisualizer2)}
 		>{#if showFilerVisualizer2}
 				hide client example filer visualizer
 			{:else}show client example filer visualizer{/if}</button>
-	</div>
+	</section>
 
 	{#if showFilerVisualizer1}
-		<div class="pane" in:fade>
+		<section transition:slide>
 			<FilerVisualizer name="server" />
-		</div>
+		</section>
 	{/if}
 	{#if showFilerVisualizer2}
-		<div class="pane" in:fade>
+		<section transition:slide>
 			<FilerVisualizer name="client example" />
-		</div>
+		</section>
 	{/if}
 	{#if showServerVisualizer}
-		<div class="pane" in:fade>
+		<section transition:slide>
 			<ServerVisualizer name="gro dev server" />
-		</div>
+		</section>
 	{/if}
 	{#if showSourceTreeVisualizer}
-		<div class="pane" in:fade>
+		<section transition:slide>
 			<SourceTreeVisualizer name="source tree" />
-		</div>
+		</section>
 	{/if}
 	{#if showBuildTreeVisualizer}
-		<div class="pane" in:fade>
+		<section transition:slide>
 			<BuildTreeVisualizer name="build tree" />
-		</div>
+		</section>
 	{/if}
 
-	<div class="pane" in:fade>
+	<section transition:slide>
 		{#if showSourceMeta}
 			<nav>
-				<button on:click={() => (showSourceMeta = false)}>🗙</button>
+				<button on:pointerdown={() => (showSourceMeta = false)}>🗙</button>
 				{#each sourceMetaViews as sourceMetaView (sourceMetaView.name)}
 					<button
-						on:click={() => setActiveSourceMetaView(sourceMetaView)}
+						on:pointerdown={() => setActiveSourceMetaView(sourceMetaView)}
 						class:active={sourceMetaView === activeSourceMetaView}
 						disabled={sourceMetaView === activeSourceMetaView}
 					>
@@ -120,28 +122,41 @@
 					{hoveredSourceMeta}
 				/>
 			{:else}loading...{/if}
-		{:else}<button on:click={() => (showSourceMeta = true)}>show source meta</button>{/if}
-	</div>
-</main>
+		{:else}<button on:pointerdown={() => (showSourceMeta = true)}>show source meta</button>{/if}
+	</section>
+</div>
 
 <style>
-	main {
+	.app {
 		/* TODO */
-		--bg_color: #fff;
-		--fg_color: #fff;
-
-		background-color: var(--bg_color);
+		--color_bg: rgb(210, 219, 209);
+		--color_fg: #fff;
+		--color_bg_layer: rgba(1, 0, 0, 0.13);
+		--color_text: rgb(11, 3, 3);
+		--color_0: #40a060;
+		--color_1: #495499;
+		--color_2: #997649;
+		--color_0_text: #2f5e3f;
+		--color_1_text: #3a4069;
+		--color_2_text: #5f4c34;
+		--spacing_sm: 5px;
+		--spacing_md: 10px;
+
+		height: 100%;
+		overflow-y: scroll; /* for Windows behavior */
+		overflow-x: auto;
+		position: relative;
+		background-color: var(--color_bg);
 	}
 
 	.active {
 		background: transparent;
 	}
 
-	.pane {
-		background-color: var(--fg_color);
-		margin: 5px;
-		padding: 5px;
-		border: 1px solid #ddd;
-		border-radius: 3px;
+	section {
+		background-color: var(--color_fg);
+		margin-bottom: var(--spacing_sm);
+		/* TODO add `0` to left/right - padding should be left to another class */
+		padding: var(--spacing_sm);
 	}
 </style>
diff --git a/src/client/BuildId.svelte b/src/client/BuildId.svelte
new file mode 100644
index 0000000000..e96fbee030
--- /dev/null
+++ b/src/client/BuildId.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let id;
+
+	// TODO where to get this path info?
+	$: displayed = id.startsWith('/home/desk/dev/gro/')
+		? id.slice('/home/desk/dev/gro/'.length - 1)
+		: id;
+</script>
+
+<div class="build-id">{displayed}</div>
+
+<style>
+	.build-id {
+		color: var(--color_1_text);
+	}
+</style>
diff --git a/src/client/BuildName.svelte b/src/client/BuildName.svelte
new file mode 100644
index 0000000000..1120af1832
--- /dev/null
+++ b/src/client/BuildName.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let buildName;
+</script>
+
+<span class="build-name">{buildName}</span>
+
+<style>
+	.build-name {
+		color: var(--color_2_text);
+	}
+</style>
diff --git a/src/client/SourceId.svelte b/src/client/SourceId.svelte
new file mode 100644
index 0000000000..331f6af2c6
--- /dev/null
+++ b/src/client/SourceId.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let id;
+
+	// TODO where to get this path info?
+	$: displayed = id.startsWith('/home/desk/dev/gro/src/')
+		? id.slice('/home/desk/dev/gro/src/'.length - 1)
+		: id;
+</script>
+
+<span class="source-id">{displayed}</span>
+
+<style>
+	.source-id {
+		color: var(--color_0_text);
+	}
+</style>
diff --git a/src/client/SourceMetaBuildTree.svelte b/src/client/SourceMetaBuildTree.svelte
new file mode 100644
index 0000000000..5aba3ca1c6
--- /dev/null
+++ b/src/client/SourceMetaBuildTree.svelte
@@ -0,0 +1,63 @@
+<script>
+	import {filterSelectedMetaItems} from './sourceTree.js';
+	import BuildId from './BuildId.svelte';
+	import SourceId from './SourceId.svelte';
+
+	export let sourceTree;
+	export let selectedBuildNames;
+	export const selectedSourceMeta = undefined;
+	export const hoveredSourceMeta = undefined;
+
+	$: filteredSourceMetaItems = filterSelectedMetaItems(sourceTree, selectedBuildNames);
+</script>
+
+<div>
+	{#each filteredSourceMetaItems as sourceMeta (sourceMeta.cacheId)}
+		{#each sourceMeta.buildNames as buildName (buildName)}
+			{#if selectedBuildNames.includes(buildName)}
+				<div class="root item bg">
+					<div class="content">
+						<SourceId id={sourceMeta.data.sourceId} />
+					</div>
+					<div>
+						{#each sourceMeta.buildsByBuildName.get(buildName) as build (build.id)}
+							<div class="item bg">
+								<div class="content">
+									<BuildId id={build.id} />
+								</div>
+								{#if build.dependencies}
+									<div class="content bg">
+										<div>
+											{#each build.dependencies as dependency (dependency.buildId)}
+												<BuildId id={dependency.buildId} />
+											{/each}
+										</div>
+									</div>
+								{/if}
+							</div>
+						{/each}
+					</div>
+				</div>
+			{/if}
+		{/each}
+	{:else}<small><em>no builds selected</em></small>{/each}
+</div>
+
+<style>
+	/* TODO name?? */
+	.content {
+		display: flex;
+		align-items: center;
+		padding: var(--spacing_sm);
+	}
+	.root {
+		margin-bottom: var(--spacing_md);
+	}
+	.item {
+		display: flex;
+		align-items: stretch;
+	}
+	.bg {
+		background-color: var(--color_bg_layer);
+	}
+</style>
diff --git a/src/client/SourceMetaBuildsTable.svelte b/src/client/SourceMetaBuildsTable.svelte
index 97ab12d351..55a029df57 100644
--- a/src/client/SourceMetaBuildsTable.svelte
+++ b/src/client/SourceMetaBuildsTable.svelte
@@ -1,4 +1,6 @@
 <script>
+	import BuildId from './BuildId.svelte';
+	import BuildName from './BuildName.svelte';
 	import {filterSelectedMetaItems} from './sourceTree.js';
 
 	export let sourceTree;
@@ -9,26 +11,34 @@
 	$: filteredBuilds = sourceTree.builds.filter((b) => selectedBuildNames.includes(b.name));
 </script>
 
-<table>
-	<thead>
-		<th>build id</th>
-		<th>build name</th>
-		<th>dependencies</th>
-	</thead>
-	{#each filteredBuilds as build (build.id)}
-		<tr>
-			<td>{build.id}</td>
-			<td>{build.name}</td>
-			<td>
-				{#if build.dependencies}
-					{#each build.dependencies as dependency (dependency.buildId)}
-						<div>{dependency.buildId}</div>
-					{/each}
-				{/if}
-			</td>
-		</tr>
-	{:else}<small><em>no builds selected</em></small>{/each}
-</table>
+{#if filteredBuilds.length}
+	<table>
+		<thead>
+			<th>build id</th>
+			<th>build name</th>
+			<th>dependencies</th>
+		</thead>
+		{#each filteredBuilds as build (build.id)}
+			<tr>
+				<td>
+					<BuildId id={build.id} />
+				</td>
+				<td>
+					<BuildName buildName={build.name} />
+				</td>
+				<td>
+					{#if build.dependencies}
+						{#each build.dependencies as dependency (dependency.buildId)}
+							<div>
+								<BuildId id={dependency.buildId} />
+							</div>
+						{/each}
+					{/if}
+				</td>
+			</tr>
+		{/each}
+	</table>
+{:else}<small><em>no builds selected</em></small>{/if}
 
 <style>
 	td {
diff --git a/src/client/SourceMetaExpanderItem.svelte b/src/client/SourceMetaExpanderItem.svelte
index 4889bec7ca..62b197eaab 100644
--- a/src/client/SourceMetaExpanderItem.svelte
+++ b/src/client/SourceMetaExpanderItem.svelte
@@ -1,4 +1,6 @@
 <script>
+	import SourceId from './SourceId.svelte';
+
 	export let sourceMeta;
 	export let selectedSourceMeta;
 	export let hoveredSourceMeta;
@@ -10,10 +12,13 @@
 	$: hovered = sourceMeta === $hoveredSourceMeta;
 	$: selected = sourceMeta === $selectedSourceMeta;
 
-	const onPointerEnter = (e) => {
+	const onPointerDown = () => {
+		$selectedSourceMeta = selected ? null : sourceMeta;
+	};
+	const onPointerEnter = () => {
 		$hoveredSourceMeta = sourceMeta;
 	};
-	const onPointerLeave = (e) => {
+	const onPointerLeave = () => {
 		if ($hoveredSourceMeta === sourceMeta) $hoveredSourceMeta = null;
 	};
 
@@ -43,13 +48,13 @@
 		{#if activeIsDependent}↦{/if}
 	</div>
 	<button
-		on:click={() => ($selectedSourceMeta = sourceMeta)}
+		on:pointerdown={onPointerDown}
 		on:pointerenter={onPointerEnter}
 		on:pointerleave={onPointerLeave}
 		class:hovered
 		class:selected
 	>
-		{sourceMeta.data.sourceId}
+		<SourceId id={sourceMeta.data.sourceId} />
 	</button>
 </div>
 
diff --git a/src/client/SourceMetaRawItem.svelte b/src/client/SourceMetaRawItem.svelte
index 0a3a5eeb40..0fb1cd93bf 100644
--- a/src/client/SourceMetaRawItem.svelte
+++ b/src/client/SourceMetaRawItem.svelte
@@ -1,4 +1,6 @@
 <script>
+	import SourceId from './SourceId.svelte';
+
 	export let sourceMeta;
 	export let hoveredSourceMeta;
 
@@ -44,13 +46,13 @@
 		{#if hoveredIsDependent}↦{/if}
 	</div>
 	<button
-		on:click={() => (expanded = !expanded)}
+		on:pointerdown={() => (expanded = !expanded)}
 		on:pointerenter={onPointerEnter}
 		on:pointerleave={onPointerLeave}
 		class:hovering
 	>
 		{expandedText}
-		{sourceMeta.data.sourceId}
+		<SourceId id={sourceMeta.data.sourceId} />
 	</button>
 </div>
 {#if expanded}
@@ -58,7 +60,7 @@
       {JSON.stringify(sourceMeta, null, 2)}
     </pre>
 	<button
-		on:click={() => (expanded = !expanded)}
+		on:pointerdown={() => (expanded = !expanded)}
 		on:pointerenter={onPointerEnter}
 		on:pointerleave={onPointerLeave}
 	>
diff --git a/src/client/SourceMetaTable.svelte b/src/client/SourceMetaTable.svelte
index 2be2d22c2a..4c95b9539e 100644
--- a/src/client/SourceMetaTable.svelte
+++ b/src/client/SourceMetaTable.svelte
@@ -1,4 +1,8 @@
 <script>
+	import BuildId from './BuildId.svelte';
+	import SourceId from './SourceId.svelte';
+	import BuildName from './BuildName.svelte';
+
 	import {filterSelectedMetaItems} from './sourceTree.js';
 
 	export let sourceTree;
@@ -9,28 +13,34 @@
 	$: filteredSourceMetaItems = filterSelectedMetaItems(sourceTree, selectedBuildNames);
 </script>
 
-<table>
-	<thead>
-		<th>source id</th>
-		<th>build name</th>
-		<th>build ids</th>
-	</thead>
-	{#each filteredSourceMetaItems as sourceMeta (sourceMeta.cacheId)}
-		{#each sourceMeta.buildNames as buildName (buildName)}
-			{#if selectedBuildNames.includes(buildName)}
-				<tr>
-					<td>{sourceMeta.data.sourceId}</td>
-					<td>{buildName}</td>
-					<td>
-						{#each sourceMeta.buildsByBuildName.get(buildName) as build (build.id)}
-							<div>{build.id}</div>
-						{/each}
-					</td>
-				</tr>
-			{/if}
+{#if filteredSourceMetaItems.length}
+	<table>
+		<thead>
+			<th>source id</th>
+			<th>build name</th>
+			<th>build ids</th>
+		</thead>
+		{#each filteredSourceMetaItems as sourceMeta (sourceMeta.cacheId)}
+			{#each sourceMeta.buildNames as buildName (buildName)}
+				{#if selectedBuildNames.includes(buildName)}
+					<tr>
+						<td>
+							<SourceId id={sourceMeta.data.sourceId} />
+						</td>
+						<td>
+							<BuildName {buildName} />
+						</td>
+						<td>
+							{#each sourceMeta.buildsByBuildName.get(buildName) as build (build.id)}
+								<BuildId id={build.id} />
+							{/each}
+						</td>
+					</tr>
+				{/if}
+			{/each}
 		{/each}
-	{:else}<small><em>no builds selected</em></small>{/each}
-</table>
+	</table>
+{:else}<small><em>no builds selected</em></small>{/if}
 
 <style>
 	td {
diff --git a/src/client/SourceMetaTreeExplorer.svelte b/src/client/SourceMetaTreeExplorer.svelte
index 6b7d973aa5..7fe0f97eda 100644
--- a/src/client/SourceMetaTreeExplorer.svelte
+++ b/src/client/SourceMetaTreeExplorer.svelte
@@ -1,5 +1,6 @@
 <script>
 	import {filterSelectedMetaItems} from './sourceTree.js';
+	import SourceId from './SourceId.svelte';
 
 	export let sourceTree;
 	export let selectedBuildNames;
@@ -11,7 +12,9 @@
 
 <div class="explorer">
 	{#each filteredSourceMetaItems as sourceMeta (sourceMeta.cacheId)}
-		<div class="node">{sourceMeta.data.sourceId}</div>
+		<div class="node">
+			<SourceId id={sourceMeta.data.sourceId} />
+		</div>
 	{:else}<small><em>no builds selected</em></small>{/each}
 </div>
 
diff --git a/src/client/index.html b/src/client/index.html
index 9ce9f3e57d..c3b45e6a2e 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -5,7 +5,7 @@
 		<link rel="stylesheet" href="styles.css" />
 	</head>
 	<body>
-		<div id="root"></div>
+		<main id="root"></main>
 		<script type="module" src="/index.js"></script>
 	</body>
 </html>
diff --git a/src/client/styles.css b/src/client/styles.css
index ca4297ebb2..4b9c4c0075 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -14,13 +14,16 @@ html {
 body {
 	height: 100%;
 	padding: 0;
-	color: rgb(11, 3, 3);
-	background-color: rgb(255, 255, 255);
+	line-height: 1.27;
 	font-size: 16px;
 	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
 		'Open Sans', Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
 
+#root {
+	height: 100%;
+}
+
 code {
 	font-family: monospace, monospace; /* funky hack to prevent it from shrinking */
 }