[WIP] Feat/issue 2581/list of variables are used

companion/lib/Instance/Variable.js

@@ -117,6 +117,8 @@ class InstanceVariable extends CoreBase {
 	/**
 	 * @param {import('../Registry.js').default} registry
 	 */
+
+
 	constructor(registry) {
 		super(registry, 'Instance/Variable')
 
@@ -313,6 +315,74 @@ class InstanceVariable extends CoreBase {
 		client.onPromise('variables:instance-values', (label) => {
 			return this.#variableValues[label]
 		})
+
+		client.onPromise('variables:get-instances', (name) => {
+			const result = new Set()
+
+			const usageTypes = new Map([
+				["style", "name"],
+				["feedbacks", "feedbacks"],
+				["steps", "action"]
+			]);
+			// name -> style
+			// feedback -> feedbacks
+			// action -> steps
+
+			for (let [controlId, control] of this.registry.controls.getAllControls()) {
+				const parsedControl = control.toJSON();
+
+				if (typeof parsedControl != "string") {
+					for (const propName in parsedControl) {
+						if (JSON.stringify(parsedControl[propName]).includes(name)) {
+							const location = this.registry.page.getLocationOfControlId(controlId)
+							const formattedLocation = location?.pageNumber + "/" + location?.row + "/" + location?.column
+							const formattedUsageType = usageTypes.get(propName) == undefined ? "unknown" : usageTypes.get(propName)
+
+							result.add({
+								"buttonName": formattedLocation, "usageType": formattedUsageType
+							})
+						}
+					}
+				}
+			}
+
+			return Array.from(result)
+		})
+	}
+
+	/**
+	* @param {any} obj
+	* @param {string} str
+	*/
+	objectContainsString(obj, str) {
+		if (typeof obj !== 'object' || obj === null) {
+			return false;
+		}
+
+		const seenObjects = new Set(); // To handle circular references
+
+		/**
+		 * @param {any} obj
+		 */
+		function checkObject(obj) {
+			if (seenObjects.has(obj)) {
+				return false; // Circular reference detected
+			}
+
+			seenObjects.add(obj);
+
+			for (const key in obj) {
+				if (typeof obj[key] === 'string' && obj[key].includes(str)) {
+					return true;
+				} else if (typeof obj[key] === 'object' && checkObject(obj[key])) {
+					return true;
+				}
+			}
+
+			return false;
+		}
+
+		return checkObject(obj);
 	}
 
 	/**

shared-lib/lib/SocketIO.ts

@@ -267,6 +267,8 @@ export interface ClientToBackendEventsMap {
 	'connections:get-help': (id: string) => [err: string, result: null] | [err: null, result: HelpDescription]
 
 	'variables:instance-values': (label: string) => CompanionVariableValues | undefined
+	'variables:get-instances': (name: string) => { buttonName: string; usageType: string }[]
+
 
 	'presets:subscribe': () => Record<string, Record<string, UIPresetDefinition> | undefined>
 	'presets:unsubscribe': () => void
@@ -376,4 +378,4 @@ export type ClientToBackendEventsListenMap = {
 		: (
 				...args: Parameters<ClientToBackendEventsMap[K]>
 			) => Promise<ReturnType<ClientToBackendEventsMap[K]>> | ReturnType<ClientToBackendEventsMap[K]>
-}
+}

webui/src/Buttons/CustomVariablesList.tsx

@@ -76,6 +76,36 @@ export function CustomVariablesList({ setShowCustom }: CustomVariablesListProps)
 
 	const [newName, setNewName] = useState('')
 
+	const [variableUsage, setVariableUsage] = useState<Map<string, { buttonName: string; usageType: string }[]>>(new Map());
+
+	useEffect(() => {
+		const doPoll = (variableName: string) => {
+			return socketEmitPromise(socket, 'variables:get-instances', ["$(internal:custom_" + variableName + ")"])
+				.then((res) => {
+					setVariableUsage((prevMap) => {
+						return new Map(prevMap.set(variableName, res));
+					});
+				})
+				.catch((e) => {
+					console.error('Failed to retrieve instances');
+				});
+		}
+
+
+		const doPollAll = () => {
+			for (let name in allVariableNames) {
+				doPoll(allVariableNames[name])
+			}
+		}
+
+		doPollAll()
+		const interval = setInterval(doPollAll, 1000)
+
+		return () => {
+			clearInterval(interval)
+		}
+	}, [socket])
+
 	const doCreateNew = useCallback(
 		(e: FormEvent) => {
 			e?.preventDefault()
@@ -266,7 +296,6 @@ export function CustomVariablesList({ setShowCustom }: CustomVariablesListProps)
 					{candidates &&
 						candidates.map((info, index) => {
 							const shortname = `custom_${info.name}`
-
 							return (
 								<CustomVariableRow
 									key={info.name}
@@ -283,6 +312,7 @@ export function CustomVariablesList({ setShowCustom }: CustomVariablesListProps)
 									moveRow={moveRow}
 									setCollapsed={setPanelCollapsed}
 									isCollapsed={isPanelCollapsed(info.name)}
+									usage={variableUsage.get(info.name)}
 								/>
 							)
 						})}
@@ -334,6 +364,7 @@ interface CustomVariableRowProps {
 	moveRow: (itemName: string, targetName: string) => void
 	isCollapsed: boolean
 	setCollapsed: (name: string, collapsed: boolean) => void
+	usage: { buttonName: string; usageType: string }[] | undefined
 }
 
 function CustomVariableRow({
@@ -350,6 +381,7 @@ function CustomVariableRow({
 	moveRow,
 	isCollapsed,
 	setCollapsed,
+	usage
 }: CustomVariableRowProps) {
 	const fullname = `internal:${shortname}`
 
@@ -458,6 +490,19 @@ function CustomVariableRow({
 						</>
 					)}
 				</div>
+				{!isCollapsed && (
+					<>
+						<div className="cell-usage">
+							{usage !== undefined && (
+								Array.from(usage).map((item: { buttonName: string; usageType: string }, index: number) => (
+									<div key={index}>
+										<p>Used by {item.buttonName} for {item.usageType}</p>
+									</div>
+								))
+							)}
+						</div>
+					</>
+				)}
 			</td>
 		</tr>
 	)