Add examples sidebar to playground

[Copilot]

Extends the playground with a collapsible sidebar showing clickable example cases. Selecting an example populates both the expression and context editors. Examples can also be preselected via URL query parameter.

Examples included

• Mathematical Expression — basic arithmetic with variables and sqrt()
• Working with Arrays — sum(), min(), max() operations
• Object Manipulation — nested property access
• Map and Filter Functions — functional transforms with arrow functions
• Complex Objects — deeply nested structures with array indexing
• Data Transformation — flatten nested objects and transform rows with flatten() function

Changes

• index.html: Added <aside> sidebar before editor panes
• app.js: Added exampleCases data, renderExamplesSidebar(), loadExample() click handler, and URL query parameter support via loadExampleFromUrl()
• styles.css: Added sidebar styles with CSS variable --sidebar-width for consistent layout, light/dark theme support
• serve-sample.cjs: Updated server to handle URLs with query strings

Usage

// Example case structure
{
    id: 'map-filter',
    title: 'Map and Filter Functions',
    description: 'Transform and filter data with callbacks',
    expression: 'sum(map(filter(items, item => item > 3), x => x * 2))',
    context: { items: [1, 2, 3, 4, 5, 6, 7, 8] }
}

URL Query Parameter

Preselect an example by appending ?example=<id> to the URL:

• ?example=math — Mathematical Expression
• ?example=arrays — Working with Arrays
• ?example=objects — Object Manipulation
• ?example=map-filter — Map and Filter Functions
• ?example=complex — Complex Objects
• ?example=data-transform — Data Transformation

Original prompt

I want to extend the playground example with a side panel. It shows the title of several example cases. When clicked, the expression field and the context window are populated with the data corresponding to the example. Ensure the following examples exist:

• Default mathematical expression
• Working with arrays
• Object manipulation
• Advanced example with map and filter functions
• Using data from complex objects

The sidebar must be nicely styled using tailwind and the style must match the overal style of the playground.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[Sander-Toonen]

Add an Example with the following expression:

map(f(row) = {_id: row.rowId} + flatten(row.data, ''), $event)

And the following context:

{
"$event":[
{"rowId": 1, "state": "saved", "data": { "InventoryId": 1256, "Description": "Bal", "Weight": { "Unit": "g", "Amount": 120 } }},
{"rowId": 2, "state": "new", "data": { "InventoryId": 2344, "Description": "Basket", "Weight": { "Unit": "g", "Amount": 300 } }},
{"rowId": 3, "state": "unchanged", "data": { "InventoryId": 9362, "Description": "Wood", "Weight": { "Unit": "kg", "Amount": 18 } }}
]
}

Also add a way to preselect an example with a query parameter

[Copilot]

Add an Example with the following expression:

map(f(row) = {_id: row.rowId} + flatten(row.data, ''), $event)...

Added in 36913fe:

• New "Data Transformation" example with the flatten expression and inventory data
• URL query parameter support: ?example=data-transform preselects that example on page load

Available example IDs: math, arrays, objects, map-filter, complex, data-transform

[Copilot]

Pull request overview

This PR adds an interactive examples sidebar to the playground that allows users to quickly load pre-configured expression and context examples. Users can select examples by clicking sidebar items or by using URL query parameters (e.g., ?example=math).

Changes:

• Added sidebar with 6 example cases covering mathematical operations, arrays, objects, functional programming, and data transformation
• Refactored syntax highlighting to use a cleaner array-based approach with deltaDecorations
• Updated server to handle URLs with query parameters
• Added CSS styling for sidebar with light/dark theme support

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/functions/string/operations.ts	Removed trailing whitespace
samples/language-service-sample/styles.css	Added CSS for sidebar layout, theming, and token highlighting for constants
samples/language-service-sample/serve-sample.cjs	Added query string stripping to support URL-based example selection
samples/language-service-sample/index.html	Added sidebar HTML structure and adjusted leftPane width calculation
samples/language-service-sample/app.js	Added example data, sidebar rendering, example loading logic, URL query parameter support, and refactored syntax highlighting

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The 'threshold' variable in the context is not used in the expression. The expression hardcodes the value '3' in the filter predicate. Consider either removing 'threshold' or updating the expression to use it, such as 'sum(map(filter(items, item => item > threshold), x => x * 2))'.

[Copilot]

The sidebar width is specified in two places: the Tailwind class 'w-64' (which equals 256px/16rem) in the HTML and 'width: var(--sidebar-width)' in the CSS. While both currently resolve to 256px, having two sources of truth can lead to inconsistencies if one is changed. Consider removing the 'w-64' class and relying solely on the CSS variable for width control.

[Copilot]

The leftPane width calculation is incorrect. Using "calc(60% - var(--sidebar-width))" treats percentages as relative to the parent container width. If the container is 1000px wide and --sidebar-width is 256px, this would calculate to 600px - 256px = 344px, but the sidebar already takes up 256px, leaving only 744px for both panes and the resizer. The correct calculation should subtract the sidebar width proportionally or use a different approach, such as "calc((100% - var(--sidebar-width)) * 0.6)" to get 60% of the remaining space after the sidebar.

Suggested change

	<div id="leftPane" class="pane bg-white dark:bg-[#1e1e1e]" style="width: calc(60% - var(--sidebar-width));">
	<div id="leftPane" class="pane bg-white dark:bg-[#1e1e1e]" style="width: calc((100% - var(--sidebar-width)) * 0.6);">

[Copilot]

The 'values' array in the context is not used in the expression. The expression only references 'numbers'. Consider removing 'values' from the context or updating the expression to demonstrate its usage.

Suggested change

	numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
	values: [15, 25, 35]
	numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]