const root = document.getElementById('root')!;

if (!root) return;

let diagnostics: LJDiagnostic[] | undefined;

let showAllDiagnostics = false;

let currentFile: string;

let stateMachines: LJStateMachine[] = [];

// the last state error shown, kept while switching tabs

let selectedStateError: StateRefinementError | undefined;

let cursorStateErrorKey: string | undefined;

let context: LJContext;

let errorAtCursor: RefinementMismatchError;

let selectedTab: NavTab = 'diagnostics';

let status: ExtensionStatus = 'loading';

let diagramOrientation: "LR" | "TB" = "TB";

// the pre and postconditions of the transitions are shown unless collapsed

let showDiagramConditions = true;

let focusDiagramOnError = true;

let currentDiagram: string = '';

let renderedStateMachineView: string | undefined;

let revealTimeout: ReturnType<typeof setTimeout> | undefined;

const contextSectionState: ContextSectionState = {

aliases: false,

ghosts: false,

vars: true,

};

// what the view's controls are used for goes to the extension, which logs it when liquidjava.usageLog is set

const usage = (action: string, detail: Record<string, unknown> = {}) => vscode.postMessage({ type: 'usage', action, ...detail });

// initial state

root.innerHTML = renderLoading();

vscode.postMessage({ type: 'ready' });

// on click

// toggle does not bubble, so it is caught on its way down. A render of an open <details> fires it too, so only a

// toggle right after the summary was clicked or keyed counts as the user opening or closing the hints

let hintToggleByUser = false;

const markHintToggle = (e: Event) => { if ((e.target as Element).closest?.('.hint-summary')) hintToggleByUser = true; };

root.addEventListener('click', markHintToggle, true);

root.addEventListener('keydown', markHintToggle, true);

root.addEventListener('toggle', (e: Event) => {

const details = e.target as HTMLDetailsElement;

const key = details.getAttribute?.('data-hint-key');

if (key !== null && key !== undefined) {

setHintOpen(key, details.open);

if (hintToggleByUser) usage('hints', { open: details.open, error: key });

}

hintToggleByUser = false;

}, true);

