fix: Add preset loading functionality for multiple tabs #64
Conversation
WalkthroughThe changes introduce a preset management system for formatter, compare, and codegen tabs by adding preset dropdowns to the UI, corresponding event handlers, and a centralized Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PresetDropdown as Preset Dropdown
participant JS as JavaScript Functions
participant PRESETS as window.PRESETS
participant Tab as Active Tab
User->>PresetDropdown: Selects a preset
PresetDropdown->>JS: Triggers onchange event
JS->>PRESETS: Retrieves selected preset data
JS->>Tab: Loads preset data into active tab
Assessment against linked issues
Possibly related PRs
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Hello @Shravan20 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (1)
index.js (1)
1769-1796: Add null safety to populatePresetSelects function.The function assumes
window.PRESETSand its properties exist, which could cause errors if the presets.js file fails to load.Add defensive checks:
function populatePresetSelects() { + if (!window.PRESETS) { + console.error("Presets not loaded"); + return; + } + // Populate formatter presets const formatterSelect = document.querySelector("#formatter-tabs-container .preset-select"); - Object.keys(window.PRESETS.formatter).forEach((key) => { + if (formatterSelect && window.PRESETS.formatter) { + Object.keys(window.PRESETS.formatter).forEach((key) => { const option = document.createElement("option"); option.value = key; option.textContent = window.PRESETS.formatter[key].name; formatterSelect.appendChild(option); }); + } // Populate compare presets const compareSelect = document.querySelector("#compare-tabs-container .preset-select"); - Object.keys(window.PRESETS.compare).forEach((key) => { + if (compareSelect && window.PRESETS.compare) { + Object.keys(window.PRESETS.compare).forEach((key) => { const option = document.createElement("option"); option.value = key; option.textContent = window.PRESETS.compare[key].name; compareSelect.appendChild(option); }); + } // Populate codegen presets const codegenSelect = document.querySelector("#codegen-tabs-container .preset-select"); - Object.keys(window.PRESETS.codegen).forEach((key) => { + if (codegenSelect && window.PRESETS.codegen) { + Object.keys(window.PRESETS.codegen).forEach((key) => { const option = document.createElement("option"); option.value = key; option.textContent = window.PRESETS.codegen[key].name; codegenSelect.appendChild(option); }); + } }
| .preset-select { | ||
| margin-left: 10px; | ||
| padding: 5px 10px; | ||
| border: 1px solid var(--border-color); | ||
| border-radius: 4px; | ||
| background-color: var(--bg-color); | ||
| color: var(--text-color); | ||
| font-size: 14px; | ||
| cursor: pointer; | ||
| transition: border-color 0.2s; | ||
| } | ||
|
|
||
| .preset-select:hover { | ||
| border-color: var(--primary-color); | ||
| } | ||
|
|
||
| .preset-select:focus { | ||
| outline: none; | ||
| border-color: var(--primary-color); | ||
| box-shadow: 0 0 0 2px var(--primary-color-light); | ||
| } |
There was a problem hiding this comment.
CSS variables are undefined and may cause styling issues.
The .preset-select class uses CSS variables (--border-color, --bg-color, --text-color, --primary-color, --primary-color-light) that are not defined anywhere in the CSS file. This will cause the styles to fall back to browser defaults.
Additionally, this introduces inconsistency as the rest of the CSS file uses hardcoded color values (e.g., #007bff for primary color).
Consider either:
- Define the CSS variables at the root level:
+:root {
+ --border-color: #ccc;
+ --bg-color: #ffffff;
+ --text-color: #333;
+ --primary-color: #007bff;
+ --primary-color-light: rgba(0, 123, 255, 0.2);
+}
+
+body.dark-mode {
+ --border-color: #555;
+ --bg-color: #2e2e2e;
+ --text-color: #e0e0e0;
+}
+
.preset-select {
margin-left: 10px;
padding: 5px 10px;- Or use hardcoded values consistent with the rest of the file:
.preset-select {
margin-left: 10px;
padding: 5px 10px;
- border: 1px solid var(--border-color);
+ border: 1px solid #ccc;
border-radius: 4px;
- background-color: var(--bg-color);
- color: var(--text-color);
+ background-color: #ffffff;
+ color: #333;
font-size: 14px;
cursor: pointer;
transition: border-color 0.2s;
}
.preset-select:hover {
- border-color: var(--primary-color);
+ border-color: #007bff;
}
.preset-select:focus {
outline: none;
- border-color: var(--primary-color);
- box-shadow: 0 0 0 2px var(--primary-color-light);
+ border-color: #007bff;
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}🤖 Prompt for AI Agents
In index.css around lines 1201 to 1221, the CSS variables used in the
.preset-select class are not defined, causing fallback to browser defaults and
inconsistency with the rest of the file. Fix this by either defining these
variables (e.g., --border-color, --bg-color, --text-color, --primary-color,
--primary-color-light) at the :root selector with appropriate color values or
replace the variables in the .preset-select styles with the hardcoded color
values used elsewhere in the CSS to maintain consistency.
| <select onchange="loadFormatterPreset(this.value)" class="preset-select"> | ||
| <option value="">-- Load Preset --</option> | ||
| </select> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add accessibility attributes to preset select elements.
The preset select elements lack accessibility attributes, which makes it difficult for screen reader users to understand their purpose.
Add aria-label attributes to improve accessibility:
-<select onchange="loadFormatterPreset(this.value)" class="preset-select">
+<select onchange="loadFormatterPreset(this.value)" class="preset-select" aria-label="Load formatter preset">
<option value="">-- Load Preset --</option>
</select>-<select onchange="loadComparePreset(this.value)" class="preset-select">
+<select onchange="loadComparePreset(this.value)" class="preset-select" aria-label="Load compare preset">
<option value="">-- Load Preset --</option>
</select>-<select onchange="loadCodegenPreset(this.value)" class="preset-select">
+<select onchange="loadCodegenPreset(this.value)" class="preset-select" aria-label="Load code generator preset">
<option value="">-- Load Preset --</option>
</select>Also applies to: 118-120, 133-135
🤖 Prompt for AI Agents
In index.html at lines 103-105, 118-120, and 133-135, the preset select elements
lack accessibility attributes, specifically aria-labels, which are necessary for
screen readers to convey their purpose. Add appropriate aria-label attributes to
each select element to describe their function clearly for assistive
technologies.
| name: "Sample JSON", | ||
| content: JSON.stringify( | ||
| { | ||
| name: "Eliezer Nsengi", |
There was a problem hiding this comment.
Replace personal information with generic sample data.
The sample JSON contains what appears to be a real person's name. For privacy and professional reasons, sample data should use clearly fictional names.
Replace with generic sample data:
- name: "Eliezer Nsengi",
+ name: "John Doe",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| name: "Eliezer Nsengi", | |
| name: "John Doe", |
🤖 Prompt for AI Agents
In presets.js at line 8, replace the personal name "Eliezer Nsengi" with a
generic, clearly fictional name to avoid using real personal information in
sample data. Choose a common placeholder name like "John Doe" or "Jane Smith" to
maintain professionalism and privacy.
| id: "{{datatype.uuid}}", | ||
| name: "{{name.fullName}}", | ||
| email: "{{internet.email}}", | ||
| age: "{{datatype.number({'min': 18, 'max': 65})}}", | ||
| address: { | ||
| street: "{{address.streetAddress}}", | ||
| city: "{{address.city}}", | ||
| country: "{{address.country}}", | ||
| }, | ||
| isActive: "{{datatype.boolean}}", | ||
| }, | ||
| }, | ||
| Product: { | ||
| name: "Product", | ||
| schema: { | ||
| id: "{{datatype.uuid}}", | ||
| name: "{{commerce.productName}}", | ||
| price: "{{commerce.price}}", | ||
| description: "{{commerce.productDescription}}", | ||
| inStock: "{{datatype.boolean}}", | ||
| categories: "{{commerce.department}}", | ||
| }, |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify faker.js template syntax parsing.
The mockgen presets use faker.js template syntax (e.g., {{datatype.uuid}}).
Ensure that the mockFromSchema function in index.js correctly handles this template syntax. Run this script to verify the implementation:
🏁 Script executed:
#!/bin/bash
# Description: Verify that mockFromSchema function properly handles the faker.js template syntax
# Search for the mockFromSchema function implementation
ast-grep --pattern 'function mockFromSchema($_) {
$$$
}'
# Also check for any regex patterns that parse the template syntax
rg -A 5 '{{.*}}' --type jsLength of output: 1107
🏁 Script executed:
#!/bin/bash
# Locate and inspect resolveFakerPath implementation in index.js
rg -n "function resolveFakerPath" -n index.js
rg -A 10 -n "function resolveFakerPath" -n index.js
# Look for any regex that strips or parses '{{...}}' in index.js
rg -n '\\{\\{[^}]*\\}\\}' -n index.jsLength of output: 746
Handle faker.js template syntax in mockFromSchema
The current implementation in mockFromSchema passes raw strings like "{{datatype.uuid}}" directly to resolveFakerPath, causing an invalid-path error. We need to strip the double-brace syntax before resolution.
• Location: index.js in mockFromSchema, around lines 1210–1217
• Add a regex match for {{…}} and extract the inner path
Suggested diff:
if (typeof schema === "string") {
if (schema === "boolean") return Math.random() < 0.5;
if (schema.startsWith("number|")) {
const [min, max] = schema.split("|")[1].split("-").map(Number);
return faker.number.int({ min, max });
}
- // currently fails on "{{datatype.uuid}}"
- return resolveFakerPath(schema);
+ // Handle faker.js template syntax {{path.to.method}}
+ const templateMatch = schema.match(/^{{\s*([\w.]+)\s*}}$/);
+ if (templateMatch) {
+ return resolveFakerPath(templateMatch[1]);
+ }
+ return resolveFakerPath(schema);
}This ensures "{{datatype.uuid}}" is correctly resolved to faker.datatype.uuid().
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| id: "{{datatype.uuid}}", | |
| name: "{{name.fullName}}", | |
| email: "{{internet.email}}", | |
| age: "{{datatype.number({'min': 18, 'max': 65})}}", | |
| address: { | |
| street: "{{address.streetAddress}}", | |
| city: "{{address.city}}", | |
| country: "{{address.country}}", | |
| }, | |
| isActive: "{{datatype.boolean}}", | |
| }, | |
| }, | |
| Product: { | |
| name: "Product", | |
| schema: { | |
| id: "{{datatype.uuid}}", | |
| name: "{{commerce.productName}}", | |
| price: "{{commerce.price}}", | |
| description: "{{commerce.productDescription}}", | |
| inStock: "{{datatype.boolean}}", | |
| categories: "{{commerce.department}}", | |
| }, | |
| // In index.js, inside mockFromSchema around where you handle string schemas: | |
| if (typeof schema === "string") { | |
| if (schema === "boolean") return Math.random() < 0.5; | |
| if (schema.startsWith("number|")) { | |
| const [min, max] = schema.split("|")[1].split("-").map(Number); | |
| return faker.number.int({ min, max }); | |
| } | |
| // Handle faker.js template syntax {{path.to.method}} | |
| const templateMatch = schema.match(/^{{\s*([\w.]+)\s*}}$/); | |
| if (templateMatch) { | |
| return resolveFakerPath(templateMatch[1]); | |
| } | |
| return resolveFakerPath(schema); | |
| } |
🤖 Prompt for AI Agents
In index.js around lines 1210 to 1217, the mockFromSchema function currently
passes faker template strings like "{{datatype.uuid}}" directly to
resolveFakerPath, causing invalid path errors. To fix this, update
mockFromSchema to detect strings matching the "{{...}}" pattern, extract the
inner content using a regex, and pass only that inner path (e.g.,
"datatype.uuid") to resolveFakerPath. This will allow correct resolution of
faker methods and proper mock data generation.
| function loadMockPreset(name) { | ||
| if (presets[name]) { | ||
| document.getElementById("mock-schema-input").value = JSON.stringify( | ||
| presets[name], | ||
| null, | ||
| 2 | ||
| ); | ||
| if (!name) return; | ||
|
|
||
| const preset = window.PRESETS.mockgen[name]; | ||
| if (!preset) return; | ||
|
|
||
| const schemaInput = document.getElementById('mock-schema-input'); | ||
| if (schemaInput) { | ||
| schemaInput.value = JSON.stringify(preset.schema, null, 2); | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Reset select element when no preset is selected.
The function returns early without resetting the select element value when no preset name is provided. This could leave the dropdown showing a previously selected preset name even though no preset is loaded.
Reset the select element value:
function loadMockPreset(name) {
+ const selectElement = document.querySelector('#mockgen-section select[onchange*="loadMockPreset"]');
if (!name) {
+ if (selectElement) selectElement.value = "";
return;
}
const preset = window.PRESETS.mockgen[name];
- if (!preset) return;
+ if (!preset) {
+ if (selectElement) selectElement.value = "";
+ return;
+ }
const schemaInput = document.getElementById('mock-schema-input');
if (schemaInput) {
schemaInput.value = JSON.stringify(preset.schema, null, 2);
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function loadMockPreset(name) { | |
| if (presets[name]) { | |
| document.getElementById("mock-schema-input").value = JSON.stringify( | |
| presets[name], | |
| null, | |
| 2 | |
| ); | |
| if (!name) return; | |
| const preset = window.PRESETS.mockgen[name]; | |
| if (!preset) return; | |
| const schemaInput = document.getElementById('mock-schema-input'); | |
| if (schemaInput) { | |
| schemaInput.value = JSON.stringify(preset.schema, null, 2); | |
| } | |
| } | |
| function loadMockPreset(name) { | |
| const selectElement = document.querySelector( | |
| '#mockgen-section select[onchange*="loadMockPreset"]' | |
| ); | |
| if (!name) { | |
| if (selectElement) selectElement.value = ""; | |
| return; | |
| } | |
| const preset = window.PRESETS.mockgen[name]; | |
| if (!preset) { | |
| if (selectElement) selectElement.value = ""; | |
| return; | |
| } | |
| const schemaInput = document.getElementById('mock-schema-input'); | |
| if (schemaInput) { | |
| schemaInput.value = JSON.stringify(preset.schema, null, 2); | |
| } | |
| } |
🤖 Prompt for AI Agents
In index.js around lines 1153 to 1163, the function loadMockPreset returns early
when no preset name is provided but does not reset the select element value,
causing the dropdown to show an outdated selection. To fix this, add code to
reset the select element's value to an empty string or default option before
returning when the name is falsy, ensuring the dropdown reflects that no preset
is selected.
| btn.classList.remove("drag-over"); | ||
|
|
||
| if (draggedBtn && draggedBtn !== button) { | ||
| container.insertBefore(draggedBtn, button); | ||
| if (draggedBtn && draggedBtn !== btn) { | ||
| container.insertBefore(draggedBtn, btn); |
There was a problem hiding this comment.
Fix undefined variable error in tab reordering.
The code uses an undefined variable btn instead of button, which will cause a runtime error.
Apply this fix:
- btn.classList.remove("drag-over");
+ button.classList.remove("drag-over");
- if (draggedBtn && draggedBtn !== btn) {
- container.insertBefore(draggedBtn, btn);
+ if (draggedBtn && draggedBtn !== button) {
+ container.insertBefore(draggedBtn, button);
saveGlobalState();
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| btn.classList.remove("drag-over"); | |
| if (draggedBtn && draggedBtn !== button) { | |
| container.insertBefore(draggedBtn, button); | |
| if (draggedBtn && draggedBtn !== btn) { | |
| container.insertBefore(draggedBtn, btn); | |
| button.classList.remove("drag-over"); | |
| if (draggedBtn && draggedBtn !== button) { | |
| container.insertBefore(draggedBtn, button); | |
| saveGlobalState(); | |
| } |
🤖 Prompt for AI Agents
In index.js around lines 1758 to 1761, the variable `btn` is used but not
defined, causing a runtime error. Replace all instances of `btn` with the
correctly defined variable `button` to fix the undefined variable error in the
tab reordering logic.
| function loadFormatterPreset(presetName) { | ||
| if (!presetName) return; | ||
|
|
||
| const preset = window.PRESETS.formatter[presetName]; | ||
| if (!preset) return; | ||
|
|
||
| const activeTab = document.querySelector("#formatter-tab-contents .json-tab-content.active"); | ||
| if (!activeTab) return; | ||
|
|
||
| const textarea = activeTab.querySelector(".json-input"); | ||
| if (textarea) { | ||
| textarea.value = preset.content; | ||
| updateFormatterPreview(activeTab.id); | ||
| } | ||
| } | ||
|
|
||
| function loadComparePreset(presetName) { | ||
| if (!presetName) return; | ||
|
|
||
| const preset = window.PRESETS.compare[presetName]; | ||
| if (!preset) return; | ||
|
|
||
| const activeTab = document.querySelector("#compare-tab-contents .json-tab-content.active"); | ||
| if (!activeTab) return; | ||
|
|
||
| const leftTextarea = activeTab.querySelector(".json-input-left"); | ||
| const rightTextarea = activeTab.querySelector(".json-input-right"); | ||
|
|
||
| if (leftTextarea && rightTextarea) { | ||
| leftTextarea.value = preset.leftContent; | ||
| rightTextarea.value = preset.rightContent; | ||
| compareJSONs(activeTab.id); | ||
| } | ||
| } | ||
|
|
||
| function loadCodegenPreset(presetName) { | ||
| if (!presetName) return; | ||
|
|
||
| const preset = window.PRESETS.codegen[presetName]; | ||
| if (!preset) return; | ||
|
|
||
| const activeTab = document.querySelector("#codegen-tab-contents .json-tab-content.active"); | ||
| if (!activeTab) return; | ||
|
|
||
| const textarea = activeTab.querySelector(".json-input"); | ||
| const langSelect = document.getElementById("lang-select-" + activeTab.id); | ||
|
|
||
| if (textarea && langSelect) { | ||
| textarea.value = preset.input; | ||
| langSelect.value = preset.lang; | ||
| generateCode(activeTab.id); | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling to preset loading functions.
The preset loading functions don't handle cases where preset data might be malformed or missing expected properties.
Add try-catch blocks and validation:
function loadFormatterPreset(presetName) {
if (!presetName) return;
const preset = window.PRESETS.formatter[presetName];
if (!preset) return;
const activeTab = document.querySelector("#formatter-tab-contents .json-tab-content.active");
if (!activeTab) return;
const textarea = activeTab.querySelector(".json-input");
if (textarea) {
+ try {
+ // Validate that content is valid JSON
+ JSON.parse(preset.content);
textarea.value = preset.content;
updateFormatterPreview(activeTab.id);
+ } catch (error) {
+ console.error("Invalid preset content:", error);
+ Swal.fire({
+ icon: "error",
+ title: "Invalid preset",
+ text: "The selected preset contains invalid JSON",
+ toast: true,
+ timer: 3000,
+ position: "top-end"
+ });
+ }
}
}Apply similar error handling to loadComparePreset and loadCodegenPreset functions.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function loadFormatterPreset(presetName) { | |
| if (!presetName) return; | |
| const preset = window.PRESETS.formatter[presetName]; | |
| if (!preset) return; | |
| const activeTab = document.querySelector("#formatter-tab-contents .json-tab-content.active"); | |
| if (!activeTab) return; | |
| const textarea = activeTab.querySelector(".json-input"); | |
| if (textarea) { | |
| textarea.value = preset.content; | |
| updateFormatterPreview(activeTab.id); | |
| } | |
| } | |
| function loadComparePreset(presetName) { | |
| if (!presetName) return; | |
| const preset = window.PRESETS.compare[presetName]; | |
| if (!preset) return; | |
| const activeTab = document.querySelector("#compare-tab-contents .json-tab-content.active"); | |
| if (!activeTab) return; | |
| const leftTextarea = activeTab.querySelector(".json-input-left"); | |
| const rightTextarea = activeTab.querySelector(".json-input-right"); | |
| if (leftTextarea && rightTextarea) { | |
| leftTextarea.value = preset.leftContent; | |
| rightTextarea.value = preset.rightContent; | |
| compareJSONs(activeTab.id); | |
| } | |
| } | |
| function loadCodegenPreset(presetName) { | |
| if (!presetName) return; | |
| const preset = window.PRESETS.codegen[presetName]; | |
| if (!preset) return; | |
| const activeTab = document.querySelector("#codegen-tab-contents .json-tab-content.active"); | |
| if (!activeTab) return; | |
| const textarea = activeTab.querySelector(".json-input"); | |
| const langSelect = document.getElementById("lang-select-" + activeTab.id); | |
| if (textarea && langSelect) { | |
| textarea.value = preset.input; | |
| langSelect.value = preset.lang; | |
| generateCode(activeTab.id); | |
| } | |
| } | |
| function loadFormatterPreset(presetName) { | |
| if (!presetName) return; | |
| const preset = window.PRESETS.formatter[presetName]; | |
| if (!preset) return; | |
| const activeTab = document.querySelector("#formatter-tab-contents .json-tab-content.active"); | |
| if (!activeTab) return; | |
| const textarea = activeTab.querySelector(".json-input"); | |
| if (textarea) { | |
| try { | |
| // Validate that content is valid JSON | |
| JSON.parse(preset.content); | |
| textarea.value = preset.content; | |
| updateFormatterPreview(activeTab.id); | |
| } catch (error) { | |
| console.error("Invalid preset content:", error); | |
| Swal.fire({ | |
| icon: "error", | |
| title: "Invalid preset", | |
| text: "The selected preset contains invalid JSON", | |
| toast: true, | |
| timer: 3000, | |
| position: "top-end" | |
| }); | |
| } | |
| } | |
| } |
🤖 Prompt for AI Agents
In index.js around lines 1798 to 1850, the preset loading functions lack error
handling for malformed or incomplete preset data. Wrap the code inside each
function (loadFormatterPreset, loadComparePreset, loadCodegenPreset) in
try-catch blocks to catch any runtime errors. Additionally, validate that the
preset object contains the expected properties before accessing them, and handle
cases where properties are missing by logging an error or returning early. This
ensures robust handling of invalid preset data and prevents runtime exceptions.
Would you please create an issue and someone interested or myself will pick up the issue going ahead? |
Hello @Shravan20 I think it's not a big deal; it's just that it created a lot of changes on my PR, and it is going to be very hard for you to detect the changes; hence, the |
|
PR LGTM |
2 participants
This PR adds the ability to load sample data presets for the Formatter, Compare, and Code Generator tabs, similar to the existing Mock Data Generator.
presets.jsto store structured sample data for each tab type.index.htmlto includepresets.jsand add dropdown selectors in the UI for each relevant tab section.index.js(populatePresetSelects,loadFormatterPreset,loadComparePreset,loadCodegenPreset) to populate the dropdowns and load selected preset data into the active tab.loadMockPresetfunction to use the new globalwindow.PRESETSstructure and removed the old localpresetsobject.Screenshots
Fixes #40
Summary by CodeRabbit
New Features
Style
Refactor