Improve live user count (#520)

* Improve live user count Adds option to show/hide user count and improves its display * fix eslint issue * fix eslint 2 * fix eslint 3 * fix whitespace * fix eslint 4 * hide user count by default * fix package.json * clarify description
agrawal-d · Jan 20, 2025 · 0f8b0ab · 0f8b0ab
1 parent db6d83a
commit 0f8b0ab
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -360,6 +360,11 @@
                     "type": "string",
                     "default": "http://20.244.105.138:4546",
                     "description": "The address of the remote server to which the extension will send requests. (Currently used for live user count)"
+                },
+                "cph.general.showLiveUserCount": {
+                    "type": "boolean",
+                    "default": false,
+                    "description": "Whether to display the live user count. Turning it on may slightly reduce performance."
                 }
             }
         }

diff --git a/src/preferences.ts b/src/preferences.ts
@@ -86,6 +86,9 @@ export const getFirstTimePref = (): boolean =>
 export const getRemoteServerAddressPref = (): string =>
     getPreference('general.remoteServerAddress') || '';
 
+export const getLiveUserCountPref = (): boolean =>
+    getPreference('general.showLiveUserCount') || 'true';
+
 export const getDefaultLangPref = (): string | null => {
     const pref = getPreference('general.defaultLanguage');
     if (pref === 'none' || pref == ' ' || !pref) {

diff --git a/src/types.ts b/src/types.ts
@@ -47,7 +47,8 @@ export type prefSection =
     | 'general.retainWebviewContext'
     | 'general.autoShowJudge'
     | 'general.defaultLanguageTemplateFileLocation'
-    | 'general.remoteServerAddress';
+    | 'general.remoteServerAddress'
+    | 'general.showLiveUserCount';
 
 export type Language = {
     name: LangNames;

diff --git a/src/webview/JudgeView.ts b/src/webview/JudgeView.ts
@@ -10,6 +10,7 @@ import runTestCases from '../runTestCases';
 import {
     getAutoShowJudgePref,
     getRemoteServerAddressPref,
+    getLiveUserCountPref,
     getRetainWebviewContextPref,
 } from '../preferences';
 import { setOnlineJudgeEnv } from '../compiler';
@@ -213,6 +214,8 @@ class JudgeViewProvider implements vscode.WebviewViewProvider {
 
         const remoteServerAddress = getRemoteServerAddressPref();
 
+        const showLiveUserCount = getLiveUserCountPref();
+
         const codiconsUri = webview.asWebviewUri(
             vscode.Uri.joinPath(this._extensionUri, 'dist', 'codicon.css'),
         );
@@ -261,6 +264,7 @@ class JudgeViewProvider implements vscode.WebviewViewProvider {
                         window.remoteMessage = '${remoteMessage}';
                         window.generatedJsonUri = '${generatedJsonUri}';
                         window.remoteServerAddress = '${remoteServerAddress}';
+                        window.showLiveUserCount = ${showLiveUserCount};
 
                         document.addEventListener(
                             'DOMContentLoaded',

diff --git a/src/webview/frontend/App.tsx b/src/webview/frontend/App.tsx
@@ -40,6 +40,7 @@ interface CustomWindow extends Window {
     generatedJsonUri: string;
     remoteMessage: string | null;
     remoteServerAddress: string;
+    showLiveUserCount: boolean;
     console: Console;
 }
 declare const window: CustomWindow;
@@ -95,10 +96,13 @@ function Judge(props: {
     const [extLogs, setExtLogs] = useState<string>('');
 
     useEffect(() => {
-        getLiveUserCount().then((count) => setLiveUserCount(count));
-        const interval = setInterval(() => {
-            getLiveUserCount().then((count) => setLiveUserCount(count));
-        }, 30000);
+        const updateLiveUserCount = (): void => {
+            if (window.showLiveUserCount) {
+                getLiveUserCount().then((count) => setLiveUserCount(count));
+            }
+        };
+        updateLiveUserCount();
+        const interval = setInterval(updateLiveUserCount, 30000);
         return () => clearInterval(interval);
     }, []);
 
@@ -554,9 +558,14 @@ function Judge(props: {
                 <h3>License</h3>
                 <pre className="selectable">{generatedJson.licenseString}</pre>
                 <hr />
-                <h3>Live user count</h3>
-                {liveUserCount} user(s) online.
-                <hr />
+                {window.showLiveUserCount && (
+                    <>
+                        <h3>Live user count</h3>
+                        {liveUserCount} {liveUserCount === 1 ? 'user' : 'users'}{' '}
+                        online.
+                        <hr />
+                    </>
+                )}
                 <h3>UI Logs</h3>
                 <pre className="selectable">{logs}</pre>
                 <hr />
@@ -643,10 +652,11 @@ function Judge(props: {
                         }}
                     />
                 </div>
-                {liveUserCount > 0 && (
+                {window.showLiveUserCount && liveUserCount > 0 && (
                     <div className="liveUserCount">
                         <i className="codicon codicon-circle-filled color-green"></i>{' '}
-                        {liveUserCount} users online
+                        {liveUserCount} {liveUserCount === 1 ? 'user' : 'users'}{' '}
+                        online.
                     </div>
                 )}
             </div>