Added server select. Widget construction now happens in two phases with a finalize_construction method being called from the lowest subclass.

src/application/gui/ApplicationView.ts

@@ -13,6 +13,8 @@ export class ApplicationView extends ResizableWidget {
         this.element.id = "root";
 
         this.element.append(this.menu_view.element, this.main_content_view.element);
+
+        this.finalize_construction(ApplicationView.prototype);
     }
 
     resize(width: number, height: number): this {

src/application/gui/MainContentView.ts

@@ -33,6 +33,8 @@ export class MainContentView extends ResizableWidget {
         if (tool_view) tool_view.visible.val = true;
 
         this.disposable(gui_store.tool.observe(this.tool_changed));
+
+        this.finalize_construction(MainContentView.prototype);
     }
 
     resize(width: number, height: number): this {

src/application/gui/NavigationButton.ts

@@ -21,6 +21,8 @@ export class NavigationButton extends Widget {
         this.label.htmlFor = `application_NavigationButton_${tool_str}`;
 
         this.element.append(this.input, this.label);
+
+        this.finalize_construction(NavigationButton.prototype);
     }
 
     set checked(checked: boolean) {

src/application/gui/NavigationView.css

@@ -11,6 +11,15 @@
     flex: 1;
 }
 
+.application_NavigationView_server {
+    display: flex;
+    align-items: center;
+}
+
+.application_NavigationView_server > * {
+    margin: 0 2px;
+}
+
 .application_NavigationView_github {
     display: flex;
     flex-direction: row;

src/application/gui/NavigationView.ts

@@ -3,6 +3,8 @@ import "./NavigationView.css";
 import { gui_store, GuiTool } from "../../core/stores/GuiStore";
 import { Widget } from "../../core/gui/Widget";
 import { NavigationButton } from "./NavigationButton";
+import { Select } from "../../core/gui/Select";
+import { property } from "../../core/observable";
 
 const TOOLS: [GuiTool, string][] = [
     [GuiTool.Viewer, "Viewer"],
@@ -29,7 +31,21 @@ export class NavigationView extends Widget {
 
         this.element.append(el.div({ class: "application_NavigationView_spacer" }));
 
+        const server_select = this.disposable(
+            new Select(property(["Ephinea"]), server => server, {
+                label: "Server:",
+                enabled: false,
+                selected: "Ephinea",
+                tooltip: "Only Ephinea is supported at the moment"
+            }),
+        );
+
         this.element.append(
+            el.span(
+                { class: "application_NavigationView_server" },
+                server_select.label!.element,
+                server_select.element,
+            ),
             el.a(
                 {
                     class: "application_NavigationView_github",
@@ -42,6 +58,8 @@ export class NavigationView extends Widget {
 
         this.mark_tool_button(gui_store.tool.val);
         this.disposable(gui_store.tool.observe(({ value }) => this.mark_tool_button(value)));
+
+        this.finalize_construction(NavigationView.prototype);
     }
 
     private mousedown(e: MouseEvent): void {

src/core/gui/Button.ts

@@ -63,6 +63,8 @@ export class Button extends Control<HTMLButtonElement> {
         } else if (text) {
             this.text.bind_to(text);
         }
+
+        this.finalize_construction(Button.prototype);
     }
 
     protected set_enabled(enabled: boolean): void {

src/core/gui/CheckBox.ts

@@ -22,6 +22,8 @@ export class CheckBox extends LabelledControl<HTMLInputElement> {
         this.element.type = "checkbox";
         this.element.onchange = () =>
             this._checked.set_val(this.element.checked, { silent: false });
+
+        this.finalize_construction(CheckBox.prototype);
     }
 
     protected set_enabled(enabled: boolean): void {

src/core/gui/ComboBox.ts

@@ -123,6 +123,8 @@ export class ComboBox<T> extends LabelledControl {
                 this.input_element.focus();
             }),
         );
+
+        this.finalize_construction(ComboBox.prototype);
     }
 
     protected set_selected(selected?: T): void {

src/core/gui/DropDown.ts

@@ -56,6 +56,8 @@ export class DropDown<T> extends Control {
                 }
             }),
         );
+
+        this.finalize_construction(DropDown.prototype);
     }
 
     protected set_enabled(enabled: boolean): void {

src/core/gui/DurationInput.ts

@@ -13,6 +13,8 @@ export class DurationInput extends Input<Duration> {
         this.input_element.pattern = "(60|[0-5][0-9]):(60|[0-5][0-9])";
 
         this.set_value(value);
+
+        this.finalize_construction(DurationInput.prototype);
     }
 
     protected get_value(): Duration {

src/core/gui/FileButton.ts

@@ -69,6 +69,8 @@ export class FileButton extends Control<HTMLElement> {
                 }
             }),
         );
+
+        this.finalize_construction(FileButton.prototype);
     }
 
     click(): void {

src/core/gui/Label.ts

@@ -24,6 +24,8 @@ export class Label extends Widget<HTMLLabelElement> {
         } else {
             this.disposable(this._text.bind_to(text));
         }
+
+        this.finalize_construction(Label.prototype);
     }
 
     protected set_text(text: string): void {

src/core/gui/LazyWidget.ts

@@ -27,6 +27,8 @@ export class LazyWidget extends ResizableWidget {
                 }
             });
         }
