From 62a147158044b25baefb1ba1a68bb059d9d052f8 Mon Sep 17 00:00:00 2001
From: mashehu <mashehu3@gmail.com>
Date: Mon, 26 Aug 2024 09:50:20 +0200
Subject: [PATCH] add more fields

---
 .../schema/SchemaListingElement.svelte        |   4 +-
 .../SchemaBuilderListing.svelte               | 115 +++---
 .../SchemaBuilderListingElement.svelte        | 372 ++++++++++++++----
 .../SchemaBuilderListingGroup.svelte          |  94 ++++-
 .../SchemaBuilderToolbar.svelte               |  21 -
 sites/schema/src/pages/schema_builder.astro   |  11 +-
 6 files changed, 457 insertions(+), 160 deletions(-)

diff --git a/sites/main-site/src/components/schema/SchemaListingElement.svelte b/sites/main-site/src/components/schema/SchemaListingElement.svelte
index 7e4d4e26d0..7bf34bf8f1 100644
--- a/sites/main-site/src/components/schema/SchemaListingElement.svelte
+++ b/sites/main-site/src/components/schema/SchemaListingElement.svelte
@@ -26,14 +26,14 @@
     class:collapse={property.hidden}
     class:show={$showHidden}
 >
-    <div id={title} class="col-12 col-md-3 title border-right border-secondary text-nowrap p-0 pe-2">
+    <div id={title} class="col-12 col-md-4 title border-right border-secondary text-nowrap p-0 pe-2">
         <a class="text-decoration-none d-block overflow-x-scroll" aria-hidden="true" tabindex="-1" href={'#' + title}
             ><i class="ms-1 fas invisible" aria-hidden="true" />
             <span class="">
                 {#if property.fa_icon}
                     <i class="fa fa-fw {property.fa_icon}" />
                 {/if}
-                <code>{title}<span class="opacity-50">:{property.type}</span></code>
+                <code>{title}</code><span class="opacity-50 font-monospace small">:{property.type}</span>
             </span>
         </a>
     </div>
diff --git a/sites/main-site/src/components/schema/schema-builder/SchemaBuilderListing.svelte b/sites/main-site/src/components/schema/schema-builder/SchemaBuilderListing.svelte
index c9e0f6fedb..171f975204 100644
--- a/sites/main-site/src/components/schema/schema-builder/SchemaBuilderListing.svelte
+++ b/sites/main-site/src/components/schema/schema-builder/SchemaBuilderListing.svelte
@@ -52,58 +52,85 @@
             // Handle the error, maybe show an error message to the user
         }
     });
+    const removeGroup = (name) => {
+        let result = confirm('Are you sure you want to remove this group?');
+        if (!result) return;
+        delete schema?.definitions[name];
+        schema = { ...schema };
+    };
 </script>
 
-<SchemaBuilderToolbar bind:schema>
-    <div class="d-flex">
+<div>
+    <SchemaBuilderToolbar bind:schema>
+        <div class="d-flex">
+            <button
+                class="btn btn-outline-secondary"
+                on:click={() => {
+                    collapseGroups = !collapseGroups;
+                }}>Collapse Groups</button
+            >
+        </div>
         <button
-            class="btn btn-outline-secondary"
+            id="finish"
+            class="btn btn-primary"
+            class:disabled={status !== 'loaded'}
             on:click={() => {
-                collapseGroups = !collapseGroups;
-            }}>Collapse Groups</button
+                postSchema('web_builder_edited');
+            }}>Finish</button
         >
-    </div>
-    <button
-        id="finish"
-        class="btn btn-primary"
-        class:disabled={status !== 'loaded'}
-        on:click={() => {
-            postSchema('web_builder_edited');
-        }}>Finish</button
-    >
-</SchemaBuilderToolbar>
+    </SchemaBuilderToolbar>
 
