Further cleanup: further removal of the UIElement

Logic/Actors/GeoLocationHandler.ts

@@ -1,27 +1,25 @@
 import * as L from "leaflet";
 import {UIEventSource} from "../UIEventSource";
-import {UIElement} from "../../UI/UIElement";
 import {Utils} from "../../Utils";
 import Svg from "../../Svg";
 import Img from "../../UI/Base/Img";
 import {LocalStorageSource} from "../Web/LocalStorageSource";
 import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
-import BaseUIElement from "../../UI/BaseUIElement";
 import {VariableUiElement} from "../../UI/Base/VariableUIElement";
 
-export default class GeoLocationHandler extends UIElement {
+export default class GeoLocationHandler extends VariableUiElement {
 
     /**
      * Wether or not the geolocation is active, aka the user requested the current location
      * @private
      */
-    private readonly _isActive: UIEventSource<boolean> = new UIEventSource<boolean>(false);
+    private readonly _isActive: UIEventSource<boolean>;
 
     /**
      * The callback over the permission API
      * @private
      */
-    private readonly _permission: UIEventSource<string> = new UIEventSource<string>("");
+    private readonly _permission: UIEventSource<string>;
     /***
      * The marker on the map, in order to update it
      * @private
@@ -51,21 +49,37 @@ export default class GeoLocationHandler extends UIElement {
      * If the user denies the geolocation this time, we unset this flag
      * @private
      */
-    private readonly _previousLocationGrant: UIEventSource<string> = LocalStorageSource.Get("geolocation-permissions");
+    private readonly _previousLocationGrant: UIEventSource<string>;
     private readonly _layoutToUse: UIEventSource<LayoutConfig>;
 
 
-    private readonly _element: BaseUIElement;
-
     constructor(currentGPSLocation: UIEventSource<{ latlng: any; accuracy: number }>,
                 leafletMap: UIEventSource<L.Map>,
                 layoutToUse: UIEventSource<LayoutConfig>) {
-        super();
+
+        const hasLocation = currentGPSLocation.map((location) => location !== undefined);
+        const previousLocationGrant = LocalStorageSource.Get("geolocation-permissions")
+        const isActive = new UIEventSource<boolean>(false);
+
+        super(
+            hasLocation.map(hasLocation => {
+
+                if (hasLocation) {
+                    return Svg.crosshair_blue_ui()
+                }
+                if (isActive.data) {
+                    return Svg.crosshair_blue_center_ui();
+                }
+                return Svg.crosshair_ui();
+            }, [isActive])
+        );
+        this._isActive = isActive;
+        this._permission = new UIEventSource<string>("")
+        this._previousLocationGrant = previousLocationGrant;
         this._currentGPSLocation = currentGPSLocation;
         this._leafletMap = leafletMap;
         this._layoutToUse = layoutToUse;
-        this._hasLocation = currentGPSLocation.map((location) => location !== undefined);
+        this._hasLocation = hasLocation;
-
         const self = this;
 
         const currentPointer = this._isActive.map(isActive => {
@@ -77,28 +91,11 @@ export default class GeoLocationHandler extends UIElement {
         currentPointer.addCallbackAndRun(pointerClass => {
             self.SetClass(pointerClass);
         })
-        this._element = new VariableUiElement(
-            this._hasLocation.map(hasLocation => {
 
-                if (hasLocation) {
-                    return Svg.crosshair_blue_ui()
-                }
-                if (self._isActive.data) {
-                    return Svg.crosshair_blue_center_ui();
-                }
-                return Svg.crosshair_ui();
-            }, [this._isActive])
-        );
 
         this.onClick(() => self.init(true))
+        this.init(false)
 
-        self.init(false)
-
-    }
-
-
-    protected InnerRender(): string | BaseUIElement {
-        return this._element
     }
 
     private init(askPermission: boolean) {

UI/Base/Button.ts

@@ -1,4 +1,3 @@
-import {UIElement} from "../UIElement";
 import Translations from "../i18n/Translations";
 import BaseUIElement from "../BaseUIElement";
 
@@ -6,7 +5,7 @@ export class Button extends BaseUIElement {
     private _text: BaseUIElement;
     private _onclick: () => void;
 
-    constructor(text: string | UIElement, onclick: (() => void)) {
+    constructor(text: string | BaseUIElement, onclick: (() => void)) {
         super();
         this._text = Translations.W(text);
         this._onclick = onclick;

UI/Base/Ornament.ts

@@ -1,14 +1,11 @@
-import {UIElement} from "../UIElement";
+import {FixedUiElement} from "./FixedUiElement";
 
-export default class Ornament extends UIElement {
+export default class Ornament extends FixedUiElement {
 
-    constructor(index = undefined) {
+    constructor() {
-        super();
+        super("");
         this.SetClass("pt-3 pb-3 flex justify-center box-border")
     }
 
-    InnerRender(): string {
-        return ""
-    }
 
 }

UI/Base/Title.ts

@@ -1,4 +1,3 @@
-import {UIElement} from "../UIElement";
 import BaseUIElement from "../BaseUIElement";
 import Translations from "../i18n/Translations";
 

UI/BigComponents/UploadFlowStateUI.ts

@@ -1,4 +1,3 @@
-import {UIElement} from "../UIElement";
 import {UIEventSource} from "../../Logic/UIEventSource";
 import BaseUIElement from "../BaseUIElement";
 import {VariableUiElement} from "../Base/VariableUIElement";
@@ -7,15 +6,13 @@ import Translations from "../i18n/Translations";
 /**
  * Shows that 'images are uploading', 'all images are uploaded' as relevant...
  */
-export default class UploadFlowStateUI extends UIElement{
+export default class UploadFlowStateUI extends VariableUiElement{
     
-    private readonly _element: BaseUIElement
     
     constructor(queue: UIEventSource<string[]>, failed: UIEventSource<string[]>, success: UIEventSource<string[]>) {
-        super();
         const t = Translations.t.image;
 
-        this._element = new VariableUiElement(
+        super(
             
           queue.map(queue => {
               const failedReasons = failed.data
@@ -48,7 +45,4 @@ export default class UploadFlowStateUI extends UIElement{
         
     }
 
-    protected InnerRender(): string | BaseUIElement {
-        return this._element
-    }
 }

UI/Image/DeleteImage.ts

@@ -1,4 +1,3 @@
-import {UIElement} from "../UIElement";
 import {UIEventSource} from "../../Logic/UIEventSource";
 import Translations from "../i18n/Translations";
 import Toggle from "../Input/Toggle";
@@ -6,7 +5,6 @@ import Combine from "../Base/Combine";
 import State from "../../State";
 import Svg from "../../Svg";
 import {Tag} from "../../Logic/Tags/Tag";
-import BaseUIElement from "../BaseUIElement";
 
 
 export default class DeleteImage extends Toggle {

UI/Input/ValidatedTextField.ts

@@ -3,7 +3,6 @@ import * as EmailValidator from "email-validator";
 import {parsePhoneNumberFromString} from "libphonenumber-js";
 import {InputElement} from "./InputElement";
 import {TextField} from "./TextField";
-import {UIElement} from "../UIElement";
 import {UIEventSource} from "../../Logic/UIEventSource";
 import CombinedInputElement from "./CombinedInputElement";
 import SimpleDatePicker from "./SimpleDatePicker";
@@ -13,6 +12,7 @@ import ColorPicker from "./ColorPicker";
 import {Utils} from "../../Utils";
 import Loc from "../../Models/Loc";
 import {Unit} from "../../Customizations/JSON/Denomination";
+import BaseUIElement from "../BaseUIElement";
 
 interface TextFieldDef {
     name: string,
@@ -223,7 +223,7 @@ export default class ValidatedTextField {
      */
     public static AllTypes = ValidatedTextField.allTypesDict();
     public static InputForType(type: string, options?: {
-        placeholder?: string | UIElement,
+        placeholder?: string | BaseUIElement,
         value?: UIEventSource<string>,
         htmlType?: string,
         textArea?: boolean,
@@ -287,12 +287,8 @@ export default class ValidatedTextField {
             input = new CombinedInputElement(
                 input,
                 unitDropDown,
-                (text, denom) => {
+                (text, denom) => denom?.canonicalValue(text, true) ?? undefined,
-                    console.log("text:", text, "denom:", denom, "canon: ", denom?.canonicalValue(text, true))
-                    return denom?.canonicalValue(text, true) ?? undefined;
-                },
                 (valueWithDenom: string) => {
-                    console.log("ToSplit: ", valueWithDenom, "becomes", unit.findDenomination(valueWithDenom))
                     const [text, denom] = unit.findDenomination(valueWithDenom) ?? [valueWithDenom, undefined];
                     if(text === undefined){
                         return [valueWithDenom, undefined]

UI/MapControlButton.ts

@@ -1,22 +1,15 @@
-import {UIElement} from "./UIElement";
 import BaseUIElement from "./BaseUIElement";
 import Combine from "./Base/Combine";
 
 /**
  * A button floating above the map, in a uniform style
  */
-export default class MapControlButton extends UIElement {
+export default class MapControlButton extends Combine {
-    private _contents: BaseUIElement;
     
     constructor(contents: BaseUIElement) {
-        super();
+        super([contents]);
-        this._contents = new Combine([contents]);
         this.SetClass("relative block rounded-full w-10 h-10 p-1 pointer-events-auto z-above-map subtle-background")
         this.SetStyle("box-shadow: 0 0 10px var(--shadow-color);");
     }
     
-    InnerRender() {
-        return this._contents;
-    }
-    
 }

UI/OpeningHours/OpeningHoursVisualization.ts

@@ -11,9 +11,8 @@ import Toggle from "../Input/Toggle";
 import {VariableUiElement} from "../Base/VariableUIElement";
 import Table from "../Base/Table";
 import {Translation} from "../i18n/Translation";
-import {UIElement} from "../UIElement";
 
-export default class OpeningHoursVisualization extends UIElement {
+export default class OpeningHoursVisualization extends Toggle {
     private static readonly weekdays: Translation[] = [
         Translations.t.general.weekdays.abbreviations.monday,
         Translations.t.general.weekdays.abbreviations.tuesday,
@@ -23,18 +22,8 @@ export default class OpeningHoursVisualization extends UIElement {
         Translations.t.general.weekdays.abbreviations.saturday,
         Translations.t.general.weekdays.abbreviations.sunday,
     ]
-    private readonly _tags: UIEventSource<any>;
-    private readonly _key: string;
 
     constructor(tags: UIEventSource<any>, key: string) {
-        super()
-        this._tags = tags;
-        this._key = key;
-    }
-    
-    InnerRender(): BaseUIElement {
-        const tags = this._tags;
-        const key = this._key;
         const tagsDirect = tags.data;
         const ohTable = new VariableUiElement(tags
             .map(tags => tags[key]) // This mapping will absorb all other changes to tags in order to prevent regeneration
@@ -47,7 +36,7 @@ export default class OpeningHoursVisualization extends UIElement {
                             address: {
                                 country_code: tagsDirect._country
                             }
-                        }, {tag_key: this._key});
+                        }, {tag_key: key});
 
                         return OpeningHoursVisualization.CreateFullVisualisation(oh)
                     } catch (e) {
@@ -64,7 +53,7 @@ export default class OpeningHoursVisualization extends UIElement {
                 }
             ))
 
-        return new Toggle(
+       super(
             ohTable,
             Translations.t.general.opening_hours.loadingCountry.Clone(),
             tags.map(tgs => tgs._country !== undefined)

UI/Popup/FeatureInfoBox.ts

@@ -1,4 +1,3 @@
-import {UIElement} from "../UIElement";
 import {UIEventSource} from "../../Logic/UIEventSource";
 import LayerConfig from "../../Customizations/JSON/LayerConfig";
 import EditableTagRendering from "./EditableTagRendering";
@@ -47,7 +46,7 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
 
     private static GenerateContent(tags: UIEventSource<any>,
                                    layerConfig: LayerConfig): BaseUIElement {
-        let questionBox: UIElement = undefined;
+        let questionBox: BaseUIElement = undefined;
 
         if (State.state.featureSwitchUserbadge.data) {
             questionBox = new QuestionBox(tags, layerConfig.tagRenderings, layerConfig.units);

UI/Popup/QuestionBox.ts

@@ -1,4 +1,3 @@
-import {UIElement} from "../UIElement";
 import {UIEventSource} from "../../Logic/UIEventSource";
 import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig";
 import TagRenderingQuestion from "./TagRenderingQuestion";
@@ -7,74 +6,73 @@ import State from "../../State";
 import Combine from "../Base/Combine";
 import BaseUIElement from "../BaseUIElement";
 import {Unit} from "../../Customizations/JSON/Denomination";
+import {VariableUiElement} from "../Base/VariableUIElement";
 
 
 /**
  * Generates all the questions, one by one
  */
-export default class QuestionBox extends UIElement {
+export default class QuestionBox extends VariableUiElement {
-    private readonly _tags: UIEventSource<any>;
 
-    private readonly _tagRenderings: TagRenderingConfig[];
+    constructor(tagsSource: UIEventSource<any>, tagRenderings: TagRenderingConfig[], units: Unit[]) {
-    private _tagRenderingQuestions: BaseUIElement[];
+        const skippedQuestions: UIEventSource<number[]> = new UIEventSource<number[]>([])
 
-    private _skippedQuestions: UIEventSource<number[]> = new UIEventSource<number[]>([])
+        tagRenderings = tagRenderings
-    private _skippedQuestionsButton: BaseUIElement;
-
-    constructor(tags: UIEventSource<any>, tagRenderings: TagRenderingConfig[], units: Unit[]) {
-        super(tags);
-        this.ListenTo(this._skippedQuestions);
-        this._tags = tags;
-        const self = this;
-        this._tagRenderings = tagRenderings
             .filter(tr => tr.question !== undefined)
             .filter(tr => tr.question !== null);
-        this._tagRenderingQuestions = this._tagRenderings
+
-            .map((tagRendering, i) => new TagRenderingQuestion(this._tags, tagRendering,units,
+        super(tagsSource.map(tags => {
-                () => {
+                if (tags === undefined) {
-                    // We save
+                    return undefined;
-                    self._skippedQuestions.ping();
+                }
-                },
+
-                Translations.t.general.skip.Clone()
+                const tagRenderingQuestions = tagRenderings
-                    .SetClass("btn btn-secondary mr-3")
+                    .map((tagRendering, i) => new TagRenderingQuestion(tagsSource, tagRendering, units,
+                        () => {
+                            // We save
+                            skippedQuestions.ping();
+                        },
+                        Translations.t.general.skip.Clone()
+                            .SetClass("btn btn-secondary mr-3")
+                            .onClick(() => {
+                                skippedQuestions.data.push(i);
+                                skippedQuestions.ping();
+                            })
+                    ));
+
+                const skippedQuestionsButton = Translations.t.general.skippedQuestions.Clone()
                     .onClick(() => {
-                        self._skippedQuestions.data.push(i);
+                        skippedQuestions.setData([]);
-                        self._skippedQuestions.ping();
                     })
-            ));
 
-        this._skippedQuestionsButton = Translations.t.general.skippedQuestions.Clone()
-            .onClick(() => {
-                self._skippedQuestions.setData([]);
-            })
-        this.SetClass("block mb-8")
-    }
 
-    InnerRender() {
+                const allQuestions: BaseUIElement[] = []
-        const allQuestions : BaseUIElement[] = []
+                for (let i = 0; i < tagRenderingQuestions.length; i++) {
-        for (let i = 0; i < this._tagRenderingQuestions.length; i++) {
+                    let tagRendering = tagRenderings[i];
-            let tagRendering = this._tagRenderings[i];
 
-            if(tagRendering.IsKnown(this._tags.data)){
+                    if (tagRendering.IsKnown(tags)) {
-                continue;
+                        continue;
-            }
+                    }
 
-            if (this._skippedQuestions.data.indexOf(i) >= 0) {
+                    if (skippedQuestions.data.indexOf(i) >= 0) {
-                continue;
+                        continue;
-            }
+                    }
-            // this value is NOT known - we show the questions for it
+                    // this value is NOT known - we show the questions for it
-            if(State.state.featureSwitchShowAllQuestions.data || allQuestions.length == 0){
+                    if (State.state.featureSwitchShowAllQuestions.data || allQuestions.length == 0) {
-                allQuestions.push(this._tagRenderingQuestions[i])
+                        allQuestions.push(tagRenderingQuestions[i])
-            }
+                    }
-        
-        }
 
-        if(this._skippedQuestions.data.length > 0){
+                }
-            allQuestions.push(this._skippedQuestionsButton)
+
-        }
+                if (skippedQuestions.data.length > 0) {
-        
+                    allQuestions.push(skippedQuestionsButton)
+                }
+
+
+                return new Combine(allQuestions).SetClass("block mb-8")
+            }, [skippedQuestions])
+        )
 
-        return new Combine(allQuestions);
     }
 
 }

UI/Popup/TagRenderingQuestion.ts

@@ -1,4 +1,3 @@
-import {UIElement} from "../UIElement";
 import {UIEventSource} from "../../Logic/UIEventSource";
 import Combine from "../Base/Combine";
 import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig";
@@ -25,46 +24,31 @@ import {TagUtils} from "../../Logic/Tags/TagUtils";
 import BaseUIElement from "../BaseUIElement";
 import {DropDown} from "../Input/DropDown";
 import {Unit} from "../../Customizations/JSON/Denomination";
-import CombinedInputElement from "../Input/CombinedInputElement";
 
 /**
  * Shows the question element.
  * Note that the value _migh_ already be known, e.g. when selected or when changing the value
  */
-export default class TagRenderingQuestion extends UIElement {
+export default class TagRenderingQuestion extends Combine {
-    private readonly _tags: UIEventSource<any>;
+    
-    private _configuration: TagRenderingConfig;
-
-    private _saveButton: BaseUIElement;
-
-    private _inputElement: InputElement<TagsFilter>;
-    private _cancelButton: BaseUIElement;
-    private _appliedTags: BaseUIElement;
-    private readonly _applicableUnit: Unit;
-    private _question: BaseUIElement;
-
     constructor(tags: UIEventSource<any>,
                 configuration: TagRenderingConfig,
                 units: Unit[],
                 afterSave?: () => void,
                 cancelButton?: BaseUIElement
     ) {
-        super(tags);
-        this._applicableUnit = (units ?? []).filter(unit => unit.isApplicableToKey(configuration.freeform?.key))[0];
-        this._tags = tags;
-        this._configuration = configuration;
-        this._cancelButton = cancelButton;
-        this._question = new SubstitutedTranslation(this._configuration.question, tags)
-            .SetClass("question-text");
         if (configuration === undefined) {
             throw "A question is needed for a question visualization"
         }
+        const applicableUnit = (units ?? []).filter(unit => unit.isApplicableToKey(configuration.freeform?.key))[0];
+        const question = new SubstitutedTranslation(configuration.question, tags)
+            .SetClass("question-text");
+       
 
 
-        this._inputElement = this.GenerateInputElement()
+        const inputElement = TagRenderingQuestion.GenerateInputElement(configuration, applicableUnit, tags)
-        const self = this;
         const save = () => {
-            const selection = self._inputElement.GetValue().data;
+            const selection = inputElement.GetValue().data;
             console.log("Save button clicked, the tags are is", selection)
             if (selection) {
                 (State.state?.changes ?? new Changes())
@@ -77,66 +61,60 @@ export default class TagRenderingQuestion extends UIElement {
         }
 
 
-        this._saveButton = new SaveButton(this._inputElement.GetValue(),
+        const saveButton = new SaveButton(inputElement.GetValue(),
             State.state?.osmConnection)
             .onClick(save)
 
 
-        this._appliedTags = new VariableUiElement(
+      const  appliedTags = new VariableUiElement(
-            self._inputElement.GetValue().map(
+            inputElement.GetValue().map(
-                (tags: TagsFilter) => {
+                (tagsFilter: TagsFilter) => {
                     const csCount = State.state?.osmConnection?.userDetails?.data?.csCount ?? 1000;
                     if (csCount < Constants.userJourney.tagsVisibleAt) {
                         return "";
                     }
-                    if (tags === undefined) {
+                    if (tagsFilter === undefined) {
-                        return Translations.t.general.noTagsSelected.SetClass("subtle");
+                        return Translations.t.general.noTagsSelected.Clone().SetClass("subtle");
                     }
                     if (csCount < Constants.userJourney.tagsVisibleAndWikiLinked) {
-                        const tagsStr = tags.asHumanString(false, true, self._tags.data);
+                        const tagsStr = tagsFilter.asHumanString(false, true, tags.data);
                         return new FixedUiElement(tagsStr).SetClass("subtle");
                     }
-                    return tags.asHumanString(true, true, self._tags.data);
+                    return tagsFilter.asHumanString(true, true, tags.data);
                 }
             )
         ).SetClass("block break-all")
 
-
+       super ([
-    }
+            question,
-
+              inputElement,
-    InnerRender() {
+            cancelButton,
-        return new Combine([
+            saveButton,
-            this._question,
+            appliedTags]
-            this._inputElement,
-            this._cancelButton,
-            this._saveButton,
-            this._appliedTags]
         )
-            .SetClass("question")
+         this   .SetClass("question")
+
     }
 
-    private GenerateInputElement(): InputElement<TagsFilter> {
+    private static GenerateInputElement(configuration: TagRenderingConfig, applicableUnit: Unit, tagsSource: UIEventSource< any>): InputElement<TagsFilter> {
-        const self = this;
         let inputEls: InputElement<TagsFilter>[];
 
-        const mappings = (this._configuration.mappings ?? [])
+        const mappings = (configuration.mappings ?? [])
             .filter(mapping => {
                 if (mapping.hideInAnswer === true) {
                     return false;
                 }
-                if (typeof (mapping.hideInAnswer) !== "boolean" && mapping.hideInAnswer.matchesProperties(this._tags.data)) {
+                return !(typeof (mapping.hideInAnswer) !== "boolean" && mapping.hideInAnswer.matchesProperties(tagsSource.data));
-                    return false;
+                
-                }
-                return true;
             })
 
 
-        let allIfNots: TagsFilter[] = Utils.NoNull(this._configuration.mappings?.map(m => m.ifnot) ?? []);
+        let allIfNots: TagsFilter[] = Utils.NoNull(configuration.mappings?.map(m => m.ifnot) ?? []);
-        const ff = this.GenerateFreeform();
+        const ff = TagRenderingQuestion.GenerateFreeform(configuration, applicableUnit, tagsSource.data);
         const hasImages = mappings.filter(mapping => mapping.then.ExtractImages().length > 0).length > 0
 
-        if (mappings.length < 8 || this._configuration.multiAnswer || hasImages) {
+        if (mappings.length < 8 || configuration.multiAnswer || hasImages) {
-            inputEls = (mappings ?? []).map(mapping => self.GenerateMappingElement(mapping, allIfNots));
+            inputEls = (mappings ?? []).map(mapping => TagRenderingQuestion.GenerateMappingElement(tagsSource, mapping, allIfNots));
             inputEls = Utils.NoNull(inputEls);
         } else {
             const dropdown: InputElement<TagsFilter> = new DropDown("",
@@ -164,15 +142,17 @@ export default class TagRenderingQuestion extends UIElement {
             inputEls.push(ff);
         }
 
-        if (this._configuration.multiAnswer) {
+        if (configuration.multiAnswer) {
-            return this.GenerateMultiAnswer(inputEls, ff, this._configuration.mappings.map(mp => mp.ifnot))
+            return TagRenderingQuestion.GenerateMultiAnswer(configuration, inputEls, ff, configuration.mappings.map(mp => mp.ifnot))
         } else {
             return new RadioButton(inputEls, false)
         }
 
     }
 
-    private GenerateMultiAnswer(elements: InputElement<TagsFilter>[], freeformField: InputElement<TagsFilter>, ifNotSelected: TagsFilter[]): InputElement<TagsFilter> {
+    private static GenerateMultiAnswer(
+        configuration: TagRenderingConfig,
+        elements: InputElement<TagsFilter>[], freeformField: InputElement<TagsFilter>, ifNotSelected: TagsFilter[]): InputElement<TagsFilter> {
         const checkBoxes = new CheckBoxes(elements);
         const inputEl = new InputElementMap<number[], TagsFilter>(
             checkBoxes,
@@ -206,8 +186,8 @@ export default class TagRenderingQuestion extends UIElement {
                 const indices: number[] = []
                 // We also collect the values that have to be added to the freeform field
                 let freeformExtras: string[] = []
-                if (this._configuration.freeform?.key) {
+                if (configuration.freeform?.key) {
-                    freeformExtras = [...(presentTags[this._configuration.freeform.key] ?? [])]
+                    freeformExtras = [...(presentTags[configuration.freeform.key] ?? [])]
                 }
 
                 for (let j = 0; j < elements.length; j++) {
@@ -222,7 +202,7 @@ export default class TagRenderingQuestion extends UIElement {
                     if (TagUtils.AllKeysAreContained(presentTags, neededTags)) {
                         indices.push(j);
                         if (freeformExtras.length > 0) {
-                            const freeformsToRemove: string[] = (neededTags[this._configuration.freeform.key] ?? []);
+                            const freeformsToRemove: string[] = (neededTags[configuration.freeform.key] ?? []);
                             for (const toRm of freeformsToRemove) {
                                 const i = freeformExtras.indexOf(toRm);
                                 if (i >= 0) {
@@ -235,7 +215,7 @@ export default class TagRenderingQuestion extends UIElement {
                 }
                 if (freeformField) {
                     if (freeformExtras.length > 0) {
-                        freeformField.GetValue().setData(new Tag(this._configuration.freeform.key, freeformExtras.join(";")));
+                        freeformField.GetValue().setData(new Tag(configuration.freeform.key, freeformExtras.join(";")));
                         indices.push(elements.indexOf(freeformField))
                     } else {
                         freeformField.GetValue().setData(undefined);
@@ -272,7 +252,9 @@ export default class TagRenderingQuestion extends UIElement {
         return inputEl;
     }
 
-    private GenerateMappingElement(mapping: {
+    private static GenerateMappingElement(
+        tagsSource: UIEventSource<any>,
+        mapping: {
         if: TagsFilter,
         then: Translation,
         hideInAnswer: boolean | TagsFilter
@@ -284,13 +266,13 @@ export default class TagRenderingQuestion extends UIElement {
         }
 
         return new FixedInputElement(
-            new SubstitutedTranslation(mapping.then, this._tags),
+            new SubstitutedTranslation(mapping.then, tagsSource),
             tagging,
             (t0, t1) => t1.isEquivalent(t0));
     }
 
-    private GenerateFreeform(): InputElement<TagsFilter> {
+    private static GenerateFreeform(configuration: TagRenderingConfig, applicableUnit: Unit, tagsData: any): InputElement<TagsFilter> {
-        const freeform = this._configuration.freeform;
+        const freeform = configuration.freeform;
         if (freeform === undefined) {
             return undefined;
         }
@@ -328,15 +310,15 @@ export default class TagRenderingQuestion extends UIElement {
             return undefined;
         }
 
-        let input: InputElement<string> = ValidatedTextField.InputForType(this._configuration.freeform.type, {
+        let input: InputElement<string> = ValidatedTextField.InputForType(configuration.freeform.type, {
             isValid: (str) => (str.length <= 255),
-            country: () => this._tags.data._country,
+            country: () => tagsData._country,
-            location: [this._tags.data._lat, this._tags.data._lon],
+            location: [tagsData._lat, tagsData._lon],
             mapBackgroundLayer: State.state.backgroundLayer,
-            unit: this._applicableUnit
+            unit: applicableUnit
         });
 
-        input.GetValue().setData(this._tags.data[this._configuration.freeform.key]);
+        input.GetValue().setData(tagsData[configuration.freeform.key]);
 
         return new InputElementMap(
             input, (a, b) => a === b || (a?.isEquivalent(b) ?? false),

UI/Reviews/SingleReview.ts

@@ -1,4 +1,3 @@
-import {UIElement} from "../UIElement";
 import {Review} from "../../Logic/Web/Review";
 import Combine from "../Base/Combine";
 import {FixedUiElement} from "../Base/FixedUiElement";
@@ -7,33 +6,14 @@ import {Utils} from "../../Utils";
 import BaseUIElement from "../BaseUIElement";
 import Img from "../Base/Img";
 
-export default class SingleReview extends UIElement{
+export default class SingleReview extends Combine {
-    private _review: Review;
+    
     constructor(review: Review) {
-        super(review.made_by_user);
+        const d = review.date;
-        this._review = review;
+        super(
-      
-    }
-    public static GenStars(rating: number): BaseUIElement {
-        if (rating === undefined) {
-            return Translations.t.reviews.no_rating;
-        }
-        if (rating < 10) {
-            rating = 10;
-        }
-        const scoreTen = Math.round(rating / 10);
-        return new Combine([
-                ...Utils.TimesT(scoreTen / 2, _  => new Img('./assets/svg/star.svg').SetClass("'h-8 w-8 md:h-12")),
-            scoreTen % 2 == 1 ? new Img('./assets/svg/star_half.svg').SetClass('h-8 w-8 md:h-12') : undefined
-        ]).SetClass("flex w-max")
-    }
-    InnerRender(): BaseUIElement {
-        const d = this._review.date;
-        let review = this._review;
-        const el=  new Combine(
             [
                 new Combine([
-                  SingleReview.GenStars(review.rating)                    
+                    SingleReview.GenStars(review.rating)
                 ]),
                 new FixedUiElement(review.comment),
                 new Combine([
@@ -48,11 +28,24 @@ export default class SingleReview extends UIElement{
 
             ]
         );
-        el.SetClass("block p-2 m-4 rounded-xl subtle-background review-element");
+        this.SetClass("block p-2 m-4 rounded-xl subtle-background review-element");
-        if(review.made_by_user.data){
+        if (review.made_by_user.data) {
-            el.SetClass("border-attention-catch")
+            this.SetClass("border-attention-catch")
         }
-        return el;
     }
-    
+
+    public static GenStars(rating: number): BaseUIElement {
+        if (rating === undefined) {
+            return Translations.t.reviews.no_rating;
+        }
+        if (rating < 10) {
+            rating = 10;
+        }
+        const scoreTen = Math.round(rating / 10);
+        return new Combine([
+            ...Utils.TimesT(scoreTen / 2, _ => new Img('./assets/svg/star.svg').SetClass("'h-8 w-8 md:h-12")),
+            scoreTen % 2 == 1 ? new Img('./assets/svg/star_half.svg').SetClass('h-8 w-8 md:h-12') : undefined
+        ]).SetClass("flex w-max")
+    }
+
 }

UI/UIElement.ts

@@ -1,37 +1,7 @@
-import {UIEventSource} from "../Logic/UIEventSource";
 import BaseUIElement from "./BaseUIElement";
 
 export abstract class UIElement extends BaseUIElement{
 
-    private static nextId: number = 0;
-    public readonly id: string;
-    public readonly _source: UIEventSource<any>;
-
-    private lastInnerRender: string;
-
-    protected constructor(source: UIEventSource<any> = undefined) {
-        super()
-        this.id = `ui-${this.constructor.name}-${UIElement.nextId}`;
-        this._source = source;
-        UIElement.nextId++;
-        this.ListenTo(source);
-    }
-
-    public ListenTo(source: UIEventSource<any>) {
-        if (source === undefined) {
-            return this;
-        }
-        //console.trace("Got a listenTo in ", this.constructor.name)
-        const self = this;
-        source.addCallback(() => {
-            self.lastInnerRender = undefined;
-            if(self._constructedHtmlElement !== undefined){
-                self.UpdateElement(self._constructedHtmlElement);
-            }
-            
-        })
-        return this;
-    }
 
     /**
      * Should be overridden for specific HTML functionality
@@ -54,35 +24,7 @@ export abstract class UIElement extends BaseUIElement{
         }
         return el;
     }
-
+    
-    protected UpdateElement(el: HTMLElement) : void{
-        const innerRender = this.InnerRender();
-
-        if (typeof innerRender === "string") {
-            if(el.innerHTML !== innerRender){
-                el.innerHTML = innerRender    
-            }
-        } else {
-            const subElement = innerRender.ConstructElement();
-            if(el.children.length === 1 && el.children[0] === subElement){
-                return; // Nothing changed
-            }
-
-            while (el.firstChild) {
-                el.removeChild(el.firstChild);
-            }           
-            
-            if (subElement === undefined) {
-                return;
-            }
-            el.appendChild(subElement)
-        }
-        
-    }
-
-    /**
-     * @deprecated The method should not be used
-     */
     protected abstract InnerRender(): string | BaseUIElement;
 
 }

UI/i18n/Translation.ts

@@ -1,4 +1,3 @@
-import {UIElement} from "../UIElement";
 import Locale from "./Locale";
 import {Utils} from "../../Utils";
 import BaseUIElement from "../BaseUIElement";
@@ -95,7 +94,7 @@ export class Translation extends BaseUIElement {
                 }
                 const combined: (string)[] = [];
                 const parts = template.split("{" + k + "}");
-                const el: string | UIElement = text[k];
+                const el: string | BaseUIElement = text[k];
                 if (el === undefined) {
                     continue;
                 }