Add follow reference button for vanilla presets

src/app/Utils.ts

@@ -80,7 +80,7 @@ export function getSearchParams(url: string) {
 	return new Map<string, string>()
 }
 
-export function setSeachParams(modifications: Record<string, string | undefined>) {
+export function setSeachParams(modifications: Record<string, string | undefined>, newPath?: string) {
 	const url = getCurrentUrl()
 	const searchParams = getSearchParams(url)
 	Object.entries(modifications).forEach(([key, value]) => {
@@ -89,7 +89,7 @@ export function setSeachParams(modifications: Record<string, string | undefined>
 	})
 	const search = Array.from(searchParams).map(([key, value]) =>
 		`${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
-	route(`${getPath(url)}${search.length === 0 ? '' : `?${search.join('&')}`}`, true)
+	route(`${newPath ? cleanUrl(newPath) : getPath(url)}${search.length === 0 ? '' : `?${search.join('&')}`}`, true)
 }
 
 export function stringToColor(str: string): [number, number, number] {

src/app/components/Octicon.tsx

@@ -22,6 +22,7 @@ export const Octicon = {
 	issue_opened: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"></path></svg>,
 	kebab_horizontal: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>,
 	link: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg>,
+	link_external: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M10.604 1h4.146a.25.25 0 01.25.25v4.146a.25.25 0 01-.427.177L13.03 4.03 9.28 7.78a.75.75 0 01-1.06-1.06l3.75-3.75-1.543-1.543A.25.25 0 0110.604 1zM3.75 2A1.75 1.75 0 002 3.75v8.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 12.25v-3.5a.75.75 0 00-1.5 0v3.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-8.5a.25.25 0 01.25-.25h3.5a.75.75 0 000-1.5h-3.5z"></path></svg>,
 	mark_github: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>,
 	moon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M9.598 1.591a.75.75 0 01.785-.175 7 7 0 11-8.967 8.967.75.75 0 01.961-.96 5.5 5.5 0 007.046-7.046.75.75 0 01.175-.786zm1.616 1.945a7 7 0 01-7.678 7.678 5.5 5.5 0 107.678-7.678z"></path></svg>,
 	play: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM6.379 5.227A.25.25 0 006 5.442v5.117a.25.25 0 00.379.214l4.264-2.559a.25.25 0 000-.428L6.379 5.227z"></path></svg>,

src/app/pages/Generator.tsx

@@ -123,7 +123,6 @@ export function Generator({ lang, changeTitle, version, changeVersion }: Generat
 
 	const loadPreset = async (id: string) => {
 		Analytics.generatorEvent('load-preset', id)
-		console.log('load preset', version, gen.id, id)
 		try {
 			const preset = await fetchPreset(version, gen.path ?? gen.id, id)
 			const seed = model?.get(new Path(['generator', 'seed']))

src/app/schema/renderHtml.tsx

@@ -3,6 +3,7 @@ import { DataModel, ListNode, MapNode, ModelPath, ObjectNode, Path, relativePath
 import type { ComponentChildren, JSX } from 'preact'
 import { memo } from 'preact/compat'
 import { useState } from 'preact/hooks'
+import config from '../../config.json'
 import { Btn, Octicon } from '../components'
 import { useFocus } from '../hooks'
 import { locale } from '../Locales'
@@ -19,6 +20,10 @@ const nbtFields = ['function.set_nbt.tag', 'advancement.display.icon.nbt', 'text
 const fixedLists = ['generator_biome.parameters.temperature', 'generator_biome.parameters.humidity', 'generator_biome.parameters.continentalness', 'generator_biome.parameters.erosion', 'generator_biome.parameters.depth', 'generator_biome.parameters.weirdness', 'feature.end_spike.crystal_beam_target', 'feature.end_gateway.exit', 'decorator.block_filter.offset', 'block_predicate.matching_blocks.offset', 'block_predicate.matching_fluids.offset', 'model_element.from', 'model_element.to', 'model_element.rotation.origin', 'model_element.faces.uv', 'item_transform.rotation', 'item_transform.translation', 'item_transform.scale']
 const collapsedFields = ['noise_settings.surface_rule', 'noise_settings.noise.terrain_shaper']
 
+const findGenerator = (id: string) => {
+	return config.generators.find(g => g.id === id.replace(/^\$/, ''))
+}
+
 /**
  * Secondary model used to remember the keys of a map
  */
@@ -383,14 +388,16 @@ function StringSuffix({ path, getValues, config, node, value, lang, states }: No
 	}
 	const values = getValues()
 	const context = path.getContext().join('.')
+	const id = !isEnum(config) && config?.validator === 'resource' && typeof config.params.pool === 'string' ? config.params.pool : undefined
+
 	if (nbtFields.includes(context)) {
 		return <textarea value={value ?? ''} onBlur={onChange}></textarea>
 	} else if ((isEnum(config) && !config.additional) || selectRegistries.includes(context)) {
 		let context = new Path([])
 		if (isEnum(config) && typeof config.enum === 'string') {
 			context = context.contextPush(config.enum)
-		} else if (!isEnum(config) && config?.validator === 'resource' && typeof config.params.pool === 'string') {
-			context = context.contextPush(config.params.pool)
+		} else if (id) {
+			context = context.contextPush(id)
 		} else if (isEnum(config)) {
 			context = path
 		}
@@ -408,12 +415,16 @@ function StringSuffix({ path, getValues, config, node, value, lang, states }: No
 		</select>
 	} else {
 		const datalistId = hexId()
+		const gen = id ? findGenerator(id) : undefined
+		console.log(id, gen)
 		return <>
 			<input value={value ?? ''} onBlur={onChange} onKeyDown={evt => {if (evt.key === 'Enter') onChange(evt)}}
 				list={values.length > 0 ? datalistId : ''} />
 			{values.length > 0 && <datalist id={datalistId}>
 				{values.map(v => <option value={v} />)}
 			</datalist>}
+			{gen && values.includes(value) && value.startsWith('minecraft:') &&
+				<a href={`/${gen.url}/?preset=${value.replace(/^minecraft:/, '')}`} class="tooltipped tip-se" aria-label={locale(lang, 'follow_reference')}>{Octicon.link_external}</a>}
 		</>
 	}
 }

src/locales/en.json

@@ -25,6 +25,7 @@
   "expand_all": "Hold %0% to expand all",
   "feature.decorated.decorators": "Decorators",
   "feature.decorated.decorators.entry": "Decorator",
+  "follow_reference": "Follow reference",
   "format.json": "JSON",
   "format.yaml": "YAML",
   "fields": "Fields",

src/styles/nodes.css

@@ -149,6 +149,18 @@
   background-color: var(--node-background-hover);
 }
 
+.node-header a {
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  padding: 0 9px;
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  fill: var(--node-text);
+  background-color: var(--node-background-input);
+}
+
 .object-node > .node-header > .collapse {
   cursor: pointer;
 }