big update

dashboard/src/ui-components/LegendWidget.tsx

@@ -7,11 +7,11 @@ import Timeseries from "../Timeseries";
 class LegendWidget extends UIComponent {
     private skeleton: GridWidget;
     private display: HTMLSpanElement = document.createElement("span");
-    private bodyRef: number;
+    private bodyRef: HTMLElement;
 
     constructor(gridProps: GridProps) {
         super();
-        this.display = <this.MainBody ctx={this}/>;
+        this.display = <this.MainBody />;
         this.skeleton = new GridWidget({
             ...gridProps,
             title: "Legend:",
@@ -23,29 +23,29 @@ class LegendWidget extends UIComponent {
     }
 
     private updateDisplay() {
-        this.fromRef(this.bodyRef).replaceWith(<this.MainBody ctx={this}/>);
+        this.bodyRef.replaceWith(<this.MainBody />);
     }
 
-    private MainBody({ctx}: {ctx: LegendWidget}) {
-        ctx.bodyRef = ctx.makeRef(<div><ctx.TimeseriesList ctx={ctx}/></div>);
-        return ctx.fromRef(ctx.bodyRef);
+    private MainBody = () => {
+        this.bodyRef = <div><this.TimeseriesList /></div>;
+        return this.bodyRef;
     }
 
-    private TimeseriesList({ctx}: { ctx: LegendWidget }) {
+    private TimeseriesList = () => {
         const highlightedTimeseries = getAppState().highlightedTimeseries;
         return <ul>
             { ...getAppState().rightTimeseries.map(timeseries =>
-                <ctx.TimeseriesLegendEntry
+                <this.TimeseriesLegendEntry
                     timeseries={timeseries}
                     highlighted={timeseries.getName() === highlightedTimeseries}/>) }
             { ...getAppState().leftTimeseries.map(timeseries =>
-                <ctx.TimeseriesLegendEntry
+                <this.TimeseriesLegendEntry
                     timeseries={timeseries}
                     highlighted={timeseries.getName() === highlightedTimeseries}/>) }
         </ul>;
     }
 
-    private TimeseriesLegendEntry({timeseries, highlighted}: {timeseries: Timeseries, highlighted: boolean}) {
+    private TimeseriesLegendEntry = ({timeseries, highlighted}: {timeseries: Timeseries, highlighted: boolean}) => {
         const option = new Option();
         option.style.color = timeseries.getColour();
         return <li
@@ -62,4 +62,4 @@ class LegendWidget extends UIComponent {
     }
 }
 
-export default LegendWidget;
+export default LegendWidget;