Added rough process graph on click

joshuatowner · joshuatowner · commit 0d3b75603d80 · 2025-09-07T00:53:58.000-07:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,16 +2,16 @@
   "name": "over-the-top",
   "version": "0.8.1",
   "description": "A minimal Electron application written with Typescript",
-  "main": "dist/bundle.js",
+  "main": "dist/main.js",
   "scripts": {
     "build:worker": "tsc src/old/worker/worker.ts --outDir dist",
     "build:prod": "webpack --config webpack.prod.config.js",
     "build:dev": "webpack --config webpack.dev.config.js",
     "build:dev:watch": "webpack --config webpack.dev.config.js --watch",
     "lint": "tslint -c tslint.json -p tsconfig.json",
-    "start": "yarn run build:dev && electron dist/bundle.js",
-    "start:watch": "yarn run build:dev:watch & electron dist/bundle.js",
-    "start:prod": "yarn run build:prod && electron ./dist/bundle.js",
+    "start": "yarn run build:dev && electron dist/main.js",
+    "start:watch": "yarn run build:dev:watch & electron dist/main.js",
+    "start:prod": "yarn run build:prod && electron ./dist/main.js",
     "package-curent": "electron-packager . --out=out",
     "package-linux": "electron-packager . --out=out --platform=linux --arch=x64",
     "package-win": "electron-packager . --out=out --platform=win32 --arch=x64",
@@ -54,7 +54,6 @@
     "sass-loader": "^16.0.5",
     "style-loader": "^4.0.0",
     "ts-loader": "^9.4.2",
-    "ttf-loader": "^1.0.2",
     "typescript": "^5.8.3",
     "webpack": "^5.99.9",
     "webpack-cli": "^6.0.1",
@@ -64,7 +63,7 @@
     "color": "^5.0.0",
     "deep-equal": "^2.2.1",
     "overlayscrollbars": "^2.11.4",
-    "overlayscrollbars-react": "^0.5.0",
+    "overlayscrollbars-react": "^0.5.6",
     "parse-domain": "^8.2.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -73,6 +72,7 @@
     "styled-components": "^6.1.19",
     "systeminformation": "^5.27.7",
     "two.js": "0.8.19",
-    "uuid": "^11.1.0"
+    "uuid": "^11.1.0",
+    "voronoijs": "^1.0.0"
   }
 }
diff --git a/src/html/detail.html b/src/html/detail.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8"/>
+    <title>Process Detail</title>
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta
+            http-equiv="Content-Security-Policy"
+            content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
+    />
+    <link rel="stylesheet" href="detail.css">
+    <script defer src="detail.js"></script>
+</head>
+<body>
+<div id="root"></div>
+</body>
+</html>
diff --git a/src/html/index.html b/src/html/index.html
@@ -9,7 +9,7 @@
             content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
     />
     <link rel="stylesheet" href="main.css">
-    <script defer src="bundle.js"></script>
+    <script defer src="main.js"></script>
 <!--    <link rel="stylesheet" href="../../node_modules/react-perfect-scrollbar/dist/css/styles.css"/>-->
 </head>
 <body>
diff --git a/src/scss/common.scss b/src/scss/common.scss
@@ -0,0 +1,28 @@
+html {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  font-family: 'Exo', sans-serif;
+  margin: 0;
+  height: 100%;
+  width: 100%;
+}
+
+button {
+  font-family: 'Exo', sans-serif;
+  background: none;
+  border: none;
+  text-decoration: none;
+  font-size: 15px;
+}
+
+#root {
+  height: 100%;
+  width: 100%;
+}
+
+p {
+  margin: 0;
+}
diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -6,35 +6,9 @@
 @use "settings";
 @use "disk";
 @use "details";
+@use "common";
 
-html {
-  height: 100%;
-  width: 100%;
-}
-
-body {
-  font-family: 'Exo', sans-serif;
-  margin: 0;
-  height: 100%;
-  width: 100%;
-}
 