root.addEventListener('click', (e: MouseEvent) => {

const target = e.target instanceof Element ? e.target : null;

if (!target) return;

const iconButton = target.closest?.('.icon-button');

if (iconButton && !(iconButton as HTMLButtonElement).disabled) {

iconButton.classList.remove('icon-button-pop');

void (iconButton as HTMLElement).offsetWidth;

iconButton.classList.add('icon-button-pop');

}

// context section toggle

const contextToggleButton = target.closest?.('.context-toggle-btn');

if (contextToggleButton) {

e.preventDefault();

e.stopPropagation();

const sectionId = contextToggleButton.getAttribute('data-context-toggle');

if (!sectionId) return;

const content = document.getElementById(sectionId);

if (!content) return;

const isExpanded = contextToggleButton.getAttribute('aria-expanded') !== 'false';

const nextExpanded = !isExpanded;

usage('context-section', { section: sectionId, open: nextExpanded });

if (sectionId === 'context-vars') contextSectionState.vars = nextExpanded;

if (sectionId === 'context-ghosts') contextSectionState.ghosts = nextExpanded;

if (sectionId === 'context-aliases') contextSectionState.aliases = nextExpanded;

contextToggleButton.setAttribute('aria-expanded', nextExpanded ? 'true' : 'false');

content.classList.toggle('collapsed', !nextExpanded);

const icon = contextToggleButton.querySelector('.context-toggle-icon');

if (icon) {

icon.classList.toggle('codicon-triangle-down', nextExpanded);

icon.classList.toggle('codicon-triangle-right', !nextExpanded);

}

return;

}

// location link click

const locationTarget = target.closest?.('.location-link');

if (locationTarget) {

e.preventDefault();

e.stopPropagation();

const filePath = locationTarget.getAttribute('data-file');

const lineAttr = locationTarget.getAttribute('data-line');

const columnAttr = locationTarget.getAttribute('data-column');

if (filePath && lineAttr !== null && columnAttr !== null) {

vscode.postMessage({

type: 'openFile',

filePath,

line: parseInt(lineAttr, 10),

character: parseInt(columnAttr, 10)

});

}

return;

}

// reveal failing refinement diagnostic

if (target.classList.contains('diagnostic-reveal-btn')) {

e.preventDefault();

e.stopPropagation();

const revealTarget = getDiagnosticRevealTargetFromKey(target.getAttribute('data-diagnostic-target'));

if (!revealTarget) return;

usage('reveal', { file: revealTarget.file, line: revealTarget.position.lineStart + 1 });

revealDiagnostic(revealTarget);

return;

}

const diagnosticContextButton = target.closest?.('.diagnostic-context-btn');

if (diagnosticContextButton) {

e.preventDefault();

e.stopPropagation();

const revealTarget = getDiagnosticRevealTargetFromKey(diagnosticContextButton.getAttribute('data-diagnostic-target'));

if (!revealTarget) return;

usage('context', { file: revealTarget.file, line: revealTarget.position.lineStart + 1 });

revealContextForDiagnostic(revealTarget);

return;

}

const diagnosticStateMachineButton = target.closest?.('.diagnostic-state-machine-btn');

if (diagnosticStateMachineButton) {

e.preventDefault();

e.stopPropagation();

const errorIndex = parseInt(diagnosticStateMachineButton.getAttribute('data-error-index') || '-1', 10);

const diagnostic = getDisplayDiagnostics(diagnostics ?? [], showAllDiagnostics, currentFile)

.filter(d => d.category === 'error')[errorIndex];

if (diagnostic?.type !== 'state-refinement-error' || diagnostic.stateMachines.length === 0) return;

usage('state-machine', { from: 'view', error: errorIndex });

showStateError(diagnostic);

return;

}

// step through the state errors of the current file

const stateErrorStepButton = target.closest?.('.state-error-step-btn');

if (stateErrorStepButton) {

e.stopPropagation();

if ((stateErrorStepButton as HTMLButtonElement).disabled) return;

const errors = getCurrentStateErrors();

const index = getShownStateError(errors).index + parseInt(stateErrorStepButton.getAttribute('data-step') || '0', 10);

if (errors[index]) { usage('state-error-step', { to: index }); showStateError(errors[index]); }

return;

}

// go back to the shown state error in the Verification tab

if (target.closest?.('#state-error-reveal-btn')) {

e.stopPropagation();

const { error } = getShownStateError(getCurrentStateErrors());

const revealTarget = error && getDiagnosticRevealTarget(error);

if (revealTarget) revealDiagnostic(revealTarget);

return;

}

// VC implication simplification step buttons

const vcImplicationStepButton = target.closest?.('.vc-step-btn');

if (vcImplicationStepButton) {

e.stopPropagation();

usage('found-step', { direction: vcImplicationStepButton.getAttribute('data-vc-step'), error: vcImplicationStepButton.getAttribute('data-error-id') });

handleVCImplicationStepClick(vcImplicationStepButton, () => {

root.querySelector<HTMLElement>('.highlight-var-btn.selected')?.classList.remove('selected');

vscode.postMessage({ type: 'highlight', range: null });

});

return;

}

// toggle show all diagnostics

if (target.id === 'show-all-button') {

e.stopPropagation();

showAllDiagnostics = !showAllDiagnostics;

usage('scope', { workspace: showAllDiagnostics });

updateView();

return;

}

// switch between file and workspace diagnostics

const scopeButton = target.closest?.('[data-diagnostics-scope]') as HTMLElement | null;

if (scopeButton) {

e.stopPropagation();

showAllDiagnostics = scopeButton.dataset.diagnosticsScope === 'workspace';

usage('scope', { workspace: showAllDiagnostics });

updateView();

return;

}

// toggle diagram orientation

if (target.closest?.('#diagram-orientation-btn')) {

e.stopPropagation();

diagramOrientation = diagramOrientation === "TB" ? "LR" : "TB";

usage('diagram', { orientation: diagramOrientation });

resetZoom(document);

updateView();

return;

}

// toggle diagram conditions

const diagramConditionsButton = target.closest?.('#diagram-conditions-btn');

if (diagramConditionsButton) {

e.stopPropagation();

if ((diagramConditionsButton as HTMLButtonElement).disabled) return;

showDiagramConditions = !showDiagramConditions;

usage('diagram', { conditions: showDiagramConditions });

updateView();

return;

}

// toggle the dimming of the diagram parts unrelated to the selected state error

if (target.closest?.('#diagram-focus-btn')) {

e.stopPropagation();

focusDiagramOnError = !focusDiagramOnError;

usage('diagram', { focus: focusDiagramOnError });

updateView();

return;

}

// zoom in

if (target.closest?.('#zoom-in-btn')) {

e.stopPropagation();

zoomIn(document);

return;

}

// zoom out

if (target.closest?.('#zoom-out-btn')) {

e.stopPropagation();

zoomOut(document);

return;

}

// reset zoom

if (target.closest?.('#zoom-reset-btn')) {

e.stopPropagation();

resetZoom(document);

return;

}

// copy diagram source

const copyDiagramButton = target.closest?.('#copy-diagram-btn');

if (copyDiagramButton) {

e.stopPropagation();

if (!currentDiagram) return;

copyDiagramToClipboard(copyDiagramButton, currentDiagram);

return;

}

// highlight variable

const highlightButton = target.closest?.('.highlight-var-btn');

if (highlightButton) {

e.stopPropagation();

const previousSelected = root.querySelector<HTMLElement>('.highlight-var-btn.selected');

if (previousSelected) {

// unselect previous

previousSelected.classList.remove('selected');

if (previousSelected === highlightButton) {

// remove highlight

vscode.postMessage({ type: 'highlight', range: null });

return;

}

}

highlightButton.classList.add('selected');

(highlightButton as HTMLElement).focus();

highlightButton.scrollIntoView({ block: 'nearest' });

const file = highlightButton.getAttribute('data-file');

const lineStart = parseInt(highlightButton.getAttribute('data-start-line') || '', 10);

const colStart = parseInt(highlightButton.getAttribute('data-start-column') || '', 10);

const lineEnd = parseInt(highlightButton.getAttribute('data-end-line') || '', 10);

const colEnd = parseInt(highlightButton.getAttribute('data-end-column') || '', 10);

if (!file || [lineStart, colStart, lineEnd, colEnd].some(Number.isNaN)) return;

const range: Range = { lineStart, colStart, lineEnd, colEnd };

if (file !== currentFile) {

vscode.postMessage({ type: 'openFile', filePath: file, line: lineStart, character: colStart, highlightRange: range });

} else {

vscode.postMessage({ type: 'highlight', range });

}

return;

}

// nav tab click (also on the badge inside the tab)

const navTab = target.closest?.('.nav-tab');

if (navTab) {

e.stopPropagation();

const tab = navTab.getAttribute('data-tab') as NavTab;

if (tab && tab !== selectedTab) {

vscode.postMessage({ type: 'highlight', range: null });

usage('tab', { tab });

selectedTab = tab;

updateView();

}

return;

}

// copy diagnostic

const diagnosticCopyBtn = target.closest?.('.copy-diagnostic-btn');

if (diagnosticCopyBtn) {

e.preventDefault();

e.stopPropagation();

usage('copy');

copyDiagnosticToClipboard(diagnosticCopyBtn, getDisplayDiagnostics(diagnostics || [], showAllDiagnostics, currentFile));

return;

}

});

