From 81e18d4e60360de2aad2d9a8a18df696b59eb81e Mon Sep 17 00:00:00 2001
From: Sage Vaillancourt <sagev9000@tutanota.com>
Date: Tue, 6 Sep 2022 16:48:25 -0400
Subject: [PATCH] Collapsible query settings and better mobile support.

Also use a larger list of test clusters, for testing.
---
 src/app.css                      |  59 ++++++++-
 src/routes/+page.svelte          | 203 +++++++++++++------------------
 src/routes/settings/+page.svelte |  18 +--
 src/utils.js                     |  30 +++--
 4 files changed, 162 insertions(+), 148 deletions(-)

diff --git a/src/app.css b/src/app.css
index 2c3308d..72ef145 100644
--- a/src/app.css
+++ b/src/app.css
@@ -38,6 +38,11 @@ select, input {
 	padding: 0.3em;
 	background-color: white;
 	border-radius: 4px;
+	max-width: 90%;
+}
+
+main {
+	height: calc(100% - 4em);
 }
 
 select option {
@@ -230,13 +235,12 @@ button {
 	border-style: solid;
 	border-width: 1px;
 	border-color: #95c1d3;
-	flex-grow: 2;
+	flex-grow: 1;
 	padding: 1em;
 	background-color: #e2eaff;
-	height: 84vh;
-	max-width: 65vw;
 	min-width: 65vw;
 	overflow-y: scroll;
+	margin-bottom: 1em;
 }
 
 .settings-option {
@@ -254,8 +258,57 @@ button:focus:not(:focus-visible) {
 	outline: none;
 }
 
+.query-settings-hider {
+	color: rgba(0,0,0, 0.5)
+}
+.query-settings-shower {
+	color: rgba(0,0,0, 0.5)
+}
+
+.query-settings-hider:before {
+	content: "«";
+}
+.query-settings-shower:before {
+	content: "»";
+}
+
+section {
+	display: flex;
+	flex-direction: row;
+	flex: 1;
+	justify-content: space-between;
+	overflow: hidden;
+}
+
+.query-settings {
+	margin-right: 1rem;
+	display: flex;
+	flex-direction: column;
+	padding: 1em;
+}
+
 @media (min-width: 720px) {
 	h1 {
 		font-size: 2.4rem;
 	}
+	.query-settings {
+		overflow: scroll;
+	}
+}
+
+@media (max-width: 719px) {
+	section {
+		flex-direction: column;
+		overflow: scroll;
+	}
+	.query-settings {
+		flex-grow: 1;
+		overflow: visible;
+	}
+	.query-settings-hider:before {
+		content: '▲';
+	}
+	.query-settings-shower:before {
+		content: '▼';
+	}
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 83cd349..09b637e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -16,6 +16,7 @@
 	} from './+page.js';
 	export let errors, data
 
+	let showQuerySettings = true
 	let showQueryModal = false
 	let queryRunning = ''
 
@@ -90,120 +91,99 @@
 </svelte:head>
 
 <section>
-	<div class="query-settings">
-		<!--
-		<Header />
-		<NavBar />
-		-->
-		<h1>Topic Search</h1>
-		<div class="state-error">
-			{#if $state.error}
-				<span transition:fade={{duration: 100}}>{$state.error}</span>
-				{#if $state.errorDetails}
-					<div class="state-error-details">{$state.errorDetails}</div>
+	{#if showQuerySettings}
+		<div class="query-settings">
+			<!--
+			<Header />
+			<NavBar />
+			-->
+			<h1>Topic Search</h1>
+			<div class="state-error">
+				{#if $state.error}
+					<span transition:fade={{duration: 100}}>{$state.error}</span>
+					{#if $state.errorDetails}
+						<div class="state-error-details">{$state.errorDetails}</div>
+					{/if}
+				{:else}
+					&nbsp;
 				{/if}
-			{:else}
-				&nbsp;
-			{/if}
-		</div>
+			</div>
 
-		<div class="settings-option">
-			<h3>Cluster</h3>
-			<select disabled={clusterNames.length === 0} bind:value={querySettings.cluster} name="cluster" id="cluster" on:change={updateTopics}>
-				{#each clusterNames as clusterName}
-					<option value={clusterName}>{clusterName}</option>
-				{/each}
-			</select>
-		</div>
+			<div class="settings-option">
+				<h3>Cluster</h3>
+				<select disabled={clusterNames.length === 0} bind:value={querySettings.cluster} name="cluster" id="cluster" on:change={updateTopics}>
+					{#each clusterNames as clusterName}
+						<option value={clusterName}>{clusterName}</option>
+					{/each}
+				</select>
+			</div>
 
-		<div class="settings-option">
-			<h3>Topic</h3>
-			<select disabled={topics.length === 0} bind:value={querySettings.topic} name="topic" id="topic">
-				{#each topics as topic}
-					<option value={topic}>{topic}</option>
-				{/each}
-			</select>
-		</div>
+			<div class="settings-option">
+				<h3>Topic</h3>
+				<select disabled={topics.length === 0} bind:value={querySettings.topic} name="topic" id="topic">
+					{#each topics as topic}
+						<option value={topic}>{topic}</option>
+					{/each}
+				</select>
+			</div>
 
-		<div class="settings-option">
-			<label>
-				Maximum Results
-				<input type=number bind:value={querySettings.maxItems} min=0 max=10000>
-			</label>
-		</div>
-		<br/>
-
-		<div class="settings-option">
-			<QueryInput
-				bind:jsFilter={querySettings.jsFilter}
-				bind:mutableObjects={querySettings.mutableObjects}
-				bind:queryCode={querySettings.queryCode} />
-			{#if querySettings.jsFilter}
-				<button class="query-input-button" on:click={() => showQueryModal = true}>Open Editor Window</button>
-			{/if}
-			{#if showQueryModal}
-				<Modal onClickOut={() => showQueryModal = false}
-					   onCancel={null}
-					   onConfirm={() => showQueryModal = false}
-					   confirm="Close"
-					   title={'JS Filter'}>
-					<QueryInput big
-							bind:jsFilter={querySettings.jsFilter}
-							bind:mutableObjects={querySettings.mutableObjects}
-							bind:queryCode={querySettings.queryCode} />
-				</Modal>
-			{/if}
-		</div>
-
-		<!-- Previous 'Start' style
-		<div class="settings-option query-type">
-			<span>Query Type:</span>
-			<span>
-				<label title="Consume and display new events as they are produced.">
-					<input type=radio bind:group={querySettings.mode} name="mode" value={queryMode.REAL_TIME}>
-					Real Time
+			<div class="settings-option">
+				<label>
+					Maximum Results
+					<input type=number bind:value={querySettings.maxItems} min=0 max=10000>
 				</label>
+			</div>
+			<br/>
 
-				<label title="Query all messages that currently exist, then stop.">
-					<input type=radio bind:group={querySettings.mode} name="mode" value={queryMode.ONE_SHOT}>
-					One Shot
-				</label>
-			</span>
-		</div>
+			<div class="settings-option">
+				<QueryInput
+					bind:jsFilter={querySettings.jsFilter}
+					bind:mutableObjects={querySettings.mutableObjects}
+					bind:queryCode={querySettings.queryCode} />
+				{#if querySettings.jsFilter}
+					<button class="query-input-button" on:click={() => showQueryModal = true}>Open Editor Window</button>
+				{/if}
+				{#if showQueryModal}
+					<Modal onClickOut={() => showQueryModal = false}
+						   onCancel={null}
+						   onConfirm={() => showQueryModal = false}
+						   confirm="Close"
+						   title={'JS Filter'}>
+						<QueryInput big
+								bind:jsFilter={querySettings.jsFilter}
+								bind:mutableObjects={querySettings.mutableObjects}
+								bind:queryCode={querySettings.queryCode} />
+					</Modal>
+				{/if}
+			</div>
 
-		<div class="query-button">
-			{#if queryRunning}
-				<button class="danger" on:click={() => queryRunning = stopQuery(querySettings)}>Stop Query</button>
-			{:else}
-				<button class="colored" on:click={() => queryRunning = startQuery(querySettings)}>Start Query</button>
-			{/if}
+			<div class="query-button">
+				{#if queryRunning && $state.queryState !== queryState.DONE}
+					<div transition:slide|local class="stop-button">
+						<button class="danger" on:click={() => queryRunning = stopQuery(querySettings)}>
+							{queryRunning === queryMode.REAL_TIME ? 'End Real Time' : 'Cancel One-Shot'} Query
+						</button>
+					</div>
+				{:else}
+					<div transition:slide|local class="start-buttons colored">
+						<button class="colored" on:click={() => queryRunning = startQuery({...querySettings, mode: queryMode.ONE_SHOT})}>
+							Start One-Shot
+						</button>
+						<div class="separator"></div>
+						<button class="colored" on:click={() => queryRunning = startQuery({...querySettings, mode: queryMode.REAL_TIME})}>
+							Start Real-Time
+						</button>
+					</div>
+				{/if}
+			</div>
 		</div>
-		-->
-
-		<div class="query-button">
-			{#if queryRunning && $state.queryState !== queryState.DONE}
-				<div transition:slide|local class="stop-button">
-					<button class="danger" on:click={() => queryRunning = stopQuery(querySettings)}>
-						{queryRunning === queryMode.REAL_TIME ? 'End Real Time' : 'Cancel One-Shot'} Query
-					</button>
-				</div>
-			{:else}
-				<div transition:slide|local class="start-buttons colored">
-					<button class="colored" on:click={() => queryRunning = startQuery({...querySettings, mode: queryMode.ONE_SHOT})}>
-						Start One-Shot
-					</button>
-					<div class="separator"></div>
-					<button class="colored" on:click={() => queryRunning = startQuery({...querySettings, mode: queryMode.REAL_TIME})}>
-						Start Real-Time
-					</button>
-				</div>
-			{/if}
-		</div>
-	</div>
+	{/if}
 
 	<div class="data-view-container">
 		<div class="data-view-bar">
 			<div class="border-between">
+				<button class={showQuerySettings ? "query-settings-hider" : "query-settings-shower"}
+					on:click={() => showQuerySettings = !showQuerySettings}></button>
 				<button class={jsonDisplay.expandAll ? 'selected' : ''}
 						on:click={() => jsonDisplay.expandAll = !jsonDisplay.expandAll}>
 				Expand All Objects
@@ -252,6 +232,7 @@
 	.data-view-container {
 		display: flex;
 		flex-direction: column;
+		flex-grow: 1;
 	}
 	.data-view-bar {
 		background-color: #d7dbf3;
@@ -299,14 +280,6 @@
 		margin-right: 1em;
 	}
 
-	section {
-		display: flex;
-		flex-direction: row;
-		flex: 1;
-		justify-content: space-between;
-		overflow: hidden;
-	}
-
 	h1 {
 		width: 100%;
 	}
@@ -321,16 +294,6 @@
 		background-color: #575757;
 	}
 
-	.query-settings {
-		margin-right: 1rem;
-		flex-grow: 1;
-		display: flex;
-		flex-direction: column;
-		overflow: auto;
-		padding: 1em;
-		height: 84.5vh;
-	}
-
 	.query-type {
 		display: flex;
 		flex-direction: row;
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 9412ce4..3212c38 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -159,6 +159,9 @@
 </section>
 
 <style>
+    .data-view {
+        min-height: 40%;
+    }
     .cluster-listing {
         display: flex;
         flex-direction: row;
@@ -183,13 +186,6 @@
 
     }
 
-    section {
-        display: flex;
-        flex-direction: row;
-        flex: 1;
-        justify-content: space-between;
-    }
-
     h1 {
         width: 100%;
     }
@@ -210,14 +206,6 @@
         min-width: 20vw;
     }
 
-    .query-settings {
-        margin-right: 1rem;
-        padding: 1em;
-        overflow: auto;
-        display: flex;
-        flex-direction: column;
-    }
-
     .settings-sub-option {
         margin-top: 0.2em;
         display: flex;
diff --git a/src/utils.js b/src/utils.js
index d73788b..fcf04e3 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -29,18 +29,28 @@ const jsonRequest = type => async (path, object) => fetch(backendUrl + path, {
 export const postJson = (path, object) => jsonRequest('POST')(path, object)
 export const putJson = (path, object) => jsonRequest('PUT')(path, object)
 
+const mockCluster = {
+    clientId: 'TestClient',
+    brokers: ['testbroker.com:5000'],
+    ssl: true,
+    sasl: {
+        mechanism: 'SCRAM-SHA-512',
+        username: 'testuser',
+        password: 'XXXXXXXXXXXXXXXXXXXXXX'
+    }
+}
 const mockApi = {
     '/clusters': {
-        'TestCluster': {
-            clientId: 'TestClient',
-            brokers: ['testbroker.com:5000'],
-            ssl: true,
-            sasl: {
-                mechanism: 'SCRAM-SHA-512',
-                username: 'testuser',
-                password: 'XXXXXXXXXXXXXXXXXXXXXX'
-            }
-        }
+        'TestCluster1': mockCluster,
+        'TestCluster2': mockCluster,
+        'TestCluster3': mockCluster,
+        'TestCluster4': mockCluster,
+        'TestCluster5': mockCluster,
+        'TestCluster6': mockCluster,
+        'TestCluster7': mockCluster,
+        'TestCluster8': mockCluster,
+        'TestCluster9': mockCluster,
+        'TestCluster10': mockCluster,
     },
     '/topics/TestCluster': ['NewReleases']
 }