Graciously handle multiple entries in wikidata for fetching images and showing articles, verious bug fixes

Logic/ImageProviders/ImageProvider.ts

@@ -1,17 +1,20 @@
 import {UIEventSource} from "../UIEventSource";
 import BaseUIElement from "../../UI/BaseUIElement";
 import {LicenseInfo} from "./LicenseInfo";
+import {Utils} from "../../Utils";
 
 export interface ProvidedImage {
-    url: string, key: string, provider: ImageProvider
+    url: string,
+    key: string,
+    provider: ImageProvider
 }
 
 export default abstract class ImageProvider {
-    
+
-    public abstract readonly defaultKeyPrefixes : string[] = ["mapillary", "image"]
+    public abstract readonly defaultKeyPrefixes: string[] = ["mapillary", "image"]
-    
+
     private _cache = new Map<string, UIEventSource<LicenseInfo>>()
-    
+
     GetAttributionFor(url: string): UIEventSource<LicenseInfo> {
         const cached = this._cache.get(url);
         if (cached !== undefined) {
@@ -31,43 +34,49 @@ export default abstract class ImageProvider {
      */
     public GetRelevantUrls(allTags: UIEventSource<any>, options?: {
         prefixes?: string[]
-    }):UIEventSource<ProvidedImage[]> {
+    }): UIEventSource<ProvidedImage[]> {
         const prefixes = options?.prefixes ?? this.defaultKeyPrefixes
-        if(prefixes === undefined){
+        if (prefixes === undefined) {
-            throw "The image provider"+this.constructor.name+" doesn't define `defaultKeyPrefixes`"
+            throw "The image provider" + this.constructor.name + " doesn't define `defaultKeyPrefixes`"
         }
         const relevantUrls = new UIEventSource<{ url: string; key: string; provider: ImageProvider }[]>([])
         const seenValues = new Set<string>()
-        const self = this
+        const self =this
         allTags.addCallbackAndRunD(tags => {
             for (const key in tags) {
-                if(!prefixes.some(prefix => key.startsWith(prefix))){
+                if (!prefixes.some(prefix => key.startsWith(prefix))) {
                     continue
                 }
-                const value = tags[key]
+                const values = Utils.NoEmpty(tags[key]?.split(";")?.map(v => v.trim()) ?? [])
-                if(seenValues.has(value)){
+                for (const value of values) {
-                    continue
+
-                }
+                    if (seenValues.has(value)) {
-                seenValues.add(value)
+                        continue
-                this.ExtractUrls(key, value).then(promises => {
-                    for (const promise of promises ?? []) {
-                        if(promise === undefined){
-                            continue
-                        }
-                        promise.then(providedImage => {
-                            if(providedImage === undefined){
-                                return
-                            }
-                            relevantUrls.data.push(providedImage)
-                            relevantUrls.ping()
-                        })
                     }
-                })
+                    seenValues.add(value)
+                    this.ExtractUrls(key, value).then(promises => {
+                        console.log("Got ", promises.length, "promises for", value,"by",self.constructor.name)
+                        for (const promise of promises ?? []) {
+                            if (promise === undefined) {
+                                continue
+                            }
+                            promise.then(providedImage => {
+                                if (providedImage === undefined) {
+                                    return
+                                }
+                                relevantUrls.data.push(providedImage)
+                                relevantUrls.ping()
+                            })
+                        }
+                    })
+                }
+
+
             }
         })
         return relevantUrls
     }
 
-    public abstract ExtractUrls(key: string, value: string) : Promise<Promise<ProvidedImage>[]>;
+    public abstract ExtractUrls(key: string, value: string): Promise<Promise<ProvidedImage>[]>;
-    
+
 }

Logic/ImageProviders/LicenseInfo.ts

@@ -1,4 +1,5 @@
 export class LicenseInfo {
+    title: string = ""
     artist: string = "";
     license: string = "";
     licenseShortName: string = "";

Logic/ImageProviders/WikimediaImageProvider.ts

@@ -65,12 +65,26 @@ export class WikimediaImageProvider extends ImageProvider {
             "&format=json&origin=*";
         const data = await Utils.downloadJson(url)
         const licenseInfo = new LicenseInfo();
-        const license = (data.query.pages[-1].imageinfo ?? [])[0]?.extmetadata;
+        const pageInfo = data.query.pages[-1]
+        if(pageInfo === undefined){
+            return undefined;
+        }
+        
+        const license = (pageInfo.imageinfo ?? [])[0]?.extmetadata;
         if (license === undefined) {
             console.warn("The file", filename ,"has no usable metedata or license attached... Please fix the license info file yourself!")
             return undefined;
         }
 
+        let title = pageInfo.title
+        if(title.startsWith("File:")){
+            title=  title.substr("File:".length)
+        }
+        if(title.endsWith(".jpg") || title.endsWith(".png")){
+            title = title.substring(0, title.length - 4)
+        }
+        
+        licenseInfo.title = title
         licenseInfo.artist = license.Artist?.value;
         licenseInfo.license = license.License?.value;
         licenseInfo.copyrighted = license.Copyrighted?.value;

Logic/Web/Wikidata.ts

@@ -47,7 +47,7 @@ export default class Wikidata {
             const claimsList: any[] = entity.claims[claimId]
             const values = new Set<string>()
             for (const claim of claimsList) {
-                const value = claim.mainsnak?.datavalueq?.value;
+                const value = claim.mainsnak?.datavalue?.value;
                 if(value !== undefined){
                     values.add(value)
                 }

Logic/Web/Wikipedia.ts

@@ -22,6 +22,10 @@ export default class Wikipedia {
         "mw-selflink",
         "hatnote" // Often redirects
     ]
+    
+    private static readonly idsToRemove = [
+        "sjabloon_zie"
+    ]
 
     private static readonly _cache = new Map<string, UIEventSource<{ success: string } | { error: any }>>()
     
@@ -59,6 +63,13 @@ export default class Wikipedia {
             }
         }
 
+        for (const forbiddenId of Wikipedia.idsToRemove) {
+            const toRemove = content.querySelector("#"+forbiddenId)
+            toRemove?.parentElement?.removeChild(toRemove)
+        }
+        
+        
+
         const links = Array.from(content.getElementsByTagName("a"))
 
         // Rewrite relative links to absolute links + open them in a new tab

UI/Base/TabbedComponent.ts

@@ -6,11 +6,16 @@ import {VariableUiElement} from "./VariableUIElement";
 
 export class TabbedComponent extends Combine {
 
-    constructor(elements: { header: BaseUIElement | string, content: BaseUIElement | string }[], openedTab: (UIEventSource<number> | number) = 0) {
+    constructor(elements: { header: BaseUIElement | string, content: BaseUIElement | string }[], 
+                openedTab: (UIEventSource<number> | number) = 0,
+                options?: {
+                    leftOfHeader?: BaseUIElement
+                    styleHeader?: (header: BaseUIElement) => void
+                }) {
 
         const openedTabSrc = typeof (openedTab) === "number" ? new UIEventSource(openedTab) : (openedTab ?? new UIEventSource<number>(0))
 
-        const tabs: BaseUIElement[] = []
+        const tabs: BaseUIElement[] = [options?.leftOfHeader ]
         const contentElements: BaseUIElement[] = [];
         for (let i = 0; i < elements.length; i++) {
             let element = elements[i];
@@ -25,16 +30,19 @@ export class TabbedComponent extends Combine {
                 }
             })
             const content = Translations.W(element.content)
-            content.SetClass("relative p-4 w-full inline-block")
+            content.SetClass("relative w-full inline-block")
             contentElements.push(content);
             const tab = header.SetClass("block tab-single-header")
             tabs.push(tab)
         }
 
         const header = new Combine(tabs).SetClass("tabs-header-bar")
+        if(options?.styleHeader){
+            options.styleHeader(header)
+        }
         const actualContent = new VariableUiElement(
             openedTabSrc.map(i => contentElements[i])
-        )
+        ).SetStyle("max-height: inherit; height: inherit")
         super([header, actualContent])
 
     }

UI/BigComponents/FullWelcomePaneWithTabs.ts

@@ -73,6 +73,9 @@ export default class FullWelcomePaneWithTabs extends ScrollableFullScreen {
             }
         );
 
+        tabs.forEach(c => c.content.SetClass("p-4"))
+        tabsWithAboutMc.forEach(c => c.content.SetClass("p-4"))
+        
         return new Toggle(
             new TabbedComponent(tabsWithAboutMc, State.state.welcomeMessageOpenedTab),
             new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab),

UI/Image/Attribution.ts

@@ -21,10 +21,11 @@ export default class Attribution extends VariableUiElement {
                     icon?.SetClass("block left").SetStyle("height: 2em; width: 2em; padding-right: 0.5em;"),
 
                     new Combine([
-                        Translations.W(license?.artist ?? ".").SetClass("block font-bold"),
+                        Translations.W(license?.title).SetClass("block"),
+                        Translations.W(license?.artist ?? "").SetClass("block font-bold"),
                         Translations.W((license?.license ?? "") === "" ? "CC0" : (license?.license ?? ""))
                     ]).SetClass("flex flex-col")
-                ]).SetClass("flex flex-row bg-black text-white text-sm absolute bottom-0 left-0 p-0.5 pl-5 pr-3 rounded-lg")
+                ]).SetClass("flex flex-row bg-black text-white text-sm absolute bottom-0 left-0 p-0.5 pl-5 pr-3 rounded-lg no-images")
 
             }));
     }

