add a build tree view and id components

ryanatkn · Mar 12, 2021 · 5ad3095 · 5ad3095
1 parent 8c721d4
commit 5ad3095
Show file tree

Hide file tree

Showing 12 changed files with 240 additions and 86 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>