+
+        this.finalize_construction(LazyWidget.prototype);
     }
 
     resize(width: number, height: number): this {

src/core/gui/Menu.ts

@@ -59,6 +59,8 @@ export class Menu<T> extends Widget {
 
             disposable_listener(document, "keydown", this.document_keydown),
         );
+
+        this.finalize_construction(Menu.prototype);
     }
 
     hover_next(): void {

src/core/gui/NumberInput.ts

@@ -35,6 +35,8 @@ export class NumberInput extends Input<number> {
         this.element.style.width = `${options.width == undefined ? 54 : options.width}px`;
 
         this.set_value(value);
+
+        this.finalize_construction(NumberInput.prototype);
     }
 
     protected get_value(): number {

src/core/gui/RendererWidget.ts

@@ -9,6 +9,8 @@ export class RendererWidget extends ResizableWidget {
         this.element.append(renderer.dom_element);
 
         this.disposable(renderer);
+
+        this.finalize_construction(RendererWidget.prototype);
     }
 
     start_rendering(): void {

src/core/gui/Select.ts

@@ -8,7 +8,7 @@ import { WidgetProperty } from "../observable/property/WidgetProperty";
 import { Menu } from "./Menu";
 
 export type SelectOptions<T> = LabelledControlOptions & {
-    selected: T | Property<T>;
+    selected?: T | Property<T>;
 };
 
 export class Select<T> extends LabelledControl {
@@ -64,6 +64,8 @@ export class Select<T> extends LabelledControl {
                 this.selected.val = options.selected;
             }
         }
+
+        this.finalize_construction(Select.prototype);
     }
 
     protected set_enabled(enabled: boolean): void {

src/core/gui/TabContainer.ts

@@ -54,6 +54,8 @@ export class TabContainer extends ResizableWidget {
         }
 
         this.element.append(this.bar_element, this.panes_element);
+
+        this.finalize_construction(TabContainer.prototype);
     }
 
     resize(width: number, height: number): this {

src/core/gui/Table.ts

@@ -28,6 +28,7 @@ export type Column<T> = {
 export type TableOptions<T> = WidgetOptions & {
     values: ListProperty<T>;
     columns: Column<T>[];
+    sort?(columns: Column<T>): void;
 };
 
 export class Table<T> extends Widget<HTMLTableElement> {
@@ -82,6 +83,8 @@ export class Table<T> extends Widget<HTMLTableElement> {
         this.disposables(this.values.observe_list(this.update_table));
 
         this.splice_rows(0, this.values.length.val, this.values.val);
+
+        this.finalize_construction(Table.prototype);
     }
 
     private update_table = (change: ListPropertyChangeEvent<T>): void => {

src/core/gui/TextArea.ts

@@ -40,6 +40,8 @@ export class TextArea extends LabelledControl {
             this._value.set_val(this.text_element.value, { silent: false });
 
         this.element.append(this.text_element);
+
+        this.finalize_construction(TextArea.prototype);
     }
 
     protected set_value(value: string): void {

src/core/gui/TextInput.ts

@@ -17,6 +17,8 @@ export class TextInput extends Input<string> {
         }
 
         this.set_value(value);
+
+        this.finalize_construction(TextInput.prototype);
     }
 
     protected get_value(): string {

src/core/gui/ToolBar.ts

@@ -36,5 +36,7 @@ export class ToolBar extends Widget {
                 }
             }
         }
+
+        this.finalize_construction(ToolBar.prototype);
     }
 }

src/core/gui/Widget.ts

@@ -5,6 +5,9 @@ import { bind_hidden } from "./dom";
 import { WritableProperty } from "../observable/property/WritableProperty";
 import { WidgetProperty } from "../observable/property/WidgetProperty";
 import { Property } from "../observable/property/Property";
+import Logger from "js-logger";
+
+const logger = Logger.get("core/gui/Widget");
 
 export type WidgetOptions = {
     class?: string;
@@ -45,6 +48,8 @@ export abstract class Widget<E extends HTMLElement = HTMLElement> implements Dis
         "",
         this.set_tooltip,
     );
+    private readonly options: WidgetOptions;
+    private construction_finalized = false;
 
     protected constructor(element: E, options?: WidgetOptions) {
         this.element = element;
@@ -52,23 +57,21 @@ export abstract class Widget<E extends HTMLElement = HTMLElement> implements Dis
         this.enabled = this._enabled;
         this.tooltip = this._tooltip;
 
-        if (options) {
-            if (options.class) {
-                this.element.classList.add(options.class);
-            }
+        this.options = options || {};
 
-            if (typeof options.enabled === "boolean") {
-                this.enabled.val = options.enabled;
-            } else if (options.enabled) {
-                this.enabled.bind_to(options.enabled);
-            }
-
-            if (typeof options.tooltip === "string") {
-                this.tooltip.val = options.tooltip;
-            } else if (options.tooltip) {
-                this.tooltip.bind_to(options.tooltip);
-            }
+        if (this.options.class) {
+            this.element.classList.add(this.options.class);
         }
+
+        setTimeout(() => {
+            if (!this.construction_finalized) {
+                logger.warn(
+                    `finalize_construction is never called for ${
+                        Object.getPrototypeOf(this).constructor.name
+                    }.`,
+                );
+            }
+        }, 0);
     }
 
     focus(): void {
@@ -81,6 +84,24 @@ export abstract class Widget<E extends HTMLElement = HTMLElement> implements Dis
         this.disposed = true;
     }
 
+    protected finalize_construction(proto: any): void {
+        if (Object.getPrototypeOf(this) !== proto) return;
+
+        this.construction_finalized = true;
+
+        if (typeof this.options.enabled === "boolean") {
+            this.enabled.val = this.options.enabled;
+        } else if (this.options.enabled) {
+            this.enabled.bind_to(this.options.enabled);
+        }
+
+        if (typeof this.options.tooltip === "string") {
+            this.tooltip.val = this.options.tooltip;
+        } else if (this.options.tooltip) {
+            this.tooltip.bind_to(this.options.tooltip);
+        }
+    }
+
     protected set_visible(visible: boolean): void {
         this.element.hidden = !visible;
     }

src/hunt_optimizer/gui/HuntOptimizerView.ts

@@ -28,5 +28,7 @@ export class HuntOptimizerView extends TabContainer {
                 },
             ],
         });
+
+        this.finalize_construction(HuntOptimizerView.prototype);
     }
 }

src/hunt_optimizer/gui/OptimizationResultView.ts

@@ -39,6 +39,8 @@ export class OptimizationResultView extends Widget {
                 { call_now: true },
             ),
         );
+
+        this.finalize_construction(OptimizationResultView.prototype);
     }
 
     dispose(): void {

src/hunt_optimizer/gui/OptimizerView.ts

@@ -12,5 +12,7 @@ export class OptimizerView extends ResizableWidget {
             this.disposable(new WantedItemsView()).element,
             this.disposable(new OptimizationResultView()).element,
         );
+
+        this.finalize_construction(OptimizerView.prototype);
     }
 }

src/hunt_optimizer/gui/WantedItemsView.ts

@@ -72,6 +72,8 @@ export class WantedItemsView extends Widget {
                 { call_now: true },
             ),
         );
+
+        this.finalize_construction(WantedItemsView.prototype);
     }
 
     private update_table = (change: ListPropertyChangeEvent<WantedItemModel>): void => {