31:T46d,// Table with search results function renderSearchResults({ store } = {}) { const listKey = "results"; const selectionKey = "itemsToAdd"; const renderTag = (tag, i) => { return htl.html`${i > 0 ? ", " : ""} { e.preventDefault(); e.stopPropagation(); toggleTags(store, tag); }}>${tag}`; }; return store.bindInput( "itemsToAdd", ["results", "selected"], ({ results: list = [], selected }) => { const selectedIndex = new Set(selected); return Inputs.table(list, { required: false, header: { title: "Title", tags: "Tags" }, format: { title: (title, idx, list) => { const selected = selectedIndex.has(list[idx]); return selected ? htl.html`${title}` : htl.html`${title}`; }, tags: (tags) => { tags = tags.map(renderTag); return htl.html`

${tags}

`; } } }); } ); }32:T4e0,// Renders a control panel which allows to define tags used to filter search results function renderTagsSelector({ store } = {}) { return store.bindInput( "tags", ["availableTags", "tags"], ({ availableTags, tags = [] }) => { const disabledTags = new Set(allTags); availableTags && [...availableTags.keys()].forEach((tag) => disabledTags.delete(tag)); // We want to allow to uncheck tags even if they are not // in the list of available tags. // Remove active tags from the list of disabled tags: // Some combination of search criteria can give an empty set // and users should be able to de-select tags. tags.forEach((tag) => disabledTags.delete(tag)); const view = Inputs.checkbox(allTags, { disabled: [...disabledTags], format: (tag) => { const tagInfo = availableTags.get(tag); const pct = tagInfo ? tagInfo.percent : 1; return htl.html` ${tag} `; } }); view.classList.add("tag"); return view; } ); }33:Tf28,34:T7f6,store = { // Step 1: Create a new store instance with initial field values. const initialState = { results: [] // Initially there is no results }; const store = newInputsStore(initialState); const [register, clean] = newRegistry(); // House keeping code: unregister all listeners and bindings // when this cell is reloaded. // (It is not really neccessary in this context, but it is cleaner :-)) invalidation.then(clean); // Step 2: call automatically search when the "query" of "tags" fields are updated. // The "useAll" method is called each time when one of the specified dependencies // are changed. let searchPromise = Promise.resolve(); register( store.useAll(["query", "tags"], async ({ query, tags }) => { // Load data from the server try { await searchPromise; } catch (err) { /* */ } searchPromise = search({ query, tags }); const results = await searchPromise; // Update the results store.updateAll(["results", "itemsToAdd"], (o) => { o.results = results || []; o.itemsToAdd = []; return o; }); }) ); // Step 3: re-calculate the "availableTags" field when the search results are changed: // Here we are using the "select" method which executes the specified method // when dependencies are reloaded and sets the result of this method execution as the // value of the resulting field (the "availableTags" in this case). register( store.select("availableTags", ["results"], ({ results = [] }) => { const map = new Map(); for (const item of results) { (item.tags || []).forEach((tag) => { let count = (map.get(tag) || 0) + 1; map.set(tag, count); }); } const stats = new Map(); for (const [tag, count] of map.entries()) { stats.set(tag, { tag, count, percent: Math.round((100 * count) / results.length) }); } return stats; }) ); return store; }35:Tcfd,data = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque facilisis at sapien vitae molestie. Nam interdum aliquet nibh, id tristique ex mattis eget. Nunc sed hendrerit lectus, quis rutrum metus. Donec maximus, sem sit amet condimentum porta, nulla lacus sollicitudin sapien, eu viverra ante nisi sollicitudin neque. Duis egestas hendrerit auctor. Donec consectetur libero tellus, at ornare dolor feugiat vel. Cras blandit quam in lacus commodo, vel tristique enim iaculis. Donec id sollicitudin ante. Aliquam scelerisque varius nulla et dapibus. Nulla facilisi. Morbi id dui ex. Proin nunc dui, dapibus sit amet risus et, imperdiet iaculis arcu. Donec et urna dignissim, accumsan justo ultricies, vestibulum ante. Quisque malesuada viverra efficitur. Aliquam quis massa pretium, hendrerit tortor nec, commodo ex. Suspendisse at augue pellentesque neque placerat eleifend at sit amet velit. Cras tempus egestas sem, sit amet malesuada augue. Etiam libero est, congue ut tincidunt a, euismod sed risus. Donec neque tellus, rhoncus sed lectus eget, egestas consectetur elit. Praesent sit amet nisl scelerisque, placerat magna et, imperdiet nisl. Cras sapien tortor, mattis id ligula id, gravida vestibulum ipsum. Sed ut ultricies justo. Quisque pulvinar sollicitudin lectus ultricies viverra. Vivamus interdum diam ut quam tempor pulvinar. Phasellus feugiat congue diam, ut condimentum neque lobortis ut. Proin sagittis risus molestie lacus pharetra, hendrerit venenatis lorem sodales. Proin non nisl mollis, pulvinar diam at, luctus ex. Integer non risus quis massa interdum scelerisque a ac quam. Aenean vitae est arcu. Aliquam nec diam lorem. Ut sollicitudin sed risus et molestie. Aenean varius leo vel ultrices malesuada. Duis vel augue felis. In non gravida massa. Integer gravida sagittis felis a luctus. Pellentesque posuere rutrum orci, sit amet cursus justo molestie at. Nunc aliquam neque a dolor imperdiet, in tincidunt velit vehicula. Maecenas eu ornare purus. Pellentesque blandit, arcu quis ornare lobortis, velit augue consequat eros, euismod accumsan diam nisl vel ex. Fusce justo felis, semper vehicula consectetur nec, lacinia convallis purus. Cras sit amet magna luctus magna dictum fermentum. Quisque vestibulum libero dapibus lacus efficitur, nec imperdiet felis interdum. Quisque ut sollicitudin nisi. Suspendisse nisl risus, auctor et auctor sed, condimentum vitae nisi. Nullam placerat dolor at sagittis vulputate. Ut hendrerit varius sagittis. In enim eros, venenatis a vestibulum sit amet, egestas eget nibh. Vivamus fermentum ex in lectus consectetur tempus. Integer ut orci a leo laoreet interdum ut eu nunc. Donec consectetur, nisi quis egestas ultrices, nulla dui vehicula urna, vel eleifend nibh ligula fermentum leo. Sed blandit metus sed accumsan commodo. Mauris luctus sem eget pretium sagittis. Integer vestibulum quam felis, sit amet tristique neque commodo laoreet. In ut lectus ac mauris cursus mollis molestie id justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur quis pretium ipsum, id consectetur mi. Proin massa leo, gravida a pharetra nec, accumsan non magna.` .split(/[\n\.]/gim) .map((_) => _.trim()) .filter((_) => !!_) .map((title) => ({ title, tags: randomList(allTags, 3) }))36:[] 2f:{"title":"@statewalker/store: Example App","cells":[{"id":0,"value":"# @statewalker/store: Example App","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"This notebook contains an example application for the [Observable Store](/@kotelnikov/observable-store) library managing the internal application state and synchronizing it with UI views and Observable Inputs. The goal of this example is to show how a store instance can be used to orchestrate an application data management via UI elements and API calls.\n\nTo obtain more information about the library you can visualize the [Observable Store Public Collection](/collection/@kotelnikov/observable-store)).\n","pinned":false,"hidden":false,"mode":"md"},{"id":541,"value":"toc({\n headers: \"h2,h3\",\n title: \"Table of Content:\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"## UI: Lorem Ipsum Dashboard","pinned":false,"hidden":false,"mode":"md"},{"id":683,"value":"renderDashboard({ store })","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"This example implements a simple dashboard where items can be searched by a query and filtered by tags.\nWith this interface you can:\n* search items by text (try \"lorem\" for example)\n* filter by tags - by selecting tags in the list, at the left, or by clicking on tag links in search results\n* select and add items to the selection list\n* remove items from the selected list\n\nThe interesting part of this application is that only tags that occur in the results are available for selection. So it implements an interface with backlinks, results of the request influence the UI and define how new queries can be formulated. This approach allows to avoid impossible combinations of tags, meaning combinations that give no results.","pinned":false,"hidden":false,"mode":"md"},{"id":789,"value":"To re-define the request via the API store you can change parameters in the next cell and re-execute it:","pinned":false,"hidden":false,"mode":"md"},{"id":819,"value":"store.set(\"query\", \"amet\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1002,"value":"For more examples of interactions with the API store - see the \"Interaction With The Store\" section below.","pinned":false,"hidden":false,"mode":"md"},{"id":262,"value":"## UI Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":897,"value":"### Rendering Methods","pinned":false,"hidden":false,"mode":"md"},{"id":749,"value":"Next cells contain functions rendering individual UI elements used by the dashboard above. Open \"individual methods\" and see how store fields are \"attached\" to Observable inputs.","pinned":false,"hidden":false,"mode":"md"},{"id":840,"value":"This method renders the text search bar. It demonstrates a simple synchronization of an Observable input with the store \"query\" field.","pinned":false,"hidden":false,"mode":"md"},{"id":178,"value":"// Renders the search box view. It is used to enter full-text queries.\nfunction renderSearchQueryInput({ store } = {}) {\n return store.bindInput(\"query\", Inputs.text({ label: \"Search:\" }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":845,"value":"This method renders the clear button for the search field. It simply sets the \"query\" field in the store to the empty string.","pinned":false,"hidden":false,"mode":"md"},{"id":282,"value":"// This button clears the search query\nfunction renderClearQueryButton({ store } = {}) {\n return Inputs.button(\"Clear\", {\n reduce: () => store.set(\"query\", \"\")\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":863,"value":"This method renders search results. Basically it has two functions: \n1. It renders search results defined in the \"results\" store field.\n2. It synchronizes checked elements in the table with the \"itemsToAdd\" store field. This field activates the \"Add\" button and allows to add these items to the selected list in the right panel.","pinned":false,"hidden":false,"mode":"md"},{"id":190,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":852,"value":"The \"Add\" button moves checked items from the \"itemsToAdd\" field to the \"selected\" list. This list is shown at the right of the dashboard. The interesting point of this method is that it is automatically disabled when the \"itemsToAdd\" field is empty or not defined.","pinned":false,"hidden":false,"mode":"md"},{"id":558,"value":"function renderAddButton({ store } = {}) {\n const btn = Inputs.button(\"Add\", {\n reduce: () =>\n store.updateAll(\n [\"selected\", \"itemsToAdd\"],\n ({ selected = [], itemsToAdd = [] }) => {\n const set = new Set(selected);\n itemsToAdd.forEach((item) => set.add(item));\n itemsToAdd = [];\n selected = [...set.values()];\n return { selected, itemsToAdd };\n }\n )\n });\n return store.bindView(btn, [\"itemsToAdd\"], ({ itemsToAdd = [] }, view) => {\n const active = itemsToAdd && itemsToAdd.length > 0;\n btn.querySelector(\"button\").disabled = !active;\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":885,"value":"The \"Remove\" button is very similar with the \"Add\" button, but it does the opposite operation - it removes checked items from the selection list. Technically speaking it removes items defined in the \"itemsToRemove\" field from the \"selected\" list.","pinned":false,"hidden":false,"mode":"md"},{"id":661,"value":"function renderRemoveButton({ store } = {}) {\n const btn = Inputs.button(\"Remove\", {\n reduce: () =>\n store.updateAll(\n [\"selected\", \"itemsToRemove\"],\n ({ selected = [], itemsToRemove = [] }) => {\n const set = new Set(selected);\n itemsToRemove.forEach((item) => set.delete(item));\n itemsToRemove = [];\n selected = [...set.values()];\n return { selected, itemsToRemove };\n }\n )\n });\n return store.bindView(\n btn,\n [\"itemsToRemove\"],\n ({ itemsToRemove = [] }, view) => {\n const active = itemsToRemove && itemsToRemove.length > 0;\n btn.querySelector(\"button\").disabled = !active;\n }\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":892,"value":"This method renders selected items (from the \"selected\" field). All checked items are automatically synchronized with the \"itemsToRemove\" list.","pinned":false,"hidden":false,"mode":"md"},{"id":636,"value":"// Table with selected items\nfunction renderSelectedItems({ store } = {}) {\n const listKey = \"selected\";\n const selectionKey = \"itemsToRemove\";\n const params = {\n required: false,\n valueof: (d) => d.item,\n columns: [\"title\"],\n header: {\n title: \"Selected items\"\n },\n format: {\n title: (title, idx, array) => {\n const item = array[idx];\n const tags = item.tags.map(\n (tag, i) =>\n htl.html`${i > 0 ? \", \" : \"\"}${tag}`\n );\n return htl.html`

${title}

${tags}

`;\n }\n }\n };\n return store.bindView(listKey, (obj = {}, view) => {\n view.classList.add(\"items-list\");\n const list = obj[listKey] || [];\n return store.bindInput(selectionKey, Inputs.table(list, params));\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":944,"value":"Renders list of tags. Only tags existing in search results are active - it allows to refine requests without creating impossible combinations of search parameters:","pinned":false,"hidden":false,"mode":"md"},{"id":195,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":939,"value":"Statistics about search results (number of found items etc):","pinned":false,"hidden":false,"mode":"md"},{"id":288,"value":"// Creates an information block with statistics about search results\nfunction renderResultsStats({ store } = {}) {\n return store.bindView([\"results\"], ({ results }) => {\n let label = \"\";\n if (results.length === 0) label = `Nothing was found`;\n else if (results.length === 1) label = `One result was found`;\n else {\n label = `${String(results.length)} items was found`;\n }\n return htl.html`

${label}

`;\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"function toggleTags(store, ...tags) {\n store.update(\"tags\", (existingTags = []) => {\n const set = new Set(existingTags);\n tags.forEach((tag) => (set.has(tag) ? set.delete(tag) : set.add(tag)));\n return [...set.values()];\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"function renderDashboard({ store } = {}) {\n return htl.html`\n

Lorem Ipsum Search

\n ${renderResultsStats({ store })}\n

\n ${renderSearchQueryInput({ store })}\n ${renderClearQueryButton({ store })}\n

\n ${renderAddButton({ store })}\n ${renderRemoveButton({ store })}\n

\n ${renderSearchResults({ store })}\n

\n ${renderSelectedItems({ store })}\n

All Tags:

\n ${renderTagsSelector({ store })}\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"### CSS Styles \n\nStyle used to render the dashboard are defined in the cell below: ","pinned":false,"hidden":false,"mode":"md"},{"id":70,"value":"## Store Initialization\n\nThe code below initializes the store and defines auto-updated fields, used in this application.\nThese are the following steps: \n1. Create store\n2. Register handlers to call search when one of the search criteria is updated\n3. Register automatic re-calculation of available tags ","pinned":false,"hidden":false,"mode":"md"},{"id":733,"value":"$33","pinned":false,"hidden":false,"mode":"html"},{"id":129,"value":"We can observe individual fields of the store:","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"## Interaction With The Store","pinned":false,"hidden":false,"mode":"md"},{"id":806,"value":"You can interact with the store and synchronize the content of individual fields with Observable inputs:","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"store.bindInput(\"query\", Inputs.text({ label: \"Search:\" }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":794,"value":"Results of queries can be observed in the following way:","pinned":false,"hidden":false,"mode":"md"},{"id":797,"value":"store.observe(\"results\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1028,"value":"store.observe(\"availableTags\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"You can uncomment and re-execute the cell below to see how the store will synchronize all views with the newly defined search query.","pinned":false,"hidden":false,"mode":"md"},{"id":810,"value":"{\n // store.set(\"query\", \"lorem\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"The cell below reflects the \"query\" field of the store:","pinned":false,"hidden":false,"mode":"md"},{"id":132,"value":"store.observe(\"query\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"store.observe(\"tags\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"To observe all modifications of the store the same method should be used without parameters (or with the \"*\" mask which is used for taking into account all changes within the store):","pinned":false,"hidden":false,"mode":"md"},{"id":165,"value":"store.observe()","pinned":true,"hidden":false,"mode":"ojs"},{"id":971,"value":"The cell below allows to log all store changes:","pinned":false,"hidden":false,"mode":"md"},{"id":139,"value":"## Data Management Code\n\nThis section contains no dependencies on store and is used to simulate communication with an external API.","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"List of all available tags:","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"// Set the initial list of all tags.\n// It is used to show all available tags.\nallTags = [\n \"web\",\n \"design\",\n \"css\",\n \"layout\",\n \"typography\",\n \"ux\",\n \"ui\",\n \"components\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"This async search function returns all items corresponding to the given query and containing the specified tags:","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"async function search({ query, tags = [] } = {}) {\n tags = tags || [];\n query = (query || \"\").toLowerCase();\n\n const result = new Set();\n for (let item of data) {\n // If there is no queries nor tags defined then we add\n // the item to the list of results:\n let match = query === \"\" && (!tags || !tags.length);\n\n if (!match) {\n // If the query defined then we check that the items match to this query:\n match = !query || !!item.title.toLowerCase().match(query);\n\n // If the item is accepted by the query (or query is not defined)\n // then we need to select only items containing all defined tags:\n for (let i = 0; match && i < tags.length; i++) {\n match = item.tags.indexOf(tags[i]) >= 0;\n }\n }\n\n // Add the item to the result list if the search criteria are satisfied:\n if (match) result.add(item);\n }\n // Simulate a short random delay:\n await Promises.delay(100 * Math.random());\n return [...result.values()];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"Test data is generated automatically from the \"Lorem ipsum\" block of phrases. The next cell splits the text into individual phrases and randomly associates them with tags.","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"This function generates a random sub-set of values from the specified list. \nThe maximal length of the returned random set is defined by the second parameters (by default it is half of the length of the initial list):","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"function randomList(list, max = list.length >> 1) {\n const count = 1 + rand(Math.min(max, list.length) - 1);\n const set = new Set();\n while (set.size < count) {\n set.add(list[rand(list.length - 1)]);\n }\n return [...set.values()];\n\n function rand(n) {\n return Math.round(Math.random() * n);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"import { newInputsStore, newRegistry } from \"cded5a951f321b83\" // \"@kotelnikov/observable-store\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":539,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}