Show a cancellable progress bar while computing graphs

AnthonyLeonardoGracio · AnthonyLeonardoGracio · commit 67c686af7e39 · 2025-10-23T10:09:34.000Z
This helps the user understanding that the command is
actually being processed, and allows to cancel it easily
if needed.

Also make the search bar placeholder smaller to make it always
visible no matter the size of the WebView.

For eng/ide/ada_language_server#1702
diff --git a/integration/vscode/ada/src/alsVisualizer.ts b/integration/vscode/ada/src/alsVisualizer.ts
@@ -44,11 +44,17 @@ let canSendNextData: boolean = true;
  * If cancellable is set to true, it becomes a notification in the bottom right corner with a button
  * allowing the user to stop the task whenever he wants.
  *
- * @param task - The task to launch and wait for while displaying the progress animation.
+ * @param task - The task to launch and wait for while displaying the progress animation. The
+ * `token` parameter can be used to check if the user requested cancellation of the task.
+ * @param message - The message to display alongside the progress animation.
  * @param cancellable - Indicates if the progress should be cancellable, which will put it in
  * a notification instead of the status bar.
  */
-function withVizProgress(task: () => void | Promise<void>, message: string, cancellable = false) {
+function withVizProgress(
+    task: (token?: vscode.CancellationToken) => void | Promise<void>,
+    message: string,
+    cancellable = false,
+) {
     vscode.window.withProgress(
         {
             location: cancellable
@@ -71,7 +77,7 @@ function withVizProgress(task: () => void | Promise<void>, message: string, canc
                 stopProcess = true;
             });
             try {
-                await task();
+                await task(token);
             } catch (error) {
                 logger.error(error);
                 return;
@@ -92,48 +98,85 @@ function withVizProgress(task: () => void | Promise<void>, message: string, canc
  * @param hierarchy - The type of hierarchy to visualize.
  */
 export function startVisualize(context: vscode.ExtensionContext, hierarchy: Hierarchy) {
-    withVizProgress(async () => {
-        if (vscode.window.activeTextEditor) {
-            const input = new vscode.Location(
-                vscode.window.activeTextEditor.document.uri,
-                vscode.window.activeTextEditor.selection.active,
-            );
+    const direction =
+        hierarchy === Hierarchy.CALL
+            ? RelationDirection.SUPER
+            : hierarchy === Hierarchy.GPR
+              ? RelationDirection.SUB
+              : RelationDirection.BOTH;
 
-            const languageId = vscode.window.activeTextEditor.document.languageId;
-            const direction =
-                hierarchy === Hierarchy.CALL
-                    ? RelationDirection.SUPER
-                    : hierarchy === Hierarchy.GPR
-                      ? RelationDirection.SUB
-                      : RelationDirection.BOTH;
-            const middleNode = await createHandler(languageId).provideHierarchy(
-                input,
-                hierarchy,
-                languageId,
-                direction,
-            );
+    const progressLabel = getProgressLabel(hierarchy, true);
 
-            // Create the webView only if there is something to display.
-            if (middleNode) {
-                setupWebView(context, hierarchy);
-                const panel = panels[hierarchy];
-                // Make sure the webView was created and initialized.
-                if (panel) {
-                    // Wait for the webView to notify the end of it's rendering
-                    const receive = panel.webview.onDidReceiveMessage((message: Message) => {
-                        if (message.command === 'rendered') {
-                            // Remove the listener as it will not be used after sending
-                            // the initial request.
-                            sendMessage(middleNode.id, hierarchy);
-                            receive.dispose();
-                        }
-                    });
-                    // Check if the client has already been rendered.
-                    panel.webview.postMessage({ command: 'isRendered' } as IsRenderedMessage);
+    withVizProgress(
+        async (token?: vscode.CancellationToken) => {
+            if (vscode.window.activeTextEditor) {
+                const input = new vscode.Location(
+                    vscode.window.activeTextEditor.document.uri,
+                    vscode.window.activeTextEditor.selection.active,
+                );
+
+                const languageId = vscode.window.activeTextEditor.document.languageId;
+
+                const middleNode = await createHandler(languageId).provideHierarchy(
+                    input,
+                    hierarchy,
+                    languageId,
+                    direction,
+                    token,
+                );
+
+                // Create the webView only if there is something to display and if the
+                // user did not cancel the operation.
+                if (middleNode && !token?.isCancellationRequested) {
+                    setupWebView(context, hierarchy);
+                    const panel = panels[hierarchy];
+                    // Make sure the webView was created and initialized.
+                    if (panel) {
+                        // Wait for the webView to notify the end of it's rendering
+                        const receive = panel.webview.onDidReceiveMessage((message: Message) => {
+                            if (message.command === 'rendered') {
+                                // Remove the listener as it will not be used after sending
+                                // the initial request.
+                                sendMessage(middleNode.id, hierarchy);
+                                receive.dispose();
+                            }
+                        });
+                        // Check if the client has already been rendered.
+                        panel.webview.postMessage({ command: 'isRendered' } as IsRenderedMessage);
+                    }
                 }
             }
-        }
-    }, 'Visualizing');
+        },
+        progressLabel,
+        true,
+    );
+}
+
+/**
+ * Get the label to display in the progress bar depending on the hierarchy type.
+ *
+ * @param hierarchy - The type of hierarchy to visualize.
+ * @param onCreate - Whether the progress is for creation or not.
+ * @returns The updated progress label.
+ */
+function getProgressLabel(hierarchy: Hierarchy, onCreate: boolean = false): string {
+    let hierarchyTypeLabel: string;
+    const headerLabel: string = onCreate ? 'Creating' : 'Updating';
+    switch (hierarchy) {
+        case Hierarchy.TYPE:
+            hierarchyTypeLabel = 'Type Hierarchy';
+            break;
+        case Hierarchy.CALL:
+            hierarchyTypeLabel = 'Call Hierarchy';
+            break;
+        case Hierarchy.GPR:
+            hierarchyTypeLabel = 'GPR Dependencies';
+            break;
+        default:
+            hierarchyTypeLabel = 'File Dependencies';
+            break;
+    }
+    return `${headerLabel} ${hierarchyTypeLabel} Graph`;
 }
 
 /**
@@ -188,7 +231,7 @@ function handleMessage(message: Message) {
             withVizProgress(() => {
                 const data = message;
                 void refreshNodes(data.nodesId);
-            }, 'Visualizing');
+            }, 'Refreshing Graph');
             break;
         }
         // Stop the current loop of process (mostly for the recursive hierarchy).
@@ -218,6 +261,8 @@ function handleMessage(message: Message) {
  * @param data - The data necessary to expand a node.
  */
 function requestHierarchy(data: HierarchyMessage) {
+    const progressLabel = getProgressLabel(data.hierarchy);
+
     withVizProgress(
         async () => {
             stopProcess = false;
@@ -324,7 +369,7 @@ function requestHierarchy(data: HierarchyMessage) {
                 }, 100);
             });
         },
-        data.recursive ? 'Gathering data...' : 'Visualizing',
+        progressLabel,
         data.recursive,
     );
 }
diff --git a/integration/vscode/ada/src/alsVisualizerProvider.ts b/integration/vscode/ada/src/alsVisualizerProvider.ts
@@ -119,6 +119,7 @@ export class VisualizerHandler {
      * @param hierarchy - The type of hierarchy needed.
      * @param languageId - The id of the language the symbol is in.
      * @param direction - The direction of the hierarchy
+     * @param token - Cancellation token to cancel the operation
      * @returns The node linked to the location passed as an argument with
      * possibly children and/or parents added.
      */
@@ -127,6 +128,7 @@ export class VisualizerHandler {
         hierarchy: Hierarchy,
         languageId: string,
         direction: RelationDirection,
+        token?: vscode.CancellationToken,
     ) {
         // -------------------------------- BEGIN NESTED FUNCTIONS ---------------------------------
         /**
@@ -143,6 +145,11 @@ export class VisualizerHandler {
             middleNode: NodeHierarchy,
             hierarchy: Hierarchy,
         ) {
+            // Check for cancellation before starting hierarchy retrieval
+            if (token?.isCancellationRequested) {
+                return;
+            }
+
             const commands = [
                 ['vscode.provideSupertypes', 'vscode.provideIncomingCalls'],
                 ['vscode.provideSubtypes', 'vscode.provideOutgoingCalls'],
@@ -157,6 +164,11 @@ export class VisualizerHandler {
             ).map((item) => ('name' in item ? item : 'from' in item ? item.from : item.to));
 
             for (const item of items) {
+                // Check for cancellation in the loop
+                if (token?.isCancellationRequested) {
+                    return;
+                }
+
                 // Get only the useful information from the item.
                 const symbol = {
                     name: item.name,
@@ -184,6 +196,11 @@ export class VisualizerHandler {
 
         // -------------------------------- END NESTED FUNCTIONS --------------------------------
 
+        // Check for cancellation at the start
+        if (token?.isCancellationRequested) {
+            return;
+        }
+
         // Other types of hierarchy will be called from subclasses of this class.
         if (hierarchy !== Hierarchy.CALL && hierarchy !== Hierarchy.TYPE) {
             logger.error(
@@ -198,6 +215,11 @@ export class VisualizerHandler {
             (vscode.CallHierarchyItem | vscode.TypeHierarchyItem)[]
         >(commands[hierarchy], location.uri, location.range.start);
 
+        // Check for cancellation after the command
+        if (token?.isCancellationRequested) {
+            return;
+        }
+
         if (items.length == 0) return;
 
         // The middle node represents the current main symbol in the graph (the symbol the
@@ -206,6 +228,11 @@ export class VisualizerHandler {
         let middleNode;
 
         for (const item of items) {
+            // Check for cancellation in the loop
+            if (token?.isCancellationRequested) {
+                return;
+            }
+
             const symbol: VisualizerSymbol = {
                 name: item.name,
                 location: new vscode.Location(item.uri, item.selectionRange),
@@ -221,16 +248,29 @@ export class VisualizerHandler {
 
             if (direction === RelationDirection.BOTH || direction === RelationDirection.SUPER) {
                 await getHierarchy(item, RelationDirection.SUPER, middleNode, hierarchy);
+                // Check for cancellation after hierarchy retrieval
+                if (token?.isCancellationRequested) {
+                    return;
+                }
             }
             if (direction === RelationDirection.BOTH || direction === RelationDirection.SUB) {
                 await getHierarchy(item, RelationDirection.SUB, middleNode, hierarchy);
+                // Check for cancellation after hierarchy retrieval
+                if (token?.isCancellationRequested) {
+                    return;
+                }
             }
 
             // The middle node is expanded by default when we are getting its children.
             middleNode.expanded =
                 direction === RelationDirection.SUPER ? middleNode.expanded : true;
         }
 
+        // Final cancellation check
+        if (token?.isCancellationRequested) {
+            return;
+        }
+
         // Get all the nodes that do not have parents
         NodesSingleton.findRoots();
         return middleNode;
diff --git a/integration/vscode/ada/src/alsVisualizerProvider/AdaVisualizerHandler.ts b/integration/vscode/ada/src/alsVisualizerProvider/AdaVisualizerHandler.ts
@@ -56,9 +56,10 @@ export class AdaVisualizerHandler extends VisualizerHandler {
         hierarchy: Hierarchy,
         languageId: string,
         direction: RelationDirection,
+        token?: vscode.CancellationToken,
     ) {
         if (hierarchy === Hierarchy.CALL || hierarchy === Hierarchy.TYPE)
-            return await super.provideHierarchy(location, hierarchy, languageId, direction);
+            return await super.provideHierarchy(location, hierarchy, languageId, direction, token);
         else if (hierarchy !== Hierarchy.FILE) {
             logger.error('Unknown type of hierarchy for Ada Language');
             return;
diff --git a/integration/vscode/ada/src/visualizing/searchBar.tsx b/integration/vscode/ada/src/visualizing/searchBar.tsx
@@ -146,7 +146,7 @@ export function SearchBar() {
                     type="search"
                     inputMode="search"
                     autoComplete="off"
-                    placeholder="Search symbol name"
+                    placeholder="Search"
                     id="visualizer__node-search-bar"
                     onChange={onChange}
                     onKeyDown={onKeyDown}