UI/SpecialVisualizations.ts

@@ -100,7 +100,16 @@ export default class SpecialVisualizations {
                 ],
                 example: "`{wikipedia()}` is a basic example, `{wikipedia(name:etymology:wikidata)}` to show the wikipedia page of whom the feature was named after. Also remember that these can be styled, e.g. `{wikipedia():max-height: 10rem}` to limit the height",
                 constr: (_, tagsSource, args) =>
-                      new WikipediaBox( tagsSource.map(tags => tags[args[0]]))
+                    new VariableUiElement(
+                        tagsSource.map(tags => tags[args[0]])
+                            .map(wikidata => {
+                                const wikidatas : string[] = 
+                                    Utils.NoEmpty(wikidata?.split(";")?.map(wd => wd.trim()) ?? [])
+                                return new WikipediaBox(wikidatas)
+                            })
+                        
+                    )
+                  
             },
             {
                 funcName: "minimap",

UI/WikipediaBox.ts

@@ -10,27 +10,73 @@ import Translations from "./i18n/Translations";
 import Svg from "../Svg";
 import Wikidata, {WikidataResponse} from "../Logic/Web/Wikidata";
 import Locale from "./i18n/Locale";
-import Toggle from "./Input/Toggle";
 import Link from "./Base/Link";
+import {TabbedComponent} from "./Base/TabbedComponent";
 
-export default class WikipediaBox extends Toggle {
+export default class WikipediaBox extends Combine {
 
 
-    constructor(wikidataId: string | UIEventSource<string>) {
+    constructor(wikidataIds: string[]) {
-        const wp = Translations.t.general.wikipedia;
+
-        if (typeof wikidataId === "string") {
+        const mainContents = []
-            wikidataId = new UIEventSource(wikidataId)
+
+        const pages = wikidataIds.map(wdId => WikipediaBox.createLinkedContent(wdId))
+        if (wikidataIds.length == 1) {
+            const page = pages[0]
+            mainContents.push(
+                new Combine([
+                    new Combine([Svg.wikipedia_ui()
+                        .SetStyle("width: 1.5rem").SetClass("inline-block mr-3"), page.titleElement])
+                        .SetClass("flex"),
+                    page.linkElement
+                ]).SetClass("flex justify-between align-middle"),
+            )
+            mainContents.push(page.contents)
+        } else if (wikidataIds.length > 1) {
+
+            const tabbed = new TabbedComponent(
+                pages.map(page => {
+                    const contents = page.contents.SetClass("block").SetStyle("max-height: inherit; height: inherit; padding-bottom: 3.3rem")
+                    return {
+                        header: page.titleElement.SetClass("pl-2 pr-2"),
+                        content: new Combine([
+                            page.linkElement
+                                .SetStyle("top: 2rem; right: 2.5rem;")
+                                .SetClass("absolute subtle-background rounded-full p-3 opacity-50 hover:opacity-100 transition-opacity"),
+                            contents
+                        ]).SetStyle("max-height: inherit; height: inherit").SetClass("relative")
+                    }
+
+                }),
+                0,
+                {
+                    leftOfHeader: Svg.wikipedia_ui().SetStyle("width: 1.5rem; align-self: center;").SetClass("mr-4"),
+                    styleHeader: header => header.SetClass("subtle-background").SetStyle("height: 3.3rem")
+                }
+            )
+            tabbed.SetStyle("height: inherit; max-height: inherit; overflow: hidden")
+            mainContents.push(tabbed)
+
         }
 
 
+        super(mainContents)
+
+
+        this.SetClass("block rounded-xl subtle-background m-1 p-2 flex flex-col")
+            .SetStyle("max-height: inherit")
+    }
+
+    private static createLinkedContent(wikidataId: string): {
+        titleElement: BaseUIElement,
+        contents: BaseUIElement,
+        linkElement: BaseUIElement
+    } {
+
+        const wp = Translations.t.general.wikipedia;
+
         const wikiLink: UIEventSource<[string, string] | "loading" | "failed" | "no page"> =
-            wikidataId
+            Wikidata.LoadWikidataEntry(wikidataId)
-                .bind(id => {
-                    if (id === undefined) {
-                        return undefined
-                    }
-                    return Wikidata.LoadWikidataEntry(id);
-                })
                 .map(maybewikidata => {
                     if (maybewikidata === undefined) {
                         return "loading"
@@ -72,38 +118,39 @@ export default class WikipediaBox extends Toggle {
 
                 const [pagetitle, language] = status
                 return WikipediaBox.createContents(pagetitle, language)
-               
+
             })
         ).SetClass("overflow-auto normal-background rounded-lg")
 
 
-      const linkElement = new VariableUiElement(wikiLink.map(state => {
+        const titleElement = new VariableUiElement(wikiLink.map(state => {
             if (typeof state !== "string") {
                 const [pagetitle, language] = state
-                const url=  `https://${language}.wikipedia.org/wiki/${pagetitle}`
+                return new Title(pagetitle, 3)
+            }
+            //return new Title(Translations.t.general.wikipedia.wikipediaboxTitle.Clone(), 2)
+            return new Title(wikidataId,3)
+
+        }))
+
+        const linkElement = new VariableUiElement(wikiLink.map(state => {
+            if (typeof state !== "string") {
+                const [pagetitle, language] = state
+                const url = `https://${language}.wikipedia.org/wiki/${pagetitle}`
                 return new Link(Svg.pop_out_ui().SetStyle("width: 1.2rem").SetClass("block  "), url, true)
             }
-            return undefined}))
+            return undefined
-                    .SetClass("flex items-center")
+        }))
+            .SetClass("flex items-center")
 
-        const mainContent = new Combine([
+        return {
-           new Combine([
+            contents: contents,
-               new Combine([
+            linkElement: linkElement,
-                Svg.wikipedia_ui().SetStyle("width: 1.5rem").SetClass("mr-3"),
+            titleElement: titleElement
-                new Title(Translations.t.general.wikipedia.wikipediaboxTitle.Clone(), 2),
+        }
-               ]).SetClass("flex"),
-                
-               linkElement
-            ]).SetClass("flex justify-between"),
-            contents]).SetClass("block rounded-xl subtle-background m-1 p-2 flex flex-col")
-            .SetStyle("max-height: inherit")
-        super(
-            mainContent,
-            undefined,
-            wikidataId.map(id => id !== undefined)
-        )
     }
 
+
     /**
      * Returns the actual content in a scrollable way
      * @param pagename

css/index-tailwind-output.css

@@ -852,14 +852,14 @@ video {
   margin-right: 0.75rem;
 }
 
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-
 .mr-4 {
   margin-right: 1rem;
 }
 
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -1251,14 +1251,14 @@ video {
   border-radius: 0.25rem;
 }
 
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
 .rounded-xl {
   border-radius: 0.75rem;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1386,6 +1386,14 @@ video {
   padding: 0px;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
 .pl-6 {
   padding-left: 1.5rem;
 }
@@ -1394,10 +1402,6 @@ video {
   padding-top: 0.5rem;
 }
 
-.pl-2 {
-  padding-left: 0.5rem;
-}
-
 .pt-3 {
   padding-top: 0.75rem;
 }
@@ -1458,10 +1462,6 @@ video {
   padding-top: 0px;
 }
 
-.pr-2 {
-  padding-right: 0.5rem;
-}
-
 .text-center {
   text-align: center;
 }
@@ -1582,6 +1582,10 @@ video {
   text-decoration: underline;
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -1628,6 +1632,12 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .\!transition {
   transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter !important;
   transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
@@ -1788,6 +1798,10 @@ svg, img {
   height: 100%;
 }
 
+.no-images img {
+  display: none;
+}
+
 .mapcontrol svg path {
   fill: var(--subtle-detail-color-contrast) !important;
 }
@@ -2189,6 +2203,10 @@ li::marker {
   color: rgba(30, 64, 175, var(--tw-text-opacity));
 }
 
+.hover\:opacity-100:hover {
+  opacity: 1;
+}
+
 .hover\:shadow-xl:hover {
   --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

css/tabbedComponent.css

@@ -8,7 +8,7 @@
     justify-content: flex-start;
     align-items: start;
     background-color: var(--background-color);
-    max-width: 100vw;
+    max-width: 100%;
     overflow-x: auto;
 }
 

index.css

@@ -93,6 +93,10 @@ svg, img {
     height: 100%;
 }
 
+.no-images img {
+    display: none;
+}
+
 .mapcontrol svg path {
     fill: var(--subtle-detail-color-contrast) !important;
 }