From 659e1b7d56fb105e2c50bb46ee8f6bf3520b77d0 Mon Sep 17 00:00:00 2001
From: Eric Charles <eric@datalayer.io>
Date: Tue, 5 Apr 2022 08:22:40 +0200
Subject: [PATCH] tune the panel layout

---
 src/panel.ts   |  2 +-
 src/widget.tsx | 40 +++++++++++++++++++++-------------------
 style/base.css | 11 ++++++++---
 3 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/panel.ts b/src/panel.ts
index f645872..1db501c 100644
--- a/src/panel.ts
+++ b/src/panel.ts
@@ -6,7 +6,7 @@ import { INotebookTracker, NotebookPanel } from '@jupyterlab/notebook';
 import { KernelUsageWidget } from './widget';
 import tachometer from '../style/tachometer.svg';
 
-const PANEL_CLASS = 'jp-kernelusage-view';
+const PANEL_CLASS = 'jp-KernelUsage-view';
 
 export class KernelUsagePanel extends StackedPanel {
   constructor(props: {
diff --git a/src/widget.tsx b/src/widget.tsx
index 109e94e..a2e1641 100644
--- a/src/widget.tsx
+++ b/src/widget.tsx
@@ -135,55 +135,57 @@ const KernelUsage = (props: {
     if (kernelPoll) {
       return (
         <>
-          <h3 className="jp-kernelusage-separator">Kernel Usage</h3>
-          <div className="jp-kernelusage-separator">
+          <h3 className="jp-KernelUsage-section-separator">Kernel Usage</h3>
+          <div className="jp-KernelUsage-separator">
             Kernel Host: {kernelPoll.usage?.hostname}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             Notebook: {kernelPoll.path}
           </div>
-          <div className="jp-kernelusage-separator">Kernel ID: {kernelId}</div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">Kernel ID: {kernelId}</div>
+          <div className="jp-KernelUsage-separator">
             Timestamp: {kernelPoll.usage?.timestamp?.toLocaleString()}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             CPU: {kernelPoll.usage?.kernel_cpu}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             Memory: {formatForDisplay(kernelPoll.usage?.kernel_memory)}
           </div>
-          <hr></hr>
-          <h4 className="jp-kernelusage-separator">Host CPU</h4>
-          <div className="jp-kernelusage-separator">
+          <hr className="jp-KernelUsage-section-separator"></hr>
+          <h4 className="jp-KernelUsage-section-separator">Host CPU</h4>
+          <div className="jp-KernelUsage-separator">
             Percentage {kernelPoll.usage?.host_cpu_percent.toFixed(1)}
           </div>
-          <h4 className="jp-kernelusage-separator">Host Virtual Memory</h4>
-          <div className="jp-kernelusage-separator">
+          <h4 className="jp-KernelUsage-section-separator">
+            Host Virtual Memory
+          </h4>
+          <div className="jp-KernelUsage-separator">
             Active:{' '}
             {formatForDisplay(kernelPoll.usage?.host_virtual_memory.active)}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             Available:{' '}
             {formatForDisplay(kernelPoll.usage?.host_virtual_memory.available)}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             Free: {formatForDisplay(kernelPoll.usage?.host_virtual_memory.free)}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             Inactive:{' '}
             {formatForDisplay(kernelPoll.usage?.host_virtual_memory.inactive)}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             Percent: {kernelPoll.usage?.host_virtual_memory.percent.toFixed(1)}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             Total:{' '}
             {formatForDisplay(kernelPoll.usage?.host_virtual_memory.total)}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             Used: {formatForDisplay(kernelPoll.usage?.host_virtual_memory.used)}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             Wired:{' '}
             {formatForDisplay(kernelPoll.usage?.host_virtual_memory.wired)}
           </div>
diff --git a/style/base.css b/style/base.css
index 1f04800..1f26dd8 100644
--- a/style/base.css
+++ b/style/base.css
@@ -1,16 +1,21 @@
-.jp-kernelusage-view {
+.jp-KernelUsage-view {
   overflow: scroll !important;
   padding: 10px;
   background-color: white;
   min-width: 250px !important;
 }
 
-.jp-kernelusage-separator {
+.jp-KernelUsage-section-separator {
   margin-top: 20px;
   margin-bottom: 20px;
 }
 
-.jp-kernelusage-button {
+.jp-KernelUsage-separator {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.jp-KernelUsage-button {
   background-color: green;
   border-radius: 12px;
   border: none;