[Feature] Dynamic additional information rendering in frontend (#282)

This implements a version of #274, relying on Pydantics built in JSON schema and JSON rendering.
Requires additional UI tagging in the ai model repo but will remove HTML tags.

Example scenario with filled information: 5882df9c-dae1-4d80-a40e-db4724271456/scenario/3a4d395a-6a6d-4154-8ce3-ced667fceec0

Reviewed-on: enviPath/enviPy#282
Co-authored-by: Tobias O <tobias.olenyi@envipath.com>
Co-committed-by: Tobias O <tobias.olenyi@envipath.com>
This commit is contained in:
2026-01-31 00:44:03 +13:00
committed by jebus
parent 9f63a9d4de
commit d80dfb5ee3
42 changed files with 3732 additions and 609 deletions

View File

@ -0,0 +1,135 @@
{% load static %}
<div>
<!-- Loading state -->
<template x-if="loading">
<div class="flex items-center justify-center p-4">
<span class="loading loading-spinner loading-md"></span>
</div>
</template>
<!-- Error state -->
<template x-if="error">
<div class="alert alert-error mb-4">
<span x-text="error"></span>
</div>
</template>
<!-- Schema form -->
<template x-if="schema && !loading">
<div class="space-y-4">
<!-- Title from schema -->
<template x-if="schema['x-title'] || schema.title">
<h4
class="text-lg font-semibold"
x-text="schema['x-title'] || schema.title"
></h4>
</template>
<!-- Render each field (ordered by ui:order) -->
<template x-for="fieldName in getFieldOrder()" :key="fieldName">
<div>
<!-- Text widget -->
<template
x-if="getWidget(fieldName, schema.properties[fieldName]) === 'text'"
>
<div
x-data="textWidget(fieldName, data, schema, uiSchema, fieldErrors, mode)"
>
{% include "components/widgets/text_widget.html" %}
</div>
</template>
<!-- Textarea widget -->
<template
x-if="getWidget(fieldName, schema.properties[fieldName]) === 'textarea'"
>
<div
x-data="textareaWidget(fieldName, data, schema, uiSchema, fieldErrors, mode)"
>
{% include "components/widgets/textarea_widget.html" %}
</div>
</template>
<!-- Number widget -->
<template
x-if="getWidget(fieldName, schema.properties[fieldName]) === 'number'"
>
<div
x-data="numberWidget(fieldName, data, schema, uiSchema, fieldErrors, mode)"
>
{% include "components/widgets/number_widget.html" %}
</div>
</template>
<!-- Select widget -->
<template
x-if="getWidget(fieldName, schema.properties[fieldName]) === 'select'"
>
<div
x-data="selectWidget(fieldName, data, schema, uiSchema, fieldErrors, mode)"
>
{% include "components/widgets/select_widget.html" %}
</div>
</template>
<!-- Checkbox widget -->
<template
x-if="getWidget(fieldName, schema.properties[fieldName]) === 'checkbox'"
>
<div
x-data="checkboxWidget(fieldName, data, schema, uiSchema, fieldErrors, mode)"
>
{% include "components/widgets/checkbox_widget.html" %}
</div>
</template>
<!-- Interval widget -->
<template
x-if="getWidget(fieldName, schema.properties[fieldName]) === 'interval'"
>
<div
x-data="intervalWidget(fieldName, data, schema, uiSchema, fieldErrors, mode)"
>
{% include "components/widgets/interval_widget.html" %}
</div>
</template>
<!-- PubMed link widget -->
<template
x-if="getWidget(fieldName, schema.properties[fieldName]) === 'pubmed-link'"
>
<div
x-data="pubmedWidget(fieldName, data, schema, uiSchema, fieldErrors, mode)"
>
{% include "components/widgets/pubmed_link_widget.html" %}
</div>
</template>
<!-- Compound link widget -->
<template
x-if="getWidget(fieldName, schema.properties[fieldName]) === 'compound-link'"
>
<div
x-data="compoundWidget(fieldName, data, schema, uiSchema, fieldErrors, mode)"
>
{% include "components/widgets/compound_link_widget.html" %}
</div>
</template>
</div>
</template>
<!-- Submit button (only in edit mode with endpoint) -->
<template x-if="mode === 'edit' && endpoint">
<div class="form-control mt-4">
<button class="btn btn-primary" @click="submit()" :disabled="loading">
<template x-if="loading">
<span class="loading loading-spinner loading-sm"></span>
</template>
<span x-text="loading ? 'Submitting...' : 'Submit'"></span>
</button>
</div>
</template>
</div>
</template>
</div>