DOC-7182: Add an interactive demo for Redis Search queries

content/develop/ai/search-and-query/query/interactive-demo.md

@@ -0,0 +1,29 @@
+---
+categories:
+- docs
+- develop
+- stack
+- oss
+- rs
+- rc
+- oss
+- kubernetes
+- clients
+description: Run full-text, filter, and aggregation queries on a food delivery app's restaurants and orders, and see each redis-cli command and reply.
+linkTitle: Interactive demo
+title: Query interactive demo
+weight: 11
+---
+
+Redis Search lets you query data through an index you create. This demo uses restaurant and order data from a food delivery app, stored as hashes. It starts by showing the data and a possible index. Next, three kinds of queries are demonstrated: full-text search, filter and sort, and aggregation. For each query, it shows the command, the matching data, and the exact reply.
+
+The demo runs in your browser and doesn't connect to Redis. Its commands and replies were recorded from Redis, and each command works as shown in `redis-cli` once you create the indexes and add the data. The restaurants and orders are the same sample data as the [Context Retriever interactive demo](/content/develop/ai/context-engine/context-retriever/interactive-demo.md).
+
+{{< search-demo >}}
+
+## What the demo shows
+
+1. **The data.** Each restaurant is a hash. An index, created with [`FT.CREATE`](/content/commands/ft.create.md), tells Redis Search which fields to search and how. See [Indexing](/content/develop/ai/search-and-query/indexing/_index.md).
+2. **Full-text search.** [`FT.SEARCH`](/content/commands/ft.search.md) finds words in `TEXT` fields, including other forms of each word, such as plurals. It also handles exact phrases, prefixes, fuzzy matches, and the `|`, `-`, and `@field:` operators. `HIGHLIGHT` marks the words that matched. See [Full-text search](/content/develop/ai/search-and-query/query/full-text.md).
+3. **Filter and sort.** `TAG` and `NUMERIC` fields take exact conditions, and conditions side by side must all match. `SORTBY` orders the matches. See [Exact match queries](/content/develop/ai/search-and-query/query/exact-match.md) and [Range queries](/content/develop/ai/search-and-query/query/range.md).
+4. **Aggregate.** [`FT.AGGREGATE`](/content/commands/ft.aggregate.md) groups the matching orders with `GROUPBY` and reduces each group with `REDUCE`, here with `COUNT`, `SUM`, and `AVG`. See [Aggregation queries](/content/develop/ai/search-and-query/query/aggregation.md).

layouts/shortcodes/search-demo.html

@@ -0,0 +1,35 @@
+{{- /*
+  search-demo
+  -----------
+  Scripted, dependency-free demo of Redis Search queries: the restaurants
+  and their index, full-text search, tag and numeric conditions with
+  sorting, and FT.AGGREGATE over orders, each with its query, the data it
+  finds, and the exact reply. Runs entirely in the browser on recorded
+  data; no Redis server is called.
+
+  Usage (no arguments):
+      {{< search-demo >}}
+
+  Base styles come from context-retriever-demo.css so the scripted demos
+  share one look; search-demo.css and search-index-demo.css add the pieces
+  the Search demos share.
+
+  The assets are emitted on every call rather than deduplicated with
+  .Page.Store: the store survives `hugo server` rebuilds, so a page that
+  isn't edited would lose its assets after the first rebuild. The script
+  guards against running twice if the shortcode is used more than once.
+*/ -}}
+
+{{- /* ?v= is a hash of the file, so a reload never runs a stale cached copy. */ -}}
+{{- $v := dict -}}
+{{- range slice "css/context-retriever-demo.css" "css/search-demo.css" "css/search-index-demo.css" "js/search-demo.js" -}}
+  {{- $v = merge $v (dict . (substr (md5 (os.ReadFile (print "static/" .))) 0 10)) -}}
+{{- end }}
+<link rel="stylesheet" href="{{ "css/context-retriever-demo.css" | relURL }}?v={{ index $v "css/context-retriever-demo.css" }}">
+<link rel="stylesheet" href="{{ "css/search-demo.css" | relURL }}?v={{ index $v "css/search-demo.css" }}">
+<link rel="stylesheet" href="{{ "css/search-index-demo.css" | relURL }}?v={{ index $v "css/search-index-demo.css" }}">
+<script defer src="{{ "js/search-demo.js" | relURL }}?v={{ index $v "js/search-demo.js" }}"></script>
+
+<div class="rcr rsq rsi" data-search>
+  <noscript><p>This interactive demo needs JavaScript.</p></noscript>
+</div>

static/css/search-demo.css

@@ -48,3 +48,12 @@
 .rsq .rsq-keys .rsq-opt { font-size: 12px; }
 /* The command is one line for redis-cli; it wraps here so all of it is in view. */
 .rsq pre.rsq-pre.rsq-cmdline { white-space: pre-wrap; overflow-wrap: anywhere; }
+
+/* ---- step 4: the groups an aggregation returns ---- */
+.rsq-groups { margin-top: 12px; }
+.rsq .rsq-groups .rsq-group { background: var(--rcr-surface); }
+
+/* In the query demo's tables, each field's type sits on its own line under the field name, so long names don't break. */
+.rsq[data-search] .rsi-table th .rsi-type { display: table; margin-top: 2px; }
+/* In the stacked layout, the table-mode column widths don't apply, so every header gets its column's full width. */
+@container (max-width: 440px) { .rsq[data-search] .rsi-table th:nth-child(n), .rsq[data-search] .rsi-table.has-3 th:nth-child(n) { width: auto; } }