From 59010ddda5d69190e6924aec65c4ecee1f568a0b Mon Sep 17 00:00:00 2001
From: Phil Eaton <phil@eatonphil.com>
Date: Wed, 6 Apr 2022 09:57:03 -0400
Subject: [PATCH] Misc fixes (#212)

* Misc fixes

* Add comment

* Fix for cancelled panels
---
 ui/PageList.tsx              |  4 ++++
 ui/Panel.tsx                 | 11 +++++++++--
 ui/PanelList.tsx             |  2 +-
 ui/app.tsx                   |  2 +-
 ui/components/CodeEditor.tsx |  7 +++++++
 ui/style.css                 |  5 +++++
 6 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/ui/PageList.tsx b/ui/PageList.tsx
index a95edbdbf..9dd498ad5 100644
--- a/ui/PageList.tsx
+++ b/ui/PageList.tsx
@@ -59,6 +59,10 @@ export function makeReevalPanel(
     // Important! Just needs to trigger a state reload.
     updatePanelInternal(panel);
 
+    if (panel.resultMeta.exception) {
+      return;
+    }
+
     // Re-run all dependent visual panels
     if (!VISUAL_PANELS.includes(panel.type)) {
       for (const dep of page.panels) {
diff --git a/ui/Panel.tsx b/ui/Panel.tsx
index a3edfba69..ae7965d87 100644
--- a/ui/Panel.tsx
+++ b/ui/Panel.tsx
@@ -306,7 +306,14 @@ export function Panel({
   async function evalThis() {
     if (killable) {
       await killProcess();
-      setLoading(false);
+
+      // Only don't reeval if we think it's already not running.  //
+      // This allows the UI to kill any background running process that
+      // might have started on a different page or something like that.
+      if (loading) {
+        setLoading(false);
+        return;
+      }
     }
 
     setLoading(true);
@@ -416,7 +423,7 @@ export function Panel({
               </Button>
             </span>
 
-            <label className="ml-2 text-muted">
+            <label className="ml-2 text-muted" title={panel.id}>
               {PANEL_UI_DETAILS[panel.type].label}
             </label>
 
diff --git a/ui/PanelList.tsx b/ui/PanelList.tsx
index 91eafb6b7..f732bc601 100644
--- a/ui/PanelList.tsx
+++ b/ui/PanelList.tsx
@@ -139,7 +139,7 @@ export function PanelList({
         });
       }
 
-      updatePanel(next, panelIndex, true);
+      updatePanel(next, panelIndex + 1, true);
     }
 
     const offerToTable =
diff --git a/ui/app.tsx b/ui/app.tsx
index b04924a33..850846db5 100644
--- a/ui/app.tsx
+++ b/ui/app.tsx
@@ -165,7 +165,7 @@ export function App<T extends DefaultView = DefaultView>({
         >
           <div className={`app app--${MODE} app--${settings.theme}`}>
             {MODE_FEATURES.appHeader && <Header />}
-            <main className={'view-' + (urlState.view || 'editor')}>
+            <main className={'view view-' + (urlState.view || 'editor')}>
               {urlState.projectId && <Navigation pages={routes} />}
               {main}
             </main>
diff --git a/ui/components/CodeEditor.tsx b/ui/components/CodeEditor.tsx
index 3105c76b6..db83e313a 100644
--- a/ui/components/CodeEditor.tsx
+++ b/ui/components/CodeEditor.tsx
@@ -84,7 +84,14 @@ export function CodeEditor({
       return;
     }
 
+    // Without this the clearSelection call below moves the cursor to the end of the textarea destroying in-action edits
+    if (editorNode.editor.container.contains(document.activeElement)) {
+      return;
+    }
+
     editorNode.editor.setValue(value);
+    // setValue() also highlights the inserted values so this gets rid
+    // of the highlight. Kind of a weird API really
     editorNode.editor.clearSelection();
   }, [value, editorNode]);
 
diff --git a/ui/style.css b/ui/style.css
index 24115a023..5bbe33897 100644
--- a/ui/style.css
+++ b/ui/style.css
@@ -78,6 +78,11 @@ a:hover {
   display: block;
 }
 
+.view {
+  /* Very important! Gives the main panel list it's overflow so it scrolls independent of the sidebar */
+  width: 100%;
+}
+
 .main-body {
   flex: 1;
   overflow-y: auto;