From e9d5dbeef2bf1dab9dfb863d970b70b3074e3d0a Mon Sep 17 00:00:00 2001
From: Michael Foiani <sotech117@michaels-mbp-21.devices.brown.edu>
Date: Wed, 2 Nov 2022 14:56:20 -0400
Subject: add basic heartbeat functinality througha ping/pong api cycle

---
 src/client/views/topbar/TopBar.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

(limited to 'src/client/views/topbar')

diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 7e728306c..50a93ee92 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button, FontSize, IconButton, Size } from 'browndash-components';
-import { action, computed, observable } from 'mobx';
+import { action, computed, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { FaBug, FaCamera } from 'react-icons/fa';
@@ -8,6 +8,7 @@ import { AclAdmin, Doc, DocListCast } from '../../../fields/Doc';
 import { StrCast } from '../../../fields/Types';
 import { GetEffectiveAcl } from '../../../fields/util';
 import { DocumentManager } from '../../util/DocumentManager';
+import { PingManager } from '../../util/PingManager';
 import { ReportManager } from '../../util/ReportManager';
 import { SettingsManager } from '../../util/SettingsManager';
 import { SharingManager } from '../../util/SharingManager';
@@ -35,6 +36,12 @@ export class TopBar extends React.Component {
     @observable textColor: string = Colors.LIGHT_GRAY;
     @observable backgroundColor: string = Colors.DARK_GRAY;
 
+    @observable happyHeart: boolean = PingManager.Instance.isBeating;
+    setHappyHeart = action((status: boolean) => this.happyHeart = status);
+    dispose = reaction(() => PingManager.Instance.isBeating, isBeating => this.setHappyHeart(isBeating));
+
+    
+
     /**
      * Returns the left hand side of the topbar.
      * This side of the topbar contains the different modes.
@@ -176,6 +183,16 @@ export class TopBar extends React.Component {
                     onClick={() => SettingsManager.Instance.open()}
                     icon={<FontAwesomeIcon icon="cog" />}
                 />
+                <IconButton
+                    size={Size.SMALL}
+                    isCircle={true}
+                    color={this.happyHeart ? Colors.LIGHT_BLUE : Colors.ERROR_RED}
+                    backgroundColor={Colors.DARK_GRAY}
+                    hoverStyle="gray"
+                    isActive={SettingsManager.Instance.isOpen}
+                    onClick={() => SettingsManager.Instance.open()}
+                    icon={<FontAwesomeIcon icon={this.happyHeart ? "heart" : "heart-broken"} />}
+                />
                 {/* <Button text={'Logout'} borderRadius={5} hoverStyle={'gray'} backgroundColor={Colors.DARK_GRAY} color={this.textColor} fontSize={FontSize.SECONDARY} onClick={() => window.location.assign(Utils.prepend('/logout'))} /> */}
             </div>
         );
-- 
cgit v1.2.3-70-g09d2


From 234443960605c84b823231e584ec075c36be488c Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 23 Jun 2023 21:44:22 -0400
Subject: fixed color of heartbeat with hack

---
 src/client/views/topbar/TopBar.scss | 434 ++++++++++++++++++------------------
 1 file changed, 222 insertions(+), 212 deletions(-)

(limited to 'src/client/views/topbar')

diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index a1131b92e..a0f803da5 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -1,243 +1,253 @@
-@import "../global/globalCssVariables";
-
-
+@import '../global/globalCssVariables';
+
+.iconButton-container.primary {
+    color: white;
+    .iconButton-background {
+        filter: unset;
+        background: transparent;
+    }
+}
+.topbarHeart-red {
+    .iconButton-container.primary {
+        .iconButton-background {
+            background: red;
+        }
+    }
+}
 .topbar-container {
-      flex-direction: column;
-      font-size: 10px;
-      line-height: 1;
-      overflow-y: auto;
-      overflow-x: visible;
-      background: $dark-gray;
-      overflow: visible;
-      z-index: 1000;
-      align-items: center;
-      height: $topbar-height;
-      background-color: $dark-gray;
-      border-bottom: $standard-border;
-      padding: 0px 10px;
-      cursor: default;
-      display: flex;
-        justify-content: center;
+    flex-direction: column;
+    font-size: 10px;
+    line-height: 1;
+    overflow-y: auto;
+    overflow-x: visible;
+    background: $dark-gray;
+    overflow: visible;
+    z-index: 1000;
+    align-items: center;
+    height: $topbar-height;
+    background-color: $dark-gray;
+    border-bottom: $standard-border;
+    padding: 0px 10px;
+    cursor: default;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    .topbar-inner-container {
+        display: flex;
+        flex-direction: row;
+        position: relative;
+        display: grid;
+        grid-auto-columns: 33.3% 33.3% 33.3%;
         width: 100%;
+        align-items: center;
 
-      .topbar-inner-container {
-            display: flex;
-            flex-direction: row;
-            position: relative;
-            display: grid;
-            grid-auto-columns: 33.3% 33.3% 33.3%;
-            width: 100%;
-            align-items: center;
-
-            // &:first-child {
-            //       height: 20px;
-            // }
-      }
-
-      .topbar-button-text {
-            color: $white;
-            padding: 10px;
-            size: 15;
+        // &:first-child {
+        //       height: 20px;
+        // }
+    }
 
-            &:hover {
-                  font-weight: 500;
-            }
-      }
+    .topbar-button-text {
+        color: $white;
+        padding: 10px;
+        size: 15;
 
-      .topbar-button-icon {
-            cursor: pointer;
-            width: fit-content;
-            display: flex;
-            justify-content: center;
-            gap: 4px;
-            align-items: center;
-            justify-self: center;
-            align-self: center;
-            padding: 5px;
-            transition: linear 0.2s;
-            color: $white;
-
-            &:hover {
-                  background-color: darken($color: $light-gray, $amount: 20);
-                  font-weight: 500;
-            }
-      }
-
-      .topbar-title {
-            color: $white;
-            font-size: 17;
+        &:hover {
             font-weight: 500;
-      }
+        }
+    }
 
-      .topbar-center {
-            grid-column: 2;
-            display: inline-flex;
+    .topbar-button-icon {
+        cursor: pointer;
+        width: fit-content;
+        display: flex;
+        justify-content: center;
+        gap: 4px;
+        align-items: center;
+        justify-self: center;
+        align-self: center;
+        padding: 5px;
+        transition: linear 0.2s;
+        color: $white;
+
+        &:hover {
+            background-color: darken($color: $light-gray, $amount: 20);
+            font-weight: 500;
+        }
+    }
+
+    .topbar-title {
+        color: $white;
+        font-size: 17;
+        font-weight: 500;
+    }
+
+    .topbar-center {
+        grid-column: 2;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        gap: 5px;
+
+        .topbar-dashboard-header {
+            font-weight: 600;
+        }
+    }
+
+    .topbar-right {
+        grid-column: 3;
+        position: relative;
+        display: flex;
+        justify-content: flex-end;
+        gap: 5px;
+        margin-right: 5px;
+    }
+
+    .topbar-left {
+        grid-column: 1;
+        color: black;
+        font-family: 'Roboto';
+        position: relative;
+        display: flex;
+        width: fit-content;
+        gap: 5px;
+
+        .logo-container {
+            font-size: 15;
+            display: flex;
+            flex-direction: row;
             justify-content: center;
             align-items: center;
-            gap: 5px;
-
-            .topbar-dashboard-header {
-                font-weight: 600;
+            -webkit-user-select: none;
+            -khtml-user-select: none;
+            -moz-user-select: none;
+            -o-user-select: none;
+            user-select: none;
+
+            .logo {
+                background-color: transparent;
+                width: 25px;
+                height: 25px;
+                margin-right: 5px;
             }
-      }
+        }
 
+        .topBar-icon:hover {
+            background-color: $close-red;
+        }
 
-      .topbar-right {
-            grid-column: 3;
-            position: relative;
-            display: flex;
-            justify-content: flex-end;
-            gap: 5px;
-            margin-right: 5px;
-      }
-
-      .topbar-left {
-            grid-column: 1;
-            color: black;
+        .topbar-lozenge-user,
+        .topbar-lozenge {
+            height: 23;
+            font-size: 12;
+            color: white;
             font-family: 'Roboto';
-            position: relative;
+            font-weight: 400;
+            padding: 4px;
+            align-self: center;
+            margin-left: 7px;
             display: flex;
-            width: fit-content;
-            gap: 5px;
-
-            .logo-container {
-                font-size: 15;
-                display: flex;
-                flex-direction: row;
-                justify-content: center;
-                align-items: center;
-                -webkit-user-select: none;
-                -khtml-user-select: none;
-                -moz-user-select: none;
-                -o-user-select: none;
-                user-select: none;
-
-                .logo {
-                    background-color: transparent;
-                    width: 25px;
-                    height: 25px;
-                    margin-right: 5px;
-                    
-                }
-            }
+            align-items: center;
 
-            .topBar-icon:hover {
-                  background-color: $close-red;
-            }
+            .topbar-dashSelect {
+                border: none;
+                background-color: transparent;
+                color: black;
+                font-family: 'Roboto';
+                font-size: 17;
+                font-weight: 500;
 
-            .topbar-lozenge-user,
-            .topbar-lozenge {
-                  height: 23;
-                  font-size: 12;
-                  color: white;
-                  font-family: 'Roboto';
-                  font-weight: 400;
-                  padding: 4px;
-                  align-self: center;
-                  margin-left: 7px;
-                  display: flex;
-                  align-items: center;
-
-                  .topbar-dashSelect {
-                        border: none;
-                        background-color: transparent;
-                        color: black;
-                        font-family: 'Roboto';
-                        font-size: 17;
-                        font-weight: 500;
-
-                        &:hover {
-                              cursor: pointer;
-                        }
-                  }
+                &:hover {
+                    cursor: pointer;
+                }
             }
+        }
+
+        .topbar-logoff {
+            border-radius: 3px;
+            background: olivedrab;
+            color: white;
+            display: none;
+            margin-left: 5px;
+            padding: 1px 2px 1px 2px;
+            cursor: pointer;
+        }
 
-            .topbar-logoff {
-                  border-radius: 3px;
-                  background: olivedrab;
-                  color: white;
-                  display: none;
-                  margin-left: 5px;
-                  padding: 1px 2px 1px 2px;
-                  cursor: pointer;
-            }
+        .topbar-logoff {
+            background: red;
+        }
 
+        .topbar-lozenge-user:hover {
             .topbar-logoff {
-                  background: red;
-            }
-
-            .topbar-lozenge-user:hover {
-                  .topbar-logoff {
-                        display: inline-block;
-                  }
-            }
-      }
-
-      .topbar-barChild {
-
-            &.topbar-collection {
-                  flex: 0 1 auto;
-                  margin-left: 2px;
-                  margin-right: 2px
+                display: inline-block;
             }
-
-            &.topbar-input {
-                  margin: 5px;
-                  border-radius: 20px;
-                  border: $dark-gray;
-                  display: block;
-                  width: 130px;
-                  -webkit-transition: width 0.4s;
-                  transition: width 0.4s;
-                  /* align-self: stretch; */
-                  outline: none;
-
-                  &:focus {
-                        width: 500px;
-                        outline: none;
-                  }
+        }
+    }
+
+    .topbar-barChild {
+        &.topbar-collection {
+            flex: 0 1 auto;
+            margin-left: 2px;
+            margin-right: 2px;
+        }
+
+        &.topbar-input {
+            margin: 5px;
+            border-radius: 20px;
+            border: $dark-gray;
+            display: block;
+            width: 130px;
+            -webkit-transition: width 0.4s;
+            transition: width 0.4s;
+            /* align-self: stretch; */
+            outline: none;
+
+            &:focus {
+                width: 500px;
+                outline: none;
             }
+        }
 
-            &.topbar-filter {
-                  align-self: stretch;
+        &.topbar-filter {
+            align-self: stretch;
 
-                  button {
-                        transform: none;
+            button {
+                transform: none;
 
-                        &:hover {
-                              transform: none;
-                        }
-                  }
+                &:hover {
+                    transform: none;
+                }
             }
+        }
 
-            &.topbar-submit {
-                  margin-left: 2px;
-                  margin-right: 2px
-            }
+        &.topbar-submit {
+            margin-left: 2px;
+            margin-right: 2px;
+        }
 
-            &.topbar-close {
-                  color: $white;
-                  max-height: $topbar-height;
-            }
-      }
+        &.topbar-close {
+            color: $white;
+            max-height: $topbar-height;
+        }
+    }
 }
 
 .topbar-results {
-      display: flex;
-      flex-direction: column;
-      top: 300px;
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      overflow: visible;
-
-      .no-result {
-            width: 500px;
-            background: $light-gray;
-            padding: 10px;
-            height: 50px;
-            text-transform: uppercase;
-            text-align: left;
-            font-weight: bold;
-      }
-}
\ No newline at end of file
+    display: flex;
+    flex-direction: column;
+    top: 300px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: visible;
+
+    .no-result {
+        width: 500px;
+        background: $light-gray;
+        padding: 10px;
+        height: 50px;
+        text-transform: uppercase;
+        text-align: left;
+        font-weight: bold;
+    }
+}
-- 
cgit v1.2.3-70-g09d2


From 3139bf1474b714a099b2c13de4a78b7c4ded38df Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sat, 24 Jun 2023 10:22:30 -0400
Subject: ping cleanup

---
 src/client/util/PingManager.ts     |  23 +++---
 src/client/views/MainView.tsx      | 156 ++++++++++++++++---------------------
 src/client/views/topbar/TopBar.tsx |   4 +-
 3 files changed, 81 insertions(+), 102 deletions(-)

(limited to 'src/client/views/topbar')

diff --git a/src/client/util/PingManager.ts b/src/client/util/PingManager.ts
index 7562faf03..9f4bd3642 100644
--- a/src/client/util/PingManager.ts
+++ b/src/client/util/PingManager.ts
@@ -1,5 +1,5 @@
-import { action, IReactionDisposer, observable, observe, reaction } from "mobx";
-import { Networking } from "../Network";
+import { action, observable } from 'mobx';
+import { Networking } from '../Network';
 export class PingManager {
     // create static instance and getter for global use
     @observable static _instance: PingManager;
@@ -7,25 +7,24 @@ export class PingManager {
         return PingManager._instance;
     }
 
-    @observable isBeating: boolean = true;
-    private setIsBeating = action((status: boolean) => this.isBeating = status);
+    @observable IsBeating: boolean = true;
+    private setIsBeating = action((status: boolean) => (this.IsBeating = status));
 
-    ping = async (): Promise<void> => {
+    sendPing = async (): Promise<void> => {
         try {
-            const response = await Networking.PostToServer('/ping', { date: new Date() });
-            // console.log('ping response', response, this.interval);
-            !this.isBeating && this.setIsBeating(true);
+            await Networking.PostToServer('/ping', { date: new Date() });
+            !this.IsBeating && this.setIsBeating(true);
         } catch {
             console.error('ping error');
-            this.isBeating && this.setIsBeating(false);
+            this.IsBeating && this.setIsBeating(false);
         }
-    }
+    };
 
     // not used now, but may need to clear interval
-    private interval: NodeJS.Timeout | null = null;
+    private _interval: NodeJS.Timeout | null = null;
     INTERVAL_SECONDS = 1;
     constructor() {
         PingManager._instance = this;
-        this.interval = setInterval(this.ping, this.INTERVAL_SECONDS * 1000);
+        this._interval = setInterval(this.sendPing, this.INTERVAL_SECONDS * 1000);
     }
 }
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index fbe44cf7a..6c05db892 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -145,95 +145,75 @@ export class MainView extends React.Component {
     componentDidMount() {
         document.getElementById('root')?.addEventListener('scroll', e => (ele => (ele.scrollLeft = ele.scrollTop = 0))(document.getElementById('root')!));
         const ele = document.getElementById('loader');
-        console.log(PingManager.Instance);
-
-        const wrapper = () => {
-            const prog = document.getElementById('dash-progress');
-            if (ele && prog) {
-                // remove from DOM
-                setTimeout(() => {
-                    //clearTimeout();
-                    prog.style.transition = '1s';
-                    prog.style.width = '100%';
-                }, 0);
-                setTimeout(() => (ele.outerHTML = ''), 1000);
-            }
-            this._sidebarContent.proto = undefined;
-            if (!MainView.Live) {
-                DocServer.setPlaygroundFields([
-                    'dataTransition',
-                    'viewTransition',
-                    'treeViewOpen',
-                    'showSidebar',
-                    'itemIndex', // for changing slides in presentations
-                    'sidebarWidthPercent',
-                    'currentTimecode',
-                    'timelineHeightPercent',
-                    'presStatus',
-                    'panX',
-                    'panY',
-                    'overlayX',
-                    'overlayY',
-                    'fitWidth',
-                    'nativeWidth',
-                    'nativeHeight',
-                    'text-scrollHeight',
-                    'text-height',
-                    'hideMinimap',
-                    'viewScale',
-                    'scrollTop',
-                    'hidden',
-                    'curPage',
-                    'viewType',
-                    'chromeHidden',
-                    'currentFrame',
-                    'width',
-                    'height',
-                    'nativeWidth',
-                ]); // can play with these fields on someone else's
-            }
-            DocServer.GetRefField('rtfProto').then(
-                proto =>
-                    proto instanceof Doc &&
-                    reaction(
-                        () => StrCast(proto.BROADCAST_MESSAGE),
-                        msg => msg && alert(msg)
-                    )
-            );
-
-            const tag = document.createElement('script');
-            tag.src = 'https://www.youtube.com/iframe_api';
-            const firstScriptTag = document.getElementsByTagName('script')[0];
-            firstScriptTag.parentNode!.insertBefore(tag, firstScriptTag);
-            window.removeEventListener('keydown', KeyManager.Instance.handle);
-            window.addEventListener('keydown', KeyManager.Instance.handle);
-            window.removeEventListener('keyup', KeyManager.Instance.unhandle);
-            window.addEventListener('keyup', KeyManager.Instance.unhandle);
-            window.addEventListener('paste', KeyManager.Instance.paste as any);
-            document.addEventListener('dash', (e: any) => {
-                // event used by chrome plugin to tell Dash which document to focus on
-                const id = FormattedTextBox.GetDocFromUrl(e.detail);
-                DocServer.GetRefField(id).then(doc => (doc instanceof Doc ? DocumentManager.Instance.showDocument(doc, { willPan: false }) : null));
-            });
-            document.addEventListener('linkAnnotationToDash', Hypothesis.linkListener);
-            this.initEventListeners();
-        };
-
-        if (PingManager.Instance.isBeating) {
-            wrapper();
-        } else {
-            console.error('PingManager is not beating', new Date());
-            const dispose = reaction(
-                () => PingManager.Instance.isBeating,
-                isBeating => {
-                    if (isBeating) {
-                        console.log('PingManager is beating', new Date());
-                        wrapper();
-                        dispose();
-                    }
-                }
-            );
+        const prog = document.getElementById('dash-progress');
+        if (ele && prog) {
+            // remove from DOM
+            setTimeout(() => {
+                //clearTimeout();
+                prog.style.transition = '1s';
+                prog.style.width = '100%';
+            }, 0);
+            setTimeout(() => (ele.outerHTML = ''), 1000);
         }
+        this._sidebarContent.proto = undefined;
+        if (!MainView.Live) {
+            DocServer.setPlaygroundFields([
+                'dataTransition',
+                'viewTransition',
+                'treeViewOpen',
+                'showSidebar',
+                'itemIndex', // for changing slides in presentations
+                'sidebarWidthPercent',
+                'currentTimecode',
+                'timelineHeightPercent',
+                'presStatus',
+                'panX',
+                'panY',
+                'overlayX',
+                'overlayY',
+                'fitWidth',
+                'nativeWidth',
+                'nativeHeight',
+                'text-scrollHeight',
+                'text-height',
+                'hideMinimap',
+                'viewScale',
+                'scrollTop',
+                'hidden',
+                'curPage',
+                'viewType',
+                'chromeHidden',
+                'currentFrame',
+                'width',
+                'height',
+                'nativeWidth',
+            ]); // can play with these fields on someone else's
+        }
+        DocServer.GetRefField('rtfProto').then(
+            proto =>
+                proto instanceof Doc &&
+                reaction(
+                    () => StrCast(proto.BROADCAST_MESSAGE),
+                    msg => msg && alert(msg)
+                )
+        );
+
+        const tag = document.createElement('script');
+        tag.src = 'https://www.youtube.com/iframe_api';
+        const firstScriptTag = document.getElementsByTagName('script')[0];
+        firstScriptTag.parentNode!.insertBefore(tag, firstScriptTag);
+        window.removeEventListener('keydown', KeyManager.Instance.handle);
+        window.addEventListener('keydown', KeyManager.Instance.handle);
+        window.removeEventListener('keyup', KeyManager.Instance.unhandle);
+        window.addEventListener('keyup', KeyManager.Instance.unhandle);
+        window.addEventListener('paste', KeyManager.Instance.paste as any);
+        document.addEventListener('dash', (e: any) => {
+            // event used by chrome plugin to tell Dash which document to focus on
+            const id = FormattedTextBox.GetDocFromUrl(e.detail);
+            DocServer.GetRefField(id).then(doc => (doc instanceof Doc ? DocumentManager.Instance.showDocument(doc, { willPan: false }) : null));
+        });
+        document.addEventListener('linkAnnotationToDash', Hypothesis.linkListener);
+        this.initEventListeners();
     }
 
     componentWillUnMount() {
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 68d652cc4..157d7c04a 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -38,10 +38,10 @@ export class TopBar extends React.Component {
     @observable textColor: string = Colors.LIGHT_GRAY;
     @observable backgroundColor: string = Colors.DARK_GRAY;
 
-    @observable happyHeart: boolean = PingManager.Instance.isBeating;
+    @observable happyHeart: boolean = PingManager.Instance.IsBeating;
     setHappyHeart = action((status: boolean) => (this.happyHeart = status));
     dispose = reaction(
-        () => PingManager.Instance.isBeating,
+        () => PingManager.Instance.IsBeating,
         isBeating => this.setHappyHeart(isBeating)
     );
 
-- 
cgit v1.2.3-70-g09d2


From 6344439d62e5450f69ca7c0492976e55241d250f Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sat, 24 Jun 2023 11:34:15 -0400
Subject: changed server ping to generate client alerts

---
 src/client/util/PingManager.ts          | 15 +++++++++++----
 src/client/views/topbar/TopBar.scss     |  5 ++++-
 src/client/views/topbar/TopBar.tsx      | 19 +++++++++++++++----
 src/server/ApiManagers/UploadManager.ts |  2 --
 4 files changed, 30 insertions(+), 11 deletions(-)

(limited to 'src/client/views/topbar')

diff --git a/src/client/util/PingManager.ts b/src/client/util/PingManager.ts
index 9f4bd3642..0c41a1ea7 100644
--- a/src/client/util/PingManager.ts
+++ b/src/client/util/PingManager.ts
@@ -7,16 +7,23 @@ export class PingManager {
         return PingManager._instance;
     }
 
-    @observable IsBeating: boolean = true;
-    private setIsBeating = action((status: boolean) => (this.IsBeating = status));
+    @observable IsBeating = true;
+    private setIsBeating = action((status: boolean) => {
+        this.IsBeating = status;
+        setTimeout(this.showAlert, 100);
+    });
 
+    showAlert = () => {
+        alert(PingManager.Instance.IsBeating ? 'The server connection is active' : 'The server connection has been interrupted.NOTE: Any changes made will appear to persist but will be lost after a browser refreshes.');
+    };
     sendPing = async (): Promise<void> => {
         try {
             await Networking.PostToServer('/ping', { date: new Date() });
             !this.IsBeating && this.setIsBeating(true);
         } catch {
-            console.error('ping error');
-            this.IsBeating && this.setIsBeating(false);
+            if (this.IsBeating) {
+                this.setIsBeating(false);
+            }
         }
     };
 
diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index a0f803da5..ede59a910 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -9,8 +9,11 @@
 }
 .topbarHeart-red {
     .iconButton-container.primary {
+        .iconButton-content {
+            color: red;
+        }
         .iconButton-background {
-            background: red;
+            background: black;
         }
     }
 }
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 157d7c04a..20cf563c1 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -1,4 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Tooltip } from '@mui/material';
 import { Button, FontSize, IconButton, Size } from 'browndash-components';
 import { action, computed, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -36,7 +37,9 @@ export class TopBar extends React.Component {
     };
 
     @observable textColor: string = Colors.LIGHT_GRAY;
-    @observable backgroundColor: string = Colors.DARK_GRAY;
+    @computed get backgroundColor() {
+        return PingManager.Instance.IsBeating ? Colors.DARK_GRAY : Colors.MEDIUM_GRAY;
+    }
 
     @observable happyHeart: boolean = PingManager.Instance.IsBeating;
     setHappyHeart = action((status: boolean) => (this.happyHeart = status));
@@ -146,9 +149,17 @@ export class TopBar extends React.Component {
                 <IconButton size={Size.SMALL} color={Colors.LIGHT_GRAY} onClick={ReportManager.Instance.open} icon={<FaBug />} />
                 <IconButton size={Size.SMALL} color={Colors.LIGHT_GRAY} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
                 <IconButton size={Size.SMALL} color={Colors.LIGHT_GRAY} onClick={SettingsManager.Instance.open} icon={<FontAwesomeIcon icon="cog" />} />
-                <div className={'topbarHeart' + (this.happyHeart ? '' : '-red')}>
-                    <IconButton size={Size.SMALL} color={this.happyHeart ? Colors.LIGHT_BLUE : Colors.ERROR_RED} icon={<FontAwesomeIcon icon={this.happyHeart ? 'heart' : 'heart-broken'} />} />
-                </div>
+                <Tooltip title={<div className="dash-tooltip">{'Server connection ' + (PingManager.Instance.IsBeating ? 'active' : 'broken')}</div>}>
+                    <div className={'topbarHeart' + (this.happyHeart ? '' : '-red')}>
+                        <IconButton
+                            size={Size.SMALL}
+                            onClick={PingManager.Instance.showAlert}
+                            tooltip={'Server is ' + (PingManager.Instance.IsBeating ? '' : 'NOT ') + 'running'}
+                            color={this.happyHeart ? Colors.LIGHT_BLUE : Colors.ERROR_RED}
+                            icon={<FontAwesomeIcon icon={this.happyHeart ? 'heart' : 'heart-broken'} />}
+                        />
+                    </div>
+                </Tooltip>
                 {/* <Button text={'Logout'} borderRadius={5} hoverStyle={'gray'} backgroundColor={Colors.DARK_GRAY} color={this.textColor} fontSize={FontSize.SECONDARY} onClick={() => window.location.assign(Utils.prepend('/logout'))} /> */}
             </div>
         );
diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts
index de1661ed6..820e815d8 100644
--- a/src/server/ApiManagers/UploadManager.ts
+++ b/src/server/ApiManagers/UploadManager.ts
@@ -45,8 +45,6 @@ export default class UploadManager extends ApiManager {
             method: Method.POST,
             subscription: '/ping',
             secureHandler: async ({ req, res }) => {
-                // req.body contains the array of server paths to the videos
-                // console.log('ping', req.body);
                 _success(res, { message: 'pong', date: new Date() });
             },
         });
-- 
cgit v1.2.3-70-g09d2