Skip to content

Extract reusable drasi-react components from the Trading example#119

Draft
Copilot wants to merge 3 commits into
mainfrom
copilot/extract-query-panel-component
Draft

Extract reusable drasi-react components from the Trading example#119
Copilot wants to merge 3 commits into
mainfrom
copilot/extract-query-panel-component

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Jun 4, 2026

The Trading example's QueryTable and the shared SSE muxer were entangled with app-specific logic. This extracts them into a distinct, reusable, documented drasi-react package and rewires the app to consume it as an independent dependency, with no change to runtime behavior.

New package: examples/trading/drasi-react/ (@drasi/react)

Application-agnostic React library — all queries, reaction config, and routing are injected by the host:

  • DrasiSSEClient — single shared EventSource multiplexing every query; trading content-routing replaced by an optional routeUnidentified(rows, deliver) callback.
  • DrasiClient — query/reaction lifecycle, REST seeding, connection management via constructor options.
  • DrasiProvider + hooks: useDrasiQuery (generic accumulation via getKey/transform/postProcess), useDrasiConnectionStatus, useDrasiServerUiUrl, useDrasiQueryDefinition.
  • QueryTable — sortable/animated/full-screen table with code viewer; app Tailwind tokens replaced with neutral values, fully themeable via className props.
  • Ships index.ts, styles.css, package.json, tsconfig.json, .gitignore, and a full README.md (API + build instructions). Builds independently (npm install && npm run build).

App integration (examples/trading/app/)

  • Domain logic relocated to src/drasi/config.ts (query list, SSE reaction, content router) and src/drasi/queryOptions.ts (per-query key/transform/sort), replicating prior behavior exactly.
  • Consumed as source via Vite alias + tsconfig path + Tailwind glob; React/clsx deduped to the app's single copy, so the demo needs no separate build step.
  • main.tsx wraps the tree in <DrasiProvider>; all consumers import from @drasi/react.
  • Removed the now-duplicated/dead files (services/DrasiClient.ts, hooks/useDrasi.ts, services/grpc/*, components/QueryTable.tsx, hooks/useRowAnimation.ts, shared/CodeViewerDialog.tsx), which also clears a latent tsc break (createdReaction unused).

Docs

  • README.md / CONTRIBUTING.md updated for the new layout and shared components; stale file references corrected.
// main.tsx — app supplies all domain config; components stay generic
<DrasiProvider
  serverUrl="http://localhost:8280"
  queries={TRADING_QUERIES}
  reaction={TRADING_REACTION}
  routeUnidentified={routeTradingData}
>
  <App />
</DrasiProvider>

// A table is now just a binding + render description
<QueryTable
  queryId="watchlist-query"
  queryOptions={tradingQueryOptions('watchlist-query')}
  rowKey={(r) => r.symbol}
  columns={columns}
  animateOnChange="price"
/>

Note: the live end-to-end demo (Docker/Postgres/Drasi Server) was not run in this environment; verification was limited to tsc/vite build and dev-server module resolution.

Copilot AI requested review from Copilot and removed request for Copilot June 4, 2026 03:40
Copilot AI requested review from Copilot and removed request for Copilot June 4, 2026 03:44
Copilot AI changed the title [WIP] Extract QueryPanel into separate reusable component Extract reusable drasi-react components from the Trading example Jun 4, 2026
Copilot AI requested a review from agentofreality June 4, 2026 03:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Extract React QueryPanel used in Trading Example into separate reusable component.

2 participants