midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Refactoring: port wikipedia panel to Svelte

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-04-21 16:02:36 +02:00
parent 24f7610d0a
commit d8e14927c8
32 changed files with 362 additions and 847 deletions
Download patch file Download diff file Expand all files Collapse all files

31
UI/Wikipedia/WikidataSearchBox.ts
View file

@ -8,20 +8,12 @@ import Locale from "../i18n/Locale"
import { VariableUiElement } from "../Base/VariableUIElement"
import WikidataPreviewBox from "./WikidataPreviewBox"
import Title from "../Base/Title"
import WikipediaBox from "./WikipediaBox"
import Svg from "../../Svg"
import Loading from "../Base/Loading"
import Table from "../Base/Table"
export default class WikidataSearchBox extends InputElement<string> {
private static readonly _searchCache = new Map<string, Promise<WikidataResponse[]>>()
private readonly wikidataId: UIEventSource<string>
private readonly searchText: UIEventSource<string>
private readonly instanceOf?: number[]
private readonly notInstanceOf?: number[]
public static docs = new Combine([
,
new Title("Helper arguments"),
new Table(
["name", "doc"],
@ -100,6 +92,11 @@ Another example is to search for species and trees:
\`\`\`
`,
])
private static readonly _searchCache = new Map<string, Promise<WikidataResponse[]>>()
private readonly wikidataId: UIEventSource<string>
private readonly searchText: UIEventSource<string>
private readonly instanceOf?: number[]
private readonly notInstanceOf?: number[]
constructor(options?: {
searchText?: UIEventSource<string>
@ -207,25 +204,15 @@ Another example is to search for species and trees:
)
)
const full = new Combine([
return new Combine([
new Title(Translations.t.general.wikipedia.searchWikidata, 3).SetClass("m-2"),
new Combine([
Svg.search_ui().SetStyle("width: 1.5rem"),
searchField.SetClass("m-2 w-full"),
]).SetClass("flex"),
previews,
]).SetClass("flex flex-col border-2 border-black rounded-xl m-2 p-2")
return new Combine([
new VariableUiElement(
selectedWikidataId.map((wid) => {
if (wid === undefined) {
return undefined
}
return new WikipediaBox(wid.split(";"))
})
).SetStyle("max-height:12.5rem"),
full,
]).ConstructElement()
])
.SetClass("flex flex-col border-2 border-black rounded-xl m-2 p-2")
.ConstructElement()
}
}

46
UI/Wikipedia/WikipediaArticle.svelte Normal file
View file

