users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/gpu.jsx

592f73c2672474c09dedc5cac8e6fa857a7df92b · 3.5 KB · 128 lines raw

1 import * as Uebersicht from "uebersicht";
2 import * as DataWidget from "./data-widget.jsx";
3 import * as DataWidgetLoader from "./data-widget-loader.jsx";
4 import Graph from "./graph.jsx";
5 import * as Icons from "../icons/icons.jsx";
6 import useWidgetRefresh from "../../hooks/use-widget-refresh.js";
7 import useServerSocket from "../../hooks/use-server-socket.js";
8 import { useSimpleBarContext } from "../simple-bar-context.jsx";
9 import * as Utils from "../../utils.js";
10
11 export { gpuStyles as styles } from "../../styles/components/data/gpu.js";
12
13 const { React } = Uebersicht;
14
15 const DEFAULT_REFRESH_FREQUENCY = 2000;
16 const GRAPH_LENGTH = 40;
17
18 /**
19 * GPU Widget component
20 * @returns {JSX.Element|null} The GPU widget component
21 */
22 export const Widget = React.memo(() => {
23 const { displayIndex, settings } = useSimpleBarContext();
24 const { widgets, gpuWidgetOptions } = settings;
25 const { gpuWidget } = widgets;
26 const {
27 refreshFrequency,
28 showOnDisplay,
29 displayAsGraph,
30 gpuMacmonBinaryPath,
31 showIcon,
32 } = gpuWidgetOptions;
33
34 const isDisabled = React.useRef(false);
35
36 // Calculate the refresh frequency for the widget
37 const refresh = React.useMemo(
38 () =>
39 Utils.getRefreshFrequency(refreshFrequency, DEFAULT_REFRESH_FREQUENCY),
40 [refreshFrequency],
41 );
42
43 // Determine if the widget should be visible
44 const visible =
45 Utils.isVisibleOnDisplay(displayIndex, showOnDisplay) && gpuWidget;
46
47 const [graph, setGraph] = React.useState([]);
48 const [state, setState] = React.useState();
49 const [loading, setLoading] = React.useState(visible);
50
51 /**
52 * Reset the widget state
53 */
54 const resetWidget = () => {
55 setState(undefined);
56 setLoading(false);
57 setGraph([]);
58 };
59
60 /**
61 * Fetch GPU data and update the widget state
62 */
63 const getGpu = React.useCallback(async () => {
64 if (!visible) return;
65 try {
66 const result = await Utils.cachedRun(
67 `${gpuMacmonBinaryPath} pipe -s 1`,
68 refresh,
69 );
70 if (!visible || isDisabled.current) {
71 return;
72 }
73 const json = JSON.parse(result);
74 const { gpu_usage } = json;
75 const formattedUsage = { usage: Math.round(gpu_usage[1] * 100) };
76 setState(formattedUsage);
77 if (displayAsGraph) {
78 Utils.addToGraphHistory(formattedUsage, setGraph, GRAPH_LENGTH);
79 }
80 setLoading(false);
81 } catch {
82 setTimeout(getGpu, 1000);
83 }
84 }, [displayAsGraph, gpuMacmonBinaryPath, visible, refresh]);
85
86 // Update the disabled state based on visibility
87 React.useEffect(() => {
88 isDisabled.current = !visible;
89 }, [visible]);
90
91 // Use server socket to fetch GPU data
92 useServerSocket("gpu", visible, getGpu, resetWidget, setLoading);
93 // Use widget refresh hook to periodically refresh the widget
94 useWidgetRefresh(visible, getGpu, refresh);
95
96 if (loading) return <DataWidgetLoader.Widget className="cpu" />;
97 if (!state) return null;
98
99 const { usage } = state;
100
101 if (displayAsGraph) {
102 return (
103 <DataWidget.Widget classes="gpu gpu--graph" disableSlider>
104 <Graph
105 className="gpu__graph"
106 caption={{
107 usage: {
108 value: `${usage}%`,
109 icon: showIcon ? Icons.CPU : null,
110 color: "var(--cyan)",
111 },
112 }}
113 values={graph}
114 maxLength={GRAPH_LENGTH}
115 maxValue={100}
116 />
117 </DataWidget.Widget>
118 );
119 }
120
121 return (
122 <DataWidget.Widget classes="cpu" Icon={showIcon ? Icons.CPU : null}>
123 <span className="cpu__usage">{usage}%</span>
124 </DataWidget.Widget>
125 );
126 });
127
128 Widget.displayName = "Gpu";