-button {
-  font-family: 'Exo', sans-serif;
-  background: none;
-  border: none;
-  text-decoration: none;
-  font-size: 15px;
-}
-
-#root {
-  height: 100%;
-  width: 100%;
-}
-
-p {
-  margin: 0;
-}
 
 .main {
   position: fixed;
diff --git a/src/scss/process-detail.scss b/src/scss/process-detail.scss
@@ -0,0 +1,90 @@
+@use "fonts.scss";
+@use "common.scss";
+
+.process-detail-container {
+  background-color: #242424; // $background
+  color: #FFFFFF; // $primary
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  font-family: 'Exo', sans-serif;
+}
+
+.process-detail-header {
+  font-size: 20px; // Reduced font size
+  font-weight: normal; // Not bolded
+  text-align: center; // Centered
+  border-bottom: 1px solid #444444;
+  padding-bottom: 10px;
+  margin-bottom: 20px;
+}
+
+.process-overall-usage {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #444444;
+}
+
+.process-overall-usage-item {
+  flex: 1;
+  text-align: center;
+  font-size: 16px;
+}
+
+.process-overall-usage-value {
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.process-pids-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.process-pids-table th,
+.process-pids-table td {
+  padding: 8px;
+  text-align: left;
+  border-bottom: 1px solid #333333;
+}
+
+.process-pids-table th {
+  font-weight: bold;
+  border-bottom: 1px solid #AAA; // Changed from 2px to 1px
+}
+
+.process-action-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-top: auto;
+}
+
+.process-action-buttons button {
+  flex: 1; // Take equal space
+  max-width: calc(50% - 5px); // Half width minus half of the gap
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  background-color: #555555;
+  color: #FFFFFF;
+  border: none;
+}
+
+.process-action-buttons button:hover {
+  background-color: #666666;
+}
+
+.selected-row {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.command-cell {
+  max-width: 200px; // Adjust as needed
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
diff --git a/src/ts/backend/config/default.ts b/src/ts/backend/config/default.ts
@@ -57,6 +57,7 @@ const DEFAULT_CONFIG: Config = {
   process: {
     timing: {
       updateInterval: 3000,
+      processDetailUpdateInterval: 10000,
     }
   },
   gpu: {
diff --git a/src/ts/backend/config/interface.ts b/src/ts/backend/config/interface.ts
@@ -61,6 +61,7 @@ export interface Config {
   process: {
     timing: {
       updateInterval: number,
+      processDetailUpdateInterval: number, // New property
     }
   },
   color: {
diff --git a/src/ts/backend/cpu.ts b/src/ts/backend/cpu.ts
@@ -1,6 +1,7 @@
 import {CpuInfo, CpuSpeedUpdate, CpuTemperatureUpdate, CpuUsageUpdate} from "../data/cpu";
 import * as si from "systeminformation";
 import {CPUSystemInformation} from "../data/system";
+import {bound} from "../ui/util/data";
 
 export async function cpuInfo(): Promise<CpuInfo> {
   const siCpuInfo = await si.cpu();
@@ -13,8 +14,10 @@ export async function cpuInfo(): Promise<CpuInfo> {
 
 export async function cpuUsageUpdate(): Promise<CpuUsageUpdate> {
   const siCpuUpdate = await si.currentLoad();
-  const coreUsages = siCpuUpdate.cpus.map(coreUsage => coreUsage.load / 100);
-  const overallUsage = siCpuUpdate.currentLoad / 100;
+  const coreUsages = siCpuUpdate.cpus
+    .map(coreUsage => coreUsage.load / 100)
+    .map(usage => bound(usage));
+  const overallUsage = bound(siCpuUpdate.currentLoad / 100);
   return {
     overallUsage,
     coreUsages,
diff --git a/src/ts/backend/process/process.ts b/src/ts/backend/process/process.ts
@@ -1,4 +1,4 @@
-import {ProcessUsageInfo} from "../../data/process";
+import {ProcessUsageInfo, ProcessDetailInfo} from "../../data/process";
 import * as si from "systeminformation";
 import {Systeminformation} from "systeminformation";
 import {ONE_BYTE, ONE_KIBIBYTE} from "../../ui/constants/data";
@@ -11,19 +11,34 @@ export async function getAllProcessInfo(): Promise<ProcessUsageInfo[]> {
   return reduceByName(processInfo.list);
 }
 
+function mapToProcessDetailInfo(data: ProcessesProcessData): ProcessDetailInfo {
+  return {
+    pid: data.pid,
+    name: data.name,
+    command: `${data.command} ${data.params}`,
+    cpu: data.cpu,
+    mem: data.mem,
+  };
+}
+
 function reduceByName(data: ProcessesProcessData[]): ProcessUsageInfo[] {
   const nameMap = new Map<string, ProcessUsageInfo>();
   for (const process of data) {
     const name = process.name;
     if (name === SYSTEM_IDLE) continue;
+
     const current = nameMap.get(name);
     const mem = process.memRss * (ONE_KIBIBYTE / ONE_BYTE);
-    const newEntry = {
+
+    const processList = (current?.processes || []);
+    processList.push(mapToProcessDetailInfo(process));
+    const newEntry: ProcessUsageInfo = {
       name,
       cpu: process.cpu + (current?.cpu || 0),
       mem: mem + (current?.mem || 0),
+      processes: processList,
     }
     nameMap.set(name, newEntry);
   }
   return Array.from(nameMap.values());
-}
+}
diff --git a/src/ts/data/process.ts b/src/ts/data/process.ts
@@ -1,5 +1,14 @@
+export interface ProcessDetailInfo {
+  pid: number;
+  name: string;
+  command: string; // Command line of the process
+  cpu: number;     // CPU usage of individual PID
+  mem: number;     // Memory usage of individual PID
+}
+
 export interface ProcessUsageInfo {
   name: string,
   cpu: number,
   mem: number,
+  processes: ProcessDetailInfo[],
 }
diff --git a/src/ts/detail-renderer.tsx b/src/ts/detail-renderer.tsx
@@ -0,0 +1,11 @@
+import "../html/detail.html";
+import ReactDOM from "react-dom/client";
+import * as React from "react";
+import { ProcessDetail } from "./ui/process/detail";
+
+const rootElement = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
+if (rootElement) {
+  rootElement.render(
+    <ProcessDetail />
+  )
+}
diff --git a/src/ts/index.ts b/src/ts/index.ts
@@ -1,5 +1,6 @@
 import {app, BrowserWindow, ipcMain} from "electron";
 import path from "path";
+import { URL } from 'url';
 import index from "../html/index.html";
 import registerIpc from "./backend/server/ipc";
 import NodeBackend from "./backend";
@@ -19,6 +20,27 @@ async function createWindow(): Promise<void> {
     },
   });
 
+  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
+    const parsedUrl = new URL(url);
+    if (parsedUrl.pathname.endsWith('detail.html')) {
+      return {
+        action: 'allow',
+        overrideBrowserWindowOptions: {
+        width: 600,
+        height: 500,
+        parent: mainWindow,
+        modal: true,
+        autoHideMenuBar: true,
+        webPreferences: { // Explicitly set webPreferences for the new window
+          nodeIntegration: true,
+          contextIsolation: false,
+        }
+      }
+      };
+    }
+    return { action: 'deny' };
+  });
+
   mainWindow.maximize();
 
   await mainWindow.loadFile(path.join(__dirname, index));
diff --git a/src/ts/ui/observer/process.ts b/src/ts/ui/observer/process.ts
@@ -2,7 +2,14 @@ import IntervalObservable from "../../data/observable/intervalObservable";
 import {getConfig} from "../../backend/config";
 import {memoObservable} from "./memo";
 
-export const processInfo = memoObservable((backend) => new IntervalObservable(
+import {Backend} from "../../data/backend";
+
+export const processInfo = memoObservable((backend: Backend) => new IntervalObservable(
   backend.processInfo,
   getConfig().process.timing.updateInterval
+));
+
+export const processDetailInfo = memoObservable((backend: Backend) => new IntervalObservable(
+  backend.processInfo,
+  getConfig().process.timing.processDetailUpdateInterval
 ));
diff --git a/src/ts/ui/process/detail/index.tsx b/src/ts/ui/process/detail/index.tsx
diff --git a/src/ts/ui/process/list/entry.tsx b/src/ts/ui/process/list/entry.tsx
diff --git a/src/ts/ui/util/data.ts b/src/ts/ui/util/data.ts
diff --git a/webpack.common.config.js b/webpack.common.config.js

Original file line number	Diff line number	Diff line change
`@@ -57,6 +57,7 @@ const DEFAULT_CONFIG: Config = {`
`57`	`57`	`process: {`
`58`	`58`	`timing: {`
`59`	`59`	`updateInterval: 3000,`
	`60`	`+ processDetailUpdateInterval: 10000,`
`60`	`61`	`}`
`61`	`62`	`},`
`62`	`63`	`gpu: {`
Original file line number	Diff line number	Diff line change
`@@ -61,6 +61,7 @@ export interface Config {`
`61`	`61`	`process: {`
`62`	`62`	`timing: {`
`63`	`63`	`updateInterval: number,`
	`64`	`+ processDetailUpdateInterval: number, // New property`
`64`	`65`	`}`
`65`	`66`	`},`
`66`	`67`	`color: {`