// navigate context variables with the keyboard

window.addEventListener('keydown', (e: KeyboardEvent) => {

if (selectedTab !== 'context' || (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')) return;

const buttons = Array.from(root.querySelectorAll<HTMLElement>('#context-vars:not(.collapsed) .highlight-var-btn'));

if (buttons.length === 0) return;

const selected = root.querySelector<HTMLElement>('.highlight-var-btn.selected');

const active = document.activeElement instanceof HTMLElement ? document.activeElement.closest<HTMLElement>('.highlight-var-btn') : null;

const current = selected || active;

const currentIndex = current ? buttons.indexOf(current) : -1;

const fallbackIndex = e.key === 'ArrowDown' ? 0 : buttons.length - 1;

const nextIndex = currentIndex === -1

? fallbackIndex

: Math.max(0, Math.min(buttons.length - 1, currentIndex + (e.key === 'ArrowDown' ? 1 : -1)));

e.preventDefault();

e.stopPropagation();

const highlightButton = buttons[nextIndex];

const previousSelected = root.querySelector<HTMLElement>('.highlight-var-btn.selected');

if (previousSelected) previousSelected.classList.remove('selected');

highlightButton.classList.add('selected');

highlightButton.focus();

highlightButton.scrollIntoView({ block: 'nearest' });

const file = highlightButton.getAttribute('data-file');

const lineStart = parseInt(highlightButton.getAttribute('data-start-line') || '', 10);

const colStart = parseInt(highlightButton.getAttribute('data-start-column') || '', 10);

const lineEnd = parseInt(highlightButton.getAttribute('data-end-line') || '', 10);

const colEnd = parseInt(highlightButton.getAttribute('data-end-column') || '', 10);

if (!file || [lineStart, colStart, lineEnd, colEnd].some(Number.isNaN)) return;

const range: Range = { lineStart, colStart, lineEnd, colEnd };

if (file !== currentFile) {

vscode.postMessage({ type: 'openFile', filePath: file, line: lineStart, character: colStart, highlightRange: range });

} else {

vscode.postMessage({ type: 'highlight', range });

}

});

// message event listener from extension

window.addEventListener('message', event => {

const msg = event.data;

switch (msg.type) {

case 'status':

status = msg.status as ExtensionStatus;

updateView();

break;

case 'diagnostics': {

const previousErrors = getAllStateErrors(diagnostics);

diagnostics = msg.diagnostics as LJDiagnostic[];

selectedStateError = findStateError(getAllStateErrors(diagnostics), selectedStateError, previousErrors);

if (selectedTab === 'fsm') updateStateMachineViewIfChanged();

else updateView();

break;

}

case 'file':

currentFile = msg.file;

// the view shows the first error of the new file instead

if (selectedStateError && selectedStateError.file.toLowerCase() !== currentFile?.toLowerCase()) selectedStateError = undefined;

if (diagnostics && !showAllDiagnostics && selectedTab === 'diagnostics') updateView();

stateMachines = [];

if (selectedTab === 'fsm') updateStateMachineViewIfChanged();

break;

case 'fsm':

stateMachines = (msg.sms as LJStateMachine[] | null) ?? [];

if (selectedTab === 'fsm') updateStateMachineViewIfChanged();

break;

case 'context':

context = msg.context as LJContext;

errorAtCursor = msg.errorAtCursor as RefinementMismatchError;

followCursorStateError(msg.errorAtCursor as LJDiagnostic | undefined);

if (selectedTab === 'context') updateView();

break;

case 'revealDiagnostic': {

const revealTarget = msg.diagnostic as DiagnosticRevealTarget;

const stateError = msg.tab === 'fsm' ? findStateErrorAt(revealTarget) : undefined;

if (stateError) showStateError(stateError);

else revealDiagnostic(revealTarget);

break;

}

}

});

/**

function updateView() {

if (status === 'stopped' || status === 'crashed') {

currentDiagram = '';

root.innerHTML = renderStopped(status);

return;

}

if (status === 'loading') {

currentDiagram = '';

root.innerHTML = renderLoading();

return;

}

const stateErrors = getCurrentStateErrors();

const badges = { errors: getCurrentFileErrorCount(diagnostics, currentFile), stateErrors: stateErrors.length };

renderedStateMachineView = undefined;

switch (selectedTab) {

case 'diagnostics':

root.innerHTML = diagnostics

? renderDiagnosticsView(diagnostics, showAllDiagnostics, currentFile, badges)

: renderLoading();

break;

case 'fsm': {

const { error: shownError, index: shownIndex } = getShownStateError(stateErrors);

const displayedStateMachines = orderStateMachines(shownError?.stateMachines ?? stateMachines);

const focusOnError = focusDiagramOnError && !!shownError;

const diagrams = displayedStateMachines.map(sm =>

createMermaidDiagram(sm, diagramOrientation, showDiagramConditions, focusOnError, displayedStateMachines));

// copy the diagrams without the error overlay

currentDiagram = displayedStateMachines

.map(sm => createMermaidDiagram({ ...sm, errorContext: null }, diagramOrientation, showDiagramConditions, false, displayedStateMachines))

.join('\n\n');

renderStateMachineView(root, displayedStateMachines, diagrams, diagramOrientation, showDiagramConditions, focusOnError,

{ index: shownIndex, count: stateErrors.length, line: getStateErrorLine(shownError) }, badges);

renderedStateMachineView = getStateMachineViewKey();

if (displayedStateMachines.length > 0) renderMermaidDiagram(document, window);

break;

}

case 'context':

root.innerHTML = renderContextView(context, currentFile, contextSectionState, errorAtCursor, badges);

break;

}

}

// the 1-based line of the shown error, null without a position, undefined when no error is shown

function getStateErrorLine(error: StateRefinementError | undefined): number | null | undefined {

if (!error) return undefined;

return error.position ? error.position.lineStart + 1 : null;

}

function getCurrentStateErrors(): StateRefinementError[] {

return getStateErrors(diagnostics, currentFile);

}

/**

function getShownStateError(errors: StateRefinementError[]): { error: StateRefinementError | undefined; index: number } {

if (!selectedStateError) return { error: errors[0], index: errors.length > 0 ? 0 : -1 };

const key = getStateErrorKey(selectedStateError);

return { error: selectedStateError, index: errors.findIndex(error => getStateErrorKey(error) === key) };

}

function findStateErrorAt(target: DiagnosticRevealTarget): StateRefinementError | undefined {

const key = getDiagnosticRevealTargetKey(target);

return getAllStateErrors(diagnostics).find(error => getStateErrorKey(error) === key);

}

function showStateError(error: StateRefinementError) {

selectedTab = 'fsm';

selectedStateError = error;

showDiagramConditions = true;

focusDiagramOnError = true;

resetZoom(document);

currentDiagram = '';

updateView();

}

// shows the state error at the cursor once the cursor reaches it, without overriding later choices in the view

function followCursorStateError(error: LJDiagnostic | undefined) {

const stateError = error?.type === 'state-refinement-error' && error.stateMachines.length > 0 ? error : undefined;

const key = stateError ? getStateErrorKey(stateError) : undefined;

if (key === cursorStateErrorKey) return;

cursorStateErrorKey = key;

if (!stateError || (selectedStateError && getStateErrorKey(selectedStateError) === key)) return;

if (selectedTab === 'fsm') {

showStateError(stateError);

} else {

selectedStateError = stateError;

focusDiagramOnError = true;

}

}

// a new verification or file only re-renders the diagram when what it shows changed, so panning and focus are kept

function updateStateMachineViewIfChanged() {

if (status !== 'loading' && status !== 'stopped' && status !== 'crashed'

&& renderedStateMachineView === getStateMachineViewKey()) return;

currentDiagram = '';

updateView();

}

function getStateMachineViewKey(): string {

const stateErrors = getCurrentStateErrors();

const { error: shownError } = getShownStateError(stateErrors);

return JSON.stringify([shownError?.stateMachines ?? stateMachines, shownError ? getStateErrorKey(shownError) : null, stateErrors.length,

getCurrentFileErrorCount(diagnostics, currentFile)]);

}

function revealDiagnostic(target: DiagnosticRevealTarget) {

selectedTab = 'diagnostics';

const isVisibleInCurrentFile = showAllDiagnostics || !target.file || target.file.toLowerCase() === currentFile?.toLowerCase();

if (!isVisibleInCurrentFile) {

showAllDiagnostics = true;

}

updateView();

const element = Array.from(root.querySelectorAll<HTMLElement>('.diagnostic-item')).find(item =>

item.getAttribute('data-diagnostic-target') === getDiagnosticRevealTargetKey(target)

);

if (!element) return;

const previousRevealed = root.querySelector('.diagnostic-item.revealed');

if (previousRevealed) previousRevealed.classList.remove('revealed');

if (revealTimeout) clearTimeout(revealTimeout);

element.classList.add('revealed');

element.scrollIntoView({ block: 'center', behavior: 'smooth' });

revealTimeout = setTimeout(() => {

element.classList.remove('revealed');

revealTimeout = undefined;

}, 1800);

}

function revealContextForDiagnostic(target: DiagnosticRevealTarget) {

selectedTab = 'context';

vscode.postMessage({

type: 'openFile',

filePath: target.file,

line: target.position.lineEnd,

character: target.position.colEnd,

});

updateView();

}