-<div class="border rounded-md" class:border-success={status === 'saved'}>
-    {#if status === 'loading'}
-        <p>Loading schema...</p>
-    {:else if status === 'loaded'}
-        <div class="p-2" class:collapse={collapseGroups}>
-            {#each Object.keys(schema[defName]) as key (key)}
-                <SchemaBuilderListingGroup name={key} {schema}></SchemaBuilderListingGroup>
-            {/each}
-            <div data-dnd-indicator hidden style="height: 20px; background-color: red; width: 100%;"></div>
+    <div class="d-flex flex-column flex-xxl-row">
+        <div class="w-75">
+            <div class="border rounded-md" class:border-success={status === 'saved'}>
+                {#if status === 'loading'}
+                    <p>Loading schema...</p>
+                {:else if status === 'loaded'}
+                    <div class="p-2" class:collapse={collapseGroups}>
+                        {#each Object.keys(schema[defName]) as key (key)}
+                            <SchemaBuilderListingGroup name={key} {schema}>
+                                <button
+                                    slot="delete-group"
+                                    class="btn btn-outline-danger delete-btn"
+                                    on:click={() => removeGroup(key)}
+                                >
+                                    <i class="fas fa-trash"></i>
+                                </button>
+                            </SchemaBuilderListingGroup>
+                        {/each}
+                        <div data-dnd-indicator hidden style="height: 20px; background-color: red; width: 100%;"></div>
+                    </div>
+                {:else if (status = 'saved')}
+                    <p class="m-2">Schema saved! See terminal log for more details.</p>
+                {/if}
+            </div>
         </div>
-    {:else if (status = 'saved')}
-        <p class="m-2">Schema saved! See terminal log for more details.</p>
-    {/if}
-</div>
-<figure>
-    <figcaption
-        data-rehype-pretty-code-title=""
-        data-language="json"
-        class="d-flex align-items-center justify-content-between"
-    >
-        <span><i class="fa-solid fa-database ms-1 me-2"></i>nf-params.json</span><CopyButton
-            text={JSON.stringify(schema, null, 2)}
-            label="Copy Schema <i class='fa-regular fa-clipboard'></i>"
-            copiedLabel="Copied Schema <i class='fa-regular px-1 fa-clipboard-check' />"
-            classes={'m-2  copy-code-button btn btn-sm btn-outline-secondary opacity-50'}
-            copiedClasses={'m-2 copy-code-button btn btn-sm btn-outline-success'}
-        />
-    </figcaption>
-    <pre class="text-secondary p-0">
+        <figure class="w-25">
+            <figcaption
+                data-rehype-pretty-code-title=""
+                data-language="json"
+                class="d-flex align-items-center justify-content-between"
+            >
+                <span><i class="fa-solid fa-database ms-1 me-2"></i>nf-params.json</span><CopyButton
+                    text={JSON.stringify(schema, null, 2)}
+                    label="Copy Schema <i class='fa-regular fa-clipboard'></i>"
+                    copiedLabel="Copied Schema <i class='fa-regular px-1 fa-clipboard-check' />"
+                    classes={'m-2  copy-code-button btn btn-sm btn-outline-secondary opacity-50'}
+                    copiedClasses={'m-2 copy-code-button btn btn-sm btn-outline-success'}
+                />
+            </figcaption>
+            <pre class="text-secondary p-0">
         <code class="" data-language="json">
             {JSON.stringify(schema, null, 2)}
         </code>
     </pre>
-</figure>
+        </figure>
+    </div>
+</div>
+
+<style lang="scss">
+    .delete-btn:not(:hover) {
+        color: var(--bs-tertiary-color);
+        border-color: var(--bs-tertiary-color);
+    }
+</style>
diff --git a/sites/main-site/src/components/schema/schema-builder/SchemaBuilderListingElement.svelte b/sites/main-site/src/components/schema/schema-builder/SchemaBuilderListingElement.svelte
index f6466bc181..1c8f142deb 100644
--- a/sites/main-site/src/components/schema/schema-builder/SchemaBuilderListingElement.svelte
+++ b/sites/main-site/src/components/schema/schema-builder/SchemaBuilderListingElement.svelte
@@ -9,99 +9,320 @@
     $: schemaEntry = schema[name];
 
     const updateSchema = (event, propName: string) => {
-        schema[name][propName] = event.target.value;
+        let value = event.target.value;
+        if (propName === 'enum') {
+            value = value.split(',').map((item) => item.trim());
+        }
+        schema[name][propName] = value;
+        if (schemaEntry.pattern && (propName === 'default' || propName === 'enum')) {
+            checkPattern(propName);
+        }
+        if (
+            schemaEntry.multipleOf &&
+            (propName === 'default' || propName === 'minimum' || propName === 'maximum' || propName === 'multipleOf')
+        ) {
+            checkMultipleOf();
+        }
     };
-
     const schemaTypes = ['string', 'number', 'integer', 'boolean'];
+    let validation: {} = {};
+    const checkPattern = (key) => {
+        // check if default value and enum values match the pattern
+        if (schemaEntry.pattern) {
+            if (key === 'default' && schemaEntry.default) {
+                if (!schemaEntry.default.match(schemaEntry.pattern)) {
+                    validation['default'] = false;
+                } else {
+                    validation['default'] = true;
+                }
+            } else if (key === 'enum' && schemaEntry.enum) {
+                for (let i = 0; i < schemaEntry.enum.length; i++) {
+                    if (!schemaEntry.enum[i].match(schemaEntry.pattern)) {
+                        validation['enum'] = false;
+                        break;
+                    }
+                }
+                validation['enum'] = true;
+            }
+        }
+    };
+    const checkMultipleOf = () => {
+        if (schemaEntry.multipleOf) {
+            // check if default, minimum and maximum are multiples of multipleOf
+            if (schemaEntry.default) {
+                if (schemaEntry.default % schemaEntry.multipleOf !== 0) {
+                    validation['default'] = false;
+                } else {
+                    validation['default'] = true;
+                }
+            }
+            if (schemaEntry.minimum) {
+                if (schemaEntry.minimum % schemaEntry.multipleOf !== 0) {
+                    validation['minimum'] = false;
+                } else {
+                    validation['minimum'] = true;
+                }
+            }
+            if (schemaEntry.maximum) {
+                if (schemaEntry.maximum % schemaEntry.multipleOf !== 0) {
+                    validation['maximum'] = false;
+                } else {
+                    validation['maximum'] = true;
+                }
+            }
+        }
+    };
 </script>
 
 <div class="row border align-items-center pt-2">
-    <div data-dnd-handle class="col-auto align-self-center border-end">
-        <i class="fas fa-grip-vertical"></i>
+    <div class="row align-items-center">
+        <div data-dnd-handle class="col-auto border-end">
+            <i class="fas fa-grip-vertical"></i>
+        </div>
+
+        <div class="input-group col">
+            <span class="input-group-text" id="basic-addon1"> <i id="icon" class={schemaEntry.fa_icon}></i></span>
+            <div class="form-floating">
+                <input type="text" class="form-control" placeholder="icon" value={schemaEntry.fa_icon} />
+                <label for="icon">icon</label>
+            </div>
+        </div>
+        <div class="col">
+            <slot />
+        </div>
+        <div class="col">
+            <div class="form-floating">
+                <select
+                    id="type"
+                    class="form-select param_key param_type"
+                    data-param_key="type"
+                    on:change={(e) => updateSchema(e, 'type')}
+                >
+                    {#each schemaTypes as type}
+                        <option selected={type == schemaEntry.type} value={type}>{type}</option>
+                    {/each}
+                </select>
+                <label for="type">type</label>
+            </div>
+        </div>
+        <div class="col-auto d-flex flex-column">
+            <label>
+                <input
+                    type="checkbox"
+                    class="form-check-input"
+                    data-param_key="required"
+                    bind:checked={required}
+                    on:change={(e) => updateSchema(e, 'required')}
+                />
+                required
+            </label>
+
+            <label>
+                <input
+                    type="checkbox"
+                    class="form-check-input"
+                    data-param_key="required"
+                    bind:checked={schemaEntry.hidden}
+                    on:change={(e) => updateSchema(e, 'hidden')}
+                />
+                hidden
+            </label>
+        </div>
     </div>
-    <button class="btn col-auto align-self-center">
-        <i class={schemaEntry.fa_icon}></i>
-    </button>
-    <div class="col">
-        <slot />
+    <div class="row">
+        <div class="col">
+            <div class="form-floating m-3">
+                <textarea
+                    class="description-textarea form-control"
+                    id="description"
+                    placeholder="description"
+                    data-param_key="description"
+                    on:change={(e) => updateSchema(e, 'description')}
+                    on:keydown={(e) => updateSchema(e, 'description')}>{sanitizeHtml(schemaEntry.description)}</textarea
+                >
+                <label for="description">description</label>
+            </div>
+        </div>
     </div>
-    <div class="d-sm-none w-100"></div>
-    <div class="col">
-        <div class="form-floating">
-            <textarea
-                class="description-textarea form-control"
-                id="description"
-                placeholder="description"
-                data-param_key="description"
-                on:change={(e) => updateSchema(e, 'description')}
-                on:keydown={(e) => updateSchema(e, 'description')}>{sanitizeHtml(schemaEntry.description)}</textarea
-            >
-            <label for="description">Description</label>
+    <div class="row">
+        <div class="col">
+            <div class="form-floating m-3">
+                <textarea
+                    class="help_text-textarea form-control"
+                    id="help_text"
+                    placeholder="help_text"
+                    data-param_key="help_text"
+                    on:change={(e) => updateSchema(e, 'help_text')}
+                    on:keydown={(e) => updateSchema(e, 'help_text')}>{sanitizeHtml(schemaEntry.help_text)}</textarea
+                >
+                <label for="help_text">help text</label>
+            </div>
         </div>
     </div>
+    <div class="d-sm-none w-100"></div>
 
     <div class="col">
         <div class="form-floating">
-            <textarea
-                class="help_text-textarea form-control"
-                id="help_text"
-                placeholder="help_text"
-                data-param_key="help_text"
-                on:change={(e) => updateSchema(e, 'help_text')}
-                on:keydown={(e) => updateSchema(e, 'help_text')}>{sanitizeHtml(schemaEntry.help_text)}</textarea
-            >
-            <label for="help_text">help text</label>
+            {#if schemaEntry.type == 'boolean'}
+                <label for="default">default</label>
+                <input
+                    type="checkbox"
+                    class="form-check-input"
+                    class:is-invalid={validation['default'] === false}
+                    class:is-valid={validation['default'] === true}
+                    id="default"
+                    data-param_key="default"
+                    value={schemaEntry.default ?? ''}
+                    placeholder="default"
+                    on:input={(e) => {
+                        updateSchema(e, 'default');
+                    }}
+                />
+            {:else}
+                <input
+                    type={schemaEntry.type == 'integer' || schemaEntry.type == 'number' ? 'number' : 'text'}
+                    class="form-control w-auto"
+                    class:is-invalid={validation['default'] === false}
+                    class:is-valid={validation['default'] === true}
+                    id="default"
+                    data-param_key="default"
+                    value={schemaEntry.default ?? ''}
+                    placeholder="default"
+                    on:input={(e) => updateSchema(e, 'default')}
+                />
+                <label for="default">default</label>
+            {/if}
         </div>
     </div>
     <div class="col-auto">
-        <label for="type">Type</label>
-
-        <select id="type" class="param_key param_type" data-param_key="type" on:change={(e) => updateSchema(e, 'type')}>
-            {#each schemaTypes as type}
-                <option selected={type == schemaEntry.type} value={type}>{type}</option>
-            {/each}
-        </select>
-    </div>
-    <div class="d-sm-none w-100"></div>
-
-    <div class="col">
-        <label
-            >Default
+        <div class="form-floating">
             <input
+                id="enum"
                 type="text"
-                class=""
-                data-param_key="default"
-                value={schemaEntry.default ?? ''}
-                placeholder="default"
-                on:input={(e) => updateSchema(e, 'default')}
-            />
-        </label>
-    </div>
-    <!-- check box for required -->
-    <div class="col-auto align-self-center">
-        <label>
-            <input
-                type="checkbox"
-                class="form-check-input"
-                data-param_key="required"
-                bind:checked={required}
-                on:change={(e) => updateSchema(e, 'required')}
-            />
-            required
-        </label>
-    </div>
-    <div class="col-auto align-self-center">
-        <label>
-            <input
-                type="checkbox"
-                class="form-check-input"
-                data-param_key="required"
-                bind:checked={schemaEntry.hidden}
-                on:change={(e) => updateSchema(e, 'hidden')}
+                class="form-control fit-content"
+                data-param_key="enum"
+                class:is-invalid={validation['enum'] === false}
+                class:is-valid={validation['enum'] === true}
+                value={schemaEntry.enum ? schemaEntry.enum.join(', ') : ''}
+                placeholder="value1, value2, value3"
+                on:change={(e) => updateSchema(e, 'enum')}
             />
-            hidden
-        </label>
+            <label for="enum">enum</label>
+        </div>
     </div>
+    {#if schemaEntry.type == 'string'}
+        <div class="col-auto">
+            <div class="form-floating">
+                <input
+                    id="pattern"
+                    type="text"
+                    class="form-control"
+                    data-param_key="required"
+                    value={schemaEntry.pattern ?? ''}
+                    placeholder="pattern"
+                    on:change={(e) => {
+                        updateSchema(e, 'pattern');
+                    }}
+                />
+                <label for="pattern">pattern</label>
+            </div>
+            <small class="form-text text-muted">
+                Regular expression, used to validate the input string
+                <a
+                    href="https://json-schema.org/understanding-json-schema/reference/string.html#regular-expressions"
+                    target="_blank"
+                    data-bs-toggle="tooltip"
+                    title="See help about JSON schema regular expressions"
+                >
+                    <i class="fas fa-question-circle"></i>
+                </a>
+            </small>
+        </div>
+        <div class="col-auto">
+            <div class="form-floating">
+                <select
+                    id="format"
+                    class="form-select param_key param_format"
+                    data-param_key="format"
+                    on:change={(e) => updateSchema(e, 'format')}
+                >
+                    <option value="">none</option>
+                    {#each ['date-time', 'time', 'date', 'duration', 'email'] as format}
+                        <option selected={format == schemaEntry.format} value={format}>{format}</option>
+                    {/each}
+                </select>
+                <label for="type">format</label>
+            </div>
+            <small class="form-text text-muted">
+                Special format of the string, e.g., date or e-mail, used to validate the input string
+                <a
+                    href="https://json-schema.org/understanding-json-schema/reference/string#format"
+                    target="_blank"
+                    data-bs-toggle="tooltip"
+                    title="See help about JSON schema formats"
+                >
+                    <i class="fas fa-question-circle"></i>
+                </a>
+            </small>
+        </div>
+    {/if}
+    {#if schemaEntry.type == 'number' || schemaEntry.type == 'integer'}
+        <div class="col-auto">
+            <div class="form-floating">
+                <input
+                    id="minimum"
+                    type="number"
+                    class="form-control"
+                    class:is-invalid={validation['minimum'] === false}
+                    class:is-valid={validation['minimum'] === true}
+                    data-param_key="minimum"
+                    value={schemaEntry.minimum ?? ''}
+                    placeholder="minimum"
+                    step={schemaEntry.type == 'integer' ? 1 : schemaEntry.multipleOf ?? 0.1}
+                    on:change={(e) => updateSchema(e, 'minimum')}
+                />
+                <label for="minimum">minimum</label>
+            </div>
+        </div>
+        <div class="col-auto">
+            <div class="form-floating">
+                <input
+                    id="maximum"
+                    type="number"
+                    class="form-control"
+                    data-param_key="maximum"
+                    class:is-invalid={validation['maximum'] === false}
+                    class:is-valid={validation['maximum'] === true}
+                    min={schemaEntry.minimum ?? ''}
+                    max={schemaEntry.maximum ?? ''}
+                    value={schemaEntry.maximum ?? ''}
+                    placeholder="maximum"
+                    step={schemaEntry.type == 'integer' ? 1 : schemaEntry.multipleOf ?? 0.1}
+                    on:change={(e) => updateSchema(e, 'maximum')}
+                />
+                <label for="maximum">maximum</label>
+            </div>
+        </div>
+        <div class="col-auto">
+            <div class="form-floating">
+                <input
+                    id="multipleOf"
+                    type="number"
+                    class="form-control"
+                    class:is-invalid={validation['multipleOf'] === false}
+                    class:is-valid={validation['multipleOf'] === true}
+                    min={schemaEntry.type == 'integer' ? 1 : ''}
+                    data-param_key="multipleOf"
+                    value={schemaEntry.multipleOf ?? ''}
+                    placeholder="multipleOf"
+                    on:change={(e) => updateSchema(e, 'multipleOf')}
+                />
+                <label for="multipleOf">multipleOf</label>
+            </div>
+        </div>
+    {/if}
+
+    <slot name="delete"></slot>
 </div>
 
 <style lang="scss">
@@ -109,4 +330,7 @@
     .help_text-textarea {
         height: 5rem;
     }
+    .form-control:focus {
+        width: auto;
+    }
 </style>
diff --git a/sites/main-site/src/components/schema/schema-builder/SchemaBuilderListingGroup.svelte b/sites/main-site/src/components/schema/schema-builder/SchemaBuilderListingGroup.svelte
index 09a7f84f2b..d6d3d9dc56 100644
--- a/sites/main-site/src/components/schema/schema-builder/SchemaBuilderListingGroup.svelte
+++ b/sites/main-site/src/components/schema/schema-builder/SchemaBuilderListingGroup.svelte
@@ -9,6 +9,8 @@
     showHidden.set(true);
 
     $: group = schema.definitions[name];
+
+    let fieldAdded = false;
     const updateSchemaKey = (e, oldKey) => {
         // handle edge cases
         const newKey = e.target.value;
@@ -28,29 +30,87 @@
         }
         schema.definitions[name].properties = newSchema;
     };
+    const addField = () => {
+        let newName = 'new_field';
+        // check if field already exists and add number if it does (or add 1 to the number if also a number already exists)
+        let i = 1;
+        while (newName in schema.definitions[name].properties) {
+            if (i === 1) {
+                newName = `${newName}_${i}`;
+            } else {
+                newName = newName.replace(/_\d+$/, `_${i}`);
+            }
+            i++;
+        }
+
+        schema.definitions[name].properties = {
+            [newName]: {
+                type: 'string',
+                description: 'New Field',
+            },
+            ...schema.definitions[name].properties,
+        };
+        fieldAdded = true;
+        // reset fieldAdded after 1 second
+        setTimeout(() => {
+            fieldAdded = false;
+        }, 1000);
+    };
+
+    const removeField = (property) => {
+        let result = confirm('Are you sure you want to remove this field?');
+        if (!result) return;
+        delete schema.definitions[name].properties[property];
+        schema.definitions[name].properties = { ...schema.definitions[name].properties };
+    };
 </script>
 
-<div class="border border-success">
-    <h3><i class={`fa ${group.fa_icon} me-2 fa-fw`}></i>{name}</h3>
+<div class="border border-success bg-bo">
+    <div class="d-flex justify-content-between border rounded p-2 mb-2">
+        <h3><i class={`fa ${group.fa_icon} me-2 fa-fw`}></i>{name}</h3>
+        <slot name="delete-group"></slot>
+        <button class="btn btn-outline-secondary" on:click={addField}>
+            {#if fieldAdded}
+                <span><i class="fas fa-check"></i> Field Added</span>
+            {:else}
+                <span><i class="fas fa-plus"></i> Add Field</span>
+            {/if}
+        </button>
+    </div>
     {#if group.description}
         <p>{group.description}</p>
     {/if}
     {#each Object.keys(group.properties) as key (key)}
-        <SchemaListingElement title={key} property={group.properties[key]} />
-        <SchemaBuilderListingElement bind:schema={group.properties} name={key} required={group.required?.includes(key)}>
-            <div class="form-floating">
-                <input
-                    id="param_id"
-                    type="text"
-                    class="font-monospace form-control"
-                    value={key}
-                    placeholder="ID"
-                    on:change={(e) => {
-                        updateSchemaKey(e, key);
-                    }}
-                />
-                <label for="param_id">ID </label>
+        <div class="grid justify-items-stretch">
+            <div class="g-col-12 g-col-md-6">
+                <SchemaListingElement title={key} property={group.properties[key]} />
+            </div>
+            <div class="g-col-12 g-col-md-6 bg-body-tertiary">
+                <SchemaBuilderListingElement
+                    bind:schema={group.properties}
+                    name={key}
+                    required={group.required?.includes(key)}
+                >
+                    <div class="form-floating">
+                        <input
+                            id="param_id"
+                            type="text"
+                            class="font-monospace form-control"
+                            value={key}
+                            placeholder="ID"
+                            on:change={(e) => {
+                                updateSchemaKey(e, key);
+                            }}
+                        />
+                        <label for="param_id">ID </label>
+                    </div>
+                    <div class="col-auto ms-auto" slot="delete">
+                        <button class="btn btn-outline-danger" on:click={() => removeField(key)}>
+                            <i class="fas fa-trash"></i>
+                        </button>
+                    </div>
+                </SchemaBuilderListingElement>
             </div>
-        </SchemaBuilderListingElement>
+        </div>
     {/each}
 </div>
diff --git a/sites/main-site/src/components/schema/schema-builder/SchemaBuilderToolbar.svelte b/sites/main-site/src/components/schema/schema-builder/SchemaBuilderToolbar.svelte
index 97867cc4a8..4be5149f66 100644
--- a/sites/main-site/src/components/schema/schema-builder/SchemaBuilderToolbar.svelte
+++ b/sites/main-site/src/components/schema/schema-builder/SchemaBuilderToolbar.svelte
@@ -1,27 +1,6 @@
 <script lang="ts">
-    export let schema = {};
-
-    const addField = () => {
-        console.log('add field');
-        schema.definitions['new-group'] = {
-            properties: {
-                'new-field': {
-                    type: 'string',
-                    description: '',
-                    fa_icon: '',
-                    help_text: '',
-                    pattern: '',
-                },
-            },
-        };
-    };
 </script>
 
 <div class="d-flex justify-content-between border rounded p-2 mb-2">
-    <div class="d-flex">
-        <button class="btn btn-outline-secondary me-2" on:click={addField}>Add Field</button>
-        <button class="btn btn-outline-secondary me-2 disabled">Add Group</button>
-    </div>
-
     <slot />
 </div>
diff --git a/sites/schema/src/pages/schema_builder.astro b/sites/schema/src/pages/schema_builder.astro
index 16e3769b53..a83fad158c 100644
--- a/sites/schema/src/pages/schema_builder.astro
+++ b/sites/schema/src/pages/schema_builder.astro
@@ -3,8 +3,15 @@ import PageLayout from '@layouts/PageLayout.astro';
 import SchemaBuilderListing from '@components/schema/schema-builder/SchemaBuilderListing.svelte';
 ---
 
-<PageLayout title=" Schema Builder" subtitle="Create or modify your `nextflow_schema.json` file." showNavbar={false}>
-    <SchemaBuilderListing client:idle />
+<PageLayout
+    title=" Schema Builder"
+    subtitle="Create or modify your `nextflow_schema.json` file."
+    showNavbar={false}
+    mainpage_container={false}
+>
+    <div class="container-fluid">
+        <SchemaBuilderListing client:idle />
+    </div>
 </PageLayout>
 <style>
     :root {