Huge refactoring: split readonly and writable stores

UI/BigComponents/FilterView.ts

@@ -2,12 +2,12 @@ import {Utils} from "../../Utils";
 import {FixedInputElement} from "../Input/FixedInputElement";
 import {RadioButton} from "../Input/RadioButton";
 import {VariableUiElement} from "../Base/VariableUIElement";
-import Toggle from "../Input/Toggle";
+import Toggle, {ClickableToggle} from "../Input/Toggle";
 import Combine from "../Base/Combine";
 import Translations from "../i18n/Translations";
 import {Translation} from "../i18n/Translation";
 import Svg from "../../Svg";
-import {UIEventSource} from "../../Logic/UIEventSource";
+import {ImmutableStore, Store, UIEventSource} from "../../Logic/UIEventSource";
 import BaseUIElement from "../BaseUIElement";
 import State from "../../State";
 import FilteredLayer, {FilterState} from "../../Models/FilteredLayer";
@@ -20,7 +20,6 @@ import {QueryParameters} from "../../Logic/Web/QueryParameters";
 import {TagUtils} from "../../Logic/Tags/TagUtils";
 import {InputElement} from "../Input/InputElement";
 import {DropDown} from "../Input/DropDown";
-import {UIElement} from "../UIElement";
 
 export default class FilterView extends VariableUiElement {
     constructor(filteredLayer: UIEventSource<FilteredLayer[]>, 
@@ -180,7 +179,8 @@ export default class FilterView extends VariableUiElement {
 
         const filter = filterConfig.options[0]
         const mappings = new Map<string, BaseUIElement>()
-        let allValid = new UIEventSource(true)
+        let allValid: Store<boolean> = new ImmutableStore(true)
+        var allFields: InputElement<string>[] = []
         const properties = new UIEventSource<any>({})
         for (const {name, type} of filter.fields) {
             const value = QueryParameters.GetQueryParameter("filter-" + filterConfig.id + "-" + name, "", "Value for filter " + filterConfig.id)
@@ -193,10 +193,11 @@ export default class FilterView extends VariableUiElement {
                 properties.data[name] = v.toLowerCase();
                 properties.ping()
             })
+            allFields.push(field)
             allValid = allValid.map(previous => previous && field.IsValid(stable.data) && stable.data !== "", [stable])
         }
         const tr = new SubstitutedTranslation(filter.question, new UIEventSource<any>({id: filterConfig.id}), State.state, mappings)
-        const trigger: UIEventSource<FilterState> = allValid.map(isValid => {
+        const trigger: Store<FilterState> = allValid.map(isValid => {
             if (!isValid) {
                 return undefined
             }
@@ -221,8 +222,16 @@ export default class FilterView extends VariableUiElement {
                 state: JSON.stringify(props)
             }
         }, [properties])
+        
+        const settableFilter = new UIEventSource<FilterState>(undefined)
+        trigger.addCallbackAndRun(state => settableFilter.setData(state))
+        settableFilter.addCallback(state => {
+            if(state.currentFilter === undefined){
+                allFields.forEach(f => f.GetValue().setData(undefined));
+            }
+        })
 
-        return [tr, trigger];
+        return [tr, settableFilter];
     }
 
     private static createCheckboxFilter(filterConfig: FilterConfig): [BaseUIElement, UIEventSource<FilterState>] {
@@ -231,14 +240,14 @@ export default class FilterView extends VariableUiElement {
         const icon = Svg.checkbox_filled_svg().SetClass("block mr-2 w-6");
         const iconUnselected = Svg.checkbox_empty_svg().SetClass("block mr-2 w-6");
 
-        const toggle = new Toggle(
+        const toggle = new ClickableToggle(
             new Combine([icon, option.question.Clone().SetClass("block")]).SetClass("flex"),
             new Combine([iconUnselected, option.question.Clone().SetClass("block")]).SetClass("flex")
         )
             .ToggleOnClick()
             .SetClass("block m-1")
 
-        return [toggle, toggle.isEnabled.map(enabled => enabled ? {
+        return [toggle, toggle.isEnabled.sync(enabled => enabled ? {
                 currentFilter: option.osmTags,
                 state: "true"
             } : undefined, [],
@@ -272,7 +281,7 @@ export default class FilterView extends VariableUiElement {
         }
 
         return [filterPicker,
-            filterPicker.GetValue().map(
+            filterPicker.GetValue().sync(
                 i => values[i],
                 [],
                 selected => {

UI/BigComponents/Histogram.ts

@@ -1,5 +1,5 @@
 import {VariableUiElement} from "../Base/VariableUIElement";
-import {UIEventSource} from "../../Logic/UIEventSource";
+import {Store, UIEventSource} from "../../Logic/UIEventSource";
 import Table from "../Base/Table";
 import Combine from "../Base/Combine";
 import {FixedUiElement} from "../Base/FixedUiElement";
@@ -19,7 +19,7 @@ export default class Histogram<T> extends VariableUiElement {
         "#fa61fa"
     ]
 
-    constructor(values: UIEventSource<string[]>,
+    constructor(values: Store<string[]>,
                 title: string | BaseUIElement,
                 countTitle: string | BaseUIElement,
                 options?: {

UI/BigComponents/MoreScreen.ts

@@ -7,7 +7,7 @@ import * as personal from "../../assets/themes/personal/personal.json"
 import Constants from "../../Models/Constants";
 import BaseUIElement from "../BaseUIElement";
 import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
-import {UIEventSource} from "../../Logic/UIEventSource";
+import {ImmutableStore, Store, Stores, UIEventSource} from "../../Logic/UIEventSource";
 import Loc from "../../Models/Loc";
 import {OsmConnection} from "../../Logic/Osm/OsmConnection";
 import UserRelatedState from "../../Logic/State/UserRelatedState";
@@ -117,7 +117,7 @@ export default class MoreScreen extends Combine {
     private static createUrlFor(layout: { id: string, definition?: string },
                                 isCustom: boolean,
                                 state?: { locationControl?: UIEventSource<{ lat, lon, zoom }>, layoutToUse?: { id } }
-    ): UIEventSource<string> {
+    ): Store<string> {
         if (layout === undefined) {
             return undefined;
         }
@@ -163,7 +163,7 @@ export default class MoreScreen extends Combine {
                 .map(part => part[0] + "=" + part[1])
                 .join("&")
             return `${linkPrefix}${params}${hash}`;
-        }) ?? new UIEventSource<string>(`${linkPrefix}`)
+        }) ?? new ImmutableStore<string>(`${linkPrefix}`)
 
 
     }
@@ -237,7 +237,7 @@ export default class MoreScreen extends Combine {
     private static createUnofficialThemeList(buttonClass: string, state: UserRelatedState, themeListClasses: string, search: UIEventSource<string>): BaseUIElement {
         const prefix = "mapcomplete-unofficial-theme-";
 
-        var currentIds: UIEventSource<string[]> = state.osmConnection.preferencesHandler.preferences
+        var currentIds: Store<string[]> = state.osmConnection.preferencesHandler.preferences
             .map(allPreferences => {
                 const ids: string[] = []
 
@@ -250,7 +250,7 @@ export default class MoreScreen extends Combine {
                 return ids
             });
 
-        var stableIds = UIEventSource.ListStabilized<string>(currentIds)
+        var stableIds = Stores.ListStabilized<string>(currentIds)
         return new VariableUiElement(
             stableIds.map(ids => {
                 const allThemes: { element: BaseUIElement, predicate?: (s: string) => boolean }[] = []

UI/BigComponents/ShareScreen.ts

@@ -2,9 +2,8 @@ import {VariableUiElement} from "../Base/VariableUIElement";
 import {Translation} from "../i18n/Translation";
 import Svg from "../../Svg";
 import Combine from "../Base/Combine";
-import {UIEventSource} from "../../Logic/UIEventSource";
+import {Store, UIEventSource} from "../../Logic/UIEventSource";
 import {Utils} from "../../Utils";
-import Toggle from "../Input/Toggle";
 import Translations from "../i18n/Translations";
 import BaseUIElement from "../BaseUIElement";
 import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
@@ -13,7 +12,7 @@ import Loc from "../../Models/Loc";
 import BaseLayer from "../../Models/BaseLayer";
 import FilteredLayer from "../../Models/FilteredLayer";
 import {InputElement} from "../Input/InputElement";
-import CheckBoxes, {CheckBox} from "../Input/Checkboxes";
+import {CheckBox} from "../Input/Checkboxes";
 import {SubtleButton} from "../Base/SubtleButton";
 import LZString from "lz-string";
 
@@ -24,7 +23,7 @@ export default class ShareScreen extends Combine {
         const tr = Translations.t.general.sharescreen;
 
         const optionCheckboxes: InputElement<boolean>[] = []
-        const optionParts: (UIEventSource<string>)[] = [];
+        const optionParts: (Store<string>)[] = [];
 
         const includeLocation = new CheckBox(tr.fsIncludeCurrentLocation, true)
         optionCheckboxes.push(includeLocation);

UI/BigComponents/TranslatorsPanel.ts

@@ -124,7 +124,7 @@ export default class TranslatorsPanel extends Toggle {
         const completeness = new Map<string, number>()
         const untranslated = new Map<string, string[]>()
 
-        Utils.WalkObject(layout, (o, path) => {
+        Utils.WalkObject(layout, (o) => {
             const translation = <Translation><any>o;
             if (translation.translations["*"] !== undefined) {
                 return