Disable Tooltips settings

graphbookai · Nov 15, 2024 · c33eed8 · c33eed8
1 parent 6883af1
commit c33eed8
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 14 deletions.
diff --git a/web/src/components/Nodes/Node.tsx b/web/src/components/Nodes/Node.tsx
@@ -1,6 +1,6 @@
 import React, { CSSProperties, useCallback, useEffect, useMemo, useState } from 'react';
 import { Handle, Position, useNodes, useEdges, useReactFlow, useOnSelectionChange } from 'reactflow';
-import { Card, Collapse, Badge, Flex, Button, Image, Tabs, theme, Space, Tooltip } from 'antd';
+import { Card, Collapse, Badge, Flex, Button, Image, Tabs, theme, Space } from 'antd';
 import { SearchOutlined, FileTextOutlined, CaretRightOutlined, FileImageOutlined, CodeOutlined } from '@ant-design/icons';
 import { Widget, isWidgetType } from './widgets/Widgets';
 import { Graph } from '../../graph';
@@ -13,6 +13,7 @@ import { useNotification } from '../../hooks/Notification';
 import { useSettings } from '../../hooks/Settings';
 import { SerializationErrorMessages } from '../Errors';
 import { Prompt } from './widgets/Prompts';
+import { RemovableTooltip } from '../Tooltip';
 import ReactJson from '@microlink/react-json-view';
 import type { LogEntry, Parameter, ImageRef } from '../../utils';
 
@@ -38,6 +39,7 @@ export function WorkflowStep({ id, data, selected }) {
     const notification = useNotification();
     const API = useAPI();
     const filename = useFilename();
+    const [settings, _] = useSettings();
 
     useAPINodeMessage('stats', id, filename, (msg) => {
         setRecordCount(msg.queue_size || {});
@@ -132,9 +134,9 @@ export function WorkflowStep({ id, data, selected }) {
                                                 position={Position.Left}
                                                 id={parameterName}
                                             />
-                                            <Tooltip title={tooltip}>
+                                            <RemovableTooltip title={tooltip}>
                                                 <span className="label">{parameterName}</span>
-                                            </Tooltip>
+                                            </RemovableTooltip>
                                         </div>
                                     );
                                 }

diff --git a/web/src/components/Nodes/widgets/Widgets.tsx b/web/src/components/Nodes/widgets/Widgets.tsx
@@ -1,4 +1,4 @@
-import { Switch, Typography, theme, Flex, Button, Radio, Tooltip, Select as ASelect } from 'antd';
+import { Switch, Typography, theme, Flex, Button, Radio, Select as ASelect } from 'antd';
 import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
 import React, { useCallback, useState, useMemo } from 'react';
 import CodeMirror from '@uiw/react-codemirror';
@@ -8,6 +8,7 @@ import { bbedit } from '@uiw/codemirror-theme-bbedit';
 import { Graph } from '../../../graph';
 import { useReactFlow } from 'reactflow';
 import { usePluginWidgets } from '../../../hooks/Plugins';
+import { RemovableTooltip } from '../../Tooltip';
 const { Text } = Typography;
 const { useToken } = theme;
 
@@ -88,9 +89,9 @@ export function BooleanWidget({ name, def, onChange, style, ...props }) {
     const { required, description } = props;
     return (
         <Flex className="input-container" justify='space-between' align="center">
-            <Tooltip title={getDescStr(required, description)}>
+            <RemovableTooltip title={getDescStr(required, description)}>
                 <Text>{name}</Text>
-            </Tooltip>
+            </RemovableTooltip>
             {input}
         </Flex>
     );
@@ -167,9 +168,9 @@ export function ListWidget({ name, def, onChange, type, ...props }) {
 
     return (
         <Flex className="input-container" style={{ border: `1px solid ${token.colorBorder}` }}>
-            <Tooltip title={getDescStr(required, description)}>
+            <RemovableTooltip title={getDescStr(required, description)}>
                 <Text style={{ margin: "2px 1px" }}>{name}</Text>
-            </Tooltip>
+            </RemovableTooltip>
             <Flex vertical style={{ marginLeft: '4px' }}>
                 {def && def.map((item, i) => {
                     return (
@@ -279,9 +280,9 @@ export function DictWidget({ name, def, onChange, ...props }) {
 
     return (
         <Flex className="input-container" style={{ border: `1px solid ${token.colorBorder}`, padding: '0 1px 1px 1px' }}>
-            <Tooltip title={getDescStr(required, description)}>
+            <RemovableTooltip title={getDescStr(required, description)}>
                 <Text style={{ margin: "2px 1px" }}>{name}</Text>
-            </Tooltip>
+            </RemovableTooltip>
             <Flex vertical style={{ marginLeft: '4px' }}>
                 {value && value.map((item, i) => {
                     return (
@@ -414,9 +415,9 @@ function InputNumber({ onChange, label, value, placeholder, description, require
     return (
         <div style={focusedStyle} className="input-container">
             {label &&
-                <Tooltip title={getDescStr(required, description)}>
+                <RemovableTooltip title={getDescStr(required, description)}>
                     <Text style={labelStyle}>{label}</Text>
-                </Tooltip>
+                </RemovableTooltip>
             }
             <input
                 onFocus={() => onInputFocus(true)}
@@ -470,9 +471,9 @@ function Input({ onChange, label, value, placeholder, style, description, requir
     return (
         <div style={focusedStyle} className="input-container">
             {label &&
-                <Tooltip title={getDescStr(required, description)}>
+                <RemovableTooltip title={getDescStr(required, description)}>
                     <Text style={labelStyle}>{label}</Text>
-                </Tooltip>
+                </RemovableTooltip>
             }
             <input
                 onFocus={() => onInputFocus(true)}

diff --git a/web/src/components/Settings.tsx b/web/src/components/Settings.tsx
@@ -50,6 +50,10 @@ export default function Settings() {
         setClientSetting('quickviewImageHeight', value);
     }, []);
 
+    const disableTooltips = useCallback((event) => {
+        setClientSetting('disableTooltips', event.target.checked);
+    }, []);
+
 
     return (
         <div style={{ height: '60vh', overflow: 'auto' }}>
@@ -62,6 +66,7 @@ export default function Settings() {
                     uncheckedText="Light"
                     onChange={(checked) => { setClientSetting('theme', checked ? "Dark" : "Light") }}
                 />
+                <Checkbox onChange={disableTooltips} checked={clientSettings.disableTooltips}>Disable Tooltips <Text type="secondary">(improves UI performance)</Text></Checkbox>
                 <SettingsEntryInput name="Graph Server Host" value={clientSettings.graphServerHost} addonBefore="http://" onApply={setGraphServerHost} />
 
                 <Title level={4}>Media Server Settings</Title>

diff --git a/web/src/components/Tooltip.tsx b/web/src/components/Tooltip.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { Tooltip } from "antd";
+import { useSettings } from "../hooks/Settings";
+
+export function RemovableTooltip({ title, children }: {title: string | undefined, children: any}) {
+    const [settings] = useSettings();
+    if (settings.disableTooltips) {
+        return children;
+    }
+
+    return <Tooltip title={title}>{children}</Tooltip>;
+}
diff --git a/web/src/hooks/Settings.ts b/web/src/hooks/Settings.ts
@@ -3,6 +3,7 @@ import { useState, useEffect, useCallback } from "react";
 const MONITOR_DATA_COLUMNS = ['stats', 'logs', 'notes', 'images'];
 let settings = {
     theme: "Light",
+    disableTooltips: false,
     graphServerHost: "localhost:8005",
     mediaServerHost: "localhost:8006",
     useExternalMediaServer: false,