Add quickfacts-box to wikipedia article

UI/Wikipedia/WikidataPreviewBox.ts

@@ -12,63 +12,66 @@ import {WikimediaImageProvider} from "../../Logic/ImageProviders/WikimediaImageP
 import Link from "../Base/Link";
 import Svg from "../../Svg";
 import BaseUIElement from "../BaseUIElement";
+import {Utils} from "../../Utils";
 
 export default class WikidataPreviewBox extends VariableUiElement {
-    
-    constructor(wikidataId : UIEventSource<string>) {
+
+    constructor(wikidataId: UIEventSource<string>) {
         let inited = false;
         const wikidata = wikidataId
             .stabilized(250)
             .bind(id => {
-            if (id === undefined || id === "" || id === "Q") {
-                return null;
-            }
-            inited = true;
-            return Wikidata.LoadWikidataEntry(id)
-        })
-        
+                if (id === undefined || id === "" || id === "Q") {
+                    return null;
+                }
+                inited = true;
+                return Wikidata.LoadWikidataEntry(id)
+            })
+
         super(wikidata.map(maybeWikidata => {
-            if(maybeWikidata === null || !inited){
+            if (maybeWikidata === null || !inited) {
                 return undefined;
             }
-            
-            if(maybeWikidata === undefined){
+
+            if (maybeWikidata === undefined) {
                 return new Loading(Translations.t.general.loading)
             }
-            
+
             if (maybeWikidata["error"] !== undefined) {
                 return new FixedUiElement(maybeWikidata["error"]).SetClass("alert")
             }
-            const wikidata = <WikidataResponse> maybeWikidata["success"]
+            const wikidata = <WikidataResponse>maybeWikidata["success"]
             return WikidataPreviewBox.WikidataResponsePreview(wikidata)
         }))
-            
+
     }
-    
-    public static WikidataResponsePreview(wikidata: WikidataResponse): BaseUIElement{
+
+    public static WikidataResponsePreview(wikidata: WikidataResponse): BaseUIElement {
         let link = new Link(
             new Combine([
                 wikidata.id,
                 Svg.wikidata_ui().SetStyle("width: 2.5rem").SetClass("block")
-            ]).SetClass("flex"), 
-            Wikidata.IdToArticle(wikidata.id) ,true).SetClass("must-link")
-    
-        let info = new Combine( [
-            new Combine([Translation.fromMap(wikidata.labels).SetClass("font-bold"), 
+            ]).SetClass("flex"),
+            Wikidata.IdToArticle(wikidata.id), true).SetClass("must-link")
+
+        let info = new Combine([
+            new Combine(
+                [Translation.fromMap(wikidata.labels).SetClass("font-bold"),
                 link]).SetClass("flex justify-between"),
-            Translation.fromMap(wikidata.descriptions)
+            Translation.fromMap(wikidata.descriptions),
+            WikidataPreviewBox.QuickFacts(wikidata)
         ]).SetClass("flex flex-col link-underline")
 
 
         let imageUrl = undefined
-        if(wikidata.claims.get("P18")?.size > 0){
+        if (wikidata.claims.get("P18")?.size > 0) {
             imageUrl = Array.from(wikidata.claims.get("P18"))[0]
         }
 
 
-        if(imageUrl){
-            imageUrl =  WikimediaImageProvider.singleton.PrepUrl(imageUrl).url
-            info = new Combine([ new Img(imageUrl).SetStyle("max-width: 5rem; width: unset; height: 4rem").SetClass("rounded-xl mr-2"), 
+        if (imageUrl) {
+            imageUrl = WikimediaImageProvider.singleton.PrepUrl(imageUrl).url
+            info = new Combine([new Img(imageUrl).SetStyle("max-width: 5rem; width: unset; height: 4rem").SetClass("rounded-xl mr-2"),
                 info.SetClass("w-full")]).SetClass("flex")
         }
 
@@ -76,5 +79,90 @@ export default class WikidataPreviewBox extends VariableUiElement {
 
         return info
     }
-    
+
+    private static isHuman = [
+        {p: 31/*is a*/, q: 5 /* human */},
+    ]
+    // @ts-ignore
+    // @ts-ignore
+    private static extraProperties: {
+        requires?: { p: number, q?: number }[],
+        property: string,
+        display: Translation | Map<string, string | (() => BaseUIElement) /*If translation: Subs({value: * })  */>
+    }[] = [
+        {
+            requires: WikidataPreviewBox.isHuman,
+            property: "P21",
+            display: new Map([
+                ['Q6581097', () => Svg.gender_male_ui().SetStyle("width: 1rem; height: auto")],
+                ['Q6581072', () => Svg.gender_female_ui().SetStyle("width: 1rem; height: auto")],
+                ['Q1097630',() => Svg.gender_inter_ui().SetStyle("width: 1rem; height: auto")],
+                ['Q1052281',() => Svg.gender_trans_ui().SetStyle("width: 1rem; height: auto")/*'transwomen'*/],
+                ['Q2449503',() => Svg.gender_trans_ui().SetStyle("width: 1rem; height: auto")/*'transmen'*/],
+                ['Q48270',() => Svg.gender_queer_ui().SetStyle("width: 1rem; height: auto")]
+            ])
+        },
+        {
+            property: "P569",
+            requires: WikidataPreviewBox.isHuman,
+            display: new Translation({
+                "*":"Born: {value}"
+            })
+        },
+        {
+            property: "P570",
+            requires: WikidataPreviewBox.isHuman,
+            display: new Translation({
+                "*":"Died: {value}"
+            })
+        }
+    ]
+
+    public static QuickFacts(wikidata: WikidataResponse): BaseUIElement {
+        
+        const els : BaseUIElement[] = []
+        for (const extraProperty of WikidataPreviewBox.extraProperties) {
+            let hasAllRequirements =true
+            for (const requirement of extraProperty.requires) {
+                if(!wikidata.claims.has("P"+requirement.p)){
+                    hasAllRequirements = false;
+                    break
+                }
+                if(!wikidata.claims.get("P"+requirement.p).has("Q"+requirement.q)){
+                    hasAllRequirements = false;
+                    break
+                }
+            }
+            if(!hasAllRequirements){
+                continue
+            }
+            
+            const key = extraProperty.property
+            const display = extraProperty.display
+            const value: string[] = Array.from(wikidata.claims.get(key))
+            if(value === undefined){
+                continue
+            }
+            if(display instanceof Translation){
+                els.push(display.Subs({value: value.join(", ")}).SetClass("m-2"))
+                continue
+            }
+            console.log("Display:", display, "key:",key)
+            const constructors = Utils.NoNull(value.map(property => display.get(property)))
+            const elems = constructors.map(v => {
+                if(typeof v === "string"){
+                    return new FixedUiElement(v)
+                }else{
+                    return v();
+                }
+            })
+            els.push(new Combine(elems).SetClass("flex m-2"))
+        }
+        if(els.length === 0){
+            return undefined;
+        }
+        
+        return new Combine(els).SetClass("flex")
+    }
+
 }

UI/Wikipedia/WikipediaBox.ts

@@ -182,6 +182,7 @@ export default class WikipediaBox extends Combine {
             language: language
         })
         const wp = Translations.t.general.wikipedia
+        const quickFacts = WikidataPreviewBox.QuickFacts(wikidata);
         const contents: UIEventSource<string | BaseUIElement> = htmlContent.map(htmlContent => {
             if (htmlContent === undefined) {
                 // Still loading
@@ -198,7 +199,9 @@ export default class WikipediaBox extends Combine {
             return undefined
         })
 
-        return new Combine([new VariableUiElement(contents)
+        return new Combine([
+            quickFacts?.SetClass("border-2 border-grey rounded-lg m-1 mb-0"),
+            new VariableUiElement(contents)
             .SetClass("block pl-6 pt-2")])
     }