2b:null 2c:["$","title",null,{"children":"SelectableListWidget | Northeastern University John A. Guerra Gomez classes | Observable"}] 31:T15b1,## Documentation 1. **What it Does:** The `SelectableListWidget` is a reusable Observable reactive widget designed to display a list of complex data items (JavaScript objects). It allows users to select a single item from the list by clicking on it. Key features include: Accepts an array of JavaScript objects as input; uses a customizable rendering function to display each item, allowing for rich HTML structure; manages selection state internally; allows users to **deselect** the currently selected item by clicking on it again; provides the **full selected data object** (or `null` if deselected) as its reactive `.value`; integrates seamlessly with Observable's `viewof` operator. It solves the problem of needing a selectable list for complex data where standard inputs like ``, `Inputs.select`) typically only display a single string per item. There's no straightforward way to render each item using custom HTML structure (e.g., showing multiple data fields per list item, including icons, applying conditional formatting) directly within the selection list itself. 2. **The Full Data Object is Required:** Upon selection, the application often needs access to the **_entire JavaScript object_** that was selected, not just a simple string value or an ID. Standard select elements often only return the `value` attribute of the chosen option. 3. **Boilerplate Code:** Implementing this functionality from scratch requires repetitive boilerplate code for: - Iterating over the data array. - Generating the custom HTML for each item. - Adding click event listeners to each item. - Managing the state (which item is currently selected). - Updating the visual appearance to indicate selection. - Providing the selected data object to the rest of the application. - Ensuring it integrates with reactive environments like Observable. 33:T709,## Solution The `SelectableListWidget` directly addresses these problems by providing a **reusable, configurable component** that encapsulates the necessary logic: 1. **Handles Complex Data Natively:** It is designed specifically to accept an array of arbitrary JavaScript objects as its primary input (`data`). 2. **Enables Custom Rendering:** The `options.renderItem` function gives the developer full control over the HTML representation of each individual data object in the list, solving the custom visualization problem. 3. **Provides the Full Selected Object:** Its reactive `.value` is intentionally designed to hold the **_complete JavaScript object_** corresponding to the user's selection **(or `null` if nothing is selected/deselected)**, making the complete data readily available for downstream use. 4. **Reduces Boilerplate:** It bundles the rendering loop, event handling (clicks), state management (tracking the selection), visual feedback (`selectedClass`), and the reactive value/event mechanism into a single, reusable function. 5. **Standardized Interface:** By conforming to the Reactive Widgets pattern (providing an HTML element with a `.value` property and dispatching `input` events), it integrates seamlessly with Observable's `viewof` operator and reactive dataflow, behaving predictably like other standard inputs within this environment. **This adherence to the input protocol also makes the widget compatible with `Inputs.bind` for synchronizing its value with other inputs.** In essence, the `SelectableListWidget` provides a flexible and standardized solution for the common need to select one item from a list of custom-rendered complex objects, bridging the gap left by simpler input elements. 34:Tbbb,## Possible Use Case: Selecting AI-Generated Data Insights This `SelectableListWidget` can serve as a key interactive component within the possible workflow of an "Interactive Data Story Generator" application. **Interactive Data Story Generator:** We could use an AI Large Language Model (LLM) to analyze user-provided data and generate potential insights, trends, outliers, or even suggest suitable visualization types. Often, an LLM might produce _multiple_ relevant findings or recommendations from a single dataset. **The Problem:** How do we effectively present these multiple, potentially complex suggestions (each possibly containing narrative text, a finding type, related data references, and a chart recommendation) to the user and allow them to focus on or act upon a specific one? A simple text list or dropdown is insufficient for displaying this rich information clearly. **Solution with `SelectableListWidget`:** The `SelectableListWidget` is ideally suited for this task: 1. **Input Data:** The output from the LLM analysis step would be formatted into an array of JavaScript objects. Each object represents a single insight or suggestion, for example: ```javascript [ { id: "insight-001", type: "Trend", narrative: "Sales show strong growth in Q3.", relatedCols: ["Quarter", "Sales"], suggestedChart: "line" }, { id: "insight-002", type: "Outlier", narrative: "Region West had unusually high costs in July.", relatedCols: ["Region", "Costs", "Month"], suggestedChart: "bar" }, ] ``` This array would be passed as the `data` argument to the `SelectableListWidget`. 2. **Custom Rendering:** A custom `renderItem` function would be used to display each suggestion object clearly within the list. It could show the `narrative` text prominently, perhaps with an icon or label indicating the `type` (Trend/Outlier) and the `suggestedChart`. 3. **User Selection:** The user reviews the list of AI-generated insights presented by the widget and clicks on the one they find most interesting or relevant. Clicking a selected item again could deselect it. 4. **Reactive Output:** The widget's reactive `.value` becomes the full JavaScript object corresponding to the user's selected insight (or `null`). 5. **Downstream Actions:** Other cells or components in the notebook can react to changes in the widget's value. For instance: - Displaying more details about the selected insight. - Highlighting the `relatedCols` in a view of the original data. - Automatically attempting to generate the `suggestedChart` (e.g., using Observable Plot) based on the selected insight object. In this way, the `SelectableListWidget` acts as the crucial user interface element that allows interaction with the AI's output, enabling users to drive their data exploration based on the generated recommendations. 35:Tbcf,function SelectableListWidget(data = [], options = {}) { const { key = "id", value = null, renderItem = (item) => html`

