use Slider for lookback period

.tool-versions

@@ -1,2 +1,3 @@
 nodejs 20.15.1
 python 3.12.4
+pnpm 9.7.1

frontend/Dockerfile

@@ -2,14 +2,14 @@
 FROM node:20-slim AS build
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
-RUN corepack enable
+RUN npm install -g corepack@latest && corepack enable
 WORKDIR /app
 # copy what's necessary to install dependencies:
 COPY package.json pnpm-lock.yaml /app/
 # install dependencies:
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 # copy what's necessary to build:
-COPY tsconfig.json vite.config.ts index.html index.css postcss.config.js tailwind.config.js /app/
+COPY tsconfig.json vite.config.ts index.html index.css /app/
 COPY src /app/src
 # Vite injects envvars at build time, not runtime:
 ENV VITE_SERVER_BASE_URL=https://calendar-optimizer-server.sakal.us

frontend/package.json

@@ -7,12 +7,10 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
-		"@date-io/date-fns": "^3.0.0",
+		"@mui/icons-material": "^6.1.1",
-		"@emotion/react": "^11.13.0",
+		"@mui/material": "^6.1.1",
-		"@emotion/styled": "^11.13.0",
+		"@mui/system": "^6.1.1",
-		"@mui/material": "^5.16.6",
+		"@mui/x-date-pickers": "^7.18.0",
-		"@mui/system": "^5.16.6",
-		"@mui/x-date-pickers": "^7.12.0",
 		"@preact/signals": "^1.2.2",
 		"@trpc/client": "^10.45.0",
 		"chart.js": "^4.4.1",

frontend/pnpm-lock.yaml

@@ -8,24 +8,18 @@ importers:
 
   .:
     dependencies:
