Mikec/visual examples (#44)

* wip

* wip adding a vite project

* fixed quotes issues

* fixed typechecking failing on tests by excluding

* using mantine instead of tailwind

* wip

* wip example ui

* fixing error in this example

* wip design

* added some nicer styling

* wip

* tidy

* responsive stats page

* fixed sidebar

* better styles

* wip

* wip resetting

* clearing issue?

* tests pass but ts failing

* removing any

* fixed tests

* added a couple of basic tests

* replicated the clearAll issue

* fixed clear issue

* tidy tests a bit more

* tidied up vron

* improved photos examepl

* improved shuffle example

* wip baseline tests

* bounds now optional

* wip optional bounds

* tidied tests up a bunch

* didnt need to be partial

* tests fixed ts not

* tidy

* tidying up the visual examples some more

* now adding a structured dump too

* wip

* using simpler tree

* tweaked how its shown

* back to basics on btree demo

* wip getting the trees and nodes

* wip app shelll

* tidy up

* tidied up a bit

* proper sizing

* more wip on the btree view

* parallel

* cron reset of btree

* fixed runtime issue

* makeing adding a photo random

* bumped readme

* fixed uneaven header

* split sections up a bit

* paginated leaderbaord

* better leaderboard layout

* small refactors

* suffle page aside

* better splitting up of the components with asides

* bounds optional

* tidy up the page lookup

* tidied up a couple of things

* also allowing editing on the leaderboard rows

* polishing with a convex logo

* removing the index and using triggers

* added some more comments

* better variable names

* fixed example tests

* fixed npm install

* added thumb to readme

* removed package lock as suggested

* fixing setup script in the example

* using the table validator instead

* preventing the resetAndSeed from potentially timing out

* lowered ui function

* simplified imports

* nicer flowing of code

Author: mikecann

README.md

@@ -7,6 +7,8 @@
 This Convex component calculates count and sums of values for efficient
 aggregation.
 
+[![Efficient COUNT, SUM, MAX with the Aggregate Component](https://thumbs.video-to-markdown.com/9c06ce06.jpg)](https://youtu.be/YD3nW_PtHWA)
+
 Suppose you have a leaderboard of game scores. These are some operations
 that the Aggregate component makes easy and efficient:
 
@@ -307,9 +309,7 @@ const randomize = new TableAggregate<{
   Key: null;
   DataModel: DataModel;
   TableName: "mytable";
-}>(components.aggregate, {
-  sortKey: (doc) => null,
-});
+}>(components.aggregate, { sortKey: (doc) => null });
 ```
 
 Without sorting, all documents are ordered by their `_id` which is generally
@@ -331,10 +331,10 @@ For this example, imagine you have a table of photo albums.
 ```ts
 // convex/schema.ts
 defineSchema({
-  photos: defineTable({
-    album: v.string(),
-    url: v.string(),
-  }).index("by_album_creation_time", ["album"]),
+  photos: defineTable({ album: v.string(), url: v.string() }).index(
+    "by_album_creation_time",
+    ["album"]
+  ),
 });
 ```
 
@@ -390,10 +390,9 @@ import { DataModel } from "./_generated/dataModel";
 import { DirectAggregate } from "@convex-dev/aggregate";
 // Note the `id` should be unique to be a tie-breaker in case two data points
 // have the same key.
-const aggregate = new DirectAggregate<{
-  Key: number;
-  Id: string;
-}>(components.aggregate);
+const aggregate = new DirectAggregate<{ Key: number; Id: string }>(
+  components.aggregate
+);
 
 // within a mutation, add values to be aggregated
 await aggregate.insert(ctx, { key, id });

example/.cursor/rules/convex_rules.mdc

@@ -1,16 +1,24 @@
-!**/glob-import/dir/node_modules
-.DS_Store
-.idea
-*.cpuprofile
-*.local
+# Logs
+logs
 *.log
-/.vscode/
-/docs/.vitepress/cache
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
 dist
 dist-ssr
-explorations
-node_modules
-playground-temp
-temp
-TODOs.md
-.eslintcache
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

example/.gitignore

@@ -1,4 +1,11 @@
-# Example app
+# Example App
 
-See convex/config.ts and convex/leaderboard.ts for example usages of the
-Aggregate component.
+## To run the examples
+
+Once you have cloned this repo, **from the root of the repo**:
+
+```bash
+npm run setup
+```
+
+You will need to follow the instructions to setup a Convex project. Once done you should be able to open the example at `http://localhost:5173/`