@ -0,0 +1,46 @@
<script lang="ts">
import type { FullWikipediaDetails } from "../../Logic/Web/Wikipedia";
import { Store } from "../../Logic/UIEventSource";
import FromHtml from "../Base/FromHtml.svelte";
import Loading from "../Base/Loading.svelte";
import { Disclosure, DisclosureButton, DisclosurePanel } from "@rgossiaux/svelte-headlessui";
import { ChevronRightIcon } from "@rgossiaux/svelte-heroicons/solid";
import ToSvelte from "../Base/ToSvelte.svelte";
import WikidataPreviewBox from "./WikidataPreviewBox";
import Tr from "../Base/Tr.svelte";
import Translations from "../i18n/Translations";
/**
* Small helper
*/
export let wikipediaDetails: Store<FullWikipediaDetails>;
</script>
<a href={$wikipediaDetails.articleUrl} target="_blank" rel="noreferrer" class="flex">
<img src="./assets/svg/wikipedia.svg" class="w-6 h-6"/>
<Tr t={Translations.t.general.wikipedia.fromWikipedia}/>
</a>
{#if $wikipediaDetails.wikidata}
<ToSvelte construct={WikidataPreviewBox.WikidataResponsePreview($wikipediaDetails.wikidata)} />
{/if}
{#if $wikipediaDetails.firstParagraph === "" || $wikipediaDetails.firstParagraph === undefined}
<Loading >
<Tr t={Translations.t.general.wikipedia.loading}/>
</Loading>
{:else}
<FromHtml src={$wikipediaDetails.firstParagraph} />
<Disclosure let:open>
<DisclosureButton>
<span class="flex">
<ChevronRightIcon class="w-6 h-6" style={open ? "transform: rotate(90deg);" : ""} />
Read the rest of the article
</span>
</DisclosureButton>
<DisclosurePanel>
<FromHtml src={$wikipediaDetails.restOfArticle} />
</DisclosurePanel>
</Disclosure>
{/if}

321
UI/Wikipedia/WikipediaBox.ts
View file

@ -1,321 +0,0 @@
import BaseUIElement from "../BaseUIElement"
import Locale from "../i18n/Locale"
import { VariableUiElement } from "../Base/VariableUIElement"
import { Translation } from "../i18n/Translation"
import Svg from "../../Svg"
import Combine from "../Base/Combine"
import Title from "../Base/Title"
import Wikipedia from "../../Logic/Web/Wikipedia"
import Wikidata, { WikidataResponse } from "../../Logic/Web/Wikidata"
import { TabbedComponent } from "../Base/TabbedComponent"
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import Loading from "../Base/Loading"
import { FixedUiElement } from "../Base/FixedUiElement"
import Translations from "../i18n/Translations"
import Link from "../Base/Link"
import WikidataPreviewBox from "./WikidataPreviewBox"
import { Paragraph } from "../Base/Paragraph"
export interface WikipediaBoxOptions {
addHeader: boolean
firstParagraphOnly: boolean
noImages: boolean
currentState?: UIEventSource<"loading" | "loaded" | "error">
}
export default class WikipediaBox extends Combine {
constructor(wikidataIds: string[], options?: WikipediaBoxOptions) {
const mainContents = []
options = options ?? { addHeader: false, firstParagraphOnly: true, noImages: false }
const pages = wikidataIds.map((entry) =>
WikipediaBox.createLinkedContent(entry.trim(), options)
)
if (wikidataIds.length == 1) {
const page = pages[0]
mainContents.push(
new Combine([
new Combine([
options.noImages
? undefined
: 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.SetClass("overflow-auto normal-background rounded-lg"))
} else if (wikidataIds.length > 1) {
const tabbed = new TabbedComponent(
pages.map((page) => {
const contents = page.contents
.SetClass("overflow-auto normal-background rounded-lg 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: options.noImages
? undefined
: Svg.wikipedia_svg()
.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(
entry: string,
options: WikipediaBoxOptions
): {
titleElement: BaseUIElement
contents: BaseUIElement
linkElement: BaseUIElement
} {
if (entry.match("[qQ][0-9]+")) {
return WikipediaBox.createWikidatabox(entry, options)
} else {
return WikipediaBox.createWikipediabox(entry, options)
}
}
/**
* Given a '<language>:<article-name>'-string, constructs the wikipedia article
*/
private static createWikipediabox(
wikipediaArticle: string,
options: WikipediaBoxOptions
): {
titleElement: BaseUIElement
contents: BaseUIElement
linkElement: BaseUIElement
} {
const wp = Translations.t.general.wikipedia
const article = Wikipedia.extractLanguageAndName(wikipediaArticle)
if (article === undefined) {
return {
titleElement: undefined,
contents: wp.noWikipediaPage,
linkElement: undefined,
}
}
const wikipedia = new Wikipedia({ language: article.language })
const url = wikipedia.getPageUrl(article.pageName)
const linkElement = new Link(
Svg.pop_out_svg().SetStyle("width: 1.2rem").SetClass("block "),
url,
true
).SetClass("flex items-center enable-links")
return {
titleElement: new Title(article.pageName, 3),
contents: WikipediaBox.createContents(article.pageName, wikipedia, options),
linkElement,
}
}
/**
* Given a `Q1234`, constructs a wikipedia box (if a wikipedia page is available) or wikidata box as fallback.
*
*/
private static createWikidatabox(
wikidataId: string,
options: WikipediaBoxOptions
): {
titleElement: BaseUIElement
contents: BaseUIElement
linkElement: BaseUIElement
} {
const wp = Translations.t.general.wikipedia
const wikiLink: Store<
| [string, string, WikidataResponse]
| "loading"
| "failed"
| ["no page", WikidataResponse]
> = Wikidata.LoadWikidataEntry(wikidataId).map(
(maybewikidata) => {
if (maybewikidata === undefined) {
return "loading"
}
if (maybewikidata["error"] !== undefined) {
return "failed"
}
const wikidata = <WikidataResponse>maybewikidata["success"]
if (wikidata === undefined) {
return "failed"
}
if (wikidata.wikisites.size === 0) {
return ["no page", wikidata]
}
const preferredLanguage = [
Locale.language.data,
"en",
Array.from(wikidata.wikisites.keys())[0],
]
let language
let pagetitle
let i = 0
do {
language = preferredLanguage[i]
pagetitle = wikidata.wikisites.get(language)
i++
} while (pagetitle === undefined)
return [pagetitle, language, wikidata]
},
[Locale.language]
)
const contents = new VariableUiElement(
wikiLink.map((status) => {
if (status === "loading") {
return new Loading(wp.loading.Clone()).SetClass("pl-6 pt-2")
}
if (status === "failed") {
return wp.failed.Clone().SetClass("alert p-4")
}
if (status[0] == "no page") {
const [_, wd] = <[string, WikidataResponse]>status
options.currentState?.setData("loaded")
return new Combine([
WikidataPreviewBox.WikidataResponsePreview(wd),
wp.noWikipediaPage.Clone().SetClass("subtle"),
]).SetClass("flex flex-col p-4")
}
const [pagetitle, language, wd] = <[string, string, WikidataResponse]>status
const wikipedia = new Wikipedia({ language })
const quickFacts = WikidataPreviewBox.QuickFacts(wd)
return WikipediaBox.createContents(pagetitle, wikipedia, {
topBar: quickFacts,
...options,
})
})
)
const titleElement = new VariableUiElement(
wikiLink.map((state) => {
if (typeof state !== "string") {
const [pagetitle, _] = state
if (pagetitle === "no page") {
const wd = <WikidataResponse>state[1]
return new Title(Translation.fromMap(wd.labels), 3)
}
return new Title(pagetitle, 3)
}
return new Link(
new Title(wikidataId, 3),
"https://www.wikidata.org/wiki/" + wikidataId,
true
)
})
)
const linkElement = new VariableUiElement(
wikiLink.map((state) => {
if (typeof state !== "string") {
const [pagetitle, language] = state
const popout = options.noImages
? "Source"
: Svg.pop_out_svg().SetStyle("width: 1.2rem").SetClass("block")
if (pagetitle === "no page") {
const wd = <WikidataResponse>state[1]
return new Link(popout, "https://www.wikidata.org/wiki/" + wd.id, true)
}
const url = `https://${language}.wikipedia.org/wiki/${pagetitle}`
return new Link(popout, url, true)
}
return undefined
})
).SetClass("flex items-center enable-links")
return {
contents: contents,
linkElement: linkElement,
titleElement: titleElement,
}
}
/**
* Returns the actual content in a scrollable way for the given wikipedia page
*/
private static createContents(
pagename: string,
wikipedia: Wikipedia,
options: {
topBar?: BaseUIElement
} & WikipediaBoxOptions
): BaseUIElement {
const htmlContent = wikipedia.GetArticle(pagename, options)
const wp = Translations.t.general.wikipedia
const contents: VariableUiElement = new VariableUiElement(
htmlContent.map((htmlContent) => {
if (htmlContent === undefined) {
// Still loading
return new Loading(wp.loading.Clone())
}
if (htmlContent["success"] !== undefined) {
let content: BaseUIElement = new FixedUiElement(htmlContent["success"])
if (options?.addHeader) {
content = new Combine([
new Paragraph(
new Link(wp.fromWikipedia, wikipedia.getPageUrl(pagename), true)
),
new Paragraph(content),
])
}
return content.SetClass("wikipedia-article")
}
if (htmlContent["error"]) {
console.warn("Loading wikipage failed due to", htmlContent["error"])
return wp.failed.Clone().SetClass("alert p-4")
}
return undefined
})
)
htmlContent.addCallbackAndRunD((c) => {
if (c["success"] !== undefined) {
options.currentState?.setData("loaded")
} else if (c["error"] !== undefined) {
options.currentState?.setData("error")
} else {
options.currentState?.setData("loading")
}
})
return new Combine([
options?.topBar?.SetClass("border-2 border-grey rounded-lg m-1 mb-0"),
contents.SetClass("block pl-6 pt-2"),
])
}
}

7
UI/Wikipedia/WikipediaBoxOptions.ts Normal file
View file

@ -0,0 +1,7 @@
import { UIEventSource } from "../../Logic/UIEventSource"
export interface WikipediaBoxOptions {
addHeader?: boolean
firstParagraphOnly?: true | boolean
allowToAdd?: boolean
}

56
UI/Wikipedia/WikipediaPanel.svelte Normal file
View file

@ -0,0 +1,56 @@
<script lang="ts">
/**
* Shows one or more wikidata info boxes or wikipedia articles in a tabbed component.
*/
import type { FullWikipediaDetails } from "../../Logic/Web/Wikipedia";
import Wikipedia from "../../Logic/Web/Wikipedia";
import Locale from "../i18n/Locale";
import { Store } from "../../Logic/UIEventSource";
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@rgossiaux/svelte-headlessui";
import WikipediaTitle from "./WikipediaTitle.svelte";
import WikipediaArticle from "./WikipediaArticle.svelte";
import { onDestroy } from "svelte";
/**
* Either a wikidata item or a '<language>:<article>' link
*/
export let wikiIds: Store<string[]>;
let wikipediaStores: Store<Store<FullWikipediaDetails>[]> = Locale.language.bind(language =>
wikiIds.map(wikiIds => wikiIds.map(id => Wikipedia.fetchArticleAndWikidata(id, language))));
let _wikipediaStores;
onDestroy(wikipediaStores.addCallbackAndRunD(wikipediaStores => {
_wikipediaStores = wikipediaStores;
}));
</script>
{#if _wikipediaStores !== undefined}
<TabGroup>
<TabList>
{#each _wikipediaStores as store (store.tag)}
<Tab class={({selected}) => selected ? "tab-selected" : "tab-unselected"}>
<WikipediaTitle wikipediaDetails={store} />
</Tab>
{/each}
</TabList>
<TabPanels>
{#each _wikipediaStores as store (store.tag)}
<TabPanel>
<WikipediaArticle wikipediaDetails={store} />
</TabPanel>
{/each}
</TabPanels>
</TabGroup>
{/if}
<style>
.tab-selected {
background-color: rgb(59 130 246);
color: rgb(255 255 255);
}
.tab-unselected {
background-color: rgb(255 255 255);
color: rgb(0 0 0);
}
</style>

13
UI/Wikipedia/WikipediaTitle.svelte Normal file
View file

@ -0,0 +1,13 @@
<script lang="ts">
import type { FullWikipediaDetails } from "../../Logic/Web/Wikipedia";
import { Store } from "../../Logic/UIEventSource";
import { onDestroy } from "svelte";
/**
* Small helper
*/
export let wikipediaDetails: Store<FullWikipediaDetails>
</script>
{$wikipediaDetails.title}