Extract a Pane base separate from a MonacoPane. (#3385)gh-2122

* Extract a Pane base separate from a MonacoPane.
* Make it clearer that editor and tree id are truthy-ish non-zero numbers, or else not present. Thanks @partouf; CC @jeremy-rifkin

Paves the way to move the (few) tools that don't have an editor to also share the base class.

16 files changed, 171 insertions, 122 deletions

diff --git a/static/panes/ast-view.js b/static/panes/ast-view.js
index c289fc3c6..9ec8ff0dc 100644
--- a/static/panes/ast-view.js
+++ b/static/panes/ast-view.js
@@ -150,7 +150,7 @@ Ast.prototype.getDefaultPaneName = function () {
 };
 
 Ast.prototype.getPaneTag = function () {
-    if(this._editorid !== false) {
+    if(this._editorid) {
         return this._compilerName + ' (Editor #' + this._editorid + ', Compiler #' + this._compilerid + ')';
     } else {
         return this._compilerName + ' (Tree #' + this._treeid + ', Compiler #' + this._compilerid + ')';
diff --git a/static/panes/cfg-view.interfaces.ts b/static/panes/cfg-view.interfaces.ts
index 7c42bf8fa..20ca9834b 100644
--- a/static/panes/cfg-view.interfaces.ts
+++ b/static/panes/cfg-view.interfaces.ts
@@ -24,8 +24,8 @@
 
 export interface CfgState {
     id: number;
-    editorid: number | boolean;
-    treeid: number | boolean;
+    editorid?: number;
+    treeid?: number;
     selectedFn?: string;
     pos: any; // vis.Network.Position
     scale: number;
diff --git a/static/panes/cfg-view.ts b/static/panes/cfg-view.ts
index 1dc6a1591..fe492c956 100644
--- a/static/panes/cfg-view.ts
+++ b/static/panes/cfg-view.ts
@@ -56,8 +56,8 @@ export class Cfg {
     cfgVisualiser: any;
     compilerId: number;
     _compilerName = '';
-    _editorid: number | boolean;
-    _treeid: number | boolean;
+    _editorid?: number;
+    _treeid?: number;
     _binaryFilter: boolean;
     functionPicker: TomSelect;
     supportsCfg = false;
@@ -298,7 +298,7 @@ export class Cfg {
     }
 
     getPaneTag() {
-        if(this._editorid !== false) {
+        if(this._editorid) {
             return `${this._compilerName} (Editor #${this._editorid}, Compiler #${this.compilerId})`;
         } else {
             return `${this._compilerName} (Tree #${this._treeid}, Compiler #${this.compilerId})`;
diff --git a/static/panes/compiler.js b/static/panes/compiler.js
index 6138664a9..fa58a708f 100644
--- a/static/panes/compiler.js
+++ b/static/panes/compiler.js
@@ -1120,7 +1120,7 @@ Compiler.prototype.handleCompileRequestAndResult = function (request, result, ca
         infoLabelText = ' - ' + timeTaken + 'ms';
     }
 
-    if (result.asmSize !== undefined) {
+    if (result.asmSize) {
         infoLabelText += ' (' + result.asmSize + 'B)';
     }
 
diff --git a/static/panes/device-view.js b/static/panes/device-view.js
index fe884e8b4..38e34f149 100644
--- a/static/panes/device-view.js
+++ b/static/panes/device-view.js
@@ -225,7 +225,7 @@ DeviceAsm.prototype.updateDeviceAsm = function () {
 };
 
 DeviceAsm.prototype.getPaneTag = function () {
-    if(this._editorId !== false) {
+    if(this._editorId) {
         return this._compilerName + ' (Editor #' + this._editorId + ', Compiler #' + this._compilerId + ')';
     } else {
         return this._compilerName + ' (Tree #' + this._treeId + ', Compiler #' + this._compilerId + ')';
diff --git a/static/panes/gccdump-view.js b/static/panes/gccdump-view.js
index b98d9d1d3..b9a485a5a 100644
--- a/static/panes/gccdump-view.js
+++ b/static/panes/gccdump-view.js
@@ -330,7 +330,7 @@ GccDump.prototype.getDefaultPaneName = function () {
 };
 
 GccDump.prototype.getPaneTag = function () {
-    if(this.state._editorid !== false) {
+    if(this.state._editorid) {
         return this._compilerName
                 + ' (Editor #' + this.state._editorid + ', Compiler #' + this.state._compilerid + ')';
     } else {
diff --git a/static/panes/gnatdebug-view.ts b/static/panes/gnatdebug-view.ts
index d1a23d7b1..499a4d8c2 100644
--- a/static/panes/gnatdebug-view.ts
+++ b/static/panes/gnatdebug-view.ts
@@ -26,15 +26,15 @@ import _ from 'underscore';
 import * as monaco from 'monaco-editor';
 import { Container } from 'golden-layout';
 
-import { Pane } from './pane';
+import { MonacoPane } from './pane';
 import { GnatDebugState } from './gnatdebug-view.interfaces';
-import { BasePaneState } from './pane.interfaces';
+import { MonacoPaneState } from './pane.interfaces';
 
 import { ga } from '../analytics';
 import { extendConfig } from '../monaco-config';
 
-export class GnatDebug extends Pane<monaco.editor.IStandaloneCodeEditor, GnatDebugState> {
-    constructor(hub: any, container: Container, state: GnatDebugState & BasePaneState) {
+export class GnatDebug extends MonacoPane<monaco.editor.IStandaloneCodeEditor, GnatDebugState> {
+    constructor(hub: any, container: Container, state: GnatDebugState & MonacoPaneState) {
         super(hub, container, state);
         if (state && state.gnatDebugOutput) {
             this.showGnatDebugResults(state.gnatDebugOutput);
@@ -82,8 +82,8 @@ export class GnatDebug extends Pane<monaco.editor.IStandaloneCodeEditor, GnatDeb
         }
     }
 
-    override onCompiler(compilerId: number, compiler: any, options: any, editorId: number | boolean,
-        treeId: number | boolean): void {
+    override onCompiler(compilerId: number, compiler: any, options: any, editorId?: number,
+        treeId?: number): void {
         if (this.compilerInfo.compilerId === compilerId) {
             this.compilerInfo.compilerName = compiler ? compiler.name : '';
             this.compilerInfo.editorId = editorId;
diff --git a/static/panes/gnatdebugtree-view.ts b/static/panes/gnatdebugtree-view.ts
index de95f1b80..f25455b10 100644
--- a/static/panes/gnatdebugtree-view.ts
+++ b/static/panes/gnatdebugtree-view.ts
@@ -26,15 +26,15 @@ import _ from 'underscore';
 import * as monaco from 'monaco-editor';
 import { Container } from 'golden-layout';
 
-import { Pane } from './pane';
+import { MonacoPane } from './pane';
 import { GnatDebugTreeState } from './gnatdebugtree-view.interfaces';
-import { BasePaneState } from './pane.interfaces';
+import { MonacoPaneState } from './pane.interfaces';
 
 import { ga } from '../analytics';
 import { extendConfig } from '../monaco-config';
 
-export class GnatDebugTree extends Pane<monaco.editor.IStandaloneCodeEditor, GnatDebugTreeState> {
-    constructor(hub: any, container: Container, state: GnatDebugTreeState & BasePaneState) {
+export class GnatDebugTree extends MonacoPane<monaco.editor.IStandaloneCodeEditor, GnatDebugTreeState> {
+    constructor(hub: any, container: Container, state: GnatDebugTreeState & MonacoPaneState) {
         super(hub, container, state);
         if (state && state.gnatDebugTreeOutput) {
             this.showGnatDebugTreeResults(state.gnatDebugTreeOutput);
@@ -82,8 +82,8 @@ export class GnatDebugTree extends Pane<monaco.editor.IStandaloneCodeEditor, Gna
         }
     }
 
-    override onCompiler(compilerId: number, compiler: any, options: any, editorId: number | boolean,
-        treeId: number | boolean): void {
+    override onCompiler(compilerId: number, compiler: any, options: any, editorId?: number,
+        treeId?: number): void {
         if (this.compilerInfo.compilerId === compilerId) {
             this.compilerInfo.compilerName = compiler ? compiler.name : '';
             this.compilerInfo.editorId = editorId;
diff --git a/static/panes/ir-view.ts b/static/panes/ir-view.ts
index c080a39a4..11f32b881 100644
--- a/static/panes/ir-view.ts
+++ b/static/panes/ir-view.ts
@@ -26,9 +26,9 @@ import _ from 'underscore';
 import * as monaco from 'monaco-editor';
 import { Container } from 'golden-layout';
 
-import { Pane } from './pane';
+import { MonacoPane } from './pane';
 import { IrState } from './ir-view.interfaces';
-import { BasePaneState } from './pane.interfaces';
+import { MonacoPaneState } from './pane.interfaces';
 
 import { ga } from '../analytics';
 import { extendConfig } from '../monaco-config';
@@ -36,14 +36,14 @@ import { applyColours } from '../colour';
 
 import { PaneRenaming } from '../widgets/pane-renaming';
 
-export class Ir extends Pane<monaco.editor.IStandaloneCodeEditor, IrState> {
+export class Ir extends MonacoPane<monaco.editor.IStandaloneCodeEditor, IrState> {
     linkedFadeTimeoutId = -1;
     irCode: any[] = [];
     colours: any[] = [];
     decorations: any = {};
     previousDecorations: string[] = [];
 
-    constructor(hub: any, container: Container, state: IrState & BasePaneState) {
+    constructor(hub: any, container: Container, state: IrState & MonacoPaneState) {
         super(hub, container, state);
         if (state && state.irOutput) {
             this.showIrResults(state.irOutput);
diff --git a/static/panes/opt-view.js b/static/panes/opt-view.js
index d40b0bb1f..32cb6144f 100644
--- a/static/panes/opt-view.js
+++ b/static/panes/opt-view.js
@@ -138,7 +138,7 @@ Opt.prototype.getDefaultPaneName = function () {
 };
 
 Opt.prototype.getPaneTag = function () {
-    if(this._editorid !== false) {
+    if(this._editorid) {
         return this._compilerName + ' (Editor #' + this._editorid + ', Compiler #' + this._compilerid + ')';
     } else {
         return this._compilerName + ' (Tree #' + this._treeid + ', Compiler #' + this._compilerid + ')';
diff --git a/static/panes/pane.interfaces.ts b/static/panes/pane.interfaces.ts
index bf3cd4a07..d8443e048 100644
--- a/static/panes/pane.interfaces.ts
+++ b/static/panes/pane.interfaces.ts
@@ -24,25 +24,28 @@
 
 import * as monaco from 'monaco-editor';
 
-export interface PaneCompilerState {
-    compilerId: number;
-    compilerName: string;
-    editorId: number | boolean;
-    treeId: number | boolean;
-}
-
-export interface PaneState {
+/**
+ * The base state of a pane as encoded in the URL.
+ *
+ * Be aware this state, and any derived state is part of the public API of
+ * Compiler Explorer, so don't rename or add anything without careful thought.
+ */
+export class PaneState {
     id: number;
-    editorId: number;
-    selection: monaco.Selection;
+    compilerName: string;
+    // editorid and treeid are truthy numbers: if they are truthy, then they
+    // reprsent the positive integer id associated with them. If not truthy
+    // there is no editor or tree view associated with this pane.
+    editorid?: number;
+    treeid?: number;
 }
 
 // TODO(supergrecko): get the full type
-export interface BasePaneState {
+/**
+ * The state of a pane that includes basic Monaco editor support.
+ *
+ * See MonacoPane.
+ */
+export class MonacoPaneState extends PaneState {
     selection: monaco.Selection;
-    id: number;
-    compilerName: string;
-    editorid: number;
-    treeid: number;
 }
-
diff --git a/static/panes/pane.ts b/static/panes/pane.ts
index 122431474..0f4f9f0b0 100644
--- a/static/panes/pane.ts
+++ b/static/panes/pane.ts
@@ -26,7 +26,7 @@ import _ from 'underscore';
 import { Container } from 'golden-layout';
 import * as monaco from 'monaco-editor';
 
-import { BasePaneState, PaneCompilerState } from './pane.interfaces';
+import { MonacoPaneState, PaneState } from './pane.interfaces';
 
 import { FontScale } from '../widgets/fontscale';
 import { SiteSettings } from '../settings';
@@ -34,24 +34,26 @@ import * as utils from '../utils';
 
 import { PaneRenaming } from '../widgets/pane-renaming';
 
+
+class PaneCompilerState {
+    compilerId: number;
+    compilerName: string;
+    editorId?: number;
+    treeId?: number;
+}
+
 /**
- * Basic container for a tool pane in Compiler Explorer
- *
- * Type parameter E indicates which monaco editor kind this pane hosts. Common
- * values are monaco.editor.IDiffEditor and monaco.ICodeEditor
+ * Basic container for a tool pane in Compiler Explorer.
  *
  * Type parameter S refers to a state interface for the pane
  */
-export abstract class Pane<E extends monaco.editor.IEditor, S> {
+export abstract class Pane<S> {
     compilerInfo: PaneCompilerState;
     container: Container;
     domRoot: JQuery;
     topBar: JQuery;
     hideable: JQuery;
     eventHub: any /* typeof hub.createEventHub() */;
-    selection: monaco.Selection;
-    editor: E;
-    fontScale: FontScale;
     isAwaitingInitialResults = false;
     settings: SiteSettings | Record<string, never> = {};
     paneName: string;
@@ -63,24 +65,20 @@ export abstract class Pane<E extends monaco.editor.IEditor, S> {
      *
      * Overridable for implementors
      */
-    protected constructor(hub: any /* Hub */, container: Container, state: S & BasePaneState) {
+    protected constructor(hub: any /* Hub */, container: Container, state: S & PaneState) {
         this.container = container;
         this.eventHub = hub.createEventHub();
         this.domRoot = container.getElement();
         this.hideable = this.domRoot.find('.hideable');
 
         this.domRoot.html(this.getInitialHTML());
-        const editorRoot = this.domRoot.find('.monaco-placeholder')[0];
-        this.editor = this.createEditor(editorRoot);
 
-        this.selection = state.selection;
         this.compilerInfo = {
             compilerId: state.id,
             compilerName: state.compilerName,
             editorId: state.editorid,
             treeId: state.treeid,
         };
-        this.fontScale = new FontScale(this.domRoot, state, this.editor);
         this.topBar = this.domRoot.find('.top-bar');
 
         this.paneRenaming = new PaneRenaming(this, state);
@@ -88,7 +86,6 @@ export abstract class Pane<E extends monaco.editor.IEditor, S> {
         this.registerButtons(state);
         this.registerStandardCallbacks();
         this.registerCallbacks();
-        this.registerEditorActions();
         this.registerOpeningAnalyticsEvent();
     }
 
@@ -105,18 +102,6 @@ export abstract class Pane<E extends monaco.editor.IEditor, S> {
     abstract getInitialHTML(): string;
 
     /**
-     * Initialize the monaco editor instance. Typical implementation for looks
-     * like this:
-     *
-     * ```ts
-     * return monaco.editor.create(editorRoot, extendConfig({
-     *     // goodies
-     * }));
-     * ```
-     */
-    abstract createEditor(editorRoot: HTMLElement): E;
-
-    /**
      * Emit analytics event for opening the pane tab. Typical implementation
      * looks like this:
      *
@@ -131,16 +116,12 @@ export abstract class Pane<E extends monaco.editor.IEditor, S> {
     abstract registerOpeningAnalyticsEvent(): void
 
     /** Optionally overridable code for initializing pane buttons */
-    registerButtons(state: S): void {}
+    registerButtons(state: S): void {
+    }
 
     /** Optionally overridable code for initializing event callbacks */
-    registerCallbacks(): void {}
-
-    /**
-     * Optionally overridable code for initializing monaco actions on the
-     * editor instance
-     */
-    registerEditorActions(): void {}
+    registerCallbacks(): void {
+    }
 
     /**
      * Handle user selected compiler change.
@@ -195,7 +176,6 @@ export abstract class Pane<E extends monaco.editor.IEditor, S> {
 
     /** Initialize standard lifecycle hooks */
     protected registerStandardCallbacks(): void {
-        this.fontScale.on('change', this.updateState.bind(this));
         this.paneRenaming.on('renamePane', this.updateState.bind(this));
         this.container.on('destroy', this.close.bind(this));
         this.container.on('resize', this.resize.bind(this));
@@ -220,7 +200,7 @@ export abstract class Pane<E extends monaco.editor.IEditor, S> {
     /** Generate "(Editor #1, Compiler #1)" tag */
     protected getPaneTag() {
         const { compilerName, editorId, treeId, compilerId } = this.compilerInfo;
-        if(editorId !== false) {
+        if(editorId) {
             return `${compilerName} (Editor #${editorId}, Compiler #${compilerId})`;
         } else {
             return `${compilerName} (Tree #${treeId}, Compiler #${compilerId})`;
@@ -244,34 +224,18 @@ export abstract class Pane<E extends monaco.editor.IEditor, S> {
         }
     }
 
-    protected onDidChangeCursorSelection(event: monaco.editor.ICursorSelectionChangedEvent) {
-        if (this.isAwaitingInitialResults) {
-            this.selection = event.selection;
-            this.updateState();
-        }
-    }
-
     protected onSettingsChange(settings: SiteSettings) {
         this.settings = settings;
-        this.editor.updateOptions({
-            contextmenu: settings.useCustomContextMenu,
-            minimap: {
-                enabled: settings.showMinimap,
-            },
-            fontFamily: settings.editorsFFont,
-            fontLigatures: settings.editorsFLigatures,
-        });
     }
 
-    getCurrentState() {
+    getCurrentState(): PaneState {
         const state = {
             id: this.compilerInfo.compilerId,
-            editorId: this.compilerInfo.editorId,
-            treeId: this.compilerInfo.treeId,
-            selection: this.selection,
+            compilerName: this.compilerInfo.compilerName,
+            editorid: this.compilerInfo.editorId,
+            treeid: this.compilerInfo.treeId,
         };
         this.paneRenaming.addState(state);
-        this.fontScale.addState(state);
         return state;
     }
 
@@ -279,6 +243,44 @@ export abstract class Pane<E extends monaco.editor.IEditor, S> {
         this.container.setState(this.getCurrentState());
     }
 
+    abstract resize(): void;
+}
+
+/**
+ * Basic container for a tool pane with a monaco editor in Compiler Explorer.
+ *
+ * Type parameter E indicates which monaco editor kind this pane hosts. Common
+ * values are monaco.editor.IDiffEditor and monaco.ICodeEditor
+ *
+ * Type parameter S refers to a state interface for the pane
+ */
+export abstract class MonacoPane<E extends monaco.editor.IEditor, S> extends Pane<S> {
+    editor: E;
+    selection: monaco.Selection;
+    fontScale: FontScale;
+
+    protected constructor(hub: any /* Hub */, container: Container, state: S & MonacoPaneState) {
+        super(hub, container, state);
+
+        const editorRoot = this.domRoot.find('.monaco-placeholder')[0];
+        this.editor = this.createEditor(editorRoot);
+        this.fontScale = new FontScale(this.domRoot, state, this.editor);
+        this.selection = state.selection;
+
+        this.registerEditorActions();
+    }
+
+
+    getCurrentState(): MonacoPaneState {
+        const parent = super.getCurrentState();
+        const state: MonacoPaneState = {
+            selection: this.selection,
+            ...parent,
+        };
+        this.fontScale.addState(state);
+        return state;
+    }
+
     resize() {
         const topBarHeight = utils.updateAndCalcTopBarHeight(this.domRoot,
             this.topBar, this.hideable);
@@ -288,4 +290,48 @@ export abstract class Pane<E extends monaco.editor.IEditor, S> {
             height: this.domRoot.height() as number - topBarHeight,
         });
     }
+
+    /**
+     * Initialize the monaco editor instance. Typical implementation for looks
+     * like this:
+     *
+     * ```ts
+     * return monaco.editor.create(editorRoot, extendConfig({
+     *     // goodies
+     * }));
+     * ```
+     */
+    abstract createEditor(editorRoot: HTMLElement): E;
+
+    protected onSettingsChange(settings: SiteSettings) {
+        super.onSettingsChange(settings);
+        this.editor.updateOptions({
+            contextmenu: settings.useCustomContextMenu,
+            minimap: {
+                enabled: settings.showMinimap,
+            },
+            fontFamily: settings.editorsFFont,
+            fontLigatures: settings.editorsFLigatures,
+        });
+    }
+
+    protected onDidChangeCursorSelection(event: monaco.editor.ICursorSelectionChangedEvent) {
+        if (this.isAwaitingInitialResults) {
+            this.selection = event.selection;
+            this.updateState();
+        }
+    }
+
+    /** Initialize standard lifecycle hooks */
+    protected registerStandardCallbacks(): void {
+        super.registerStandardCallbacks();
+        this.fontScale.on('change', this.updateState.bind(this));
+    }
+
+    /**
+     * Optionally overridable code for initializing monaco actions on the
+     * editor instance
+     */
+    registerEditorActions(): void {
+    }
 }
diff --git a/static/panes/pp-view.ts b/static/panes/pp-view.ts
index e494223ac..cf8f929f4 100644
--- a/static/panes/pp-view.ts
+++ b/static/panes/pp-view.ts
@@ -28,17 +28,17 @@ import { Toggles } from '../widgets/toggles';
 import * as monaco from 'monaco-editor';
 import _ from 'underscore';
 import $ from 'jquery';
-import { Pane } from './pane';
+import { MonacoPane } from './pane';
 import { ga } from '../analytics';
 import * as monacoConfig from '../monaco-config';
 import { PPViewState } from './pp-view.interfaces';
 import { Container } from 'golden-layout';
-import { BasePaneState } from './pane.interfaces';
+import { MonacoPaneState } from './pane.interfaces';
 
-export class PP extends Pane<monaco.editor.IStandaloneCodeEditor, PPViewState> {
+export class PP extends MonacoPane<monaco.editor.IStandaloneCodeEditor, PPViewState> {
     options: any;
 
-    constructor(hub: any, container: Container, state: PPViewState & BasePaneState) {
+    constructor(hub: any, container: Container, state: PPViewState & MonacoPaneState) {
         super(hub, container, state);
         this.eventHub.emit('ppViewOpened', this.compilerInfo.compilerId);
         this.eventHub.emit('requestSettings');
@@ -71,7 +71,7 @@ export class PP extends Pane<monaco.editor.IStandaloneCodeEditor, PPViewState> {
         });
     }
 
-    override registerButtons(state: PPViewState & BasePaneState): void {
+    override registerButtons(state: PPViewState & MonacoPaneState): void {
         this.options = new Toggles(this.domRoot.find('.options'), ((state as unknown) as Record<string, boolean>));
         this.options.on('change', this.onOptionsChange.bind(this));
     }
diff --git a/static/panes/rusthir-view.ts b/static/panes/rusthir-view.ts
index 0bc4b4223..453c2e8b5 100644
--- a/static/panes/rusthir-view.ts
+++ b/static/panes/rusthir-view.ts
@@ -26,15 +26,15 @@ import _ from 'underscore';
 import * as monaco from 'monaco-editor';
 import { Container } from 'golden-layout';
 
-import { Pane } from './pane';
-import { BasePaneState } from './pane.interfaces';
+import { MonacoPane } from './pane';
+import { MonacoPaneState } from './pane.interfaces';
 import { RustHirState } from './rusthir-view.interfaces';
 
 import { ga } from '../analytics';
 import { extendConfig } from '../monaco-config';
 
-export class RustHir extends Pane<monaco.editor.IStandaloneCodeEditor, RustHirState> {
-    constructor(hub: any, container: Container, state: RustHirState & BasePaneState) {
+export class RustHir extends MonacoPane<monaco.editor.IStandaloneCodeEditor, RustHirState> {
+    constructor(hub: any, container: Container, state: RustHirState & MonacoPaneState) {
         super(hub, container, state);
         if (state && state.rustHirOutput) {
             this.showRustHirResults(state.rustHirOutput);
@@ -82,8 +82,8 @@ export class RustHir extends Pane<monaco.editor.IStandaloneCodeEditor, RustHirSt
         }
     }
 
-    override onCompiler(compilerId: number, compiler: any, options: any, editorId: number | boolean,
-        treeId: number | boolean): void {
+    override onCompiler(compilerId: number, compiler: any, options: any, editorId?: number,
+        treeId?: number): void {
         if (this.compilerInfo.compilerId === compilerId) {
             this.compilerInfo.compilerName = compiler ? compiler.name : '';
             this.compilerInfo.editorId = editorId;
diff --git a/static/panes/rustmacroexp-view.ts b/static/panes/rustmacroexp-view.ts
index 0acb63d1e..007f91e4a 100644
--- a/static/panes/rustmacroexp-view.ts
+++ b/static/panes/rustmacroexp-view.ts
@@ -26,15 +26,15 @@ import _ from 'underscore';
 import * as monaco from 'monaco-editor';
 import { Container } from 'golden-layout';
 
-import { Pane } from './pane';
-import { BasePaneState } from './pane.interfaces';
+import { MonacoPane } from './pane';
+import { MonacoPaneState } from './pane.interfaces';
 import { RustMacroExpState } from './rustmacroexp-view.interfaces';
 
 import { ga } from '../analytics';
 import { extendConfig } from '../monaco-config';
 
-export class RustMacroExp extends Pane<monaco.editor.IStandaloneCodeEditor, RustMacroExpState> {
-    constructor(hub: any, container: Container, state: RustMacroExpState & BasePaneState) {
+export class RustMacroExp extends MonacoPane<monaco.editor.IStandaloneCodeEditor, RustMacroExpState> {
+    constructor(hub: any, container: Container, state: RustMacroExpState & MonacoPaneState) {
         super(hub, container, state);
         if (state && state.rustMacroExpOutput) {
             this.showRustMacroExpResults(state.rustMacroExpOutput);
@@ -82,8 +82,8 @@ export class RustMacroExp extends Pane<monaco.editor.IStandaloneCodeEditor, Rust
         }
     }
 
-    override onCompiler(compilerId: number, compiler: any, options: any, editorId: number | boolean,
-        treeId: number | boolean): void {
+    override onCompiler(compilerId: number, compiler: any, options: any, editorId?: number,
+        treeId?: number): void {
         if (this.compilerInfo.compilerId === compilerId) {
             this.compilerInfo.compilerName = compiler ? compiler.name : '';
             this.compilerInfo.editorId = editorId;
diff --git a/static/panes/rustmir-view.ts b/static/panes/rustmir-view.ts
index 0d3163f24..417bbbcce 100644
--- a/static/panes/rustmir-view.ts
+++ b/static/panes/rustmir-view.ts
@@ -26,15 +26,15 @@ import _ from 'underscore';
 import * as monaco from 'monaco-editor';
 import { Container } from 'golden-layout';
 
-import { Pane } from './pane';
-import { BasePaneState } from './pane.interfaces';
+import { MonacoPane } from './pane';
+import { MonacoPaneState } from './pane.interfaces';
 import { RustMirState } from './rustmir-view.interfaces';
 
 import { ga } from '../analytics';
 import { extendConfig } from '../monaco-config';
 
-export class RustMir extends Pane<monaco.editor.IStandaloneCodeEditor, RustMirState> {
-    constructor(hub: any, container: Container, state: RustMirState & BasePaneState) {
+export class RustMir extends MonacoPane<monaco.editor.IStandaloneCodeEditor, RustMirState> {
+    constructor(hub: any, container: Container, state: RustMirState & MonacoPaneState) {
         super(hub, container, state);
         if (state && state.rustMirOutput) {
             this.showRustMirResults(state.rustMirOutput);
@@ -82,8 +82,8 @@ export class RustMir extends Pane<monaco.editor.IStandaloneCodeEditor, RustMirSt
         }
     }
 
-    override onCompiler(compilerId: number, compiler: any, options: any, editorId: number | boolean,
-        treeId: number | boolean): void {
+    override onCompiler(compilerId: number, compiler: any, options: any, editorId?: number,
+        treeId?: number): void {
         if (this.compilerInfo.compilerId === compilerId) {
             this.compilerInfo.compilerName = compiler ? compiler.name : '';
             this.compilerInfo.editorId = editorId;