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

UX/Studio: improvements to UX, introduce 'expert' mode

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-11-07 02:13:16 +01:00
parent 8a9650c737
commit 906fa1b1db
245 changed files with 3814 additions and 3950 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/UI/Popup/TagRendering/TagRenderingEditable.svelte
View file

@ -36,8 +36,8 @@
let htmlElem: HTMLDivElement;
$: {
if (editMode && htmlElem !== undefined) {
// EditMode switched to true, so the person wants to make a change
if (editMode && htmlElem !== undefined && config.IsKnown(tags)) {
// EditMode switched to true yet the answer is already known, so the person wants to make a change
// Make sure that the question is in the scrollview!
// Some delay is applied to give Svelte the time to render the _question_

29
src/UI/Studio/EditLayerState.ts
View file

@ -32,6 +32,8 @@ export abstract class EditJsonState<T> {
public readonly category: "layers" | "themes"
public readonly server: StudioServer
public readonly expertMode: UIEventSource<boolean>
public readonly configuration: UIEventSource<Partial<T>> = new UIEventSource<Partial<T>>({})
public readonly messages: Store<ConversionMessage[]>
@ -44,10 +46,18 @@ export abstract class EditJsonState<T> {
private sendingUpdates = false
private readonly _stores = new Map<string, UIEventSource<any>>()
constructor(schema: ConfigMeta[], server: StudioServer, category: "layers" | "themes") {
constructor(
schema: ConfigMeta[],
server: StudioServer,
category: "layers" | "themes",
options?: {
expertMode?: UIEventSource<boolean>
}
) {
this.schema = schema
this.server = server
this.category = category
this.expertMode = options?.expertMode ?? new UIEventSource<boolean>(false)
this.messages = this.setupErrorsForLayers()
@ -261,8 +271,13 @@ export default class EditLayerState extends EditJsonState<LayerConfigJson> {
},
}
constructor(schema: ConfigMeta[], server: StudioServer, osmConnection: OsmConnection) {
super(schema, server, "layers")
constructor(
schema: ConfigMeta[],
server: StudioServer,
osmConnection: OsmConnection,
options: { expertMode: UIEventSource<boolean> }
) {
super(schema, server, "layers", options)
this.osmConnection = osmConnection
this.layout = {
getMatchingLayer: (_) => {
@ -330,8 +345,12 @@ export default class EditLayerState extends EditJsonState<LayerConfigJson> {
}
export class EditThemeState extends EditJsonState<LayoutConfigJson> {
constructor(schema: ConfigMeta[], server: StudioServer) {
super(schema, server, "themes")
constructor(
schema: ConfigMeta[],
server: StudioServer,
options: { expertMode: UIEventSource<boolean> }
) {
super(schema, server, "themes", options)
}
protected buildValidation(state: DesugaringContext): Conversion<LayoutConfigJson, any> {

7
src/UI/Studio/Region.svelte
View file

@ -12,6 +12,9 @@ export let title: string | undefined = undefined;
export let path: (string | number)[] = [];
let expertMode = state.expertMode
let configsFiltered = $expertMode ? configs : configs.filter(schema => schema.hints?.group !== "expert")
</script>
{#if configs === undefined}
Bug: 'Region' received 'undefined'
@ -22,14 +25,14 @@ export let path: (string | number)[] = [];
<h3>{title}</h3>
<div class="pl-2 border border-black flex flex-col gap-y-1 w-full">
<slot name="description" />
{#each configs as config}
{#each configsFiltered as config}
<SchemaBasedInput {state} path={config.path} schema={config} />
{/each}
</div>
</div>
{:else}
<div class="pl-2 flex flex-col gap-y-1 w-full">
{#each configs as config}
{#each configsFiltered as config}
<SchemaBasedInput {state} path={path.concat(config.path)} schema={config} />
{/each}
</div>

4
src/UI/Studio/SchemaBasedField.svelte
View file

@ -17,10 +17,10 @@
export let state: EditLayerState;
export let path: (string | number)[] = [];
export let schema: ConfigMeta;
export let startInEditModeIfUnset: boolean = !schema.hints.ifunset
export let startInEditModeIfUnset: boolean = schema.hints && !schema.hints.ifunset
let value = new UIEventSource<string | any>(undefined);
const isTranslation = schema.hints.typehint === "translation" || schema.hints.typehint === "rendered" || ConfigMetaUtils.isTranslation(schema);
const isTranslation = schema.hints?.typehint === "translation" || schema.hints?.typehint === "rendered" || ConfigMetaUtils.isTranslation(schema);
let type = schema.hints.typehint ?? "string";
let rendervalue = (schema.hints.inline ?? schema.path.join(".")) + (isTranslation ? " <b>{translated(value)}</b>": " <b>{value}</b>");

2
src/UI/Studio/SchemaBasedInput.svelte
View file

@ -18,7 +18,7 @@
<ArrayMultiAnswer {path} {state} {schema}/>
{:else if schema.type === "array"}
<SchemaBasedArray {path} {state} {schema} />
{:else if schema.hints.types}
{:else if schema.hints?.types}
<SchemaBasedMultiType {path} {state} {schema} />
{:else}
<SchemaBasedField {path} {state} {schema} />

16
src/UI/Studio/SchemaBasedMultiType.svelte
View file

@ -14,6 +14,7 @@
// @ts-ignore
import nmd from "nano-markdown";
import ShowConversionMessage from "./ShowConversionMessage.svelte";
import exp from "constants";
/**
* If 'types' is defined: allow the user to pick one of the types to input.
@ -22,6 +23,7 @@
export let state: EditLayerState;
export let path: (string | number)[] = [];
export let schema: ConfigMeta;
let expertMode = state.expertMode;
const defaultOption = schema.hints.typesdefault ? Number(schema.hints.typesdefault) : undefined;
const hasBooleanOption = (<JsonSchemaType[]>schema.type)?.findIndex(t => t["type"] === "boolean");
@ -212,16 +214,22 @@
{#if chosenOption !== undefined}
{#each subSchemas as subschema}
<SchemaBasedInput {state} schema={subschema}
path={[...subpath, (subschema?.path?.at(-1) ?? "???")]}></SchemaBasedInput>
{#if $expertMode || subschema.hints?.group !== "expert"}
<SchemaBasedInput {state} schema={subschema}
path={[...subpath, (subschema?.path?.at(-1) ?? "???")]}></SchemaBasedInput>
{:else if window.location.hostname === "127.0.0.1"}
<span class="subtle">Omitted expert question {subschema.path.join(".")}</span>
{/if}
{/each}
{:else if $messages.length > 0}
{#each $messages as message}
<ShowConversionMessage {message}/>
<ShowConversionMessage {message} />
{/each}
{/if}
{/if}
{#if window.location.hostname === "127.0.0.1"}
<span class="subtle">SchemaBasedMultiType <b>{path.join(".")}</b> <span class="cursor-pointer" on:click={() => console.log(schema)}>{schema.hints.typehint}</span></span>
<span class="subtle">SchemaBasedMultiType <b>{path.join(".")}</b> <span class="cursor-pointer"
on:click={() => console.log(schema)}>{schema.hints.typehint}</span></span>
{/if}
</div>

48
src/UI/Studio/TagRenderingInput.svelte
View file

@ -17,46 +17,47 @@ import { TrashIcon } from "@rgossiaux/svelte-heroicons/outline";
import questionableTagRenderingSchemaRaw from "../../assets/schemas/questionabletagrenderingconfigmeta.json";
import SchemaBasedField from "./SchemaBasedField.svelte";
import Region from "./Region.svelte";
import exp from "constants";
export let state: EditLayerState;
export let schema: ConfigMeta;
export let path: (string | number)[];
let expertMode = state.expertMode;
const store = state.getStoreFor(path);
let value = store.data
console.log(">> initial value", value, store)
let value = store.data;
/**
* Allows the theme builder to create 'writable' themes.
* Should only be enabled for 'tagrenderings' in the theme, if the source is OSM
*/
let allowQuestions: Store<boolean> = (state.configuration.mapD(config => path.at(0) === "tagRenderings" && config.source?.geoJson === undefined))
let allowQuestions: Store<boolean> = (state.configuration.mapD(config => path.at(0) === "tagRenderings" && config.source?.geoJson === undefined));
let mappingsBuiltin: MappingConfigJson[] = [];
let perLabel: Record<string, MappingConfigJson> = {}
let perLabel: Record<string, MappingConfigJson> = {};
for (const tr of questions.tagRenderings) {
let description = tr["description"] ?? tr["question"] ?? "No description available";
description = description["en"] ?? description;
if(tr["labels"]){
const labels: string[] = tr["labels"]
if (tr["labels"]) {
const labels: string[] = tr["labels"];
for (const label of labels) {
let labelMapping: MappingConfigJson = perLabel[label]
if(!labelMapping){
let labelMapping: MappingConfigJson = perLabel[label];
if (!labelMapping) {
labelMapping = {
if: "value="+label,
if: "value=" + label,
then: {
en: "Builtin collection <b>"+label+"</b>:"
en: "Builtin collection <b>" + label + "</b>:"
}
}
perLabel[label] = labelMapping
mappingsBuiltin.push(labelMapping)
};
perLabel[label] = labelMapping;
mappingsBuiltin.push(labelMapping);
}
labelMapping.then.en = labelMapping.then.en + "<div>"+description+"</div>"
labelMapping.then.en = labelMapping.then.en + "<div>" + description + "</div>";
}
}
mappingsBuiltin.push({
if: "value=" + tr["id"],
then: {
@ -96,10 +97,11 @@ function initMappings() {
const items = new Set(["question", "questionHint", "multiAnswer", "freeform", "render", "condition", "metacondition", "mappings", "icon"]);
const ignored = new Set(["labels", "description", "classes"]);
const freeformSchema = <ConfigMeta[]>questionableTagRenderingSchemaRaw
const freeformSchemaAll = <ConfigMeta[]>questionableTagRenderingSchemaRaw
.filter(schema => schema.path.length == 2 && schema.path[0] === "freeform" && ($allowQuestions || schema.path[1] === "key"));
let freeformSchema = $expertMode ? freeformSchemaAll : freeformSchemaAll.filter(schema => schema.hints?.group !== "expert")
const missing: string[] = questionableTagRenderingSchemaRaw.filter(schema => schema.path.length >= 1 && !items.has(schema.path[0]) && !ignored.has(schema.path[0])).map(schema => schema.path.join("."));
console.log({state})
console.log({ state });
</script>
@ -115,7 +117,8 @@ console.log({state})
<slot name="upper-right" />
</div>
{#if $allowQuestions}
<SchemaBasedField startInEditModeIfUnset={true} {state} path={[...path,"question"]} schema={topLevelItems["question"]} />
<SchemaBasedField startInEditModeIfUnset={true} {state} path={[...path,"question"]}
schema={topLevelItems["question"]} />
<SchemaBasedField {state} path={[...path,"questionHint"]} schema={topLevelItems["questionHint"]} />
{/if}
{#each ($mappings ?? []) as mapping, i (mapping)}
@ -148,8 +151,9 @@ console.log({state})
</div>
<SchemaBasedField {state} path={[...path,"condition"]} schema={topLevelItems["condition"]} />
<SchemaBasedField {state} path={[...path,"metacondition"]} schema={topLevelItems["metacondition"]} />
{#if $expertMode}
<SchemaBasedField {state} path={[...path,"metacondition"]} schema={topLevelItems["metacondition"]} />
{/if}
{#each missing as field}
<SchemaBasedField {state} path={[...path,field]} schema={topLevelItems[field]} />
{/each}

49
src/UI/StudioGUI.svelte
View file

@ -24,8 +24,10 @@
import { QuestionMarkCircleIcon } from "@babeard/svelte-heroicons/mini";
import type { ConfigMeta } from "./Studio/configMeta";
import EditTheme from "./Studio/EditTheme.svelte";
import * as meta from "../../package.json"
import * as meta from "../../package.json";
import Checkbox from "./Base/Checkbox.svelte";
import exp from "constants";
export let studioUrl = window.location.hostname === "127.0.0.2" ? "http://127.0.0.1:1235" : "https://studio.mapcomplete.org";
let osmConnection = new OsmConnection(new OsmConnection({
@ -35,6 +37,10 @@
"Used to complete the login"
)
}));
const expertMode = UIEventSource.asBoolean(osmConnection.GetPreference("studio-expert-mode", "false", {
documentation: "Indicates if more options are shown in mapcomplete studio"
}));
expertMode.addCallbackAndRunD(expert => console.log("Expert mode is", expert))
const createdBy = osmConnection.userDetails.data.name;
const uid = osmConnection.userDetails.map(ud => ud?.uid);
const studio = new StudioServer(studioUrl, uid);
@ -44,8 +50,8 @@
let selfLayers = layers.mapD(ls => ls.filter(l => l.owner === uid.data), [uid]);
let otherLayers = layers.mapD(ls => ls.filter(l => l.owner !== undefined && l.owner !== uid.data), [uid]);
let officialLayers = layers.mapD(ls => ls.filter(l => l.owner === undefined), [uid]);
let themes: Store<{ owner: number }[]> = layersWithErr.mapD(l => l.success?.filter(l => l.category === "themes"));
let selfThemes = themes.mapD(ls => ls.filter(l => l.owner === uid.data), [uid]);
let otherThemes = themes.mapD(ls => ls.filter(l => l.owner !== undefined && l.owner !== uid.data), [uid]);
@ -54,30 +60,31 @@
let state: undefined | "edit_layer" | "edit_theme" | "editing_layer" | "editing_theme" | "loading" = undefined;
const layerSchema: ConfigMeta[] = <any>layerSchemaRaw;
let editLayerState = new EditLayerState(layerSchema, studio, osmConnection);
let editLayerState = new EditLayerState(layerSchema, studio, osmConnection, { expertMode });
const layoutSchema: ConfigMeta[] = <any>layoutSchemaRaw;
let editThemeState = new EditThemeState(layoutSchema, studio);
let editThemeState = new EditThemeState(layoutSchema, studio, { expertMode });
let layerId = editLayerState.configuration.map(layerConfig => layerConfig.id);
let showIntro = UIEventSource.asBoolean(LocalStorageSource.Get("studio-show-intro", "true"));
const version = meta.version
const version = meta.version;
async function editLayer(event: Event) {
const layerId: {owner: number, id: string} = event.detail;
const layerId: { owner: number, id: string } = event.detail;
state = "loading";
editLayerState.startSavingUpdates(false)
editLayerState.startSavingUpdates(false);
editLayerState.configuration.setData(await studio.fetch(layerId.id, "layers", layerId.owner));
editLayerState.startSavingUpdates()
editLayerState.startSavingUpdates();
state = "editing_layer";
}
async function editTheme(event: Event) {
const id : {id: string, owner: number} = event.detail;
const id: { id: string, owner: number } = event.detail;
state = "loading";
editThemeState.startSavingUpdates(false)
editThemeState.startSavingUpdates(false);
editThemeState.configuration.setData(await studio.fetch(id.id, "themes", id.owner));
editThemeState.startSavingUpdates()
editThemeState.startSavingUpdates();
state = "editing_theme";
}
@ -102,7 +109,7 @@ const version = meta.version
}]
};
editLayerState.configuration.setData(initialLayerConfig);
editLayerState.startSavingUpdates()
editLayerState.startSavingUpdates();
state = "editing_layer";
}
@ -139,9 +146,9 @@ const version = meta.version
</NextButton>
</div>
{#if state === undefined}
<div class="m-4">
<h1>MapComplete Studio</h1>
<div class="p-4 flex flex-col justify-between h-full">
<div class="w-full flex flex-col">
<h1>MapComplete Studio</h1>
<NextButton on:click={() => state = "edit_layer"}>
Edit an existing layer
@ -160,7 +167,11 @@ const version = meta.version
Show the introduction again
</NextButton>
</div>
<div>
<Checkbox selected={expertMode} >Enable more options (expert mode)</Checkbox>
<span class="subtle">MapComplete version {version}</span>
</div>
</div>
{:else if state === "edit_layer"}
@ -175,7 +186,7 @@ const version = meta.version
<ChooseLayerToEdit {osmConnection} layerIds={$otherLayers} on:layerSelected={editLayer} />
<h3>Official layers by MapComplete</h3>
<ChooseLayerToEdit {osmConnection} layerIds={$officialLayers} on:layerSelected={editLayer} />
<ChooseLayerToEdit {osmConnection} layerIds={$officialLayers} on:layerSelected={editLayer} />
</div>
{:else if state === "edit_theme"}
@ -202,7 +213,7 @@ const version = meta.version
</BackButton>
</EditLayer>
{:else if state === "editing_theme"}
<EditTheme state={editThemeState} >
<EditTheme state={editThemeState}>
<BackButton clss="small p-1" imageClass="w-8 h-8" on:click={() => {state =undefined}}>MapComplete Studio
</BackButton>
</EditTheme>
@ -213,7 +224,7 @@ const version = meta.version
{#if $showIntro}
<FloatOver on:close={() => {showIntro.setData(false)}}>
<div class="flex p-4 h-full">
<div class="flex p-4 h-full pr-12">
<Walkthrough pages={intro.sections} on:done={() => {showIntro.setData(false)}} />
</div>
</FloatOver>

2
src/UI/StudioGui.ts
View file

@ -3,7 +3,7 @@ import StudioGUI from "./StudioGUI.svelte"
export default class StudioGui {
public setup() {
new SvelteUIElement(StudioGUI, {}).AttachTo("main")
new SvelteUIElement(StudioGUI, {}).SetClass("h-full").AttachTo("main")
}
}