1 files changed, 24 insertions, 14 deletions
diff --git a/src/client/views/nodes/DocumentIcon.tsx b/src/client/views/nodes/DocumentIcon.tsx
index bccbd66e8..dfd610581 100644
--- a/src/client/views/nodes/DocumentIcon.tsx
+++ b/src/client/views/nodes/DocumentIcon.tsx
@@ -1,24 +1,34 @@
+import { Tooltip } from '@mui/material';
+import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { DocumentView } from './DocumentView';
-import { DocumentManager } from '../../util/DocumentManager';
-import { Transformer, ts } from '../../util/Scripting';
+import { factory } from 'typescript';
 import { Field } from '../../../fields/Doc';
-import { Tooltip } from '@material-ui/core';
-import { action, observable } from 'mobx';
 import { Id } from '../../../fields/FieldSymbols';
-import { factory } from 'typescript';
-import { LightboxView } from '../LightboxView';
+import { DocumentManager } from '../../util/DocumentManager';
+import { Transformer, ts } from '../../util/Scripting';
 import { SettingsManager } from '../../util/SettingsManager';
+import { LightboxView } from '../LightboxView';
+import { ObservableReactComponent } from '../ObservableReactComponent';
+import { DocumentView } from './DocumentView';
 
+interface DocumentIconProps {
+    view: DocumentView;
+    index: number;
+}
 @observer
-export class DocumentIcon extends React.Component<{ view: DocumentView; index: number }> {
+export class DocumentIcon extends ObservableReactComponent<DocumentIconProps> {
     @observable _hovered = false;
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+
     static get DocViews() {
-        return LightboxView.LightboxDoc ? DocumentManager.Instance.DocumentViews.filter(v => LightboxView.IsLightboxDocView(v.props.docViewPath())) : DocumentManager.Instance.DocumentViews;
+        return LightboxView.LightboxDoc ? DocumentManager.Instance.DocumentViews.filter(v => LightboxView.IsLightboxDocView(v._props.docViewPath())) : DocumentManager.Instance.DocumentViews;
     }
     render() {
-        const view = this.props.view;
+        const view = this._props.view;
         const { left, top, right, bottom } = view.getBounds() || { left: 0, top: 0, right: 0, bottom: 0 };
 
         return (
@@ -33,8 +43,8 @@ export class DocumentIcon extends React.Component<{ view: DocumentView; index: n
                     background: SettingsManager.userBackgroundColor,
                     transform: `translate(${(left + right) / 2}px, ${top}px)`,
                 }}>
-                <Tooltip title={<>{this.props.view.rootDoc.title}</>}>
-                    <p>d{this.props.index}</p>
+                <Tooltip title={<>{this._props.view.Document.title}</>}>
+                    <p>d{this._props.index}</p>
                 </Tooltip>
             </div>
         );
@@ -59,7 +69,7 @@ export class DocumentIconContainer extends React.Component {
                                 const match = node.text.match(/d([0-9]+)/);
                                 if (match) {
                                     const m = parseInt(match[1]);
-                                    const doc = DocumentIcon.DocViews[m].rootDoc;
+                                    const doc = DocumentIcon.DocViews[m].Document;
                                     usedDocuments.add(m);
                                     return factory.createIdentifier(`idToDoc("${doc[Id]}")`);
                                 }
@@ -74,7 +84,7 @@ export class DocumentIconContainer extends React.Component {
             getVars() {
                 const docs = DocumentIcon.DocViews;
                 const capturedVariables: { [name: string]: Field } = {};
-                usedDocuments.forEach(index => (capturedVariables[`d${index}`] = docs.length > index ? docs[index].props.Document : `d${index}`));
+                usedDocuments.forEach(index => (capturedVariables[`d${index}`] = docs.length > index ? docs[index].Document : `d${index}`));
                 return capturedVariables;
             },
         };