First working version

UI/Popup/TagRenderingQuestion.ts

@@ -154,7 +154,10 @@ export default class TagRenderingQuestion extends Combine {
 
         const ifNotsPresent = applicableMappings.some(mapping => mapping.ifnot !== undefined)
 
-        if(applicableMappings.length > 8 && !ifNotsPresent && (configuration.freeform?.type === undefined || configuration.freeform?.type === "string")){
+        if (applicableMappings.length > 8 &&
+            (configuration.freeform?.type === undefined || configuration.freeform?.type === "string") &&
+            (!configuration.multiAnswer || configuration.freeform === undefined)) {
+
             return TagRenderingQuestion.GenerateSearchableSelector(state, configuration, applicableMappings, tagsSource)
         }
 
@@ -231,15 +234,20 @@ export default class TagRenderingQuestion extends Combine {
     private static GenerateSearchableSelector(
         state: FeaturePipelineState,
         configuration: TagRenderingConfig,
-        applicableMappings: { if: TagsFilter; then: TypedTranslation<object>; icon?: string; iconClass?: string, addExtraTags: Tag[], searchTerms?: Record<string, string[]> }[], tagsSource: UIEventSource<any>): InputElement<TagsFilter>{
+        applicableMappings: { if: TagsFilter; ifnot?: TagsFilter, then: TypedTranslation<object>; icon?: string; iconClass?: string, addExtraTags: Tag[], searchTerms?: Record<string, string[]> }[], tagsSource: UIEventSource<any>): InputElement<TagsFilter> {
-       const values  : { show: BaseUIElement, value: TagsFilter, mainTerm: Record<string, string>, searchTerms?: Record<string, string[]> }[] = []
+        const values: { show: BaseUIElement, value: number, mainTerm: Record<string, string>, searchTerms?: Record<string, string[]> }[] = []
-        for (const mapping of applicableMappings) {
+        for (let i = 0; i < applicableMappings.length; i++) {
+            const mapping = applicableMappings[i];
             const tr = mapping.then.Subs(tagsSource.data)
-            const patchedMapping  = <{iconClass: "small-height", then: TypedTranslation<object>}> {...mapping, iconClass: "small-height"}
+            const patchedMapping = <{ iconClass: "small-height", then: TypedTranslation<object> }>{
+                ...mapping,
+                iconClass: `small-height`,
+                icon: mapping.icon ?? "./assets/svg/none.svg"
+            }
             const fancy = TagRenderingQuestion.GenerateMappingContent(patchedMapping, tagsSource, state).SetClass("normal-background")
             values.push({
                 show: fancy,
-                value: mapping.if,
+                value: i,
                 mainTerm: tr.translations,
                 searchTerms: mapping.searchTerms
             })
@@ -252,36 +260,67 @@ export default class TagRenderingQuestion extends Combine {
             onEmpty = new VariableUiElement(searchValue.map(search => configuration.render.Subs({[ff.key]: search})))
         }
 
-        const classes =  "h-32 overflow-scroll"
+        const classes = "h-64 overflow-scroll"
-        const presetSearch = new SearchablePillsSelector<TagsFilter>(values,{
+        const presetSearch = new SearchablePillsSelector<number>(values, {
             selectIfSingle: true,
             mode: configuration.multiAnswer ? "select-many" : "select-one",
             searchValue,
             onNoMatches: onEmpty?.SetClass(classes).SetClass("flex justify-center items-center"),
             searchAreaClass: classes
         })
-        return new InputElementMap(presetSearch,
+        return new InputElementMap<number[], And>(presetSearch,
-            (x0, x1) => false,
+            (x0, x1) => {
-            arr => {
+                if (x0 == x1) {
-                console.log("Arr is ", arr)
+                    return true;
-                if(arr[0] !== undefined){
-                    return new And(arr)
                 }
+                if (x0 === undefined || x1 === undefined) {
+                    return false;
+                }
+                if (x0.and.length !== x1.and.length) {
+                    return false;
+                }
+                for (let i = 0; i < x0.and.length; i++) {
+                    if (x1.and[i] != x0.and[i]) {
+                        return false
+                    }
+                }
+                return true;
+            },
+            (selected) => {
                 if (ff !== undefined && searchValue.data?.length > 0 && !presetSearch.someMatchFound.data) {
                     const t = new Tag(ff.key, searchValue.data)
                     if (ff.addExtraTags) {
                         return new And([t, ...ff.addExtraTags])
                     }
-                    return t;
+                    return new And([t]);
+                }
 
-                }
+                if (selected === undefined || selected.length == 0) {
                     return undefined;
-            },
-            tf => {
-                if(tf["and"] !== undefined){
-                    return tf["and"];
                 }
-                return [tf];
+
+                const tfs = Utils.NoNull(applicableMappings.map((mapping, i) => {
+                    if (selected.indexOf(i) >= 0) {
+                        return mapping.if
+                    } else {
+                        return mapping.ifnot
+                    }
+                }))
+                console.log("Got tags", tfs)
+                return new And(tfs);
+            },
+            (tf) => {
+                if (tf === undefined) {
+                    return []
+                }
+                const selected: number[] = []
+                for (let i = 0; i < applicableMappings.length; i++) {
+                    const mapping = applicableMappings[i]
+                    if (tf.and.some(t => mapping.if == t)) {
+                        selected.push(i)
+                    }
+                }
+                return selected;
             },
             [searchValue, presetSearch.someMatchFound]
         );
@@ -423,13 +462,13 @@ export default class TagRenderingQuestion extends Combine {
     private static GenerateMappingContent(mapping: {
         then: Translation,
         icon?: string,
-        iconClass?: "small" | "medium" | "large" | "small-height"
+        iconClass?: "small" | "medium" | "large" | "small-height" | "medium-height" | "large-height"
     }, tagsSource: UIEventSource<any>, state: FeaturePipelineState): BaseUIElement {
         const text = new SubstitutedTranslation(mapping.then, tagsSource, state)
         if (mapping.icon === undefined) {
             return text;
         }
-        return new Combine([new Img(mapping.icon).SetClass("mr-1 mapping-icon-"+(mapping.iconClass ?? "small")), text]).SetClass("flex")
+        return new Combine([new Img(mapping.icon).SetClass("mr-1 mapping-icon-" + (mapping.iconClass ?? "small")), text]).SetClass("flex items-center")
     }
 
     private static GenerateFreeform(state: FeaturePipelineState, configuration: TagRenderingConfig, applicableUnit: Unit, tags: UIEventSource<any>, feedback: UIEventSource<Translation>)