${JSON.stringify(item)}

`, selectedClass = "selected-item", createContainer = () => html`

`, itemStyle = `cursor: pointer; padding: 5px; margin: 2px 0; border-radius: 3px; border: 1px solid transparent;` } = options; const getKey = typeof key === "function" ? key : (item) => item?.[key]; const containerElement = this instanceof Element ? this : createContainer(); containerElement.style.listStyle = "none"; containerElement.style.padding = "0"; let _selectedKey = value ? getKey(value) : null; let _internalValue = value; const itemMap = new Map(); const updateSelectionVisuals = () => { for (const [itemKey, element] of itemMap.entries()) { if (itemKey === _selectedKey) { element.classList.add(selectedClass); } else { element.classList.remove(selectedClass); } } }; containerElement.innerHTML = ""; data.forEach((item) => { const itemKey = getKey(item); if (itemKey === undefined || itemKey === null) { console.warn( "SelectableListWidget: Item found with undefined/null key. Skipping item:", item ); return; } let listItemElement; try { listItemElement = renderItem(item); if (!(listItemElement instanceof Element)) { throw new Error("renderItem must return an Element"); } } catch (e) { console.error( "SelectableListWidget: renderItem failed for item:", item, e ); listItemElement = document.createElement("li"); listItemElement.textContent = `Error rendering item with key: ${itemKey}`; listItemElement.style.color = "red"; } listItemElement.style.cssText += itemStyle; itemMap.set(itemKey, listItemElement); // Store element by key listItemElement.onclick = () => { const clickedKey = getKey(item); let newValue; if (clickedKey === _selectedKey) { newValue = null; } else { newValue = item; } containerElement.value = newValue; containerElement.dispatchEvent(new Event("input", { bubbles: true })); }; containerElement.appendChild(listItemElement); }); Object.defineProperty(containerElement, "value", { get() { return _internalValue; }, set(newValue) { const newKey = newValue ? getKey(newValue) : null; if (newKey !== _selectedKey) { _selectedKey = newKey; _internalValue = newValue; updateSelectionVisuals(); } else if (newValue === null && _selectedKey !== null) { _selectedKey = null; _internalValue = null; updateSelectionVisuals(); } else if (newValue !== _internalValue) { _internalValue = newValue; } }, configurable: true, enumerable: true }); containerElement.value = value; updateSelectionVisuals(); return containerElement; }36:[] 2f:{"id":"1f822423aa488f61","slug":null,"title":"SelectableListWidget","thumbnail":"2a6ee627aef8df91e99926c70d94421a11b18a0248db3733691bb55ac8e7234f","access_level":"public","create_time":"$D2025-04-15T18:12:21.889Z","update_time":"$D2025-04-15T20:58:58.257Z","view_time":null,"first_public_time":"$D2025-04-15T19:40:36.760Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","bio":""},"version":128,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"613ce9d861a8bc3b","login":"ari-s-123","name":"Aritra Saharay","avatar_url":"https://avatars-next.observableusercontent.com/1da9e61c3f8fc3970bbf95defa0acaffca78064cddc0cddbb20beb8cec3e419f","tier":null,"bio":"I'm an aspiring SWE and a student pursuing a Master's Degree in CS at Northeastern University. My present interests lie at the intersection of Web/Mobile Development, Data Visualization, A11y, and AI."}],"members":[{"type":"individual","id":"613ce9d861a8bc3b","login":"ari-s-123","name":"Aritra Saharay","avatar_url":"https://avatars-next.observableusercontent.com/1da9e61c3f8fc3970bbf95defa0acaffca78064cddc0cddbb20beb8cec3e419f","tier":null,"role":"editor"},{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SelectableListWidget","cells":[{"id":0,"value":"# SelectableListWidget","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"selectedItem = mySelector","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`Selected Narrative: **${\n mySelector ? mySelector.narrative : \"None selected\"\n}**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"viewof mySelector = SelectableListWidget(mockData, {\n key: \"id\",\n value: mockData[1],\n renderItem: (\n item\n ) => html`

\n ${item.type}: ${item.narrative}\n ID: ${item.id}\n

`,\n selectedClass: \"selected-item\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"mockData = [\n {\n id: \"A1\",\n type: \"Trend\",\n narrative: \"Sales increased significantly in Q3.\"\n },\n {\n id: \"B2\",\n type: \"Outlier\",\n narrative: \"Region North showed unusually low activity in June.\"\n },\n {\n id: \"C3\",\n type: \"Comparison\",\n narrative: \"Product X outperforms Product Y consistently.\"\n },\n {\n id: \"D4\",\n type: \"Forecast\",\n narrative: \"Growth is expected to stabilize next quarter.\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"## AI Usage\n\nGemini 2.5 Pro helped with styling, documentation, and debugging.\n\nExample Prompt: Why are the two-way bindings not working? The selected item is\nno longer highlighted on the inital page load.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 30:"$2f:body"