From f4601a782be693644a11c6f267872454fcc8b701 Mon Sep 17 00:00:00 2001
From: exyi <exyi@outlook.cz>
Date: Tue, 29 Sep 2020 14:37:54 +0000
Subject: [PATCH 1/2] Implement simple routing for TaskPanel

---
 frontend/src/App.svelte       |  7 ++++---
 frontend/src/TaskPanel.svelte | 16 +++++++++++-----
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 71d4f4d..3631f9a 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -15,8 +15,9 @@ import type { detach } from "svelte/internal";
   // react to hash changes
   let hash = window.location.hash.substr(1);
   window.onhashchange = () => {
-	hash = window.location.hash.substr(1);
+    hash = window.location.hash.substr(1);
   }
+  $: selectedTaskId = (/^task\/([^\/]*)/.exec(hash) || [null, null])[1]
 </script>
 
 <style>
@@ -34,10 +35,10 @@ import type { detach } from "svelte/internal";
     </TasksLoader>
   {:else}
     <TasksLoader promise={tasksPromise} let:data={t}>
-      <TaskPanel bind:this={taskPanel} />
+      <TaskPanel tasks={t} bind:this={taskPanel} {selectedTaskId} />
       <div style="height: 100%">
         <Graph tasks={t}
-               on:selectTask={e => taskPanel.select(e.detail)}
+               on:selectTask={e => location.hash=`#task/${e.detail.id}`}
                on:preSelectTask={e => taskPanel.preSelect(e.detail)}
                on:unPreSelectTask={e => taskPanel.unPreselect(e.detail)} />
       </div>
diff --git a/frontend/src/TaskPanel.svelte b/frontend/src/TaskPanel.svelte
index 4e454b5..de12775 100644
--- a/frontend/src/TaskPanel.svelte
+++ b/frontend/src/TaskPanel.svelte
@@ -4,8 +4,9 @@
     import type { TasksFile, TaskDescriptor } from "./task-loader";
 import TaskDisplay from "./TaskDisplay.svelte";
 
-    // export let tasks: TasksFile;
+    export let tasks: TasksFile;
     let selectedTask: TaskDescriptor | null = null
+    export let selectedTaskId: string | null = null
 
     let heightClass: "collapsed" | "full" | "preview" = "collapsed"
 
@@ -24,12 +25,17 @@ import TaskDisplay from "./TaskDisplay.svelte";
         }, 10);
     }
 
-    export function select(task: TaskDescriptor) {
-        selectedTask = task
-        heightClass = "full"
+    $: {
+        if (selectedTaskId) {
+            heightClass = "full"
+            selectedTask = tasks.tasks.find(t => t.id == selectedTaskId) ?? null
+        } else {
+            heightClass = "collapsed"
+        }
     }
 
     function close() {
+        location.hash = ""
         heightClass = "collapsed"
         window.setTimeout(() => window.scrollTo({
             top: 0,
@@ -81,7 +87,7 @@ import TaskDisplay from "./TaskDisplay.svelte";
 </style>
 
 <div class="panel {heightClass}"
-     on:click={() => selectedTask && select(selectedTask)}>
+     on:click={() => location.hash = `#task/${selectedTask?.id}`}>
     <TaskDisplay taskId={selectedTask?.id} />
     <button type=button class="closeButton" on:click|stopPropagation={close}></button>
 </div>

From e9a6ccb59c02645f1b07d9d8d10eddddffe1a50f Mon Sep 17 00:00:00 2001
From: exyi <exyi@outlook.cz>
Date: Tue, 29 Sep 2020 19:30:04 +0000
Subject: [PATCH 2/2] Merge master

---
 frontend/src/TaskPanel.svelte | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/frontend/src/TaskPanel.svelte b/frontend/src/TaskPanel.svelte
index de12775..c4e9782 100644
--- a/frontend/src/TaskPanel.svelte
+++ b/frontend/src/TaskPanel.svelte
@@ -8,7 +8,7 @@ import TaskDisplay from "./TaskDisplay.svelte";
     let selectedTask: TaskDescriptor | null = null
     export let selectedTaskId: string | null = null
 
-    let heightClass: "collapsed" | "full" | "preview" = "collapsed"
+    let heightClass: "closed" | "collapsed" | "full" | "preview" = "collapsed"
 
     export function preSelect(task: TaskDescriptor) {
         if (heightClass != "full") {
@@ -36,13 +36,19 @@ import TaskDisplay from "./TaskDisplay.svelte";
 
     function close() {
         location.hash = ""
-        heightClass = "collapsed"
+        heightClass = "closed"
         window.setTimeout(() => window.scrollTo({
             top: 0,
             left: 0,
             behavior: 'smooth'
         }), 100)
     }
+
+    function handleKeydown(e: KeyboardEvent) {
+        if (e.key === "Escape") {
+            close()
+        }
+    }
 </script>
 
 <style>
@@ -60,10 +66,15 @@ import TaskDisplay from "./TaskDisplay.svelte";
             padding: 0 10px 10px 10px;
         }
     }
-
+    /* Used when the panel is explicitly closed - collapsed would still show the hover preview */
+    .panel.closed {
+        display: none;
+    }
+    /* Used when the panel is implicitly closed - it does not disappear when there is mouse over it */
     .panel.collapsed:not(:hover) {
         display: none;
     }
+    /* Used when the user hovers over a node and we want to show that there is something - a small expandable preview */
     .panel.preview, .panel:not(.full):hover {
         height: 100px;
     }
@@ -72,13 +83,13 @@ import TaskDisplay from "./TaskDisplay.svelte";
     }
     .closeButton {
         display: none;
-	position: absolute;
-	right: 0;
-	top: 0;
-	color: white;
-	background-color: red;
-	border: 0;
-	cursor: pointer;
+        position: absolute;
+        right: 0;
+        top: 0;
+        color: white;
+        background-color: red;
+        border: 0;
+        cursor: pointer;
     }
     .closeButton::before {
         content: "X";
@@ -86,6 +97,8 @@ import TaskDisplay from "./TaskDisplay.svelte";
     .panel.full .closeButton { display: inherit }
 </style>
 
+<svelte:window on:keydown={handleKeydown} />
+
 <div class="panel {heightClass}"
      on:click={() => location.hash = `#task/${selectedTask?.id}`}>
     <TaskDisplay taskId={selectedTask?.id} />