fixed obervable values not updateing because of component functions being defined as vairables

8 files changed, 18 insertions, 19 deletions

diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx
index ed09d3bf3..9d828364d 100644
--- a/src/client/views/MarqueeAnnotator.tsx
+++ b/src/client/views/MarqueeAnnotator.tsx
@@ -53,14 +53,13 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP
     @computed get top() { return Math.min(this._start.y, this._start.y + this._height); } // prettier-ignore
     @computed get left() { return Math.min(this._start.x, this._start.x + this._width);} // prettier-ignore
 
-    @action
-    static clearAnnotations(savedAnnotations: ObservableMap<number, HTMLDivElement[]>) {
+    static clearAnnotations = action((savedAnnotations: ObservableMap<number, HTMLDivElement[]>) => {
         AnchorMenu.Instance.Status = 'marquee';
         AnchorMenu.Instance.fadeOut(true);
         // clear out old marquees and initialize menu for new selection
         Array.from(savedAnnotations.values()).forEach(v => v.forEach(a => a.remove()));
         savedAnnotations.clear();
-    }
+    });
 
     @undoBatch
     makeAnnotationDocument = (color: string, isLinkButton?: boolean, savedAnnotations?: ObservableMap<number, HTMLDivElement[]>): Opt<Doc> => {
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 928739b53..489c4dcde 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -35,7 +35,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps> {
     private readonly DEFAULT_HEIGHT = 50;
     private readonly DEFAULT_WIDTH = 300;
 
-    componentDidMount = () => {
+    componentDidMount() {
         this.setOverviewWidth();
 
         this._authoringReaction = reaction(
@@ -48,7 +48,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps> {
                 }
             }
         );
-    };
+    }
 
     componentWillUnmount = () => {
         this._authoringReaction && this._authoringReaction();
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 9e9a43b34..4a1fb2ed1 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -105,13 +105,13 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
     componentWillUnmount() {
         Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]());
     }
-    componentDidMount = () => {
+    componentDidMount() {
         this._disposers.chartData = reaction(
             () => ({ dataSet: this._histogramData, w: this.width, h: this.height }),
             ({ dataSet, w, h }) => dataSet!.length > 0 && this.drawChart(dataSet, w, h),
             { fireImmediately: true }
         );
-    };
+    }
 
     @action
     restoreView = (data: Doc) => {};
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 50a8bf83d..2a9a8b354 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -89,7 +89,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
     componentWillUnmount() {
         Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]());
     }
-    componentDidMount = () => {
+    componentDidMount() {
         this._disposers.chartData = reaction(
             () => ({ dataSet: this._lineChartData, w: this.width, h: this.height }),
             ({ dataSet, w, h }) => {
@@ -124,7 +124,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
             },
             { fireImmediately: true }
         );
-    };
+    }
 
     // anything that doesn't need to be recalculated should just be stored as drawCharts (i.e. computed values) and drawChart is gonna iterate over these observables and generate svgs based on that
 
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index e67556cd0..1259a13ff 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -91,13 +91,13 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
     componentWillUnmount() {
         Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]());
     }
-    componentDidMount = () => {
+    componentDidMount() {
         this._disposers.chartData = reaction(
             () => ({ dataSet: this._pieChartData, w: this.width, h: this.height }),
             ({ dataSet, w, h }) => dataSet!.length > 0 && this.drawChart(dataSet, w, h),
             { fireImmediately: true }
         );
-    };
+    }
 
     @action
     restoreView = (data: Doc) => {};
diff --git a/src/client/views/nodes/RadialMenu.tsx b/src/client/views/nodes/RadialMenu.tsx
index 3b2fc033d..16450c359 100644
--- a/src/client/views/nodes/RadialMenu.tsx
+++ b/src/client/views/nodes/RadialMenu.tsx
@@ -86,7 +86,7 @@ export class RadialMenu extends React.Component {
     }
 
     @action
-    componentDidMount = () => {
+    componentDidMount() {
         document.addEventListener('pointerdown', this.onPointerDown);
         document.addEventListener('pointerup', this.onPointerUp);
         this.previewcircle();
@@ -94,7 +94,7 @@ export class RadialMenu extends React.Component {
             () => this._shouldDisplay,
             () => this._shouldDisplay && !this._mouseDown && runInAction(() => (this._display = true))
         );
-    };
+    }
 
     componentDidUpdate = () => {
         this.previewcircle();
diff --git a/src/client/views/nodes/RadialMenuItem.tsx b/src/client/views/nodes/RadialMenuItem.tsx
index 10a90befd..91dc37d34 100644
--- a/src/client/views/nodes/RadialMenuItem.tsx
+++ b/src/client/views/nodes/RadialMenuItem.tsx
@@ -17,13 +17,13 @@ export interface RadialMenuProps {
 
 @observer
 export class RadialMenuItem extends React.Component<RadialMenuProps> {
-    componentDidMount = () => {
+    componentDidMount() {
         this.setcircle();
-    };
+    }
 
-    componentDidUpdate = () => {
+    componentDidUpdate() {
         this.setcircle();
-    };
+    }
 
     handleEvent = async (e: React.PointerEvent) => {
         this.props.closeMenu && this.props.closeMenu();
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index e3d8f9394..a1ce55314 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -257,7 +257,7 @@ export class MobileInterface extends React.Component {
     }
 
     @action
-    componentDidMount = () => {
+    componentDidMount() {
         // if the home menu is in list view -> adjust the menu toggle appropriately
         this._menuListView = this._homeDoc._type_collection === 'stacking' ? true : false;
         Doc.ActiveTool = InkTool.None; // ink should intially be set to none
@@ -267,7 +267,7 @@ export class MobileInterface extends React.Component {
         // remove double click to avoid mobile zoom in
         document.removeEventListener('dblclick', this.onReactDoubleClick);
         document.addEventListener('dblclick', this.onReactDoubleClick);
-    };
+    }
 
     @action
     componentWillUnmount = () => {