From 725a1ffe85eb11fbce9d703c316d885b51b00985 Mon Sep 17 00:00:00 2001 From: Colin Grant Date: Fri, 20 Sep 2024 16:16:05 -0600 Subject: [PATCH 1/2] Don't render until initial data loaded --- src/webview/memory-webview-view.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/webview/memory-webview-view.tsx b/src/webview/memory-webview-view.tsx index 537cf1f..62f6f65 100644 --- a/src/webview/memory-webview-view.tsx +++ b/src/webview/memory-webview-view.tsx @@ -18,6 +18,7 @@ import 'primeflex/primeflex.css'; import { debounce } from 'lodash'; import { PrimeReactProvider } from 'primereact/api'; +import { ProgressSpinner } from 'primereact/progressspinner'; import React from 'react'; import { createRoot } from 'react-dom/client'; import { HOST_EXTENSION } from 'vscode-messenger-common'; @@ -64,6 +65,8 @@ export interface MemoryAppState extends MemoryState, MemoryViewSettings { hoverService: HoverService; columns: ColumnStatus[]; isFrozen: boolean; + /** False until the initial setting of values from the plugin side arrives */ + initialized: boolean; } export const DEFAULT_SESSION_CONTEXT: SessionContext = { @@ -101,6 +104,7 @@ class App extends React.Component<{}, MemoryAppState> { hoverService.register(new DataHover()); hoverService.register(new VariableHover()); this.state = { + initialized: false, messageParticipant: { type: 'webview', webviewId: '' }, title: 'Memory', sessionContext: DEFAULT_SESSION_CONTEXT, @@ -215,6 +219,14 @@ class App extends React.Component<{}, MemoryAppState> { } public render(): React.ReactNode { + if (!this.state.initialized) { + return ( +
+ + Loading +
+ ); + } return { protected async setOptions(options?: MemoryOptions): Promise { messenger.sendRequest(logMessageType, HOST_EXTENSION, `Setting options: ${JSON.stringify(options)}`); - this.setState({ configuredReadArguments: { ...this.state.configuredReadArguments, ...options } }); + this.setState({ initialized: true, configuredReadArguments: { ...this.state.configuredReadArguments, ...options } }); return this.fetchMemory(options); } From 148b27fcfc723791024bddb73b2cc0d1a10de00d Mon Sep 17 00:00:00 2001 From: Colin Grant Date: Fri, 20 Sep 2024 16:46:37 -0600 Subject: [PATCH 2/2] Alternatively, pass in the initial config as HTML --- src/plugin/memory-webview-main.ts | 7 +++---- src/webview/memory-webview-view.tsx | 27 ++++++++++++--------------- 2 files changed, 15 insertions(+), 19 deletions(-) diff --git a/src/plugin/memory-webview-main.ts b/src/plugin/memory-webview-main.ts index d13914a..9d396db 100644 --- a/src/plugin/memory-webview-main.ts +++ b/src/plugin/memory-webview-main.ts @@ -163,14 +163,14 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider { } // Set HTML content - await this.getWebviewContent(panel); + await this.getWebviewContent(panel, initialMemory); // Sets up an event listener to listen for messages passed from the webview view context // and executes code based on the message that is received this.setWebviewMessageListener(panel, initialMemory); } - protected async getWebviewContent(panel: vscode.WebviewPanel): Promise { + protected async getWebviewContent(panel: vscode.WebviewPanel, initialMemory?: MemoryOptions): Promise { const mainUri = panel.webview.asWebviewUri(vscode.Uri.joinPath( this.extensionUri, 'dist', @@ -194,7 +194,7 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider { -
+
${initialMemory ? `
` : ''} `; @@ -206,7 +206,6 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider { this.messenger.onNotification(readyType, async () => { this.setSessionContext(participant, this.createContext()); await this.setMemoryDisplaySettings(participant, panel.title); - this.refresh(participant, options); }, { sender: participant }), this.messenger.onRequest(setOptionsType, newOptions => { options = { ...options, ...newOptions }; }, { sender: participant }), this.messenger.onRequest(logMessageType, message => outputChannelLogger.info('[webview]:', message), { sender: participant }), diff --git a/src/webview/memory-webview-view.tsx b/src/webview/memory-webview-view.tsx index 62f6f65..81db5d4 100644 --- a/src/webview/memory-webview-view.tsx +++ b/src/webview/memory-webview-view.tsx @@ -18,7 +18,6 @@ import 'primeflex/primeflex.css'; import { debounce } from 'lodash'; import { PrimeReactProvider } from 'primereact/api'; -import { ProgressSpinner } from 'primereact/progressspinner'; import React from 'react'; import { createRoot } from 'react-dom/client'; import { HOST_EXTENSION } from 'vscode-messenger-common'; @@ -65,8 +64,6 @@ export interface MemoryAppState extends MemoryState, MemoryViewSettings { hoverService: HoverService; columns: ColumnStatus[]; isFrozen: boolean; - /** False until the initial setting of values from the plugin side arrives */ - initialized: boolean; } export const DEFAULT_SESSION_CONTEXT: SessionContext = { @@ -89,12 +86,18 @@ export const DEFAULT_MEMORY_DISPLAY_CONFIGURATION: MemoryDisplaySettings = { visibleColumns: manifest.DEFAULT_VISIBLE_COLUMNS }; +function getInitialValuesHolder(): HTMLElement | null { + return document.getElementById('initial-data'); +} + class App extends React.Component<{}, MemoryAppState> { protected memoryWidget = React.createRef(); protected refreshTimer?: NodeJS.Timeout | number; public constructor(props: {}) { super(props); + const initialValuesHolder = getInitialValuesHolder(); + const initialReadArguments = initialValuesHolder ? { ...DEFAULT_READ_ARGUMENTS, ...JSON.parse(initialValuesHolder.dataset['options']!) } : DEFAULT_READ_ARGUMENTS; columnContributionService.register(new AddressColumn(), false); columnContributionService.register(new DataColumn(), false); columnContributionService.register(variableDecorator); @@ -104,14 +107,13 @@ class App extends React.Component<{}, MemoryAppState> { hoverService.register(new DataHover()); hoverService.register(new VariableHover()); this.state = { - initialized: false, messageParticipant: { type: 'webview', webviewId: '' }, title: 'Memory', sessionContext: DEFAULT_SESSION_CONTEXT, memory: undefined, effectiveAddressLength: 0, - configuredReadArguments: DEFAULT_READ_ARGUMENTS, - activeReadArguments: DEFAULT_READ_ARGUMENTS, + configuredReadArguments: initialReadArguments, + activeReadArguments: initialReadArguments, decorations: [], hoverService: hoverService, columns: columnContributionService.getColumns(), @@ -122,6 +124,9 @@ class App extends React.Component<{}, MemoryAppState> { } public componentDidMount(): void { + if (getInitialValuesHolder()) { + this.fetchMemory(this.state.activeReadArguments); + } messenger.onRequest(setOptionsType, options => this.setOptions(options)); messenger.onNotification(memoryWrittenType, writtenMemory => this.memoryWritten(writtenMemory)); messenger.onNotification(sessionContextChangedType, sessionContext => this.sessionContextChanged(sessionContext)); @@ -219,14 +224,6 @@ class App extends React.Component<{}, MemoryAppState> { } public render(): React.ReactNode { - if (!this.state.initialized) { - return ( -
- - Loading -
- ); - } return { protected async setOptions(options?: MemoryOptions): Promise { messenger.sendRequest(logMessageType, HOST_EXTENSION, `Setting options: ${JSON.stringify(options)}`); - this.setState({ initialized: true, configuredReadArguments: { ...this.state.configuredReadArguments, ...options } }); + this.setState({ configuredReadArguments: { ...this.state.configuredReadArguments, ...options } }); return this.fetchMemory(options); }