-      '@date-io/date-fns':
+      '@mui/icons-material':
-        specifier: ^3.0.0
+        specifier: ^6.1.1
-        version: 3.0.0(date-fns@3.6.0)
+        version: 6.1.1(@mui/material@6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
-      '@emotion/react':
-        specifier: ^11.13.0
-        version: 11.13.0(@types/react@18.3.3)(react@18.3.1)
-      '@emotion/styled':
-        specifier: ^11.13.0
-        version: 11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@mui/material':
-        specifier: ^5.16.6
+        specifier: ^6.1.1
-        version: 5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/system':
-        specifier: ^5.16.6
+        specifier: ^6.1.1
-        version: 5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+        version: 6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@mui/x-date-pickers':
-        specifier: ^7.12.0
+        specifier: ^7.18.0
-        version: 7.12.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 7.18.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@preact/signals':
         specifier: ^1.2.2
         version: 1.2.2(preact@10.19.3)
@@ -178,6 +172,10 @@ packages:
     resolution: {integrity: sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/runtime@7.25.6':
+    resolution: {integrity: sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.22.15':
     resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==}
     engines: {node: '>=6.9.0'}
@@ -190,17 +188,6 @@ packages:
     resolution: {integrity: sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==}
     engines: {node: '>=6.9.0'}
 
-  '@date-io/core@3.0.0':
-    resolution: {integrity: sha512-S3j+IAQVBYNkQzchVVhX40eBkGDreBpScy9RXwTS5j2+k07+62pMVPisQ44Gq76Rqy5AOG/EZXCwBpY/jbemvA==}
-
-  '@date-io/date-fns@3.0.0':
-    resolution: {integrity: sha512-hsLAbsdP8LKfi7OQ729cXMWfmHQEq0hn3ysXfAAoc92j6j6sBq0s0tplnkWu6O4iBUpVCYRPGuNjQQhTaOu2AA==}
-    peerDependencies:
-      date-fns: ^3.2.0
-    peerDependenciesMeta:
-      date-fns:
-        optional: true
-
   '@emotion/babel-plugin@11.12.0':
     resolution: {integrity: sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==}
 
@@ -408,57 +395,71 @@ packages:
   '@kurkle/color@0.3.2':
     resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==}
 
-  '@mui/core-downloads-tracker@5.16.6':
+  '@mui/core-downloads-tracker@6.1.1':
-    resolution: {integrity: sha512-kytg6LheUG42V8H/o/Ptz3olSO5kUXW9zF0ox18VnblX6bO2yif1FPItgc3ey1t5ansb1+gbe7SatntqusQupg==}
+    resolution: {integrity: sha512-VdQC1tPIIcZAnf62L2M1eQif0x2vlKg3YK4kGYbtijSH4niEgI21GnstykW1vQIs+Bc6L+Hua2GATYVjilJ22A==}
 
-  '@mui/material@5.16.6':
+  '@mui/icons-material@6.1.1':
-    resolution: {integrity: sha512-0LUIKBOIjiFfzzFNxXZBRAyr9UQfmTAFzbt6ziOU2FDXhorNN2o3N9/32mNJbCA8zJo2FqFU6d3dtoqUDyIEfA==}
+    resolution: {integrity: sha512-sy/YKwcLPW8VcacNP2uWMYR9xyWuwO9NN9FXuGEU90bRshBXj8pdKk+joe3TCW7oviVS3zXLHlc94wQ0jNsQRQ==}
-    engines: {node: '>=12.0.0'}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@mui/material': ^6.1.1
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@mui/material@6.1.1':
+    resolution: {integrity: sha512-b+eULldTqtqTCbN++2BtBWCir/1LwEYw+2mIlOt2GiEUh1EBBw4/wIukGKKNt3xrCZqRA80yLLkV6tF61Lq3cA==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
       '@emotion/styled': ^11.3.0
-      '@types/react': ^17.0.0 || ^18.0.0
+      '@mui/material-pigment-css': ^6.1.1
-      react: ^17.0.0 || ^18.0.0
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@emotion/react':
         optional: true
       '@emotion/styled':
         optional: true
+      '@mui/material-pigment-css':
+        optional: true
       '@types/react':
         optional: true
 
-  '@mui/private-theming@5.16.6':
+  '@mui/private-theming@6.1.1':
-    resolution: {integrity: sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==}
+    resolution: {integrity: sha512-JlrjIdhyZUtewtdAuUsvi3ZnO0YS49IW4Mfz19ZWTlQ0sDGga6LNPVwHClWr2/zJK2we2BQx9/i8M32rgKuzrg==}
-    engines: {node: '>=12.0.0'}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@types/react': ^17.0.0 || ^18.0.0
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
-      react: ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@mui/styled-engine@5.16.6':
+  '@mui/styled-engine@6.1.1':
-    resolution: {integrity: sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==}
+    resolution: {integrity: sha512-HJyIoMpFb11fnHuRtUILOXgq6vj4LhIlE8maG4SwP/W+E5sa7HFexhnB3vOMT7bKys4UKNxhobC8jwWxYilGsA==}
-    engines: {node: '>=12.0.0'}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.4.1
       '@emotion/styled': ^11.3.0
-      react: ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@emotion/react':
         optional: true
       '@emotion/styled':
         optional: true
 
-  '@mui/system@5.16.6':
+  '@mui/system@6.1.1':
-    resolution: {integrity: sha512-5xgyJjBIMPw8HIaZpfbGAaFYPwImQn7Nyh+wwKWhvkoIeDosQ1ZMVrbTclefi7G8hNmqhip04duYwYpbBFnBgw==}
+    resolution: {integrity: sha512-PaYsCz2tUOcpu3T0okDEsSuP/yCDIj9JZ4Tox1JovRSKIjltHpXPsXZSGr3RiWdtM1MTQMFMCZzu0+CKbyy+Kw==}
-    engines: {node: '>=12.0.0'}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
       '@emotion/styled': ^11.3.0
-      '@types/react': ^17.0.0 || ^18.0.0
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
-      react: ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@emotion/react':
         optional: true
@@ -467,10 +468,10 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/types@7.2.15':
+  '@mui/types@7.2.17':
-    resolution: {integrity: sha512-nbo7yPhtKJkdf9kcVOF8JZHPZTmqXjJ/tI0bdWgHg5tp9AnIN4Y7f7wm9T+0SyGYJk76+GYZ8Q5XaTYAsUHN0Q==}
+    resolution: {integrity: sha512-oyumoJgB6jDV8JFzRqjBo2daUuHpzDjoO/e3IrRhhHo/FxJlaVhET6mcNrKHUq2E+R+q3ql0qAtvQ4rfWHhAeQ==}
     peerDependencies:
-      '@types/react': ^17.0.0 || ^18.0.0
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -485,14 +486,25 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/x-date-pickers@7.12.0':
+  '@mui/utils@6.1.1':
-    resolution: {integrity: sha512-WU5C7QNfSpJ9cP8vl2sY7q35NW+0TUMgEy+sl98fcPhLckq3cgV1wnVxoZnQZ3BxVQAtx+7ag/MpefU03vJcVw==}
+    resolution: {integrity: sha512-HlRrgdJSPbYDXPpoVMWZV8AE7WcFtAk13rWNWAEVWKSanzBBkymjz3km+Th/Srowsh4pf1fTSP1B0L116wQBYw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@mui/x-date-pickers@7.18.0':
+    resolution: {integrity: sha512-12tXIoMj9vpS8fS/bS3kWPCoVrH38vNGCxgplI0vOnUrN9rJuYJz3agLPJe1S0xciTw+9W8ZSe3soaW+owoz1Q==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@emotion/react': ^11.9.0
       '@emotion/styled': ^11.8.1
-      '@mui/material': ^5.15.14
+      '@mui/material': ^5.15.14 || ^6.0.0
-      date-fns: ^2.25.0 || ^3.2.0
+      '@mui/system': ^5.15.14 || ^6.0.0
+      date-fns: ^2.25.0 || ^3.2.0 || ^4.0.0
       date-fns-jalali: ^2.13.0-0 || ^3.2.0-0
       dayjs: ^1.10.7
       luxon: ^3.0.2
@@ -521,6 +533,12 @@ packages:
       moment-jalaali:
         optional: true
 
+  '@mui/x-internals@7.18.0':
+    resolution: {integrity: sha512-lzCHOWIR0cAIY1bGrWSprYerahbnH5C31ql/2OWCEjcngL2NAV1M6oKI2Vp4HheqzJ822c60UyWyapvyjSzY/A==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0
+
   '@popperjs/core@2.11.8':
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
@@ -573,8 +591,8 @@ packages:
   '@types/prop-types@15.7.12':
     resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
 
-  '@types/react-transition-group@4.4.10':
+  '@types/react-transition-group@4.4.11':
-    resolution: {integrity: sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==}
+    resolution: {integrity: sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==}
 
   '@types/react@18.3.3':
     resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==}
@@ -1107,6 +1125,10 @@ snapshots:
     dependencies:
       regenerator-runtime: 0.14.1
 
+  '@babel/runtime@7.25.6':
+    dependencies:
+      regenerator-runtime: 0.14.1
+
   '@babel/template@7.22.15':
     dependencies:
       '@babel/code-frame': 7.23.5
@@ -1134,18 +1156,10 @@ snapshots:
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
-  '@date-io/core@3.0.0': {}
-
-  '@date-io/date-fns@3.0.0(date-fns@3.6.0)':
-    dependencies:
-      '@date-io/core': 3.0.0
-    optionalDependencies:
-      date-fns: 3.6.0
-
   '@emotion/babel-plugin@11.12.0':
     dependencies:
       '@babel/helper-module-imports': 7.22.15
-      '@babel/runtime': 7.25.0
+      '@babel/runtime': 7.25.6
       '@emotion/hash': 0.9.2
       '@emotion/memoize': 0.9.0
       '@emotion/serialize': 1.3.0
@@ -1155,6 +1169,7 @@ snapshots:
       find-root: 1.1.0
       source-map: 0.5.7
       stylis: 4.2.0
+    optional: true
 
   '@emotion/cache@11.13.1':
     dependencies:
@@ -1164,17 +1179,19 @@ snapshots:
       '@emotion/weak-memoize': 0.4.0
       stylis: 4.2.0
 
-  '@emotion/hash@0.9.2': {}
+  '@emotion/hash@0.9.2':
+    optional: true
 
   '@emotion/is-prop-valid@1.3.0':
     dependencies:
       '@emotion/memoize': 0.9.0
+    optional: true
 
   '@emotion/memoize@0.9.0': {}
 
   '@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.25.0
+      '@babel/runtime': 7.25.6
       '@emotion/babel-plugin': 11.12.0
       '@emotion/cache': 11.13.1
       '@emotion/serialize': 1.3.0
@@ -1185,6 +1202,7 @@ snapshots:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.3
+    optional: true
 
   '@emotion/serialize@1.3.0':
     dependencies:
@@ -1193,12 +1211,13 @@ snapshots:
       '@emotion/unitless': 0.9.0
       '@emotion/utils': 1.4.0
       csstype: 3.1.3
+    optional: true
 
   '@emotion/sheet@1.4.0': {}
 
   '@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.25.0
+      '@babel/runtime': 7.25.6
       '@emotion/babel-plugin': 11.12.0
       '@emotion/is-prop-valid': 1.3.0
       '@emotion/react': 11.13.0(@types/react@18.3.3)(react@18.3.1)
@@ -1208,12 +1227,15 @@ snapshots:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.3
+    optional: true
 
-  '@emotion/unitless@0.9.0': {}
+  '@emotion/unitless@0.9.0':
+    optional: true
 
   '@emotion/use-insertion-effect-with-fallbacks@1.1.0(react@18.3.1)':
     dependencies:
       react: 18.3.1
+    optional: true
 
   '@emotion/utils@1.4.0': {}
 
@@ -1304,17 +1326,25 @@ snapshots:
 
   '@kurkle/color@0.3.2': {}
 
-  '@mui/core-downloads-tracker@5.16.6': {}
+  '@mui/core-downloads-tracker@6.1.1': {}
 
-  '@mui/material@5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/icons-material@6.1.1(@mui/material@6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.25.0
+      '@babel/runtime': 7.25.6
-      '@mui/core-downloads-tracker': 5.16.6
+      '@mui/material': 6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mui/system': 5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
-      '@mui/types': 7.2.15(@types/react@18.3.3)
+    optionalDependencies:
-      '@mui/utils': 5.16.6(@types/react@18.3.3)(react@18.3.1)
+      '@types/react': 18.3.3
+
+  '@mui/material@6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.25.6
+      '@mui/core-downloads-tracker': 6.1.1
+      '@mui/system': 6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+      '@mui/types': 7.2.17(@types/react@18.3.3)
+      '@mui/utils': 6.1.1(@types/react@18.3.3)(react@18.3.1)
       '@popperjs/core': 2.11.8
-      '@types/react-transition-group': 4.4.10
+      '@types/react-transition-group': 4.4.11
       clsx: 2.1.1
       csstype: 3.1.3
       prop-types: 15.8.1
@@ -1327,19 +1357,20 @@ snapshots:
       '@emotion/styled': 11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@types/react': 18.3.3
 
-  '@mui/private-theming@5.16.6(@types/react@18.3.3)(react@18.3.1)':
+  '@mui/private-theming@6.1.1(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.25.0
+      '@babel/runtime': 7.25.6
-      '@mui/utils': 5.16.6(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 6.1.1(@types/react@18.3.3)(react@18.3.1)
       prop-types: 15.8.1
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.3
 
-  '@mui/styled-engine@5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)':
+  '@mui/styled-engine@6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.25.0
+      '@babel/runtime': 7.25.6
       '@emotion/cache': 11.13.1
+      '@emotion/sheet': 1.4.0
       csstype: 3.1.3
       prop-types: 15.8.1
       react: 18.3.1
@@ -1347,13 +1378,13 @@ snapshots:
       '@emotion/react': 11.13.0(@types/react@18.3.3)(react@18.3.1)
       '@emotion/styled': 11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
 
-  '@mui/system@5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)':
+  '@mui/system@6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.25.0
+      '@babel/runtime': 7.25.6
-      '@mui/private-theming': 5.16.6(@types/react@18.3.3)(react@18.3.1)
+      '@mui/private-theming': 6.1.1(@types/react@18.3.3)(react@18.3.1)
-      '@mui/styled-engine': 5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)
+      '@mui/styled-engine': 6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)
-      '@mui/types': 7.2.15(@types/react@18.3.3)
+      '@mui/types': 7.2.17(@types/react@18.3.3)
-      '@mui/utils': 5.16.6(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 6.1.1(@types/react@18.3.3)(react@18.3.1)
       clsx: 2.1.1
       csstype: 3.1.3
       prop-types: 15.8.1
@@ -1363,14 +1394,14 @@ snapshots:
       '@emotion/styled': 11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@types/react': 18.3.3
 
-  '@mui/types@7.2.15(@types/react@18.3.3)':
+  '@mui/types@7.2.17(@types/react@18.3.3)':
     optionalDependencies:
       '@types/react': 18.3.3
 
   '@mui/utils@5.16.6(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.25.0
+      '@babel/runtime': 7.25.6
-      '@mui/types': 7.2.15(@types/react@18.3.3)
+      '@mui/types': 7.2.17(@types/react@18.3.3)
       '@types/prop-types': 15.7.12
       clsx: 2.1.1
       prop-types: 15.8.1
@@ -1379,13 +1410,26 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
-  '@mui/x-date-pickers@7.12.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/utils@6.1.1(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.25.0
+      '@babel/runtime': 7.25.6
-      '@mui/material': 5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/types': 7.2.17(@types/react@18.3.3)
-      '@mui/system': 5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+      '@types/prop-types': 15.7.12
+      clsx: 2.1.1
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-is: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
+  '@mui/x-date-pickers@7.18.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.25.6
+      '@mui/material': 6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mui/system': 6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@mui/utils': 5.16.6(@types/react@18.3.3)(react@18.3.1)
-      '@types/react-transition-group': 4.4.10
+      '@mui/x-internals': 7.18.0(@types/react@18.3.3)(react@18.3.1)
+      '@types/react-transition-group': 4.4.11
       clsx: 2.1.1
       prop-types: 15.8.1
       react: 18.3.1
@@ -1398,6 +1442,14 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
+  '@mui/x-internals@7.18.0(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.25.6
+      '@mui/utils': 5.16.6(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+    transitivePeerDependencies:
+      - '@types/react'
+
   '@popperjs/core@2.11.8': {}
 
   '@preact/preset-vite@2.8.1(@babel/core@7.23.7)(preact@10.19.3)(vite@4.5.1)':
@@ -1456,11 +1508,12 @@ snapshots:
 
   '@trpc/server@10.45.0': {}
 
-  '@types/parse-json@4.0.2': {}
+  '@types/parse-json@4.0.2':
+    optional: true
 
   '@types/prop-types@15.7.12': {}
 
-  '@types/react-transition-group@4.4.10':
+  '@types/react-transition-group@4.4.11':
     dependencies:
       '@types/react': 18.3.3
 
@@ -1475,9 +1528,10 @@ snapshots:
 
   babel-plugin-macros@3.1.0:
     dependencies:
-      '@babel/runtime': 7.25.0
+      '@babel/runtime': 7.25.6
       cosmiconfig: 7.1.0
       resolve: 1.22.8
+    optional: true
 
   babel-plugin-transform-hook-names@1.0.2(@babel/core@7.23.7):
     dependencies:
@@ -1492,7 +1546,8 @@ snapshots:
       node-releases: 2.0.14
       update-browserslist-db: 1.0.13(browserslist@4.22.2)
 
-  callsites@3.1.0: {}
+  callsites@3.1.0:
+    optional: true
 
   caniuse-lite@1.0.30001575: {}
 
@@ -1514,7 +1569,8 @@ snapshots:
 
   color-name@1.1.3: {}
 
-  convert-source-map@1.9.0: {}
+  convert-source-map@1.9.0:
+    optional: true
 
   convert-source-map@2.0.0: {}
 
@@ -1525,6 +1581,7 @@ snapshots:
       parse-json: 5.2.0
       path-type: 4.0.0
       yaml: 1.10.2
+    optional: true
 
   css-select@5.1.0:
     dependencies:
@@ -1576,6 +1633,7 @@ snapshots:
   error-ex@1.3.2:
     dependencies:
       is-arrayish: 0.2.1
+    optional: true
 
   esbuild@0.18.20:
     optionalDependencies:
@@ -1606,11 +1664,13 @@ snapshots:
 
   escape-string-regexp@1.0.5: {}
 
-  escape-string-regexp@4.0.0: {}
+  escape-string-regexp@4.0.0:
+    optional: true
 
   estree-walker@2.0.2: {}
 
-  find-root@1.1.0: {}
+  find-root@1.1.0:
+    optional: true
 
   fsevents@2.3.3:
     optional: true
@@ -1632,13 +1692,16 @@ snapshots:
   hoist-non-react-statics@3.3.2:
     dependencies:
       react-is: 16.13.1
+    optional: true
 
   import-fresh@3.3.0:
     dependencies:
       parent-module: 1.0.1
       resolve-from: 4.0.0
+    optional: true
 
-  is-arrayish@0.2.1: {}
+  is-arrayish@0.2.1:
+    optional: true
 
   is-core-module@2.13.1:
     dependencies:
@@ -1648,13 +1711,15 @@ snapshots:
 
   jsesc@2.5.2: {}
 
-  json-parse-even-better-errors@2.3.1: {}
+  json-parse-even-better-errors@2.3.1:
+    optional: true
 
   json5@2.2.3: {}
 
   kolorist@1.8.0: {}
 
-  lines-and-columns@1.2.4: {}
+  lines-and-columns@1.2.4:
+    optional: true
 
   loose-envify@1.4.0:
     dependencies:
@@ -1688,6 +1753,7 @@ snapshots:
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
+    optional: true
 
   parse-json@5.2.0:
     dependencies:
@@ -1695,10 +1761,12 @@ snapshots:
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
+    optional: true
 
   path-parse@1.0.7: {}
 
-  path-type@4.0.0: {}
+  path-type@4.0.0:
+    optional: true
 
   picocolors@1.0.0: {}
 
@@ -1761,7 +1829,8 @@ snapshots:
 
   regenerator-runtime@0.14.1: {}
 
-  resolve-from@4.0.0: {}
+  resolve-from@4.0.0:
+    optional: true
 
   resolve@1.22.8:
     dependencies:
@@ -1781,7 +1850,8 @@ snapshots:
 
   source-map-js@1.2.0: {}
 
-  source-map@0.5.7: {}
+  source-map@0.5.7:
+    optional: true
 
   stylis@4.2.0: {}
 
@@ -1811,4 +1881,5 @@ snapshots:
 
   yallist@3.1.1: {}
 
-  yaml@1.10.2: {}
+  yaml@1.10.2:
+    optional: true

frontend/src/pages/HistoricalCalendarPrices.tsx

@@ -1,4 +1,3 @@
-import { signal, computed } from "@preact/signals";
 import { useEffect } from "preact/hooks";
 import { trpc } from "../trpc.js";
 import {
@@ -6,195 +5,65 @@ import {
   LinearScale,
   CategoryScale,
   PointElement,
+  LineElement,
   Tooltip,
   Title,
 } from "chart.js";
 import { Scatter } from "react-chartjs-2";
 import {
   Container,
-  Grid,
+  Grid2,
   Typography,
-  TextField,
-  Select,
-  MenuItem,
-  InputLabel,
-  FormControl,
   Paper,
+  Popper,
+  ClickAwayListener,
+  Stack,
 } from "@mui/material";
+import {
+  availableUnderlyings,
+  calendarExitPriceChartData,
+  isPopperOpen,
+  lookbackPeriodEnd,
+  lookbackPeriodStart,
+  maxChartPrice,
+  maxN,
+  popperAnchorEl,
+  popperContent,
+  similarCalendarPriceChartData,
+  stockPriceChartData,
+  underlying,
+} from "./HistoricalCalendarPrices/state.js";
+import { EditableStrike } from "./HistoricalCalendarPrices/EditableStrike.js";
+import {
+  refreshcalendarExitPriceChartData,
+  refreshSimilarCalendarPriceChartData,
+  refreshStockPriceChartData,
+} from "./HistoricalCalendarPrices/actions.js";
+import { EditableUnderlying } from "./HistoricalCalendarPrices/EditableUnderlying.js";
+import { EditableOpenDTE } from "./HistoricalCalendarPrices/EditableOpenDTE.js";
+import { EditableExitDTE } from "./HistoricalCalendarPrices/EditableExitDTE.js";
+import { EditableSpan } from "./HistoricalCalendarPrices/EditableSpan.js";
+import { EditableLookbackPeriod } from "./HistoricalCalendarPrices/EditableLookbackPeriod.js";
 
-ChartJS.register(LinearScale, CategoryScale, PointElement, Tooltip, Title);
+ChartJS.register(
-
+  LinearScale,
-const availableUnderlyings = signal([]);
+  CategoryScale,
-const chosenUnderlying = signal(null);
+  PointElement,
-
+  LineElement,
-const chosenDaysToFrontExpiration = signal(14);
+  Tooltip,
-
+  Title
-const chosenDaysBetweenFrontAndBackExpiration = signal(14);
-
-const chosenStrikePercentageFromUnderlyingPrice = signal(1.4);
-const chosenStrikePercentageFromUnderlyingPriceRadius = signal(0.05);
-
-const chosenExitToFrontExpiration = signal(2);
-
-const historicalStockQuoteChartData = signal([]);
-
-const historicalCalendarQuoteChartData = signal([]);
-
-const historicalCalendarExitQuoteChartData = signal([]);
-
-const chosenLookbackPeriodStart = signal("2022-01-01");
-const chosenLookbackPeriodEnd = signal("2024-01-01");
-
-const maxChartPrice = computed(() =>
-  Math.max(
-    Math.max.apply(
-      null,
-      historicalCalendarQuoteChartData.value.map((d) => d.y),
-    ),
-    Math.max.apply(
-      null,
-      historicalCalendarExitQuoteChartData.value.map((d) => d.y),
-    ),
-  ),
 );
 
-const maxN = computed(() =>
-  Math.max.apply(
-    null,
-    historicalCalendarExitQuoteChartData.value.map((d) => d.n),
-  ),
-);
-
-const refreshHistoricalStockQuoteChartData = () => {
-  historicalStockQuoteChartData.value = [];
-  trpc.getHistoricalStockQuoteChartData
-    .query({
-      underlying: chosenUnderlying.value,
-      lookbackPeriodStart: chosenLookbackPeriodStart.value,
-      lookbackPeriodEnd: chosenLookbackPeriodEnd.value,
-    })
-    .then((getHistoricalStockQuoteChartDataResponse) => {
-      historicalStockQuoteChartData.value =
-        getHistoricalStockQuoteChartDataResponse;
-    });
-};
-const refreshHistoricalCalendarQuoteChartData = () => {
-  historicalCalendarQuoteChartData.value = [];
-  trpc.getHistoricalCalendarQuoteChartData
-    .query({
-      underlying: chosenUnderlying.value,
-      daysToFrontExpiration: chosenDaysToFrontExpiration.value,
-      daysBetweenFrontAndBackExpiration:
-        chosenDaysBetweenFrontAndBackExpiration.value,
-      strikePercentageFromUnderlyingPriceRangeMin:
-        chosenStrikePercentageFromUnderlyingPrice.value -
-        chosenStrikePercentageFromUnderlyingPriceRadius.value,
-      strikePercentageFromUnderlyingPriceRangeMax:
-        chosenStrikePercentageFromUnderlyingPrice.value +
-        chosenStrikePercentageFromUnderlyingPriceRadius.value,
-      lookbackPeriodStart: chosenLookbackPeriodStart.value,
-      lookbackPeriodEnd: chosenLookbackPeriodEnd.value,
-    })
-    .then((getHistoricalCalendarQuoteChartDataResponse) => {
-      historicalCalendarQuoteChartData.value =
-        getHistoricalCalendarQuoteChartDataResponse;
-    });
-};
-const refreshHistoricalCalendarExitQuoteChartData = () => {
-  historicalCalendarExitQuoteChartData.value = [];
-  trpc.getHistoricalCalendarExitQuoteChartData
-    .query({
-      underlying: chosenUnderlying.value,
-      daysToFrontExpiration: chosenExitToFrontExpiration.value,
-      daysBetweenFrontAndBackExpiration:
-        chosenDaysBetweenFrontAndBackExpiration.value,
-      lookbackPeriodStart: chosenLookbackPeriodStart.value,
-      lookbackPeriodEnd: chosenLookbackPeriodEnd.value,
-    })
-    .then((getHistoricalCalendarExitQuoteChartDataResponse) => {
-      historicalCalendarExitQuoteChartData.value =
-        getHistoricalCalendarExitQuoteChartDataResponse;
-    });
-};
 const handleInit = () => {
-  trpc.getAvailableUnderlyings.query().then((availableUnderlyingsResponse) => {
+  trpc.CalendarCharacteristicsForm.getAvailableUnderlyings
-    availableUnderlyings.value = availableUnderlyingsResponse;
+    .query()
-    chosenUnderlying.value = availableUnderlyingsResponse[0];
+    .then((availableUnderlyingsResponse) => {
-    refreshHistoricalStockQuoteChartData();
+      availableUnderlyings.value = availableUnderlyingsResponse;
-    refreshHistoricalCalendarQuoteChartData();
+      underlying.value = availableUnderlyingsResponse[0];
-    refreshHistoricalCalendarExitQuoteChartData();
+      refreshStockPriceChartData();
-  });
+      refreshSimilarCalendarPriceChartData();
-};
+      refreshcalendarExitPriceChartData();
-const handleUnderlyingChange = (e) => {
+    });
-  if (chosenUnderlying.value !== e.target.value) {
-    chosenUnderlying.value = e.target.value;
-    refreshHistoricalStockQuoteChartData();
-    refreshHistoricalCalendarQuoteChartData();
-    refreshHistoricalCalendarExitQuoteChartData();
-  }
-};
-const handleDaysToFrontExpirationChange = (e) => {
-  if (chosenDaysToFrontExpiration.value !== Number.parseInt(e.target.value)) {
-    chosenDaysToFrontExpiration.value = Number.parseInt(e.target.value);
-    refreshHistoricalCalendarQuoteChartData();
-  }
-};
-const handleDaysBetweenFrontAndBackExpirationChange = (e) => {
-  if (
-    chosenDaysBetweenFrontAndBackExpiration.value !==
-    Number.parseInt(e.target.value)
-  ) {
-    chosenDaysBetweenFrontAndBackExpiration.value = Number.parseInt(
-      e.target.value,
-    );
-    refreshHistoricalCalendarQuoteChartData();
-    refreshHistoricalCalendarExitQuoteChartData();
-  }
-};
-const handleStrikePercentageFromUnderlyingPriceChange = (e) => {
-  if (
-    chosenStrikePercentageFromUnderlyingPrice.value !==
-    Number.parseFloat(e.target.value)
-  ) {
-    chosenStrikePercentageFromUnderlyingPrice.value = Number.parseFloat(
-      e.target.value,
-    );
-    refreshHistoricalCalendarQuoteChartData();
-  }
-};
-const handleStrikePercentageFromUnderlyingPriceRadiusChange = (e) => {
-  if (
-    chosenStrikePercentageFromUnderlyingPriceRadius.value !==
-    Number.parseFloat(e.target.value)
-  ) {
-    chosenStrikePercentageFromUnderlyingPriceRadius.value = Number.parseFloat(
-      e.target.value,
-    );
-    refreshHistoricalCalendarQuoteChartData();
-  }
-};
-const handleExitToFrontExpirationChange = (e) => {
-  if (chosenExitToFrontExpiration.value !== Number.parseInt(e.target.value)) {
-    chosenExitToFrontExpiration.value = Number.parseInt(e.target.value);
-    refreshHistoricalCalendarExitQuoteChartData();
-  }
-};
-
-const handleLookbackPeriodStartChange = (e) => {
-  if (chosenLookbackPeriodStart.value !== e.target.value) {
-    chosenLookbackPeriodStart.value = e.target.value;
-    refreshHistoricalStockQuoteChartData();
-    refreshHistoricalCalendarQuoteChartData();
-    refreshHistoricalCalendarExitQuoteChartData();
-  }
-};
-const handleLookbackPeriodEndChange = (e) => {
-  if (chosenLookbackPeriodEnd.value !== e.target.value) {
-    chosenLookbackPeriodEnd.value = e.target.value;
-    refreshHistoricalStockQuoteChartData();
-    refreshHistoricalCalendarQuoteChartData();
-    refreshHistoricalCalendarExitQuoteChartData();
-  }
 };
 
 export function HistoricalCalendarPrices() {
@@ -202,193 +71,94 @@ export function HistoricalCalendarPrices() {
 
   return (
     <Container maxWidth="lg">
-      <Grid container spacing={4}>
+      <Grid2 container spacing={4} columns={12}>
-        <Grid item xs={12}>
+        {/* <Grid2 size={{ xs: 12 }}>
+          
           <Typography variant="h4" gutterBottom>
-            Historical Calendar Prices
+            <EditableUnderlying /> :
+            <EditableSpan />
+            -Day Calendar @ <EditableStrike />
+            %-from-the-money
           </Typography>
-        </Grid>
+          <Typography variant="h5" gutterBottom sx={{ pl: 1 }}>
-        <Grid item xs={12} md={6}>
+            Opening at <EditableOpenDTE /> DTE, Closing at <EditableExitDTE />
-          <Paper elevation={3} sx={{ p: 3 }}>
+            DTE
-            <Grid container spacing={2}>
+          </Typography>
-              <Grid item xs={12}>
+          <Typography variant="h5" gutterBottom>
-                <FormControl fullWidth>
+            <EditableLookbackPeriodStart />-
-                  <InputLabel>Available Underlyings</InputLabel>
+            <EditableLookbackPeriodEnd />
-                  <Select
+          </Typography>
-                    value={chosenUnderlying.value || ""}
+          <ClickAwayListener
-                    onChange={handleUnderlyingChange}
+            onClickAway={() => {
-                    label="Available Underlyings"
+              isPopperOpen.value = false;
-                  >
+              // refreshSimilarCalendarPriceChartData();
-                    {availableUnderlyings.value.map((underlying) => (
+              console.log("clicked away");
-                      <MenuItem key={underlying} value={underlying}>
+            }}
-                        {underlying}
+          >
-                      </MenuItem>
+            <Popper open={isPopperOpen.value} anchorEl={popperAnchorEl.value}>
-                    ))}
+              <Paper elevation={3} sx={{ p: 3 }}>
-                  </Select>
+                {popperContent.value}
-                </FormControl>
+              </Paper>
-              </Grid>
+            </Popper>
-              <Grid item xs={12}>
+          </ClickAwayListener>
-                <TextField
+        </Grid2> */}
-                  fullWidth
+
-                  label="Now-to-Front-Month Days to Expiration"
+        <Grid2 size={{ xs: 12 }}>
-                  type="number"
+          <Stack direction="row" spacing={2}>
-                  value={chosenDaysToFrontExpiration.value}
+            <Typography gutterBottom minWidth={"8em"}>
-                  onChange={handleDaysToFrontExpirationChange}
+              Underlying
-                  InputProps={{ endAdornment: "Days" }}
+            </Typography>
-                />
+            <EditableUnderlying />
-              </Grid>
+          </Stack>
-              <Grid item xs={12}>
+          <Stack direction="row" spacing={2}>
-                <TextField
+            <Typography gutterBottom minWidth={"8em"}>
-                  fullWidth
+              Open DTE
-                  label="Front-to-Back-Month Days to Expiration Difference"
+            </Typography>
-                  type="number"
+            <EditableOpenDTE />
-                  value={chosenDaysBetweenFrontAndBackExpiration.value}
+          </Stack>
-                  onChange={handleDaysBetweenFrontAndBackExpirationChange}
+          <Stack direction="row" spacing={2}>
-                  InputProps={{ endAdornment: "Days Difference" }}
+            <Typography gutterBottom minWidth={"8em"}>
-                />
+              Exit DTE
-              </Grid>
+            </Typography>
-              <Grid item xs={6}>
+            <EditableExitDTE />
-                <TextField
+          </Stack>
-                  fullWidth
+          <Stack direction="row" spacing={2}>
-                  label="Strike % From Underlying Price"
+            <Typography gutterBottom minWidth={"8em"}>
-                  type="number"
+              Span
-                  value={chosenStrikePercentageFromUnderlyingPrice.value}
+            </Typography>
-                  onChange={handleStrikePercentageFromUnderlyingPriceChange}
+            <EditableSpan />
-                  InputProps={{ endAdornment: "%" }}
+          </Stack>
-                />
+          <Stack direction="row" spacing={2}>
-              </Grid>
+            <Typography gutterBottom minWidth={"8em"}>
-              <Grid item xs={6}>
+              Lookback Period
-                <TextField
+            </Typography>
-                  fullWidth
+            <EditableLookbackPeriod />
-                  label="Strike % Radius"
+          </Stack>
-                  type="number"
+          <ClickAwayListener
-                  value={chosenStrikePercentageFromUnderlyingPriceRadius.value}
+            onClickAway={() => {
-                  onChange={
+              isPopperOpen.value = false;
-                    handleStrikePercentageFromUnderlyingPriceRadiusChange
+              // refreshSimilarCalendarPriceChartData();
-                  }
+              console.log("clicked away");
-                  InputProps={{ endAdornment: "%" }}
+            }}
-                />
+          >
-              </Grid>
+            <Popper open={isPopperOpen.value} anchorEl={popperAnchorEl.value}>
-              <Grid item xs={12}>
+              <Paper elevation={3} sx={{ p: 3 }}>
-                <TextField
+                {popperContent.value}
-                  fullWidth
+              </Paper>
-                  label="Exit-to-Front-Month Days to Expiration"
+            </Popper>
-                  type="number"
+          </ClickAwayListener>
-                  value={chosenExitToFrontExpiration.value}
+        </Grid2>
-                  onChange={handleExitToFrontExpirationChange}
+
-                  InputProps={{ endAdornment: "Days" }}
+        <Grid2 size={{ xs: 12, md: 6 }}>
-                />
+          <Paper elevation={3} sx={{ p: 3, minHeight: "28em" }}>
-              </Grid>
+            {underlying.value !== null &&
-              <Grid item xs={6}>
+            similarCalendarPriceChartData.value.length > 0 ? (
-                <TextField
-                  fullWidth
-                  label="Lookback Period Start"
-                  type="date"
-                  value={chosenLookbackPeriodStart.value}
-                  onChange={(e) =>
-                    handleLookbackPeriodStartChange({
-                      target: { value: e.target.value },
-                    })
-                  }
-                  InputLabelProps={{ shrink: true }}
-                />
-              </Grid>
-              <Grid item xs={6}>
-                <TextField
-                  fullWidth
-                  label="Lookback Period End"
-                  type="date"
-                  value={chosenLookbackPeriodEnd.value}
-                  onChange={(e) =>
-                    handleLookbackPeriodEndChange({
-                      target: { value: e.target.value },
-                    })
-                  }
-                  InputLabelProps={{ shrink: true }}
-                />
-              </Grid>
-            </Grid>
-          </Paper>
-        </Grid>
-        <Grid item xs={12} md={6}>
-          <Paper elevation={3} sx={{ p: 3, height: "100%" }}>
-            {chosenUnderlying.value !== null &&
-            historicalStockQuoteChartData.value.length > 0 ? (
-              <Scatter
-                data={{
-                  datasets: [
-                    {
-                      label: "Stock Open Price",
-                      data: historicalStockQuoteChartData.value,
-                    },
-                  ],
-                }}
-                options={{
-                  scales: {
-                    x: {
-                      title: {
-                        display: true,
-                        text: "Time",
-                      },
-                      ticks: {
-                        callback: (value, index, ticks) =>
-                          new Date((value as number) * 1000)
-                            .toISOString()
-                            .substring(0, 10),
-                      },
-                      min:
-                        new Date(chosenLookbackPeriodStart.value).getTime() /
-                        1000,
-                      max:
-                        new Date(chosenLookbackPeriodEnd.value).getTime() /
-                        1000,
-                    },
-                    y: {
-                      beginAtZero: false,
-                      ticks: {
-                        callback: (value, index, ticks) =>
-                          `$${value.toString()}`,
-                      },
-                    },
-                  },
-                  elements: {
-                    point: {
-                      radius: 1,
-                      borderWidth: 0,
-                    },
-                  },
-                  plugins: {
-                    tooltip: {
-                      enabled: false,
-                    },
-                    legend: {
-                      display: false,
-                    },
-                    title: {
-                      display: true,
-                      text: "Stock Price",
-                    },
-                  },
-                  animation: false,
-                  maintainAspectRatio: false,
-                  events: [],
-                }}
-              />
-            ) : (
-              <Typography>Loading Chart...</Typography>
-            )}
-          </Paper>
-        </Grid>
-        <Grid item xs={12}>
-          <Paper elevation={3} sx={{ p: 3 }}>
-            {chosenUnderlying.value !== null &&
-            historicalCalendarQuoteChartData.value.length > 0 ? (
               <Scatter
                 data={{
                   datasets: [
                     {
                       label: "Calendar Open Price",
-                      data: historicalCalendarQuoteChartData.value,
+                      data: similarCalendarPriceChartData.value,
                     },
                   ],
                 }}
@@ -405,12 +175,8 @@ export function HistoricalCalendarPrices() {
                             .toISOString()
                             .substring(0, 10),
                       },
-                      min:
+                      min: new Date(lookbackPeriodStart.value).getTime() / 1000,
-                        new Date(chosenLookbackPeriodStart.value).getTime() /
+                      max: new Date(lookbackPeriodEnd.value).getTime() / 1000,
-                        1000,
-                      max:
-                        new Date(chosenLookbackPeriodEnd.value).getTime() /
-                        1000,
                     },
                     y: {
                       beginAtZero: true,
@@ -443,17 +209,17 @@ export function HistoricalCalendarPrices() {
               <Typography>Loading Chart...</Typography>
             )}
           </Paper>
-        </Grid>
+        </Grid2>
-        <Grid item xs={12}>
+        <Grid2 size={{ xs: 12, md: 6 }}>
-          <Paper elevation={3} sx={{ p: 3 }}>
+          <Paper elevation={3} sx={{ p: 3, minHeight: "28em" }}>
-            {chosenUnderlying.value !== null &&
+            {underlying.value !== null &&
-            historicalCalendarQuoteChartData.value.length > 0 ? (
+            calendarExitPriceChartData.value.length > 0 ? (
               <Scatter
                 data={{
                   datasets: [
                     {
                       label: "Calendar Exit Price",
-                      data: historicalCalendarExitQuoteChartData.value,
+                      data: calendarExitPriceChartData.value,
                     },
                   ],
                 }}
@@ -517,8 +283,78 @@ export function HistoricalCalendarPrices() {
               <Typography>Loading Chart...</Typography>
             )}
           </Paper>
-        </Grid>
+        </Grid2>
-      </Grid>
+        <Grid2 size={{ xs: 12 }}>
+          <Paper elevation={3} sx={{ p: 3, minHeight: "28em", height: "100%" }}>
+            {underlying.value !== null &&
+            stockPriceChartData.value.length > 0 ? (
+              <Scatter
+                data={{
+                  datasets: [
+                    {
+                      label: "Stock Open Price",
+                      data: stockPriceChartData.value,
+                    },
+                  ],
+                }}
+                options={{
+                  showLine: true,
+                  normalized: true,
+                  scales: {
+                    x: {
+                      title: {
+                        display: true,
+                        text: "Time",
+                      },
+                      ticks: {
+                        callback: (value, index, ticks) =>
+                          new Date((value as number) * 1000)
+                            .toISOString()
+                            .substring(0, 10),
+                      },
+                      min: new Date(lookbackPeriodStart.value).getTime() / 1000,
+                      max: new Date(lookbackPeriodEnd.value).getTime() / 1000,
+                    },
+                    y: {
+                      beginAtZero: false,
+                      ticks: {
+                        callback: (value, index, ticks) =>
+                          `$${value.toString()}`,
+                      },
+                    },
+                  },
+                  elements: {
+                    point: {
+                      radius: 2,
+                      borderWidth: 0,
+                    },
+                    line: {
+                      borderWidth: 2,
+                    },
+                  },
+                  plugins: {
+                    tooltip: {
+                      enabled: false,
+                    },
+                    legend: {
+                      display: false,
+                    },
+                    title: {
+                      display: true,
+                      text: "Stock Price",
+                    },
+                  },
+                  animation: false,
+                  maintainAspectRatio: false,
+                  events: [],
+                }}
+              />
+            ) : (
+              <Typography>Loading Chart...</Typography>
+            )}
+          </Paper>
+        </Grid2>
+      </Grid2>
     </Container>
   );
 }

frontend/src/pages/HistoricalCalendarPrices/EditableExitDTE.tsx

@@ -0,0 +1,28 @@
+import TextField from "@mui/material/TextField";
+import { EditableValue } from "./EditableValue";
+import { exitDTE } from "./state";
+import { refreshcalendarExitPriceChartData } from "./actions";
+import Slider from "@mui/material/Slider";
+
+const handleExitDTEChange = (e) => {
+  if (exitDTE.value !== Number.parseInt(e.target.value)) {
+    exitDTE.value = Number.parseInt(e.target.value);
+    refreshcalendarExitPriceChartData();
+  }
+};
+
+export function EditableExitDTE() {
+  return (
+    <Slider
+      value={exitDTE.value}
+      onChange={handleExitDTEChange}
+      min={0}
+      max={5}
+      step={1}
+      valueLabelDisplay="on"
+    />
+    // <EditableValue text={exitDTE.value}>
+    //   <ExitToFrontExpirationChooser />
+    // </EditableValue>
+  );
+}

frontend/src/pages/HistoricalCalendarPrices/EditableLookbackPeriod.tsx

@@ -0,0 +1,66 @@
+import TextField from "@mui/material/TextField";
+import {
+  refreshcalendarExitPriceChartData,
+  refreshSimilarCalendarPriceChartData,
+  refreshStockPriceChartData,
+} from "./actions";
+import { lookbackPeriodEnd, lookbackPeriodStart } from "./state";
+import Slider from "@mui/material/Slider";
+
+const handleLookbackPeriodChange = (
+  e,
+  [newLookbackPeriodStart, newLookbackPeriodEnd]: [number, number]
+) => {
+  const [lookbackPeriodStartUnixTime, lookbackPeriodEndUnixTime] = [
+    new Date(lookbackPeriodStart.value).getTime(),
+    new Date(lookbackPeriodEnd.value).getTime(),
+  ];
+  if (lookbackPeriodStartUnixTime !== newLookbackPeriodStart) {
+    lookbackPeriodStart.value = new Date(newLookbackPeriodStart)
+      .toISOString()
+      .substring(0, 10);
+    refreshStockPriceChartData();
+    refreshSimilarCalendarPriceChartData();
+    refreshcalendarExitPriceChartData();
+  }
+  if (lookbackPeriodEndUnixTime !== newLookbackPeriodEnd) {
+    lookbackPeriodEnd.value = new Date(newLookbackPeriodEnd)
+      .toISOString()
+      .substring(0, 10);
+    refreshStockPriceChartData();
+    refreshSimilarCalendarPriceChartData();
+    refreshcalendarExitPriceChartData();
+  }
+};
+
+const earliestDate = new Date("2022-03-07");
+const DAY = 1000 * 60 * 60 * 24;
+function addDays(date, days) {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result.toISOString().substring(0, 10);
+}
+function daysBetween(date1, date2) {
+  return Math.round(Math.abs((date2.getTime() - date1.getTime()) / DAY));
+}
+export function EditableLookbackPeriod() {
+  return (
+    <Slider
+      value={[
+        new Date(lookbackPeriodStart.value).getTime(),
+        new Date(lookbackPeriodEnd.value).getTime(),
+      ]}
+      onChange={handleLookbackPeriodChange}
+      valueLabelFormat={(unixTimeMs) =>
+        new Date(unixTimeMs).toISOString().substring(0, 10)
+      }
+      getAriaValueText={(unixTimeMs) =>
+        new Date(unixTimeMs).toISOString().substring(0, 10)
+      }
+      min={earliestDate.getTime()}
+      max={earliestDate.getTime() + 250 * DAY}
+      step={DAY}
+      valueLabelDisplay="on"
+    />
+  );
+}

frontend/src/pages/HistoricalCalendarPrices/EditableLookbackPeriodEnd.tsx

@@ -0,0 +1,38 @@
+import TextField from "@mui/material/TextField";
+import {
+  refreshcalendarExitPriceChartData,
+  refreshSimilarCalendarPriceChartData,
+  refreshStockPriceChartData,
+} from "./actions";
+import { lookbackPeriodEnd } from "./state";
+import { EditableValue } from "./EditableValue";
+
+const handleLookbackPeriodEndChange = (e) => {
+  if (lookbackPeriodEnd.value !== e.target.value) {
+    lookbackPeriodEnd.value = e.target.value;
+    refreshStockPriceChartData();
+    refreshSimilarCalendarPriceChartData();
+    refreshcalendarExitPriceChartData();
+  }
+};
+
+function LookbackPeriodEndChooser() {
+  return (
+    <TextField
+      fullWidth
+      label="Lookback Period End"
+      type="date"
+      value={lookbackPeriodEnd.value}
+      onChange={handleLookbackPeriodEndChange}
+      InputLabelProps={{ shrink: true }}
+    />
+  );
+}
+
+export function EditableLookbackPeriodEnd() {
+  return (
+    <EditableValue text={lookbackPeriodEnd.value}>
+      <LookbackPeriodEndChooser />
+    </EditableValue>
+  );
+}

frontend/src/pages/HistoricalCalendarPrices/EditableLookbackPeriodStart.tsx

@@ -0,0 +1,38 @@
+import TextField from "@mui/material/TextField";
+import {
+  refreshcalendarExitPriceChartData,
+  refreshSimilarCalendarPriceChartData,
+  refreshStockPriceChartData,
+} from "./actions";
+import { lookbackPeriodStart } from "./state";
+import { EditableValue } from "./EditableValue";
+
+const handleLookbackPeriodStartChange = (e) => {
+  if (lookbackPeriodStart.value !== e.target.value) {
+    lookbackPeriodStart.value = e.target.value;
+    refreshStockPriceChartData();
+    refreshSimilarCalendarPriceChartData();
+    refreshcalendarExitPriceChartData();
+  }
+};
+
+function LookbackPeriodStartChooser() {
+  return (
+    <TextField
+      fullWidth
+      label="Lookback Period Start"
+      type="date"
+      value={lookbackPeriodStart.value}
+      onChange={handleLookbackPeriodStartChange}
+      InputLabelProps={{ shrink: true }}
+    />
+  );
+}
+
+export function EditableLookbackPeriodStart() {
+  return (
+    <EditableValue text={lookbackPeriodStart.value}>
+      <LookbackPeriodStartChooser />
+    </EditableValue>
+  );
+}

frontend/src/pages/HistoricalCalendarPrices/EditableOpenDTE.tsx

@@ -0,0 +1,26 @@
+import { refreshSimilarCalendarPriceChartData } from "./actions";
+import { openDTE } from "./state";
+import Slider from "@mui/material/Slider";
+
+const handleOpenDTEChange = (e) => {
+  if (openDTE.value !== Number.parseInt(e.target.value)) {
+    openDTE.value = Number.parseInt(e.target.value);
+    refreshSimilarCalendarPriceChartData();
+  }
+};
+
+export function EditableOpenDTE() {
+  return (
+    <Slider
+      value={openDTE.value}
+      onChange={handleOpenDTEChange}
+      min={0}
+      max={5}
+      step={1}
+      valueLabelDisplay="on"
+    />
+    // <EditableValue text={openDTE.value}>
+    //   <DaysToFrontExpirationChooser />
+    // </EditableValue>
+  );
+}

frontend/src/pages/HistoricalCalendarPrices/EditableSpan.tsx

@@ -0,0 +1,45 @@
+import TextField from "@mui/material/TextField";
+import {
+  refreshcalendarExitPriceChartData,
+  refreshSimilarCalendarPriceChartData,
+} from "./actions";
+import { span } from "./state";
+import { EditableValue } from "./EditableValue";
+import Slider from "@mui/material/Slider";
+
+const handleSpanChange = (e) => {
+  if (span.value !== Number.parseInt(e.target.value)) {
+    span.value = Number.parseInt(e.target.value);
+    refreshSimilarCalendarPriceChartData();
+    refreshcalendarExitPriceChartData();
+  }
+};
+
+function DaysBetweenFrontAndBackExpirationChooser() {
+  return (
+    <TextField
+      fullWidth
+      label="Front-to-Back-Month Days to Expiration Difference"
+      type="number"
+      value={span.value}
+      onChange={handleSpanChange}
+      InputProps={{ endAdornment: "Days Difference" }}
+    />
+  );
+}
+
+export function EditableSpan() {
+  return (
+    <Slider
+      value={span.value}
+      onChange={handleSpanChange}
+      min={3}
+      max={45}
+      step={1}
+      valueLabelDisplay="on"
+    />
+    // <EditableValue text={span.value}>
+    //   <DaysBetweenFrontAndBackExpirationChooser />
+    // </EditableValue>
+  );
+}

frontend/src/pages/HistoricalCalendarPrices/EditableStrike.tsx

@@ -0,0 +1,65 @@
+import Box from "@mui/material/Box";
+import { EditableValue } from "./EditableValue";
+import { moniness, moninessRadius } from "./state";
+import Slider from "@mui/material/Slider";
+import { refreshSimilarCalendarPriceChartData } from "./actions";
+
+function MoninessChooser() {
+  return (
+    <Slider
+      fullWidth
+      label="Strike % From Underlying Price"
+      value={moniness.value}
+      valueLabelDisplay="on"
+      min={0}
+      max={10}
+      step={1}
+      onChange={(e, value) => {
+        moniness.value = value as number;
+      }}
+      onChangeCommitted={(e, value) => {
+        refreshSimilarCalendarPriceChartData();
+      }}
+      InputProps={{ endAdornment: "%" }}
+    />
+  );
+}
+
+function MoninessRadiusChooser() {
+  return (
+    <Slider
+      fullWidth
+      label="Strike % Radius"
+      value={moninessRadius.value}
+      valueLabelDisplay="on"
+      min={0}
+      max={10}
+      step={1}
+      onChange={(e, value) => {
+        moninessRadius.value = value as number;
+      }}
+      onChangeCommitted={(e, value) => {
+        refreshSimilarCalendarPriceChartData();
+      }}
+      InputProps={{ endAdornment: "%" }}
+    />
+  );
+}
+
+/** This is its own component so that sliding the slider with the mouse is
+ * smoother. Preact detects reads from the "slider" signal values, and
+ * associates them with the component that read them and redraws that component.
+ * If this was not its own component, it would redraw the entire UI. It was very
+ * slow. */
+export function EditableStrike() {
+  return (
+    <EditableValue
+      text={`${moniness.value.toFixed(1)}±${moninessRadius.value.toFixed(2)}`}
+    >
+      <Box sx={{ minWidth: "20em" }}>
+        <MoninessChooser />
+        <MoninessRadiusChooser />
+      </Box>
+    </EditableValue>
+  );
+}

frontend/src/pages/HistoricalCalendarPrices/EditableUnderlying.tsx

@@ -0,0 +1,42 @@
+import Select from "@mui/material/Select";
+import { EditableValue } from "./EditableValue";
+import { availableUnderlyings, underlying } from "./state";
+import MenuItem from "@mui/material/MenuItem";
+import {
+  refreshcalendarExitPriceChartData,
+  refreshSimilarCalendarPriceChartData,
+  refreshStockPriceChartData,
+} from "./actions";
+
+const handleUnderlyingChange = (e) => {
+  if (underlying.value !== e.target.value) {
+    underlying.value = e.target.value;
+    refreshStockPriceChartData();
+    refreshSimilarCalendarPriceChartData();
+    refreshcalendarExitPriceChartData();
+  }
+};
+
+function UnderlyingChooser() {
+  return (
+    <Select
+      value={underlying.value || ""}
+      onChange={handleUnderlyingChange}
+      label="Available Underlyings"
+    >
+      {availableUnderlyings.value.map((underlying) => (
+        <MenuItem key={underlying} value={underlying}>
+          {underlying}
+        </MenuItem>
+      ))}
+    </Select>
+  );
+}
+
+export function EditableUnderlying() {
+  return (
+    <EditableValue text={underlying.value}>
+      <UnderlyingChooser />
+    </EditableValue>
+  );
+}

frontend/src/pages/HistoricalCalendarPrices/EditableValue.tsx

@@ -0,0 +1,29 @@
+import Button from "@mui/material/Button";
+import { isPopperOpen, popperAnchorEl, popperContent } from "./state";
+
+export function EditableValue({ text, children }) {
+  return (
+    <Button
+      variant="text"
+      size="large"
+      sx={{
+        textDecoration: "underline",
+        textUnderlineOffset: "3px",
+        fontSize: "1.0em",
+      }}
+      onClick={(e) => {
+        // stop propagation so it's not caught by the ClickAwayListener:
+        e.stopPropagation();
+        if (isPopperOpen.value === false) {
+          isPopperOpen.value = true;
+          popperAnchorEl.value = e.currentTarget;
+          popperContent.value = children;
+        } else {
+          isPopperOpen.value = false;
+        }
+      }}
+    >
+      {text}
+    </Button>
+  );
+}

frontend/src/pages/HistoricalCalendarPrices/actions.ts

@@ -0,0 +1,81 @@
+import { trpc } from "../../trpc";
+import {
+  calendarExitPriceChartData,
+  span,
+  openDTE,
+  exitDTE,
+  lookbackPeriodEnd,
+  lookbackPeriodStart,
+  similarCalendarPriceChartData,
+  stockPriceChartData,
+  moniness,
+  moninessRadius,
+  underlying,
+} from "./state";
+
+function debounce(func, wait) {
+  let timeout;
+  return function () {
+    const context = this;
+    const args = arguments;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(context, args), wait);
+  };
+}
+function throttle(func, limit) {
+  let inThrottle;
+  return function () {
+    const context = this;
+    const args = arguments;
+    if (!inThrottle) {
+      func.apply(context, args);
+      inThrottle = true;
+      setTimeout(() => (inThrottle = false), limit);
+    }
+  };
+}
+
+export const refreshStockPriceChartData = throttle(() => {
+  stockPriceChartData.value = [];
+  trpc.StockPriceChart.getChartData
+    .query({
+      underlying: underlying.value,
+      lookbackPeriodStart: lookbackPeriodStart.value,
+      lookbackPeriodEnd: lookbackPeriodEnd.value,
+    })
+    .then((getChartDataResponse) => {
+      stockPriceChartData.value = getChartDataResponse;
+    });
+}, 400);
+export const refreshSimilarCalendarPriceChartData = throttle(() => {
+  similarCalendarPriceChartData.value = [];
+  trpc.SimilarCalendarPriceChart.getChartData
+    .query({
+      underlying: underlying.value,
+      daysToFrontExpiration: openDTE.value,
+      daysBetweenFrontAndBackExpiration: span.value,
+      strikePercentageFromUnderlyingPriceRangeMin:
+        (moniness.value - moninessRadius.value) / 100,
+      strikePercentageFromUnderlyingPriceRangeMax:
+        (moniness.value + moninessRadius.value) / 100,
+      lookbackPeriodStart: lookbackPeriodStart.value,
+      lookbackPeriodEnd: lookbackPeriodEnd.value,
+    })
+    .then((getChartDataResponse) => {
+      similarCalendarPriceChartData.value = getChartDataResponse;
+    });
+}, 400);
+export const refreshcalendarExitPriceChartData = throttle(() => {
+  calendarExitPriceChartData.value = [];
+  trpc.CalendarExitPriceChart.getChartData
+    .query({
+      underlying: underlying.value,
+      daysToFrontExpiration: exitDTE.value,
+      daysBetweenFrontAndBackExpiration: span.value,
+      lookbackPeriodStart: lookbackPeriodStart.value,
+      lookbackPeriodEnd: lookbackPeriodEnd.value,
+    })
+    .then((getChartDataResponse) => {
+      calendarExitPriceChartData.value = getChartDataResponse;
+    });
+}, 400);

frontend/src/pages/HistoricalCalendarPrices/state.ts

@@ -0,0 +1,46 @@
+import { computed, signal } from "@preact/signals";
+
+export const isPopperOpen = signal(false);
+export const popperAnchorEl = signal(null);
+export const popperContent = signal(null);
+
+export const availableUnderlyings = signal([]);
+export const underlying = signal(null);
+
+export const openDTE = signal(14);
+
+export const span = signal(14);
+
+export const moniness = signal(1);
+export const moninessRadius = signal(1);
+
+export const exitDTE = signal(2);
+
+export const stockPriceChartData = signal<Array<[number, number]>>([]);
+
+export const similarCalendarPriceChartData = signal([]);
+
+export const calendarExitPriceChartData = signal([]);
+
+export const lookbackPeriodStart = signal("2022-03-01");
+export const lookbackPeriodEnd = signal("2022-04-01");
+
+export const maxChartPrice = computed(() =>
+  Math.max(
+    Math.max.apply(
+      null,
+      similarCalendarPriceChartData.value.map((d) => d.y).slice(0, -2)
+    ),
+    Math.max.apply(
+      null,
+      calendarExitPriceChartData.value.map((d) => d.y).slice(0, -2)
+    )
+  )
+);
+
+export const maxN = computed(() =>
+  Math.max.apply(
+    null,
+    calendarExitPriceChartData.value.map((d) => d.n)
+  )
+);

server/.gitignore

@@ -27,3 +27,4 @@ dist-ssr
 .env
 *.db
 *.db-lck
+Calendar tRPC

server/Dockerfile

@@ -2,22 +2,27 @@
 FROM node:20-slim AS base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
-RUN corepack enable
+RUN npm install -g corepack@latest && corepack enable
 COPY package.json pnpm-lock.yaml /app/
 WORKDIR /app
 
-FROM base AS prod-deps
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
-
-# install dev dependencies which are needed for building, such as typescript:
-FROM base AS build
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 COPY tsconfig.json /app/
 COPY src /app/src
-RUN pnpm run build
+CMD [ "pnpm", "tsx", "src/index.ts" ] 
 
-FROM base
+# FROM base AS prod-deps
-COPY --from=prod-deps /app/node_modules /app/node_modules
+# RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
-COPY --from=build /app/dist /app/dist
+
-WORKDIR /app/dist
+# # install dev dependencies which are needed for building, such as typescript:
-CMD [ "node", "index.js" ]
+# FROM base AS build
+# RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+# COPY tsconfig.json /app/
+# COPY src /app/src
+# RUN pnpm run build
+
+# FROM base
+# COPY --from=prod-deps /app/node_modules /app/node_modules
+# COPY --from=build /app/dist /app/dist
+# WORKDIR /app/dist
+# CMD [ "node", "index.js" ]

server/package.json

@@ -2,30 +2,36 @@
 	"private": true,
 	"type": "module",
 	"scripts": {
-		"build": "esbuild src/*.ts src/**/*.ts src/**/**/*.ts --platform=node --outdir=dist --format=esm",
+		"build": "esbuild src/*.ts src/*.tsx src/**/*.ts src/**/**/*.ts --platform=node --outdir=dist --format=esm",
 		"dev:node": "node --watch dist/index.js",
 		"dev:esbuild": "pnpm run build --watch",
-		"dev": "run-p dev:*"
+		"dev": "run-p dev:*",
+		"cli": "tsx src/cli.tsx"
 	},
 	"dependencies": {
-		"@clickhouse/client": "^0.2.7",
+		"@clickhouse/client": "^1.4.1",
 		"@humanwhocodes/env": "^3.0.5",
 		"@sinclair/typebox": "^0.32.5",
 		"@trpc/server": "^10.45.0",
 		"cors": "^2.8.5",
+		"date-fns": "^3.6.0",
 		"execa": "^9.3.0",
+		"ink": "^4.1.0",
+		"ink-text-input": "^5.0.1",
 		"lmdbx": "^0.5.0",
 		"p-all": "^5.0.0",
 		"p-queue": "^8.0.1",
 		"p-retry": "^6.2.0",
 		"p-series": "^3.0.0",
 		"p-throttle": "^6.1.0",
+		"react": "^18.2.0",
 		"sqlite": "^5.1.1",
 		"sqlite3": "^5.1.7"
 	},
 	"devDependencies": {
 		"@types/cors": "^2.8.17",
 		"@types/node": "^20.10.7",
+		"@types/react": "^18.0.0",
 		"esbuild": "^0.19.11",
 		"npm-run-all": "^4.1.5",
 		"tsx": "^4.17.0",

server/pnpm-lock.yaml

@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@clickhouse/client':
-        specifier: ^0.2.7
+        specifier: ^1.4.1
-        version: 0.2.7
+        version: 1.4.1
       '@humanwhocodes/env':
         specifier: ^3.0.5
         version: 3.0.5
@@ -23,9 +23,18 @@ importers:
       cors:
         specifier: ^2.8.5
         version: 2.8.5
+      date-fns:
+        specifier: ^3.6.0
+        version: 3.6.0
       execa:
         specifier: ^9.3.0
         version: 9.3.0
+      ink:
+        specifier: ^4.1.0
+        version: 4.4.1(@types/react@18.3.3)(react@18.3.1)
+      ink-text-input:
+        specifier: ^5.0.1
+        version: 5.0.1(ink@4.4.1(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)
       lmdbx:
         specifier: ^0.5.0
         version: 0.5.0
@@ -44,6 +53,9 @@ importers:
       p-throttle:
         specifier: ^6.1.0
         version: 6.1.0
+      react:
+        specifier: ^18.2.0
+        version: 18.3.1
       sqlite:
         specifier: ^5.1.1
         version: 5.1.1
@@ -57,6 +69,9 @@ importers:
       '@types/node':
         specifier: ^20.10.7
         version: 20.10.7
+      '@types/react':
+        specifier: ^18.0.0
+        version: 18.3.3
       esbuild:
         specifier: ^0.19.11
         version: 0.19.11
@@ -72,11 +87,15 @@ importers:
 
 packages:
 
-  '@clickhouse/client-common@0.2.7':
+  '@alcalzone/ansi-tokenize@0.1.3':
-    resolution: {integrity: sha512-vgZm+8c5Cu1toIx1/xplF5dEHlCPw+7pJDOOEtLv2CIUVZ0Bl6nGVZ43EWxRdHeah9ivTfoRWhN1zI1PxjH0xQ==}
+    resolution: {integrity: sha512-3yWxPTq3UQ/FY9p1ErPxIyfT64elWaMvM9lIHnaqpyft63tkxodF5aUElYHrdisWve5cETkh1+KBw1yJuW0aRw==}
+    engines: {node: '>=14.13.1'}
 
-  '@clickhouse/client@0.2.7':
+  '@clickhouse/client-common@1.4.1':
-    resolution: {integrity: sha512-ZiyarrGngHc+f5AjZSA7mkQfvnE/71jgXk304B0ps8V+aBpE2CsFB6AQmE/Mk2YkP5j+8r/JfG+m0AZWmE27ig==}
+    resolution: {integrity: sha512-f5eoTrUSDplrMoi3ddeZ0MzGTn0iGMByEQ8j63eVMoBSOI2+F6jEIPcW2tWofT79Rvnn3RRlveYcShiaIiCJyw==}
+
+  '@clickhouse/client@1.4.1':
+    resolution: {integrity: sha512-12iV+MeykxdQySRFHwaVU+hKUv3JP6kdwOI+z3zzyfPVYHynTlV8emJjjGZR0+VfRaj3PCMuQfryfsJ82nh9WQ==}
     engines: {node: '>=16'}
 
   '@esbuild/aix-ppc64@0.19.11':
@@ -428,6 +447,12 @@ packages:
   '@types/node@20.10.7':
     resolution: {integrity: sha512-fRbIKb8C/Y2lXxB5eVMj4IU7xpdox0Lh8bUPEdtLysaylsml1hOOx1+STloRs/B9nf7C6kPRmmg/V7aQW7usNg==}
 
+  '@types/prop-types@15.7.12':
+    resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
+
+  '@types/react@18.3.3':
+    resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==}
+
   '@types/retry@0.12.2':
     resolution: {integrity: sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow==}
 
@@ -446,14 +471,26 @@ packages:
     resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
     engines: {node: '>=8'}
 
+  ansi-escapes@6.2.1:
+    resolution: {integrity: sha512-4nJ3yixlEthEJ9Rk4vPcdBRkZvQZlYyu8j4/Mqz5sgIkddmEnH2Yj2ZrnP9S3tQOvSNRUIgVNF/1yPpRAGNRig==}
+    engines: {node: '>=14.16'}
+
   ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
 
+  ansi-regex@6.0.1:
+    resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
+    engines: {node: '>=12'}
+
   ansi-styles@3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
     engines: {node: '>=4'}
 
+  ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
+
   aproba@2.0.0:
     resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==}
 
@@ -469,6 +506,10 @@ packages:
     resolution: {integrity: sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==}
     engines: {node: '>= 0.4'}
 
+  auto-bind@5.0.1:
+    resolution: {integrity: sha512-ooviqdwwgfIfNmDwo94wlshcdzfO64XV0Cg6oDsDYBJfITDz1EngD2z7DkbvCWn+XIMsIqW27sEVF6qcpJrRcg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   available-typed-arrays@1.0.5:
     resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
     engines: {node: '>= 0.4'}
@@ -502,6 +543,10 @@ packages:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
 
+  chalk@5.3.0:
+    resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
   chownr@1.1.4:
     resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
 
@@ -509,10 +554,30 @@ packages:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
     engines: {node: '>=10'}
 
+  ci-info@3.9.0:
+    resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
+    engines: {node: '>=8'}
+
   clean-stack@2.2.0:
     resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
     engines: {node: '>=6'}
 
+  cli-boxes@3.0.0:
+    resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==}
+    engines: {node: '>=10'}
+
+  cli-cursor@4.0.0:
+    resolution: {integrity: sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  cli-truncate@3.1.0:
+    resolution: {integrity: sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  code-excerpt@4.0.0:
+    resolution: {integrity: sha512-xxodCmBen3iy2i0WtAK8FlFNrRzjUqjRsMfho58xT/wvZU1YTM3fCnRjcy1gJPMepaRlgm/0e6w8SpWHpn3/cA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -529,6 +594,10 @@ packages:
   console-control-strings@1.1.0:
     resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
 
+  convert-to-spaces@2.0.1:
+    resolution: {integrity: sha512-rcQ1bsQO9799wq24uE5AM2tAILy4gXGIK/njFWcVQkGNZ96edlpY+A7bjwvzjYvLDyzmG1MmMLZhpcsb+klNMQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   cors@2.8.5:
     resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
     engines: {node: '>= 0.10'}
@@ -541,6 +610,12 @@ packages:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
 
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  date-fns@3.6.0:
+    resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
+
   debug@4.3.5:
     resolution: {integrity: sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==}
     engines: {node: '>=6.0'}
@@ -573,9 +648,15 @@ packages:
     resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
     engines: {node: '>=8'}
 
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
   encoding@0.1.13:
     resolution: {integrity: sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==}
 
@@ -618,6 +699,10 @@ packages:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
 
+  escape-string-regexp@2.0.0:
+    resolution: {integrity: sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==}
+    engines: {node: '>=8'}
+
   eventemitter3@5.0.1:
     resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
 
@@ -765,6 +850,10 @@ packages:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
 
+  indent-string@5.0.0:
+    resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
+    engines: {node: '>=12'}
+
   infer-owner@1.0.4:
     resolution: {integrity: sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==}
 
@@ -778,6 +867,26 @@ packages:
   ini@1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
 
+  ink-text-input@5.0.1:
+    resolution: {integrity: sha512-crnsYJalG4EhneOFnr/q+Kzw1RgmXI2KsBaLFE6mpiIKxAtJLUnvygOF2IUKO8z4nwkSkveGRBMd81RoYdRSag==}
+    engines: {node: '>=14.16'}
+    peerDependencies:
+      ink: ^4.0.0
+      react: ^18.0.0
+
+  ink@4.4.1:
+    resolution: {integrity: sha512-rXckvqPBB0Krifk5rn/5LvQGmyXwCUpBfmTwbkQNBY9JY8RSl3b8OftBNEYxg4+SWUhEKcPifgope28uL9inlA==}
+    engines: {node: '>=14.16'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      react: '>=18.0.0'
+      react-devtools-core: ^4.19.1
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react-devtools-core:
+        optional: true
+
   internal-slot@1.0.6:
     resolution: {integrity: sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==}
     engines: {node: '>= 0.4'}
@@ -803,6 +912,10 @@ packages:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
     engines: {node: '>= 0.4'}
 
+  is-ci@3.0.1:
+    resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==}
+    hasBin: true
+
   is-core-module@2.13.1:
     resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
 
@@ -814,9 +927,16 @@ packages:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
 
+  is-fullwidth-code-point@4.0.0:
+    resolution: {integrity: sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==}
+    engines: {node: '>=12'}
+
   is-lambda@1.0.1:
     resolution: {integrity: sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==}
 
+  is-lower-case@2.0.2:
+    resolution: {integrity: sha512-bVcMJy4X5Og6VZfdOZstSexlEy20Sr0k/p/b2IlQJlfdKAQuMpiv5w2Ccxb8sKdRUNAG1PnHVHjFSdRDVS6NlQ==}
+
   is-negative-zero@2.0.2:
     resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==}
     engines: {node: '>= 0.4'}
@@ -860,6 +980,9 @@ packages:
     resolution: {integrity: sha512-FRdAyx5lusK1iHG0TWpVtk9+1i+GjrzRffhDg4ovQ7mcidMQ6mj+MhKPmvh7Xwyv5gIS06ns49CA7Sqg7lC22Q==}
     engines: {node: '>=18'}
 
+  is-upper-case@2.0.2:
+    resolution: {integrity: sha512-44pxmxAvnnAOwBg4tHPnkfvgjPwbc5QIsSstNU+YcJ1ovxVzCWpSGosPJOZh/a1tdl81fbgnLc9LLv+x2ywbPQ==}
+
   is-weakref@1.0.2:
     resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
 
@@ -869,6 +992,9 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
   jsbn@1.1.0:
     resolution: {integrity: sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==}
 
@@ -882,6 +1008,13 @@ packages:
     resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==}
     engines: {node: '>=4'}
 
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
   lru-cache@6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
@@ -894,6 +1027,10 @@ packages:
     resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
     engines: {node: '>= 0.10.0'}
 
+  mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+
   mimic-response@3.1.0:
     resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
     engines: {node: '>=10'}
@@ -1031,6 +1168,10 @@ packages:
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
+  onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+
   ordered-binary@1.5.1:
     resolution: {integrity: sha512-5VyHfHY3cd0iza71JepYG50My+YUbrFtGoUz2ooEydPyPM7Aai/JW098juLr+RG6+rDJuzNNTsEQu2DZa1A41A==}
 
@@ -1074,6 +1215,10 @@ packages:
     resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
     engines: {node: '>=18'}
 
+  patch-console@2.0.0:
+    resolution: {integrity: sha512-0YNdUceMdaQwoKce1gatDScmMo5pu/tfABfnzEqeG0gtTmd7mh/WcwgUjtAeOU7N8nFFlbQBnFK2gXW5fGvmMA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   path-is-absolute@1.0.1:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
@@ -1134,6 +1279,16 @@ packages:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
 
+  react-reconciler@0.29.2:
+    resolution: {integrity: sha512-zZQqIiYgDCTP/f1N/mAR10nJGrPD2ZR+jDSEsKWJHYC7Cm2wodlwbR3upZRdC3cjIjSlTLNVyO7Iu0Yy7t2AYg==}
+    engines: {node: '>=0.10.0'}
+    peerDependencies:
+      react: ^18.3.1
+
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+
   read-pkg@3.0.0:
     resolution: {integrity: sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==}
     engines: {node: '>=4'}
@@ -1153,6 +1308,10 @@ packages:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
 
+  restore-cursor@4.0.0:
+    resolution: {integrity: sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   retry@0.12.0:
     resolution: {integrity: sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==}
     engines: {node: '>= 4'}
@@ -1179,6 +1338,9 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+
   semver@5.7.2:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
@@ -1234,6 +1396,14 @@ packages:
   simple-get@4.0.1:
     resolution: {integrity: sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==}
 
+  slice-ansi@5.0.0:
+    resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
+    engines: {node: '>=12'}
+
+  slice-ansi@6.0.0:
+    resolution: {integrity: sha512-6bn4hRfkTvDfUoEQYkERg0BVF1D0vrX9HEkMl08uDiNWvVvjylLHvZFZWkDo6wjT8tUctbYl1nCOuE66ZTaUtA==}
+    engines: {node: '>=14.16'}
+
   smart-buffer@4.2.0:
     resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
     engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
@@ -1271,10 +1441,18 @@ packages:
     resolution: {integrity: sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==}
     engines: {node: '>= 8'}
 
+  stack-utils@2.0.6:
+    resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
+    engines: {node: '>=10'}
+
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
 
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
   string.prototype.padend@3.1.5:
     resolution: {integrity: sha512-DOB27b/2UTTD+4myKUFh+/fXWcu/UDyASIXfg+7VzoCNNGOfWvoyU/x5pvVHr++ztyt/oSYI1BcWBBG/hmlNjA==}
     engines: {node: '>= 0.4'}
@@ -1296,6 +1474,10 @@ packages:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
 
+  strip-ansi@7.1.0:
+    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    engines: {node: '>=12'}
+
   strip-bom@3.0.0:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
@@ -1327,6 +1509,9 @@ packages:
     resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
     engines: {node: '>=10'}
 
+  tslib@2.6.3:
+    resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==}
+
   tsx@4.17.0:
     resolution: {integrity: sha512-eN4mnDA5UMKDt4YZixo9tBioibaMBpoxBkD+rIPAjVmYERSG0/dWEY1CEFuV89CgASlKL499q8AhmkMnnjtOJg==}
     engines: {node: '>=18.0.0'}
@@ -1335,6 +1520,14 @@ packages:
   tunnel-agent@0.6.0:
     resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
 
+  type-fest@0.12.0:
+    resolution: {integrity: sha512-53RyidyjvkGpnWPMF9bQgFtWp+Sl8O2Rp13VavmJgfAP9WWG6q6TkrKU8iyJdnwnfgHI6k2hTlgqH4aSdjoTbg==}
+    engines: {node: '>=10'}
+
+  type-fest@3.13.1:
+    resolution: {integrity: sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==}
+    engines: {node: '>=14.16'}
+
   typed-array-buffer@1.0.0:
     resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==}
     engines: {node: '>= 0.4'}
@@ -1399,9 +1592,29 @@ packages:
   wide-align@1.1.5:
     resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
 
+  widest-line@4.0.1:
+    resolution: {integrity: sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==}
+    engines: {node: '>=12'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
+  ws@8.18.0:
+    resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
@@ -1409,13 +1622,21 @@ packages:
     resolution: {integrity: sha512-FsQpXXeOEe05tcJN4Z2eicuC6+6KiJdBbPOAChanSkwwjZ277XGsh8wh/HaPuGeifTiw/7dgAzabitu2bnDvRg==}
     engines: {node: '>=18'}
 
+  yoga-wasm-web@0.3.3:
+    resolution: {integrity: sha512-N+d4UJSJbt/R3wqY7Coqs5pcV0aUj2j9IaQ3rNj9bVCLld8tTGKRa2USARjnvZJWVx1NDmQev8EknoczaOQDOA==}
+
 snapshots:
 
-  '@clickhouse/client-common@0.2.7': {}
+  '@alcalzone/ansi-tokenize@0.1.3':
-
-  '@clickhouse/client@0.2.7':
     dependencies:
-      '@clickhouse/client-common': 0.2.7
+      ansi-styles: 6.2.1
+      is-fullwidth-code-point: 4.0.0
+
+  '@clickhouse/client-common@1.4.1': {}
+
+  '@clickhouse/client@1.4.1':
+    dependencies:
+      '@clickhouse/client-common': 1.4.1
 
   '@esbuild/aix-ppc64@0.19.11':
     optional: true
@@ -1612,6 +1833,13 @@ snapshots:
     dependencies:
       undici-types: 5.26.5
 
+  '@types/prop-types@15.7.12': {}
+
+  '@types/react@18.3.3':
+    dependencies:
+      '@types/prop-types': 15.7.12
+      csstype: 3.1.3
+
   '@types/retry@0.12.2': {}
 
   abbrev@1.1.1:
@@ -1635,13 +1863,19 @@ snapshots:
       indent-string: 4.0.0
     optional: true
 
+  ansi-escapes@6.2.1: {}
+
   ansi-regex@5.0.1:
     optional: true
 
+  ansi-regex@6.0.1: {}
+
   ansi-styles@3.2.1:
     dependencies:
       color-convert: 1.9.3
 
+  ansi-styles@6.2.1: {}
+
   aproba@2.0.0:
     optional: true
 
@@ -1666,6 +1900,8 @@ snapshots:
       is-array-buffer: 3.0.2
       is-shared-array-buffer: 1.0.2
 
+  auto-bind@5.0.1: {}
+
   available-typed-arrays@1.0.5: {}
 
   balanced-match@1.0.2: {}
@@ -1728,13 +1964,32 @@ snapshots:
       escape-string-regexp: 1.0.5
       supports-color: 5.5.0
 
+  chalk@5.3.0: {}
+
   chownr@1.1.4: {}
 
   chownr@2.0.0: {}
 
+  ci-info@3.9.0: {}
+
   clean-stack@2.2.0:
     optional: true
 
+  cli-boxes@3.0.0: {}
+
+  cli-cursor@4.0.0:
+    dependencies:
+      restore-cursor: 4.0.0
+
+  cli-truncate@3.1.0:
+    dependencies:
+      slice-ansi: 5.0.0
+      string-width: 5.1.2
+
+  code-excerpt@4.0.0:
+    dependencies:
+      convert-to-spaces: 2.0.1
+
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -1749,6 +2004,8 @@ snapshots:
   console-control-strings@1.1.0:
     optional: true
 
+  convert-to-spaces@2.0.1: {}
+
   cors@2.8.5:
     dependencies:
       object-assign: 4.1.1
@@ -1768,6 +2025,10 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  csstype@3.1.3: {}
+
+  date-fns@3.6.0: {}
+
   debug@4.3.5:
     dependencies:
       ms: 2.1.2
@@ -1796,9 +2057,13 @@ snapshots:
 
   detect-libc@2.0.3: {}
 
+  eastasianwidth@0.2.0: {}
+
   emoji-regex@8.0.0:
     optional: true
 
+  emoji-regex@9.2.2: {}
+
   encoding@0.1.13:
     dependencies:
       iconv-lite: 0.6.3
@@ -1927,6 +2192,8 @@ snapshots:
 
   escape-string-regexp@1.0.5: {}
 
+  escape-string-regexp@2.0.0: {}
+
   eventemitter3@5.0.1: {}
 
   execa@9.3.0:
@@ -2099,6 +2366,8 @@ snapshots:
   indent-string@4.0.0:
     optional: true
 
+  indent-string@5.0.0: {}
+
   infer-owner@1.0.4:
     optional: true
 
@@ -2112,6 +2381,47 @@ snapshots:
 
   ini@1.3.8: {}
 
+  ink-text-input@5.0.1(ink@4.4.1(@types/react@18.3.3)(react@18.3.1))(react@18.3.1):
+    dependencies:
+      chalk: 5.3.0
+      ink: 4.4.1(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      type-fest: 3.13.1
+
+  ink@4.4.1(@types/react@18.3.3)(react@18.3.1):
+    dependencies:
+      '@alcalzone/ansi-tokenize': 0.1.3
+      ansi-escapes: 6.2.1
+      auto-bind: 5.0.1
+      chalk: 5.3.0
+      cli-boxes: 3.0.0
+      cli-cursor: 4.0.0
+      cli-truncate: 3.1.0
+      code-excerpt: 4.0.0
+      indent-string: 5.0.0
+      is-ci: 3.0.1
+      is-lower-case: 2.0.2
+      is-upper-case: 2.0.2
+      lodash: 4.17.21
+      patch-console: 2.0.0
+      react: 18.3.1
+      react-reconciler: 0.29.2(react@18.3.1)
+      scheduler: 0.23.2
+      signal-exit: 3.0.7
+      slice-ansi: 6.0.0
+      stack-utils: 2.0.6
+      string-width: 5.1.2
+      type-fest: 0.12.0
+      widest-line: 4.0.1
+      wrap-ansi: 8.1.0
+      ws: 8.18.0
+      yoga-wasm-web: 0.3.3
+    optionalDependencies:
+      '@types/react': 18.3.3
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   internal-slot@1.0.6:
     dependencies:
       get-intrinsic: 1.2.2
@@ -2143,6 +2453,10 @@ snapshots:
 
   is-callable@1.2.7: {}
 
+  is-ci@3.0.1:
+    dependencies:
+      ci-info: 3.9.0
+
   is-core-module@2.13.1:
     dependencies:
       hasown: 2.0.0
@@ -2154,9 +2468,15 @@ snapshots:
   is-fullwidth-code-point@3.0.0:
     optional: true
 
+  is-fullwidth-code-point@4.0.0: {}
+
   is-lambda@1.0.1:
     optional: true
 
+  is-lower-case@2.0.2:
+    dependencies:
+      tslib: 2.6.3
+
   is-negative-zero@2.0.2: {}
 
   is-network-error@1.0.1: {}
@@ -2192,6 +2512,10 @@ snapshots:
 
   is-unicode-supported@2.0.0: {}
 
+  is-upper-case@2.0.2:
+    dependencies:
+      tslib: 2.6.3
+
   is-weakref@1.0.2:
     dependencies:
       call-bind: 1.0.5
@@ -2200,6 +2524,8 @@ snapshots:
 
   isexe@2.0.0: {}
 
+  js-tokens@4.0.0: {}
+
   jsbn@1.1.0:
     optional: true
 
@@ -2220,6 +2546,12 @@ snapshots:
       pify: 3.0.0
       strip-bom: 3.0.0
 
+  lodash@4.17.21: {}
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
   lru-cache@6.0.0:
     dependencies:
       yallist: 4.0.0
@@ -2250,6 +2582,8 @@ snapshots:
 
   memorystream@0.3.1: {}
 
+  mimic-fn@2.1.0: {}
+
   mimic-response@3.1.0: {}
 
   minimatch@3.1.2:
@@ -2416,6 +2750,10 @@ snapshots:
     dependencies:
       wrappy: 1.0.2
 
+  onetime@5.1.2:
+    dependencies:
+      mimic-fn: 2.1.0
+
   ordered-binary@1.5.1: {}
 
   p-all@5.0.0:
@@ -2453,6 +2791,8 @@ snapshots:
 
   parse-ms@4.0.0: {}
 
+  patch-console@2.0.0: {}
+
   path-is-absolute@1.0.1:
     optional: true
 
@@ -2512,6 +2852,16 @@ snapshots:
       minimist: 1.2.8
       strip-json-comments: 2.0.1
 
+  react-reconciler@0.29.2(react@18.3.1):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+
+  react@18.3.1:
+    dependencies:
+      loose-envify: 1.4.0
+
   read-pkg@3.0.0:
     dependencies:
       load-json-file: 4.0.0
@@ -2538,6 +2888,11 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
+  restore-cursor@4.0.0:
+    dependencies:
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+
   retry@0.12.0:
     optional: true
 
@@ -2566,6 +2921,10 @@ snapshots:
   safer-buffer@2.1.2:
     optional: true
 
+  scheduler@0.23.2:
+    dependencies:
+      loose-envify: 1.4.0
+
   semver@5.7.2: {}
 
   semver@7.6.2: {}
@@ -2606,8 +2965,7 @@ snapshots:
       get-intrinsic: 1.2.2
       object-inspect: 1.13.1
 
-  signal-exit@3.0.7:
+  signal-exit@3.0.7: {}
-    optional: true
 
   signal-exit@4.1.0: {}
 
@@ -2619,6 +2977,16 @@ snapshots:
       once: 1.4.0
       simple-concat: 1.0.1
 
+  slice-ansi@5.0.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      is-fullwidth-code-point: 4.0.0
+
+  slice-ansi@6.0.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      is-fullwidth-code-point: 4.0.0
+
   smart-buffer@4.2.0:
     optional: true
 
@@ -2673,6 +3041,10 @@ snapshots:
       minipass: 3.3.6
     optional: true
 
+  stack-utils@2.0.6:
+    dependencies:
+      escape-string-regexp: 2.0.0
+
   string-width@4.2.3:
     dependencies:
       emoji-regex: 8.0.0
@@ -2680,6 +3052,12 @@ snapshots:
       strip-ansi: 6.0.1
     optional: true
 
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.0
+
   string.prototype.padend@3.1.5:
     dependencies:
       call-bind: 1.0.5
@@ -2713,6 +3091,10 @@ snapshots:
       ansi-regex: 5.0.1
     optional: true
 
+  strip-ansi@7.1.0:
+    dependencies:
+      ansi-regex: 6.0.1
+
   strip-bom@3.0.0: {}
 
   strip-final-newline@4.0.0: {}
@@ -2749,6 +3131,8 @@ snapshots:
       mkdirp: 1.0.4
       yallist: 4.0.0
 
+  tslib@2.6.3: {}
+
   tsx@4.17.0:
     dependencies:
       esbuild: 0.23.0
@@ -2760,6 +3144,10 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
+  type-fest@0.12.0: {}
+
+  type-fest@3.13.1: {}
+
   typed-array-buffer@1.0.0:
     dependencies:
       call-bind: 1.0.5
@@ -2848,8 +3236,22 @@ snapshots:
       string-width: 4.2.3
     optional: true
 
+  widest-line@4.0.1:
+    dependencies:
+      string-width: 5.1.2
+
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 5.1.2
+      strip-ansi: 7.1.0
+
   wrappy@1.0.2: {}
 
+  ws@8.18.0: {}
+
   yallist@4.0.0: {}
 
   yoctocolors@2.1.0: {}
+
+  yoga-wasm-web@0.3.3: {}

server/src/AggregateDatabase/Calendar/clickhouse.ts

@@ -1,13 +1,13 @@
 import type { CalendarDatabase, CalendarKey } from "./interfaces.js";
 import type { Aggregate } from "../interfaces.js";
-import { query } from "../lib/clickhouse.js";
+import { query } from "../../lib/clickhouse.js";
 
 function makeCalendarDatabase(): CalendarDatabase {
-	const calendarDatabase: Omit<CalendarDatabase, "getCalendars"> = {
+  const calendarDatabase: Omit<CalendarDatabase, "getCalendars"> = {
-		getKeys: async ({ key: { symbol }, date }) => {
+    getKeys: async ({ key: { symbol }, date }) => {
-			const calendarsForSymbolOnDate = await query<
+      const calendarsForSymbolOnDate = await query<
-				Omit<CalendarKey, "symbol">
+        Omit<CalendarKey, "symbol">
-			>(`
+      >(`
 				WITH today_option_contracts AS (
 					SELECT expirationDate, strike, type
 					FROM option_contract_existences
@@ -26,17 +26,66 @@ function makeCalendarDatabase(): CalendarDatabase {
 				AND front_option_contract.expirationDate < back_option_contract.expirationDate
 				`);
 
-			return calendarsForSymbolOnDate.map((calendarWithoutSymbol) => ({
+      return calendarsForSymbolOnDate.map((calendarWithoutSymbol) => ({
-				...calendarWithoutSymbol,
+        ...calendarWithoutSymbol,
-				symbol,
+        symbol,
-			}));
+      }));
-		},
+    },
-		getAggregates: async ({
+    getAggregate: async ({
-			key: { symbol, frontExpirationDate, backExpirationDate, strike, type },
+      key: { symbol, frontExpirationDate, backExpirationDate, strike, type },
-			date,
+      tsStart,
-		}) => {
+    }) => {
-			return (
+      const tsStartString = new Date(tsStart).toISOString();
-				await query<Omit<Aggregate<CalendarKey>, "key">>(`
+      return (
+        await query<Omit<Aggregate<CalendarKey>, "key">>(`
+				WITH front_option_contract_candlestick AS (
+					SELECT
+						tsStart,
+						open,
+						close,
+						high,
+						low
+					FROM option_contract_aggregates
+					WHERE symbol = '${symbol}'
+					AND type = '${type}'
+					AND strike = '${strike}'
+					AND expirationDate = '${frontExpirationDate}'
+					AND tsStart = '${tsStartString}'
+				),
+				back_option_contract_candlestick AS (
+					SELECT
+						tsStart,
+						open,
+						close,
+						high,
+						low
+					FROM option_contract_aggregates
+					WHERE symbol = '${symbol}'
+					AND type = '${type}'
+					AND strike = '${strike}'
+					AND expirationDate = '${backExpirationDate}'
+					AND tsStart = '${tsStartString}'
+				)
+				SELECT
+						toUnixTimestamp(front_option_contract_candlestick.tsStart) as tsStart,
+						back_option_contract_candlestick.open - front_option_contract_candlestick.open as open,
+						back_option_contract_candlestick.close - front_option_contract_candlestick.close as close
+				FROM front_option_contract_candlestick
+				INNER JOIN back_option_contract_candlestick
+				ON front_option_contract_candlestick.tsStart = back_option_contract_candlestick.tsStart
+				ORDER BY front_option_contract_candlestick.tsStart ASC
+			`)
+      ).map((aggregate) => ({
+        ...aggregate,
+        tsStart: aggregate.tsStart * 1000, // unfortunately, `toUnixTimestamp` only returns second-precision
+      }))[0];
+    },
+    getAggregates: async ({
+      key: { symbol, frontExpirationDate, backExpirationDate, strike, type },
+      date,
+    }) => {
+      return (
+        await query<Omit<Aggregate<CalendarKey>, "key">>(`
 				WITH front_option_contract_candlestick AS (
 					SELECT
 						tsStart,
@@ -74,19 +123,19 @@ function makeCalendarDatabase(): CalendarDatabase {
 				ON front_option_contract_candlestick.tsStart = back_option_contract_candlestick.tsStart
 				ORDER BY front_option_contract_candlestick.tsStart ASC
 			`)
-			).map((aggregate) => ({
+      ).map((aggregate) => ({
-				...aggregate,
+        ...aggregate,
-				tsStart: aggregate.tsStart * 1000, // unfortunately, `toUnixTimestamp` only returns second-precision
+        tsStart: aggregate.tsStart * 1000, // unfortunately, `toUnixTimestamp` only returns second-precision
-			}));
+      }));
-		},
+    },
-		insertAggregates: async (aggregates) => {
+    insertAggregates: async (aggregates) => {
-			// no-op: we insert individual option contracts, not calendars
+      // no-op: we insert individual option contracts, not calendars
-		},
+    },
-		getClosingPrice: async ({
+    getClosingPrice: async ({
-			key: { symbol, strike, type, frontExpirationDate, backExpirationDate },
+      key: { symbol, strike, type, frontExpirationDate, backExpirationDate },
-		}) => {
+    }) => {
-			return (
+      return (
-				await query<{ calendarClosingPrice: number }>(`
+        await query<{ calendarClosingPrice: number }>(`
 					WITH front_option_contract_candlestick AS (
 						SELECT
 								tsStart,
@@ -121,22 +170,22 @@ function makeCalendarDatabase(): CalendarDatabase {
 					INNER JOIN back_option_contract_candlestick
 					ON front_option_contract_candlestick.tsStart = back_option_contract_candlestick.tsStart
 				`)
-			)[0]?.calendarClosingPrice;
+      )[0]?.calendarClosingPrice;
-		},
+    },
-		getTargetPriceByProbability: async ({
+    getTargetPriceByProbability: async ({
-			symbol,
+      symbol,
-			calendarSpan,
+      calendarSpan,
-			strikePercentageFromTheMoney,
+      strikePercentageFromTheMoney,
-			historicalProbabilityOfSuccess,
+      historicalProbabilityOfSuccess,
-		}) => {
+    }) => {
-			return 0.24;
+      return 0.24;
-		},
+    },
-	};
+  };
 
-	return {
+  return {
-		...calendarDatabase,
+    ...calendarDatabase,
-		getCalendars: calendarDatabase.getKeys,
+    getCalendars: calendarDatabase.getKeys,
-	};
+  };
 }
 
-export const calendarDatabase: CalendarDatabase = makeCalendarDatabase();
+export const database: CalendarDatabase = makeCalendarDatabase();

server/src/AggregateDatabase/Calendar/interfaces.ts

@@ -0,0 +1,24 @@
+import type { AggregateDatabase } from "../interfaces.js";
+
+export type CalendarKey = {
+  symbol: string;
+  type: "call" | "put";
+  strike: number;
+  frontExpirationDate: string;
+  backExpirationDate: string;
+};
+
+export type CalendarDatabase = AggregateDatabase<CalendarKey> & {
+  getCalendars: AggregateDatabase<CalendarKey>["getKeys"];
+  getTargetPriceByProbability: ({
+    symbol,
+    calendarSpan,
+    strikePercentageFromTheMoney,
+    historicalProbabilityOfSuccess,
+  }: {
+    symbol: string;
+    calendarSpan: number;
+    strikePercentageFromTheMoney: number;
+    historicalProbabilityOfSuccess: number;
+  }) => Promise<number>;
+};

server/src/AggregateDatabase/Calendar/lmdbx.ts

@@ -163,4 +163,4 @@ function makeCalendarDatabase(): CalendarDatabase {
   };
 }
 
-export const calendarDatabase: CalendarDatabase = makeCalendarDatabase();
+export const database: CalendarDatabase = makeCalendarDatabase();

server/src/AggregateDatabase/Calendar/optiondb-lmdbx.ts

@@ -1,4 +1,4 @@
-import { optionContractDatabase } from "../optiondb/lmdbx.js";
+import { database as optionContractDatabase } from "../OptionContract/lmdbx.js";
 import type { CalendarDatabase } from "./interfaces.js";
 
 /** Largest possible key according to the `ordered-binary` (used by lmdbx) docs. */
@@ -204,4 +204,4 @@ function makeCalendarDatabase(): CalendarDatabase {
   };
 }
 
-export const calendarDatabase: CalendarDatabase = makeCalendarDatabase();
+export const database: CalendarDatabase = makeCalendarDatabase();

server/src/AggregateDatabase/OptionContract/clickhouse.ts

@@ -3,7 +3,7 @@ import type {
   OptionContractKey,
 } from "./interfaces.js";
 import type { Aggregate } from "../interfaces.js";
-import { clickhouse, query } from "../lib/clickhouse.js";
+import { clickhouse, query } from "../../lib/clickhouse.js";
 
 function makeOptionContractDatabase(): OptionContractDatabase {
   const optionContractDatabase: Omit<
@@ -48,6 +48,31 @@ function makeOptionContractDatabase(): OptionContractDatabase {
         tsStart: aggregate.tsStart * 1000, // unfortunately, `toUnixTimestamp` only returns second-precision
       }));
     },
+    getAggregate: async ({
+      key: { symbol, expirationDate, strike, type },
+      tsStart,
+    }) => {
+      const tsStartString = new Date(tsStart).toISOString();
+      return (
+        await query<Omit<Aggregate<OptionContractKey>, "key">>(`
+          SELECT
+						open,
+						close,
+						high,
+						low
+					FROM option_contract_aggregates
+					WHERE symbol = '${symbol}'
+					AND type = '${type}'
+					AND strike = '${strike}'
+					AND expirationDate = '${expirationDate}'
+					AND tsStart = '${tsStartString}'
+          ORDER BY tsStart ASC
+        `)
+      ).map((aggregate) => ({
+        ...aggregate,
+        tsStart,
+      }))[0];
+    },
     insertAggregates: async (aggregates) => {
       // stock existence is taken care of by clickhouse materialized view
       await clickhouse.insert({
@@ -70,7 +95,7 @@ function makeOptionContractDatabase(): OptionContractDatabase {
             close,
             high,
             low,
-          }),
+          })
         ),
       });
     },
@@ -86,5 +111,4 @@ function makeOptionContractDatabase(): OptionContractDatabase {
   };
 }
 
-export const optionContractDatabase: OptionContractDatabase =
+export const database: OptionContractDatabase = makeOptionContractDatabase();
-  makeOptionContractDatabase();

server/src/AggregateDatabase/OptionContract/lmdbx.ts

@@ -135,5 +135,4 @@ function makeOptionContractDatabase(): OptionContractDatabase {
   };
 }
 
-export const optionContractDatabase: OptionContractDatabase =
+export const database: OptionContractDatabase = makeOptionContractDatabase();
-  makeOptionContractDatabase();

server/src/AggregateDatabase/Stock/clickhouse.ts

@@ -1,6 +1,6 @@
 import type { StockDatabase, StockKey } from "./interfaces.js";
 import type { Aggregate } from "../interfaces.js";
-import { clickhouse, query } from "../lib/clickhouse.js";
+import { clickhouse, query } from "../../lib/clickhouse.js";
 
 function makeStockDatabase(): StockDatabase {
   const stockDatabase: Omit<StockDatabase, "getSymbols"> = {
@@ -31,6 +31,23 @@ function makeStockDatabase(): StockDatabase {
         tsStart: aggregate.tsStart * 1000, // unfortunately, `toUnixTimestamp` only returns second-precision
       }));
     },
+    getAggregate: async ({ key: { symbol }, tsStart }) => {
+      return (
+        await query<Omit<Aggregate<StockKey>, "key">>(`
+          SELECT 
+            open,
+            close,
+            high,
+            low
+          FROM stock_aggregates
+          WHERE symbol = '${symbol}'
+          AND tsStart = '${tsStart}'
+        `)
+      ).map((aggregate) => ({
+        ...aggregate,
+        tsStart,
+      }))[0];
+    },
     insertAggregates: async (aggregates) => {
       // stock existence is taken care of by clickhouse materialized view
       await clickhouse.insert({
@@ -43,7 +60,7 @@ function makeStockDatabase(): StockDatabase {
             close,
             high,
             low,
-          }),
+          })
         ),
       });
     },
@@ -59,4 +76,4 @@ function makeStockDatabase(): StockDatabase {
   };
 }
 
-export const stockDatabase: StockDatabase = makeStockDatabase();
+export const database: StockDatabase = makeStockDatabase();

server/src/AggregateDatabase/Stock/lmdbx.ts

@@ -45,6 +45,9 @@ function makeStockDatabase(): StockDatabase {
           low: value.low,
         })).asArray;
     },
+    getAggregate: async ({ key: { symbol }, tsStart }) => {
+      return stockAggregatesDb.get([symbol, tsStart]);
+    },
     insertAggregates: async (aggregates) => {
       await stockExistenceDb.batch(() => {
         for (const aggregate of aggregates) {
@@ -53,7 +56,7 @@ function makeStockDatabase(): StockDatabase {
               new Date(aggregate.tsStart).toISOString().substring(0, 10),
               aggregate.key.symbol,
             ],
-            null,
+            null
           );
         }
       });
@@ -80,4 +83,4 @@ function makeStockDatabase(): StockDatabase {
   };
 }
 
-export const stockDatabase: StockDatabase = makeStockDatabase();
+export const database: StockDatabase = makeStockDatabase();

server/src/CalendarCharacteristicsForm.ts

@@ -0,0 +1,87 @@
+import { query } from "./lib/clickhouse.js";
+import { publicProcedure, RpcType, router } from "./trpc.js";
+import {
+  Object as ObjectT,
+  String as StringT,
+  Number as NumberT,
+} from "@sinclair/typebox";
+
+/** Gets a list of symbols that have at least one option contract */
+export const getAvailableUnderlyings = publicProcedure.query(async (opts) => {
+  // return (
+  //   await query<{ symbol: string }>(`
+  //   SELECT DISTINCT(symbol) as symbol FROM option_contract_existences WHERE asOfDate = (SELECT max(asOfDate) FROM option_contract_existences)
+  // `)
+  // ).map(({ symbol }) => symbol);
+  return ["SPY"];
+});
+
+export const getAvailableAsOfDates = publicProcedure
+  .input(RpcType(ObjectT({ underlying: StringT() })))
+  .query(async (opts) => {
+    const underlying = opts.input.underlying;
+    return (
+      await query<{ asOfDate: string }>(`
+		SELECT 
+			DISTINCT(asOfDate) as asOfDate 
+		FROM option_contract_existences 
+		WHERE symbol = '${underlying}'
+		ORDER BY asOfDate
+	`)
+    ).map(({ asOfDate }) => asOfDate);
+  });
+
+export const getExpirationsForUnderlying = publicProcedure
+  .input(
+    RpcType(
+      ObjectT({
+        underlying: StringT({ maxLength: 5 }),
+        asOfDate: StringT(),
+      })
+    )
+  )
+  .query(async (opts) => {
+    const { underlying, asOfDate } = opts.input;
+    return (
+      await query<{ expirationDate: string }>(`
+		SELECT
+			DISTINCT(expirationDate) as expirationDate
+		FROM option_contract_existences
+		WHERE symbol = '${underlying}'
+		AND asOfDate = '${asOfDate}'
+		ORDER BY expirationDate
+	`)
+    ).map(({ expirationDate }) => expirationDate);
+  });
+
+export const getStrikesForUnderlying = publicProcedure
+  .input(
+    RpcType(
+      ObjectT({
+        underlying: StringT({ maxLength: 5 }),
+        asOfDate: StringT(),
+        expirationDate: StringT(),
+      })
+    )
+  )
+  .query(async (opts) => {
+    const { underlying, asOfDate, expirationDate } = opts.input;
+    return (
+      await query<{ strike: string }>(`
+		SELECT
+			DISTINCT(strike) as strike
+		FROM option_contract_existences
+		WHERE symbol = '${underlying}'
+		AND asOfDate = '${asOfDate}'
+		AND expirationDate = '${expirationDate}'
+		ORDER BY strike
+	`)
+    ).map(({ strike }) => strike);
+  });
+
+export default router({
+  getAvailableUnderlyings,
+  getAvailableAsOfDates,
+  getExpirationsForUnderlying,
+  getStrikesForUnderlying,
+});

server/src/CalendarExitPriceChart.ts

@@ -0,0 +1,53 @@
+import { query } from "./lib/clickhouse.js";
+import { publicProcedure, RpcType, router } from "./trpc.js";
+import {
+  Object as ObjectT,
+  String as StringT,
+  Number as NumberT,
+} from "@sinclair/typebox";
+
+export const getChartData = publicProcedure
+  .input(
+    RpcType(
+      ObjectT({
+        underlying: StringT({ maxLength: 5 }),
+        daysToFrontExpiration: NumberT(),
+        daysBetweenFrontAndBackExpiration: NumberT(),
+        lookbackPeriodStart: StringT({
+          pattern: "[0-9]{4}-[0-9]{2}-[0-9]{2}",
+        }),
+        lookbackPeriodEnd: StringT({ pattern: "[0-9]{4}-[0-9]{2}-[0-9]{2}" }),
+      })
+    )
+  )
+  .query(async (opts) => {
+    const {
+      underlying,
+      daysToFrontExpiration,
+      daysBetweenFrontAndBackExpiration,
+      lookbackPeriodStart,
+      lookbackPeriodEnd,
+    } = opts.input;
+    return await query<[number, number, number]>(
+      `
+     SELECT
+			 moniness*100 as x,
+			 FLOOR(price, 1) as y,
+			 sum(number_of_quotes) as n
+		 FROM calendar_stats
+		 WHERE dte = ${daysToFrontExpiration}
+		 AND moniness >= -0.05
+		 AND moniness <= 0.05
+		 AND span = ${daysBetweenFrontAndBackExpiration}
+		 AND date >= '${lookbackPeriodStart}'
+		 AND date <= '${lookbackPeriodEnd}'
+		 GROUP BY x, y
+		 ORDER BY x ASC, y ASC
+	 `,
+      "JSONEachRow"
+    );
+  });
+
+export default router({
+  getChartData,
+});

server/src/SimilarCalendarPriceChart.ts

@@ -0,0 +1,54 @@
+import { query } from "./lib/clickhouse.js";
+import { publicProcedure, RpcType, router } from "./trpc.js";
+import {
+  Object as ObjectT,
+  String as StringT,
+  Number as NumberT,
+} from "@sinclair/typebox";
+
+/** Returns prices for all matching calendars (i.e. those with similar
+ * characteristics to those given) */
+export const getChartData = publicProcedure
+  .input(
+    RpcType(
+      ObjectT({
+        underlying: StringT({ maxLength: 5 }),
+        daysToFrontExpiration: NumberT(),
+        daysBetweenFrontAndBackExpiration: NumberT(),
+        strikePercentageFromUnderlyingPriceRangeMin: NumberT(),
+        strikePercentageFromUnderlyingPriceRangeMax: NumberT(),
+        lookbackPeriodStart: StringT(),
+        lookbackPeriodEnd: StringT(),
+      })
+    )
+  )
+  .query(async (opts) => {
+    const {
+      underlying,
+      daysToFrontExpiration,
+      daysBetweenFrontAndBackExpiration,
+      strikePercentageFromUnderlyingPriceRangeMin,
+      strikePercentageFromUnderlyingPriceRangeMax,
+      lookbackPeriodStart,
+      lookbackPeriodEnd,
+    } = opts.input;
+    return await query<[number, number]>(
+      `
+     SELECT
+			 toUnixTimestamp(date) as x,
+			 price as y
+		 FROM calendar_stats
+		 WHERE dte = ${daysToFrontExpiration}
+		 AND moniness >= ${strikePercentageFromUnderlyingPriceRangeMin}
+		 AND moniness <= ${strikePercentageFromUnderlyingPriceRangeMax}
+		 AND span = ${daysBetweenFrontAndBackExpiration}
+		 AND date >= '${lookbackPeriodStart}'
+		 AND date <= '${lookbackPeriodEnd}'
+	 `,
+      "JSONEachRow"
+    );
+  });
+
+export default router({
+  getChartData,
+});

server/src/StockPriceChart.ts

@@ -0,0 +1,36 @@
+import { query } from "./lib/clickhouse.js";
+import { publicProcedure, RpcType, router } from "./trpc.js";
+import { Object as ObjectT, String as StringT } from "@sinclair/typebox";
+
+export const getChartData = publicProcedure
+  .input(
+    RpcType(
+      ObjectT({
+        underlying: StringT({ maxLength: 5 }),
+        lookbackPeriodStart: StringT(),
+        lookbackPeriodEnd: StringT(),
+      })
+    )
+  )
+  .query(async (opts) => {
+    const { underlying, lookbackPeriodStart, lookbackPeriodEnd } = opts.input;
+    return await query<[number, number]>(
+      `
+		 SELECT
+			 toUnixTimestamp(toStartOfHour(ts)) as x,
+			 avg(price) as y
+		 FROM stock_aggregates_filled
+		 WHERE symbol = '${underlying}'
+		 AND ts >= '${lookbackPeriodStart} 00:00:00'
+		 AND ts <= '${lookbackPeriodEnd} 00:00:00'
+     GROUP BY x
+		 ORDER BY x ASC
+	 `,
+      "JSONCompactEachRow"
+      // "JSONEachRow"
+    );
+  });
+
+export default router({
+  getChartData,
+});

server/src/backtest.ts

@@ -1,9 +1,9 @@
-import { stockDatabase } from "./stockdb/lmdbx.js";
+import { database as stockDatabase } from "./AggregateDatabase/Stock/lmdbx.js";
-import { calendarDatabase } from "./calendardb/optiondb-lmdbx.js";
+import { database as calendarDatabase } from "./AggregateDatabase/Calendar/optiondb-lmdbx.js";
-import type { CalendarKey } from "./calendardb/interfaces.js";
+import type { CalendarKey } from "./AggregateDatabase/Calendar/interfaces.js";
 import { nextDate } from "./lib/utils/nextDate.js";
 
-type BacktestInput = {
+export type BacktestInput = {
   symbol: string;
   startDate: string;
   endDate: string;
@@ -11,6 +11,7 @@ type BacktestInput = {
   historicalProbabilityOfSuccess?: number;
   initialBuyingPower?: number;
 };
+
 export async function backtest({
   symbol,
   startDate,
@@ -71,9 +72,9 @@ export async function backtest({
           });
         const calendarAggregateAtCurrentTime =
           await calendarDatabase.getAggregate({
-          key: {
+            key: {
-            ...calendar,
+              ...calendar,
-          },
+            },
             tsStart: stockAggregate.tsStart,
           });
         // if there exists a matching calendar candlestick for the current minute:
@@ -138,6 +139,8 @@ export async function backtest({
     }
   }
 
-  console.log("Ending Buying Power:", buyingPower);
+  return {
-  console.log("Portfolio:", portfolio.values());
+    endingBuyingPower: buyingPower,
+    portfolio: Array.from(portfolio.values()),
+  };
 }

server/src/calendardb/interfaces.ts

@@ -1,24 +0,0 @@
-import type { AggregateDatabase } from "../interfaces.js";
-
-export type CalendarKey = {
-	symbol: string;
-	type: "call" | "put";
-	strike: number;
-	frontExpirationDate: string;
-	backExpirationDate: string;
-};
-
-export type CalendarDatabase = AggregateDatabase<CalendarKey> & {
-	getCalendars: AggregateDatabase<CalendarKey>["getKeys"];
-	getTargetPriceByProbability: ({
-		symbol,
-		calendarSpan,
-		strikePercentageFromTheMoney,
-		historicalProbabilityOfSuccess,
-	}: {
-		symbol: string;
-		calendarSpan: number;
-		strikePercentageFromTheMoney: number;
-		historicalProbabilityOfSuccess: number;
-	}) => Promise<number>;
-};

server/src/cli.tsx

@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from "react";
+import { render, Box, Text, useInput, useApp } from "ink";
+import TextInput from "ink-text-input";
+import type { BacktestInput } from "./backtest.js";
+import { backtest } from "./backtest.js";
+
+const App = () => {
+  const [step, setStep] = useState(0);
+  const [input, setInput] = useState<Partial<BacktestInput>>({});
+  const [result, setResult] = useState<string>("");
+  const { exit } = useApp();
+
+  const steps = [
+    { prompt: "Enter symbol:", key: "symbol" },
+    { prompt: "Enter start date (YYYY-MM-DD):", key: "startDate" },
+    { prompt: "Enter end date (YYYY-MM-DD):", key: "endDate" },
+    {
+      prompt: "Enter historical probability of success (0-1, default 0.8):",
+      key: "historicalProbabilityOfSuccess",
+    },
+    {
+      prompt: "Enter initial buying power (default 2000):",
+      key: "initialBuyingPower",
+    },
+  ];
+
+  useInput((input, key) => {
+    if (key.escape) {
+      exit();
+    }
+  });
+
+  useEffect(() => {
+    if (step === steps.length) {
+      const runBacktest = async () => {
+        try {
+          const backtestResult = await backtest(input as BacktestInput);
+          setResult(JSON.stringify(backtestResult, null, 2));
+        } catch (error) {
+          setResult(`Error: ${error.message}`);
+        }
+      };
+      runBacktest();
+    }
+  }, [step, input]);
+
+  const handleSubmit = (value: string) => {
+    const currentStep = steps[step];
+    let parsedValue: string | number = value;
+
+    if (
+      currentStep.key === "historicalProbabilityOfSuccess" ||
+      currentStep.key === "initialBuyingPower"
+    ) {
+      parsedValue = Number.parseFloat(value) || undefined;
+    }
+
+    setInput({ ...input, [currentStep.key]: parsedValue });
+    setStep(step + 1);
+  };
+
+  if (step < steps.length) {
+    return (
+      <Box flexDirection="column">
+        <Text>{steps[step].prompt}</Text>
+        <TextInput
+          value={(input[steps[step].key] as string) || ""}
+          onChange={(value) =>
+            setInput((prev) => ({ ...prev, [steps[step].key]: value }))
+          }
+          onSubmit={handleSubmit}
+        />
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Text>Backtest Results:</Text>
+      <Text>{result}</Text>
+    </Box>
+  );
+};
+
+render(<App />);

server/src/index.ts

@@ -1,311 +1,82 @@
-import { publicProcedure, router } from "./trpc.js";
+import { publicProcedure, router, RpcType } from "./trpc.js";
 import { query } from "./lib/clickhouse.js";
 import { createHTTPHandler } from "@trpc/server/adapters/standalone";
 import cors from "cors";
 import {
-	Object as ObjectT,
+  Object as ObjectT,
-	String as StringT,
+  String as StringT,
-	type TSchema,
+  Number as NumberT,
-	Number as NumberT,
 } from "@sinclair/typebox";
-import { TypeCompiler } from "@sinclair/typebox/compiler";
-import { TRPCError } from "@trpc/server";
 import { createServer } from "node:http";
 import { Env } from "@humanwhocodes/env";
+import StockPriceChart from "./StockPriceChart.js";
+import SimilarCalendarPriceChart from "./SimilarCalendarPriceChart.js";
+import CalendarExitPriceChart from "./CalendarExitPriceChart.js";
+import CalendarCharacteristicsForm from "./CalendarCharacteristicsForm.js";
 
 const env = new Env();
 
 const LISTEN_PORT = env.get("LISTEN_PORT", 3005);
 
-/**
+export const getOpensForUnderlying = publicProcedure
- * Generate a TRPC-compatible validator function given a Typebox schema.
+  .input(
- * This was copied from [https://github.com/sinclairzx81/typebox/blob/6cfcdc02cc813af2f1be57407c771fc4fadfc34a/example/trpc/readme.md].
+    RpcType(
- * @param schema A Typebox schema
+      ObjectT({
- * @returns A TRPC-compatible validator function
+        underlying: StringT({ maxLength: 5 }),
- */
+      })
-export function RpcType<T extends TSchema>(schema: T) {
+    )
-	const check = TypeCompiler.Compile(schema);
+  )
-	return (value: unknown) => {
+  .query(async (opts) => {
-		if (check.Check(value)) return value;
+    const { underlying } = opts.input;
-		const { path, message } = check.Errors(value).First();
+    return await query<{ x: number; y: number }>(
-		throw new TRPCError({
+      `
-			message: `${message} for ${path}`,
+		SELECT
-			code: "BAD_REQUEST",
+			toUnixTimestamp(tsStart) as x,
-		});
+			open as y
-	};
+		FROM stock_aggregates
-}
+		WHERE symbol = '${underlying}'
+		ORDER BY tsStart ASC
+	`,
+      "JSONEachRow"
+    );
+  });
+
+export const getOpensForOptionContract = publicProcedure
+  .input(
+    RpcType(
+      ObjectT({
+        underlying: StringT({ maxLength: 5 }),
+        expirationDate: StringT(),
+        strike: NumberT(),
+      })
+    )
+  )
+  .query(async (opts) => {
+    const { underlying, expirationDate, strike } = opts.input;
+    return await query<{ x: number; y: number }>(
+      `
+		SELECT
+			toUnixTimestamp(tsStart) as x,
+			open as y
+		FROM option_contract_aggregates
+		WHERE symbol = '${underlying}'
+		AND expirationDate = '${expirationDate}'
+		AND strike = ${strike}
+		AND type = 'call'
+		ORDER BY tsStart ASC
+	`,
+      "JSONEachRow"
+    );
+  });
 
 const appRouter = router({
-	getAvailableUnderlyings: publicProcedure.query(async (opts) => {
+  CalendarCharacteristicsForm,
-		// return (
+  StockPriceChart,
-		//   await query<{ symbol: string }>(`
+  SimilarCalendarPriceChart,
-		//   SELECT DISTINCT(symbol) as symbol FROM option_contract_existences WHERE asOfDate = (SELECT max(asOfDate) FROM option_contract_existences)
+  CalendarExitPriceChart,
-		// `)
+
-		// ).map(({ symbol }) => symbol);
+  getOpensForUnderlying,
-		return ["AAPL", "AMD", "GOOGL", "MSFT", "NFLX"];
+  getOpensForOptionContract,
-	}),
-	getAvailableAsOfDates: publicProcedure
-		.input(RpcType(ObjectT({ underlying: StringT() })))
-		.query(async (opts) => {
-			const underlying = opts.input.underlying;
-			return (
-				await query<{ asOfDate: string }>(`
-        SELECT 
-          DISTINCT(asOfDate) as asOfDate 
-        FROM option_contract_existences 
-        WHERE symbol = '${underlying}'
-        ORDER BY asOfDate
-      `)
-			).map(({ asOfDate }) => asOfDate);
-		}),
-	getExpirationsForUnderlying: publicProcedure
-		.input(
-			RpcType(
-				ObjectT({
-					underlying: StringT({ maxLength: 5 }),
-					asOfDate: StringT(),
-				}),
-			),
-		)
-		.query(async (opts) => {
-			const { underlying, asOfDate } = opts.input;
-			return (
-				await query<{ expirationDate: string }>(`
-        SELECT
-          DISTINCT(expirationDate) as expirationDate
-        FROM option_contract_existences
-        WHERE symbol = '${underlying}'
-        AND asOfDate = '${asOfDate}'
-        ORDER BY expirationDate
-      `)
-			).map(({ expirationDate }) => expirationDate);
-		}),
-	getStrikesForUnderlying: publicProcedure
-		.input(
-			RpcType(
-				ObjectT({
-					underlying: StringT({ maxLength: 5 }),
-					asOfDate: StringT(),
-					expirationDate: StringT(),
-				}),
-			),
-		)
-		.query(async (opts) => {
-			const { underlying, asOfDate, expirationDate } = opts.input;
-			return (
-				await query<{ strike: string }>(`
-        SELECT
-          DISTINCT(strike) as strike
-        FROM option_contract_existences
-        WHERE symbol = '${underlying}'
-        AND asOfDate = '${asOfDate}'
-        AND expirationDate = '${expirationDate}'
-        ORDER BY strike
-      `)
-			).map(({ strike }) => strike);
-		}),
-	getOpensForUnderlying: publicProcedure
-		.input(
-			RpcType(
-				ObjectT({
-					underlying: StringT({ maxLength: 5 }),
-				}),
-			),
-		)
-		.query(async (opts) => {
-			const { underlying } = opts.input;
-			return await query<{ x: number; y: number }>(
-				`
-        SELECT
-          toUnixTimestamp(tsStart) as x,
-          open as y
-        FROM stock_aggregates
-        WHERE symbol = '${underlying}'
-        ORDER BY tsStart ASC
-      `,
-				"JSONEachRow",
-			);
-		}),
-	getOpensForOptionContract: publicProcedure
-		.input(
-			RpcType(
-				ObjectT({
-					underlying: StringT({ maxLength: 5 }),
-					expirationDate: StringT(),
-					strike: NumberT(),
-				}),
-			),
-		)
-		.query(async (opts) => {
-			const { underlying, expirationDate, strike } = opts.input;
-			return await query<{ x: number; y: number }>(
-				`
-        SELECT
-          toUnixTimestamp(tsStart) as x,
-          open as y
-        FROM option_contract_aggregates
-        WHERE symbol = '${underlying}'
-        AND expirationDate = '${expirationDate}'
-        AND strike = ${strike}
-        AND type = 'call'
-        ORDER BY tsStart ASC
-      `,
-				"JSONEachRow",
-			);
-		}),
-	getHistoricalCalendarPrices: publicProcedure
-		.input(
-			RpcType(
-				ObjectT({
-					underlying: StringT({ maxLength: 5 }),
-					daysToFrontExpiration: NumberT(),
-					daysBetweenFrontAndBackExpiration: NumberT(),
-					strikePercentageFromUnderlyingPriceRangeMin: NumberT(),
-					strikePercentageFromUnderlyingPriceRangeMax: NumberT(),
-				}),
-			),
-		)
-		.query(async (opts) => {
-			const {
-				underlying,
-				daysToFrontExpiration,
-				daysBetweenFrontAndBackExpiration,
-				strikePercentageFromUnderlyingPriceRangeMin,
-				strikePercentageFromUnderlyingPriceRangeMax,
-			} = opts.input;
-			return (
-				await query<[number, number]>(
-					`
-        SELECT
-          toUnixTimestamp(tsStart) as asOfTs,
-          calendarPrice
-        FROM calendar_histories
-        WHERE symbol = '${underlying}'
-        AND daysToFrontExpiration = ${daysToFrontExpiration}
-        AND strikePercentageFromUnderlyingPrice >= ${strikePercentageFromUnderlyingPriceRangeMin}
-        AND strikePercentageFromUnderlyingPrice <= ${strikePercentageFromUnderlyingPriceRangeMax}
-        AND daysBetweenFrontAndBackExpiration = ${daysBetweenFrontAndBackExpiration}
-      `,
-					"JSONCompactEachRow",
-				)
-			).reduce(
-				(columns, row) => {
-					columns[0].push(row[0]);
-					columns[1].push(row[1]);
-					return columns;
-				},
-				[[], []],
-			);
-		}),
-	getHistoricalStockQuoteChartData: publicProcedure
-		.input(
-			RpcType(
-				ObjectT({
-					underlying: StringT({ maxLength: 5 }),
-					lookbackPeriodStart: StringT(),
-					lookbackPeriodEnd: StringT(),
-				}),
-			),
-		)
-		.query(async (opts) => {
-			const { underlying, lookbackPeriodStart, lookbackPeriodEnd } = opts.input;
-			return await query<[number, number]>(
-				`
-        SELECT
-          toUnixTimestamp(tsStart) as x,
-          open as y
-        FROM stock_aggregates
-        WHERE symbol = '${underlying}'
-        AND tsStart >= '${lookbackPeriodStart} 00:00:00'
-        AND tsStart <= '${lookbackPeriodEnd} 00:00:00'
-        ORDER BY x ASC
-      `,
-				"JSONEachRow",
-			);
-		}),
-	getHistoricalCalendarQuoteChartData: publicProcedure
-		.input(
-			RpcType(
-				ObjectT({
-					underlying: StringT({ maxLength: 5 }),
-					daysToFrontExpiration: NumberT(),
-					daysBetweenFrontAndBackExpiration: NumberT(),
-					strikePercentageFromUnderlyingPriceRangeMin: NumberT(),
-					strikePercentageFromUnderlyingPriceRangeMax: NumberT(),
-					lookbackPeriodStart: StringT(),
-					lookbackPeriodEnd: StringT(),
-				}),
-			),
-		)
-		.query(async (opts) => {
-			const {
-				underlying,
-				daysToFrontExpiration,
-				daysBetweenFrontAndBackExpiration,
-				strikePercentageFromUnderlyingPriceRangeMin,
-				strikePercentageFromUnderlyingPriceRangeMax,
-				lookbackPeriodStart,
-				lookbackPeriodEnd,
-			} = opts.input;
-			return await query<[number, number]>(
-				`
-        SELECT
-          toUnixTimestamp(tsStart) as x,
-          truncate(calendarPrice, 2) as y
-        FROM calendar_histories
-        WHERE symbol = '${underlying}'
-        AND daysToFrontExpiration = ${daysToFrontExpiration}
-        AND strikePercentageFromUnderlyingPrice >= ${strikePercentageFromUnderlyingPriceRangeMin}
-        AND strikePercentageFromUnderlyingPrice <= ${strikePercentageFromUnderlyingPriceRangeMax}
-        AND daysBetweenFrontAndBackExpiration = ${daysBetweenFrontAndBackExpiration}
-        AND tsStart >= '${lookbackPeriodStart} 00:00:00'
-        AND tsStart <= '${lookbackPeriodEnd} 00:00:00'
-      `,
-				"JSONEachRow",
-			);
-		}),
-	getHistoricalCalendarExitQuoteChartData: publicProcedure
-		.input(
-			RpcType(
-				ObjectT({
-					underlying: StringT({ maxLength: 5 }),
-					daysToFrontExpiration: NumberT(),
-					daysBetweenFrontAndBackExpiration: NumberT(),
-					lookbackPeriodStart: StringT({
-						pattern: "[0-9]{4}-[0-9]{2}-[0-9]{2}",
-					}),
-					lookbackPeriodEnd: StringT({ pattern: "[0-9]{4}-[0-9]{2}-[0-9]{2}" }),
-				}),
-			),
-		)
-		.query(async (opts) => {
-			const {
-				underlying,
-				daysToFrontExpiration,
-				daysBetweenFrontAndBackExpiration,
-				lookbackPeriodStart,
-				lookbackPeriodEnd,
-			} = opts.input;
-			return await query<[number, number, number]>(
-				`
-        SELECT
-          FLOOR(strikePercentageFromUnderlyingPrice, 1) as x,
-          FLOOR(calendarPrice, 1) as y,
-          count(*) as n
-        FROM calendar_histories
-        WHERE symbol = '${underlying}'
-        AND daysToFrontExpiration = ${daysToFrontExpiration}
-        AND strikePercentageFromUnderlyingPrice >= -5.0
-        AND strikePercentageFromUnderlyingPrice <= 5.0
-        AND daysBetweenFrontAndBackExpiration = ${daysBetweenFrontAndBackExpiration}
-        AND tsStart >= '${lookbackPeriodStart} 00:00:00'
-        AND tsStart <= '${lookbackPeriodEnd} 00:00:00'
-        GROUP BY x, y
-        ORDER BY x ASC, y ASC
-      `,
-				"JSONEachRow",
-			);
-		}),
 });
 
 // Export type router type signature,
@@ -313,20 +84,20 @@ const appRouter = router({
 export type AppRouter = typeof appRouter;
 
 const handler = createHTTPHandler({
-	middleware: cors(),
+  middleware: cors(),
-	router: appRouter,
+  router: appRouter,
-	createContext() {
+  createContext() {
-		return {};
+    return {};
-	},
+  },
 });
 
 const server = createServer((req, res) => {
-	if (req.url.startsWith("/healthz")) {
+  if (req.url.startsWith("/healthz")) {
-		res.statusCode = 200;
+    res.statusCode = 200;
-		res.end("OK");
+    res.end("OK");
-	} else {
+  } else {
-		handler(req, res);
+    handler(req, res);
-	}
+  }
 });
 
 server.listen(Number.parseInt(LISTEN_PORT));

server/src/lib/clickhouse.ts

@@ -6,21 +6,21 @@ import { retry } from "./utils/retry.js";
 const env = new Env();
 
 const { CLICKHOUSE_USER, CLICKHOUSE_PASS } = env.required;
-const CLICKHOUSE_HOST = env.get("CLICKHOUSE_HOST", "http://localhost:8123");
+const CLICKHOUSE_URL = env.get("CLICKHOUSE_URL", "http://localhost:8123");
 
 export const clickhouse = createClickhouseClient({
-  host: CLICKHOUSE_HOST,
+  url: CLICKHOUSE_URL,
   username: CLICKHOUSE_USER,
   password: CLICKHOUSE_PASS,
   keep_alive: {
     enabled: true,
-    socket_ttl: 2500,
+    // socket_ttl: 2500,
   },
 });
 
 export async function query<T>(
   queryString: string,
-  format: DataFormat = "JSONEachRow",
+  format: DataFormat = "JSONEachRow"
 ): Promise<Array<T>> {
   return await retry(
     async () => {
@@ -33,6 +33,6 @@ export async function query<T>(
       });
       return await result.json();
     },
-    { maxRetries: 5 },
+    { maxRetries: 5 }
   );
 }

server/src/scripts/clickhouse-to-lmdbx.ts

@@ -1,12 +1,12 @@
-import type { AggregateDatabase } from "../interfaces.js";
+import type { AggregateDatabase } from "../AggregateDatabase/interfaces.js";
-import { stockDatabase as stockDatabaseClickhouse } from "../stockdb/clickhouse.js";
+import { database as stockDatabaseClickhouse } from "../AggregateDatabase/Stock/clickhouse.js";
-import { stockDatabase as stockDatabaseLmdbx } from "../stockdb/lmdbx.js";
+import { database as stockDatabaseLmdbx } from "../AggregateDatabase/Stock/lmdbx.js";
 // import { optionContractDatabase as optionContractDatabaseClickhouse } from "../optiondb.clickhouse.js";
 // import { optionContractDatabase as optionContractDatabaseLmdbx } from "../optiondb.lmdbx.js";
 import { nextDate } from "../lib/utils/nextDate.js";
 import { retry, retryOnTimeout } from "../lib/utils/retry.js";
-import type { OptionContractKey } from "../optiondb/interfaces.js";
+import type { OptionContractKey } from "../AggregateDatabase/OptionContract/interfaces.js";
-import type { StockKey } from "../stockdb/interfaces.js";
+import type { StockKey } from "../AggregateDatabase/Stock/interfaces.js";
 
 async function syncAggregates<T>({
   fromDatabase,
@@ -20,7 +20,7 @@ async function syncAggregates<T>({
   date: string;
 }) {
   const aggregatesFrom = (await fromDatabase.getAggregates({ key, date })).map(
-    (aggregateWithoutKey) => ({ ...aggregateWithoutKey, key }),
+    (aggregateWithoutKey) => ({ ...aggregateWithoutKey, key })
   );
   await toDatabase.insertAggregates(aggregatesFrom);
 }
@@ -29,7 +29,10 @@ const symbols = ["AMD", "AAPL", "MSFT", "GOOGL", "NFLX", "NVDA"];
 async function run<T extends StockKey | OptionContractKey>({
   fromDatabase,
   toDatabase,
-}: { fromDatabase: AggregateDatabase<T>; toDatabase: AggregateDatabase<T> }) {
+}: {
+  fromDatabase: AggregateDatabase<T>;
+  toDatabase: AggregateDatabase<T>;
+}) {
   const startDate = process.argv[2];
   const endDate = process.argv[3];
 
@@ -48,7 +51,7 @@ async function run<T extends StockKey | OptionContractKey>({
             key: { symbol } as T,
             date,
           }),
-        { shouldRetry: retryOnTimeout },
+        { shouldRetry: retryOnTimeout }
       );
 
       for (const key of keys) {
@@ -61,7 +64,7 @@ async function run<T extends StockKey | OptionContractKey>({
               key,
               date,
             }),
-          { shouldRetry: retryOnTimeout },
+          { shouldRetry: retryOnTimeout }
         );
       }
     }

server/src/trpc.ts

@@ -1,14 +1,35 @@
-import { initTRPC } from '@trpc/server';
+import { initTRPC } from "@trpc/server";
- 
+import { TypeCompiler } from "@sinclair/typebox/compiler";
+import { TRPCError } from "@trpc/server";
+import type { TSchema } from "@sinclair/typebox";
+
 /**
  * Initialization of tRPC backend
  * Should be done only once per backend!
  */
 const t = initTRPC.create();
- 
+
 /**
  * Export reusable router and procedure helpers
  * that can be used throughout the router
  */
 export const router = t.router;
 export const publicProcedure = t.procedure;
+
+/**
+ * Generate a TRPC-compatible validator function given a Typebox schema.
+ * This was copied from [https://github.com/sinclairzx81/typebox/blob/6cfcdc02cc813af2f1be57407c771fc4fadfc34a/example/trpc/readme.md].
+ * @param schema A Typebox schema
+ * @returns A TRPC-compatible validator function
+ */
+export function RpcType<T extends TSchema>(schema: T) {
+  const check = TypeCompiler.Compile(schema);
+  return (value: unknown) => {
+    if (check.Check(value)) return value;
+    const { path, message } = check.Errors(value).First();
+    throw new TRPCError({
+      message: `${message} for ${path}`,
+      code: "BAD_REQUEST",
+    });
+  };
+}

server/tsconfig.json

@@ -1,12 +1,13 @@
 {
-	"compilerOptions": {
+  "compilerOptions": {
-		"target": "ES2020",
+    "jsx": "react",
-		"module": "ESNext",
+    "target": "ES2020",
-		"moduleResolution": "bundler",
+    "module": "ESNext",
-		"noEmit": true,
+    "moduleResolution": "bundler",
-		"allowJs": true,
+    "noEmit": true,
-		"checkJs": true,
+    "allowJs": true,
-		"lib": ["es2022"]
+    "checkJs": false,
-	},
+    "lib": ["es2022"]
-	"include": ["**/*"]
+  },
+  "include": ["src/**/*"]
 }