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

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}