├── src
├── vite-env.d.ts
├── utils
│ ├── operators
│ │ ├── baseOperator.ts
│ │ ├── index.ts
│ │ ├── filterOperator.ts
│ │ ├── mapOperator.ts
│ │ ├── mergeOperator.ts
│ │ ├── concatOperator.ts
│ │ ├── combineLatestOperator.ts
│ │ └── scanOperator.ts
│ ├── marbleUtils
│ │ ├── mapMarbleUtils.ts
│ │ ├── filterMarbleUtils.ts
│ │ ├── scanMarbleUtils.ts
│ │ ├── baseMarbleUtils.ts
│ │ ├── index.ts
│ │ ├── concatMarbleUtils.ts
│ │ ├── mergeMarbleUtils.ts
│ │ └── combineLatestMarbleUtils.ts
│ ├── marbleUtils.ts
│ └── operators.ts
├── main.tsx
├── components
│ ├── operators
│ │ ├── displays
│ │ │ ├── MapDisplay.tsx
│ │ │ ├── FilterDisplay.tsx
│ │ │ ├── index.ts
│ │ │ ├── ScanDisplay.tsx
│ │ │ ├── MergeDisplay.tsx
│ │ │ ├── ConcatDisplay.tsx
│ │ │ └── CombineLatestDisplay.tsx
│ │ ├── ScanTimeline.tsx
│ │ ├── MergeTimeline.tsx
│ │ ├── ConcatTimeline.tsx
│ │ ├── FilterTimeline.tsx
│ │ ├── MapTimeline.tsx
│ │ ├── CombineLatestTimeline.tsx
│ │ └── BaseTimeline.tsx
│ ├── Timeline
│ │ ├── index.ts
│ │ ├── labels
│ │ │ ├── index.ts
│ │ │ ├── MapTimelineLabel.tsx
│ │ │ ├── ScanTimelineLabel.tsx
│ │ │ ├── FilterTimelineLabel.tsx
│ │ │ ├── MergeTimelineLabel.tsx
│ │ │ └── CombineLatestTimelineLabel.tsx
│ │ ├── ConcatTimeline.tsx
│ │ ├── MapTimeline.tsx
│ │ ├── ScanTimeline.tsx
│ │ ├── FilterTimeline.tsx
│ │ ├── OutputMarble.tsx
│ │ ├── MergeTimeline.tsx
│ │ ├── CombineLatestTimeline.tsx
│ │ ├── Timeline.tsx
│ │ ├── StreamMarble.tsx
│ │ ├── Marble.tsx
│ │ └── TimelineLabel.tsx
│ ├── SpeedControl.tsx
│ ├── OperatorDisplay.tsx
│ ├── ThemeToggle.tsx
│ ├── Timeline.tsx
│ └── Controls.tsx
├── types
│ └── marble.ts
├── store
│ ├── themeStore.ts
│ ├── operators
│ │ ├── baseOperatorStore.ts
│ │ ├── mapStore.ts
│ │ ├── scanStore.ts
│ │ ├── filterStore.ts
│ │ ├── concatStore.ts
│ │ ├── combineLatestStore.ts
│ │ └── mergeStore.ts
│ └── marbleStore.ts
├── hooks
│ ├── useMarbleEmitter.ts
│ ├── operators
│ │ ├── useFilterStream.ts
│ │ ├── useMapStream.ts
│ │ ├── useMergeStream.ts
│ │ ├── useConcatStream.ts
│ │ ├── useCombineLatestStream.ts
│ │ └── useScanStream.ts
│ └── useMarbleStreams.ts
├── index.css
└── App.tsx
├── dist
├── .DS_Store
├── angularspacebanner.png
├── index.html
└── assets
│ └── index-BLfRN02l.css
├── postcss.config.js
├── public
└── angularspacebanner.png
├── tsconfig.json
├── vite.config.ts
├── README.md
├── index.html
├── .gitignore
├── tsconfig.node.json
├── tsconfig.app.json
├── tailwind.config.js
├── eslint.config.js
├── package.json
└── LICENSE
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/dist/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielglejzner/rxjs-marble-diagram-visualizer/HEAD/dist/.DS_Store
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | };
7 |
--------------------------------------------------------------------------------
/dist/angularspacebanner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielglejzner/rxjs-marble-diagram-visualizer/HEAD/dist/angularspacebanner.png
--------------------------------------------------------------------------------
/public/angularspacebanner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielglejzner/rxjs-marble-diagram-visualizer/HEAD/public/angularspacebanner.png
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [],
3 | "references": [
4 | { "path": "./tsconfig.app.json" },
5 | { "path": "./tsconfig.node.json" }
6 | ]
7 | }
8 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import react from '@vitejs/plugin-react';
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | optimizeDeps: {
8 | exclude: ['lucide-react'],
9 | },
10 | });
11 |
--------------------------------------------------------------------------------
/src/utils/operators/baseOperator.ts:
--------------------------------------------------------------------------------
1 | import type { Marble } from '../../types/marble';
2 |
3 | // Base delay calculation
4 | export const getOperatorDelay = (speed: number = 1): number => {
5 | const BASE_DELAY = 1200; // Base delay in milliseconds
6 | return BASE_DELAY / speed;
7 | };
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from 'react';
2 | import { createRoot } from 'react-dom/client';
3 | import App from './App.tsx';
4 | import './index.css';
5 |
6 | createRoot(document.getElementById('root')!).render(
7 |
8 |
9 |
10 | );
11 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # rxjs-marble-diagram-visualizer
2 | This is bolt.new generated code, no human intervention other than prompts!
3 |
4 | Story: https://www.angularspace.com/built-rxjs-visualizer-in-4-hours-with-ai-no-coding/
5 |
6 | Feel free to contribute !!!
7 |
8 | Deployed to: [rxvisualizer.com](http://rxvisualizer.com) <----
9 |
--------------------------------------------------------------------------------
/src/components/operators/displays/MapDisplay.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const MapDisplay = () => (
4 |
5 |
6 | {'map(x => x * 10)'}
7 |
8 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/components/operators/displays/FilterDisplay.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const FilterDisplay = () => (
4 |
5 |
6 | {'filter(x => x % 2 === 1)'}
7 |
8 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/components/operators/displays/index.ts:
--------------------------------------------------------------------------------
1 | export { MapDisplay } from './MapDisplay';
2 | export { FilterDisplay } from './FilterDisplay';
3 | export { MergeDisplay } from './MergeDisplay';
4 | export { CombineLatestDisplay } from './CombineLatestDisplay';
5 | export { ConcatDisplay } from './ConcatDisplay';
6 | export { ScanDisplay } from './ScanDisplay';
--------------------------------------------------------------------------------
/src/utils/operators/index.ts:
--------------------------------------------------------------------------------
1 | export { mapOperator } from './mapOperator';
2 | export { filterOperator } from './filterOperator';
3 | export { mergeOperator } from './mergeOperator';
4 | export { combineLatestOperator } from './combineLatestOperator';
5 | export { concatOperator } from './concatOperator';
6 | export { scanOperator } from './scanOperator';
--------------------------------------------------------------------------------
/src/components/Timeline/index.ts:
--------------------------------------------------------------------------------
1 | export { MapTimeline } from './MapTimeline';
2 | export { FilterTimeline } from './FilterTimeline';
3 | export { MergeTimeline } from './MergeTimeline';
4 | export { CombineLatestTimeline } from './CombineLatestTimeline';
5 | export { ConcatTimeline } from './ConcatTimeline';
6 | export { ScanTimeline } from './ScanTimeline';
--------------------------------------------------------------------------------
/src/components/Timeline/labels/index.ts:
--------------------------------------------------------------------------------
1 | export { MapTimelineLabel } from './MapTimelineLabel';
2 | export { FilterTimelineLabel } from './FilterTimelineLabel';
3 | export { MergeTimelineLabel } from './MergeTimelineLabel';
4 | export { CombineLatestTimelineLabel } from './CombineLatestTimelineLabel';
5 | export { ScanTimelineLabel } from './ScanTimelineLabel';
--------------------------------------------------------------------------------
/src/components/operators/displays/ScanDisplay.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const ScanDisplay = () => (
4 |
5 |
6 | {'scan((acc, curr) => acc + curr, 0)'}
7 |
8 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/utils/marbleUtils/mapMarbleUtils.ts:
--------------------------------------------------------------------------------
1 | import { createMarble } from './baseMarbleUtils';
2 |
3 | let numberIndex = 1;
4 |
5 | export const resetMapIndexes = () => {
6 | numberIndex = 1;
7 | };
8 |
9 | export const generateMapMarble = () => {
10 | const marble = createMarble(numberIndex, 'rgb(59, 130, 246)'); // blue
11 | numberIndex++;
12 | return marble;
13 | };
--------------------------------------------------------------------------------
/src/utils/marbleUtils/filterMarbleUtils.ts:
--------------------------------------------------------------------------------
1 | import { createMarble } from './baseMarbleUtils';
2 |
3 | let numberIndex = 1;
4 |
5 | export const resetFilterIndexes = () => {
6 | numberIndex = 1;
7 | };
8 |
9 | export const generateFilterMarble = () => {
10 | const marble = createMarble(numberIndex, 'rgb(59, 130, 246)'); // blue
11 | numberIndex++;
12 | return marble;
13 | };
--------------------------------------------------------------------------------
/src/utils/marbleUtils/scanMarbleUtils.ts:
--------------------------------------------------------------------------------
1 | import { createMarble } from './baseMarbleUtils';
2 |
3 | let numberIndex = 1;
4 |
5 | export const resetScanIndexes = () => {
6 | numberIndex = 1;
7 | };
8 |
9 | export const generateScanMarble = () => {
10 | const marble = createMarble(numberIndex, 'rgb(239, 68, 68)'); // Red for input marbles
11 | numberIndex++;
12 | return marble;
13 | };
--------------------------------------------------------------------------------
/src/utils/marbleUtils/baseMarbleUtils.ts:
--------------------------------------------------------------------------------
1 | // Base marble generation utilities
2 | export const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
3 | export const specialChars = ['@', '#', '$', '%', '&', '*', '=', '+', '?', '!'];
4 |
5 | export const createMarble = (value: string | number, color: string) => ({
6 | id: Math.random().toString(36).substring(2),
7 | value,
8 | timestamp: Date.now(),
9 | color
10 | });
--------------------------------------------------------------------------------
/src/types/marble.ts:
--------------------------------------------------------------------------------
1 | export interface Marble {
2 | id: string;
3 | value: string | number;
4 | timestamp: number;
5 | color: string;
6 | sourceValues?: {
7 | stream1: string | number;
8 | stream2: string | number;
9 | stream3?: string | number;
10 | };
11 | }
12 |
13 | export type RxJSOperator =
14 | | 'map'
15 | | 'filter'
16 | | 'merge'
17 | | 'combineLatest'
18 | | 'concat'
19 | | 'scan';
20 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React + TS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/utils/marbleUtils/index.ts:
--------------------------------------------------------------------------------
1 | export { generateMapMarble, resetMapIndexes } from './mapMarbleUtils';
2 | export { generateFilterMarble, resetFilterIndexes } from './filterMarbleUtils';
3 | export { generateMergeMarble, resetMergeIndexes } from './mergeMarbleUtils';
4 | export { generateCombineLatestMarble, resetCombineLatestIndexes } from './combineLatestMarbleUtils';
5 | export { generateConcatMarble, resetConcatIndexes } from './concatMarbleUtils';
6 | export { generateScanMarble, resetScanIndexes } from './scanMarbleUtils';
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React + TS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Dependencies
2 | /node_modules
3 | .pnp
4 | .pnp.js
5 |
6 | # Testing
7 | coverage
8 |
9 | # Production
10 | dist
11 | dist-ssr
12 | *.local
13 |
14 | # Logs
15 | logs
16 | *.log
17 | npm-debug.log*
18 | yarn-debug.log*
19 | yarn-error.log*
20 | pnpm-debug.log*
21 |
22 | # Editor directories and files
23 | .vscode/*
24 | !.vscode/extensions.json
25 | !.vscode/settings.json
26 | .idea
27 | .DS_Store
28 | *.suo
29 | *.ntvs*
30 | *.njsproj
31 | *.sln
32 | *.sw?
33 |
34 | # Environment files
35 | .env
36 | .env.*
37 | !.env.example
38 |
--------------------------------------------------------------------------------
/src/components/operators/displays/MergeDisplay.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useMarbleStore } from '../../../store/marbleStore';
3 |
4 | export const MergeDisplay = () => {
5 | const { isStream3Enabled } = useMarbleStore();
6 |
7 | return (
8 |
9 |
10 | {isStream3Enabled
11 | ? 'merge(stream1$, stream2$, stream3$)'
12 | : 'merge(stream1$, stream2$)'}
13 |
14 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2022",
4 | "lib": ["ES2023"],
5 | "module": "ESNext",
6 | "skipLibCheck": true,
7 |
8 | /* Bundler mode */
9 | "moduleResolution": "bundler",
10 | "allowImportingTsExtensions": true,
11 | "isolatedModules": true,
12 | "moduleDetection": "force",
13 | "noEmit": true,
14 |
15 | /* Linting */
16 | "strict": true,
17 | "noUnusedLocals": true,
18 | "noUnusedParameters": true,
19 | "noFallthroughCasesInSwitch": true
20 | },
21 | "include": ["vite.config.ts"]
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/operators/displays/ConcatDisplay.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useMarbleStore } from '../../../store/marbleStore';
3 |
4 | export const ConcatDisplay = () => {
5 | const { isStream3Enabled } = useMarbleStore();
6 |
7 | return (
8 |
9 |
10 | {isStream3Enabled
11 | ? 'concat(stream1$, stream2$, stream3$)'
12 | : 'concat(stream1$, stream2$)'}
13 |
14 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/src/store/themeStore.ts:
--------------------------------------------------------------------------------
1 | import {create} from "zustand";
2 |
3 | type Theme = "dark" | "light";
4 |
5 | interface ThemeStore {
6 | theme: Theme
7 | toggleTheme: () => void;
8 | }
9 |
10 | export const useThemeStore = create((set) => ({
11 | theme: (localStorage.getItem("theme") as Theme) || "light",
12 |
13 | toggleTheme: () =>
14 | set((state) => {
15 | const newTheme: Theme = state.theme === "dark" ? "light" : "dark";
16 | localStorage.setItem("theme", newTheme);
17 | return { theme: newTheme };
18 | }),
19 | }));
20 |
--------------------------------------------------------------------------------
/src/utils/operators/filterOperator.ts:
--------------------------------------------------------------------------------
1 | import { Observable, filter, map, delay } from 'rxjs';
2 | import type { Marble } from '../../types/marble';
3 | import { getOperatorDelay } from './baseOperator';
4 |
5 | export const filterOperator = (
6 | stream1$: Observable,
7 | speed: number = 1
8 | ): Observable => {
9 | return stream1$.pipe(
10 | delay(getOperatorDelay(speed)),
11 | filter(marble => typeof marble.value === 'number' && marble.value % 2 === 1),
12 | map(marble => ({
13 | ...marble,
14 | id: `${marble.id}-filtered`,
15 | color: 'rgb(34, 197, 94)'
16 | }))
17 | );
18 | };
--------------------------------------------------------------------------------
/src/components/operators/displays/CombineLatestDisplay.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useMarbleStore } from '../../../store/marbleStore';
3 |
4 | export const CombineLatestDisplay = () => {
5 | const { isStream3Enabled } = useMarbleStore();
6 |
7 | return (
8 |
9 |
10 | {isStream3Enabled
11 | ? 'combineLatest([stream1$, stream2$, stream3$], (x, y, z) => x + y + z)'
12 | : 'combineLatest([stream1$, stream2$], (x, y) => x + y)'}
13 |
14 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/src/utils/operators/mapOperator.ts:
--------------------------------------------------------------------------------
1 | import { Observable, map, delay } from 'rxjs';
2 | import type { Marble } from '../../types/marble';
3 | import { getOperatorDelay } from './baseOperator';
4 |
5 | export const mapOperator = (
6 | stream1$: Observable,
7 | speed: number = 1
8 | ): Observable => {
9 | return stream1$.pipe(
10 | delay(getOperatorDelay(speed)),
11 | map(marble => ({
12 | ...marble,
13 | id: `${marble.id}-mapped`,
14 | value: typeof marble.value === 'string'
15 | ? marble.value.toString().toLowerCase()
16 | : marble.value * 10,
17 | color: 'rgb(34, 197, 94)'
18 | }))
19 | );
20 | };
--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "bundler",
11 | "allowImportingTsExtensions": true,
12 | "isolatedModules": true,
13 | "moduleDetection": "force",
14 | "noEmit": true,
15 | "jsx": "react-jsx",
16 |
17 | /* Linting */
18 | "strict": true,
19 | "noUnusedLocals": true,
20 | "noUnusedParameters": true,
21 | "noFallthroughCasesInSwitch": true
22 | },
23 | "include": ["src"]
24 | }
25 |
--------------------------------------------------------------------------------
/src/utils/marbleUtils/concatMarbleUtils.ts:
--------------------------------------------------------------------------------
1 | import { createMarble } from './baseMarbleUtils';
2 |
3 | let numberIndex1 = 1;
4 | let numberIndex2 = 10;
5 |
6 | export const resetConcatIndexes = () => {
7 | numberIndex1 = 1;
8 | numberIndex2 = 10;
9 | };
10 |
11 | export const generateConcatMarble = (streamId: number) => {
12 | switch (streamId) {
13 | case 1: {
14 | const value = numberIndex1++;
15 | return createMarble(value, 'rgb(59, 130, 246)'); // blue
16 | }
17 | case 2: {
18 | const value = numberIndex2++;
19 | return createMarble(value, 'rgb(239, 68, 68)'); // red
20 | }
21 | default:
22 | return null;
23 | }
24 | };
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
4 | darkMode: 'class',
5 | theme: {
6 | extend: {
7 | colors: {
8 | primary: 'var(--color-primary)',
9 | secondary: 'var(--color-secondary)',
10 | text: 'var(--color-text)',
11 | 'text-muted': 'var(--color-text-muted)',
12 | border: 'var(--color-border)',
13 | purple: 'var(--color-purple)',
14 | },
15 | boxShadow: {
16 | banner: 'var(--banner-shadow)',
17 | timeline: 'var(--timeline-shadow)',
18 | },
19 | },
20 | },
21 | plugins: [],
22 | };
23 |
--------------------------------------------------------------------------------
/src/utils/operators/mergeOperator.ts:
--------------------------------------------------------------------------------
1 | import { Observable, merge, map, delay } from 'rxjs';
2 | import type { Marble } from '../../types/marble';
3 | import { getOperatorDelay } from './baseOperator';
4 |
5 | export const mergeOperator = (
6 | stream1$: Observable,
7 | stream2$: Observable,
8 | stream3$: Observable,
9 | isStream3Enabled: boolean,
10 | speed: number = 1
11 | ): Observable => {
12 | const streams = isStream3Enabled
13 | ? [stream1$, stream2$, stream3$]
14 | : [stream1$, stream2$];
15 |
16 | return merge(...streams).pipe(
17 | delay(getOperatorDelay(speed)),
18 | map(marble => ({
19 | ...marble,
20 | id: `${marble.id}-merged`,
21 | color: 'rgb(34, 197, 94)'
22 | }))
23 | );
24 | };
--------------------------------------------------------------------------------
/src/components/operators/ScanTimeline.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseTimeline } from './BaseTimeline';
3 | import { useScanStore } from '../../store/operators/scanStore';
4 | import { useScanStream } from '../../hooks/operators/useScanStream';
5 |
6 | export const ScanTimeline: React.FC = () => {
7 | const {
8 | stream1Marbles,
9 | stream2Marbles,
10 | stream3Marbles,
11 | outputMarbles,
12 | isStream3Enabled
13 | } = useScanStore();
14 |
15 | useScanStream();
16 |
17 | return (
18 |
26 | );
27 | };
--------------------------------------------------------------------------------
/src/hooks/useMarbleEmitter.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { useMarbleStore } from '../store/marbleStore';
3 | import { generateMarble } from '../utils/marbleUtils';
4 |
5 | export const useMarbleEmitter = () => {
6 | const { isPlaying, speed, addMarble } = useMarbleStore();
7 |
8 | useEffect(() => {
9 | if (!isPlaying) return;
10 |
11 | const interval1 = setInterval(() => {
12 | const marble = generateMarble();
13 | addMarble(1, marble);
14 | }, 2000 / speed);
15 |
16 | const interval2 = setInterval(() => {
17 | const marble = generateMarble();
18 | addMarble(2, marble);
19 | }, 2500 / speed);
20 |
21 | return () => {
22 | clearInterval(interval1);
23 | clearInterval(interval2);
24 | };
25 | }, [isPlaying, speed, addMarble]);
26 | };
--------------------------------------------------------------------------------
/src/components/operators/MergeTimeline.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseTimeline } from './BaseTimeline';
3 | import { useMergeStore } from '../../store/operators/mergeStore';
4 | import { useMergeStream } from '../../hooks/operators/useMergeStream';
5 |
6 | export const MergeTimeline: React.FC = () => {
7 | const {
8 | stream1Marbles,
9 | stream2Marbles,
10 | stream3Marbles,
11 | outputMarbles,
12 | isStream3Enabled
13 | } = useMergeStore();
14 |
15 | useMergeStream();
16 |
17 | return (
18 |
26 | );
27 | };
--------------------------------------------------------------------------------
/src/components/SpeedControl.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Gauge } from 'lucide-react';
3 | import { useMarbleStore } from '../store/marbleStore';
4 |
5 | export const SpeedControl: React.FC = () => {
6 | const { speed, setSpeed } = useMarbleStore();
7 |
8 | return (
9 |
10 |
11 | setSpeed(parseFloat(e.target.value))}
18 | className="w-24 h-2 bg-border rounded-lg appearance-none cursor-pointer"
19 | />
20 |
21 | {speed}x
22 |
23 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/src/components/operators/ConcatTimeline.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseTimeline } from './BaseTimeline';
3 | import { useConcatStore } from '../../store/operators/concatStore';
4 | import { useConcatStream } from '../../hooks/operators/useConcatStream';
5 |
6 | export const ConcatTimeline: React.FC = () => {
7 | const {
8 | stream1Marbles,
9 | stream2Marbles,
10 | stream3Marbles,
11 | outputMarbles,
12 | isStream3Enabled
13 | } = useConcatStore();
14 |
15 | useConcatStream();
16 |
17 | return (
18 |
26 | );
27 | };
--------------------------------------------------------------------------------
/src/components/operators/FilterTimeline.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseTimeline } from './BaseTimeline';
3 | import { useFilterStore } from '../../store/operators/filterStore';
4 | import { useFilterStream } from '../../hooks/operators/useFilterStream';
5 |
6 | export const FilterTimeline: React.FC = () => {
7 | const {
8 | stream1Marbles,
9 | stream2Marbles,
10 | stream3Marbles,
11 | outputMarbles,
12 | isStream3Enabled
13 | } = useFilterStore();
14 |
15 | useFilterStream();
16 |
17 | return (
18 |
26 | );
27 | };
--------------------------------------------------------------------------------
/src/components/operators/MapTimeline.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseTimeline } from './BaseTimeline';
3 | import { useMapStore } from '../../store/operators/mapStore';
4 | import { useMapStream } from '../../hooks/operators/useMapStream';
5 |
6 | export const MapTimeline: React.FC = () => {
7 | const {
8 | stream1Marbles,
9 | stream2Marbles,
10 | stream3Marbles,
11 | outputMarbles,
12 | isStream3Enabled
13 | } = useMapStore();
14 |
15 | useMapStream();
16 |
17 | return (
18 |
26 | );
27 | };
--------------------------------------------------------------------------------
/src/utils/operators/concatOperator.ts:
--------------------------------------------------------------------------------
1 | import { Observable, concat, map, take, endWith, delay } from 'rxjs';
2 | import type { Marble } from '../../types/marble';
3 |
4 | export const concatOperator = (
5 | stream1$: Observable,
6 | stream2$: Observable
7 | ): Observable => {
8 | const stream1WithEnd$ = stream1$.pipe(
9 | take(3),
10 | endWith(null)
11 | );
12 |
13 | const stream2WithEnd$ = stream2$.pipe(
14 | take(3),
15 | endWith(null)
16 | );
17 |
18 | return concat(stream1WithEnd$, stream2WithEnd$).pipe(
19 | delay(1200), // Reduced from 1500ms to 1200ms
20 | map(marble => {
21 | if (!marble) return null;
22 | return {
23 | ...marble,
24 | id: `${marble.id}-concat`,
25 | color: 'rgb(34, 197, 94)'
26 | };
27 | })
28 | );
29 | };
--------------------------------------------------------------------------------
/src/components/OperatorDisplay.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useMarbleStore } from '../store/marbleStore';
3 | import {
4 | MapDisplay,
5 | FilterDisplay,
6 | MergeDisplay,
7 | CombineLatestDisplay,
8 | ConcatDisplay,
9 | ScanDisplay
10 | } from './operators/displays';
11 |
12 | export const OperatorDisplay: React.FC = () => {
13 | const { currentOperator } = useMarbleStore();
14 |
15 | switch (currentOperator) {
16 | case 'map':
17 | return ;
18 | case 'filter':
19 | return ;
20 | case 'merge':
21 | return ;
22 | case 'combineLatest':
23 | return ;
24 | case 'concat':
25 | return ;
26 | case 'scan':
27 | return ;
28 | default:
29 | return null;
30 | }
31 | };
--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | import js from '@eslint/js';
2 | import globals from 'globals';
3 | import reactHooks from 'eslint-plugin-react-hooks';
4 | import reactRefresh from 'eslint-plugin-react-refresh';
5 | import tseslint from 'typescript-eslint';
6 |
7 | export default tseslint.config(
8 | { ignores: ['dist'] },
9 | {
10 | extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 | files: ['**/*.{ts,tsx}'],
12 | languageOptions: {
13 | ecmaVersion: 2020,
14 | globals: globals.browser,
15 | },
16 | plugins: {
17 | 'react-hooks': reactHooks,
18 | 'react-refresh': reactRefresh,
19 | },
20 | rules: {
21 | ...reactHooks.configs.recommended.rules,
22 | 'react-refresh/only-export-components': [
23 | 'warn',
24 | { allowConstantExport: true },
25 | ],
26 | },
27 | }
28 | );
29 |
--------------------------------------------------------------------------------
/src/store/operators/baseOperatorStore.ts:
--------------------------------------------------------------------------------
1 | import { Subject } from 'rxjs';
2 | import type { Marble } from '../../types/marble';
3 |
4 | export interface BaseOperatorState {
5 | stream1Marbles: Marble[];
6 | stream2Marbles: Marble[];
7 | stream3Marbles: Marble[];
8 | outputMarbles: Marble[];
9 | stream1$: Subject;
10 | stream2$: Subject;
11 | stream3$: Subject;
12 | isStream3Enabled: boolean;
13 | speed: number;
14 | addMarble: (streamId: number, marble: Marble) => void;
15 | addOutputMarble: (marble: Marble) => void;
16 | setSpeed: (speed: number) => void;
17 | clearMarbles: () => void;
18 | resetPipeline: () => void;
19 | toggleStream3: () => void;
20 | }
21 |
22 | export const createNewSubjects = () => ({
23 | stream1$: new Subject(),
24 | stream2$: new Subject(),
25 | stream3$: new Subject()
26 | });
--------------------------------------------------------------------------------
/src/components/operators/CombineLatestTimeline.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseTimeline } from './BaseTimeline';
3 | import { useCombineLatestStore } from '../../store/operators/combineLatestStore';
4 | import { useCombineLatestStream } from '../../hooks/operators/useCombineLatestStream';
5 |
6 | export const CombineLatestTimeline: React.FC = () => {
7 | const {
8 | stream1Marbles,
9 | stream2Marbles,
10 | stream3Marbles,
11 | outputMarbles,
12 | isStream3Enabled
13 | } = useCombineLatestStore();
14 |
15 | useCombineLatestStream();
16 |
17 | return (
18 |
26 | );
27 | };
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | :root {
7 | --color-primary: #f3f4f6;
8 | --color-secondary: #ffffff;
9 | --color-text: #111827;
10 | --color-text-muted: #6b7280;
11 | --color-border: #e5e7eb;
12 | --color-purple: #a855f7;
13 | --color-purple-hover: #a855f7;
14 | --color-purple-glow: rgba(168, 85, 247, 0.4);
15 | --banner-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
16 | --timeline-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
17 | }
18 |
19 | .dark {
20 | --color-primary: #111827;
21 | --color-secondary: #1f2937;
22 | --color-text: #f3f4f6;
23 | --color-text-muted: #9ca3af;
24 | --color-border: #374151;
25 | --color-purple: #c084fc;
26 | --color-purple-glow: rgba(192, 132, 252, 0.4);
27 | --banner-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
28 | --timeline-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3);
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "rxjs-marble-visualizer",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint .",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "lucide-react": "^0.344.0",
14 | "react": "^18.3.1",
15 | "react-dom": "^18.3.1",
16 | "rxjs": "^7.8.1",
17 | "framer-motion": "^11.0.8",
18 | "zustand": "^4.5.2"
19 | },
20 | "devDependencies": {
21 | "@eslint/js": "^9.9.1",
22 | "@types/react": "^18.3.5",
23 | "@types/react-dom": "^18.3.0",
24 | "@vitejs/plugin-react": "^4.3.1",
25 | "autoprefixer": "^10.4.18",
26 | "eslint": "^9.9.1",
27 | "eslint-plugin-react-hooks": "^5.1.0-rc.0",
28 | "eslint-plugin-react-refresh": "^0.4.11",
29 | "globals": "^15.9.0",
30 | "postcss": "^8.4.35",
31 | "tailwindcss": "^3.4.1",
32 | "typescript": "^5.5.3",
33 | "typescript-eslint": "^8.3.0",
34 | "vite": "^5.4.2"
35 | }
36 | }
--------------------------------------------------------------------------------
/src/utils/marbleUtils.ts:
--------------------------------------------------------------------------------
1 | import {
2 | generateMapMarble,
3 | generateFilterMarble,
4 | generateMergeMarble,
5 | generateCombineLatestMarble,
6 | generateConcatMarble,
7 | generateScanMarble,
8 | resetMapIndexes,
9 | resetFilterIndexes,
10 | resetMergeIndexes,
11 | resetCombineLatestIndexes,
12 | resetConcatIndexes,
13 | resetScanIndexes
14 | } from './marbleUtils/index';
15 |
16 | // Re-export all marble utilities
17 | export {
18 | generateMapMarble,
19 | generateFilterMarble,
20 | generateMergeMarble,
21 | generateCombineLatestMarble,
22 | generateConcatMarble,
23 | generateScanMarble,
24 | resetMapIndexes,
25 | resetFilterIndexes,
26 | resetMergeIndexes,
27 | resetCombineLatestIndexes,
28 | resetConcatIndexes,
29 | resetScanIndexes
30 | };
31 |
32 | // Combined reset function
33 | export const resetIndexes = () => {
34 | resetMapIndexes();
35 | resetFilterIndexes();
36 | resetMergeIndexes();
37 | resetCombineLatestIndexes();
38 | resetConcatIndexes();
39 | resetScanIndexes();
40 | };
--------------------------------------------------------------------------------
/src/utils/marbleUtils/mergeMarbleUtils.ts:
--------------------------------------------------------------------------------
1 | import { createMarble } from './baseMarbleUtils';
2 | import { letters } from './baseMarbleUtils';
3 |
4 | let numberIndex1 = 20;
5 | let numberIndex2 = 1;
6 | let letterIndex = 0;
7 |
8 | export const resetMergeIndexes = () => {
9 | numberIndex1 = 20;
10 | numberIndex2 = 1;
11 | letterIndex = 0;
12 | };
13 |
14 | export const generateMergeMarble = (streamId: number) => {
15 | switch (streamId) {
16 | case 1: {
17 | const value = numberIndex1;
18 | numberIndex1 += 20;
19 | return createMarble(value, 'rgb(59, 130, 246)'); // blue
20 | }
21 | case 2: {
22 | const value = numberIndex2;
23 | numberIndex2 += 1;
24 | return createMarble(value, 'rgb(239, 68, 68)'); // red
25 | }
26 | case 3: {
27 | const letter = letters[letterIndex % letters.length];
28 | letterIndex++;
29 | return createMarble(letter, 'rgb(168, 85, 247)'); // purple
30 | }
31 | default:
32 | return createMarble('?', 'rgb(156, 163, 175)'); // gray
33 | }
34 | };
--------------------------------------------------------------------------------
/src/utils/marbleUtils/combineLatestMarbleUtils.ts:
--------------------------------------------------------------------------------
1 | import { createMarble } from './baseMarbleUtils';
2 | import { letters, specialChars } from './baseMarbleUtils';
3 |
4 | let letterIndex = 0;
5 | let numberIndex = 1;
6 | let specialCharIndex = 0;
7 |
8 | export const resetCombineLatestIndexes = () => {
9 | letterIndex = 0;
10 | numberIndex = 1;
11 | specialCharIndex = 0;
12 | };
13 |
14 | export const generateCombineLatestMarble = (streamId: number) => {
15 | switch (streamId) {
16 | case 1:
17 | const letter = letters[letterIndex % letters.length];
18 | letterIndex++;
19 | return createMarble(letter, 'rgb(59, 130, 246)'); // blue
20 | case 2:
21 | const number = numberIndex++;
22 | return createMarble(number, 'rgb(239, 68, 68)'); // red
23 | case 3:
24 | const special = specialChars[specialCharIndex % specialChars.length];
25 | specialCharIndex++;
26 | return createMarble(special, 'rgb(168, 85, 247)'); // purple
27 | default:
28 | return createMarble('?', 'rgb(156, 163, 175)'); // gray
29 | }
30 | };
--------------------------------------------------------------------------------
/src/hooks/operators/useFilterStream.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { filter, map } from 'rxjs';
3 | import { useFilterStore } from '../../store/operators/filterStore';
4 |
5 | export const useFilterStream = () => {
6 | const {
7 | stream1$,
8 | addOutputMarble
9 | } = useFilterStore();
10 |
11 | useEffect(() => {
12 | const subscription = stream1$.pipe(
13 | filter(marble => typeof marble.value === 'number' ? marble.value % 2 === 0 : true),
14 | map(marble => ({
15 | ...marble,
16 | id: `${marble.id}-filtered`,
17 | color: 'rgb(34, 197, 94)'
18 | }))
19 | ).subscribe({
20 | next: marble => {
21 | if (marble && marble.value !== undefined && marble.value !== null) {
22 | addOutputMarble({
23 | ...marble,
24 | timestamp: Date.now(),
25 | id: marble.id || Math.random().toString(36).substr(2),
26 | });
27 | }
28 | }
29 | });
30 |
31 | return () => subscription.unsubscribe();
32 | }, [stream1$, addOutputMarble]);
33 | };
--------------------------------------------------------------------------------
/src/hooks/operators/useMapStream.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { map } from 'rxjs';
3 | import { useMapStore } from '../../store/operators/mapStore';
4 |
5 | export const useMapStream = () => {
6 | const {
7 | stream1$,
8 | addOutputMarble
9 | } = useMapStore();
10 |
11 | useEffect(() => {
12 | const subscription = stream1$.pipe(
13 | map(marble => ({
14 | ...marble,
15 | id: `${marble.id}-mapped`,
16 | value: typeof marble.value === 'string'
17 | ? marble.value.toString().toLowerCase()
18 | : marble.value * 10,
19 | color: 'rgb(34, 197, 94)'
20 | }))
21 | ).subscribe({
22 | next: marble => {
23 | if (marble && marble.value !== undefined && marble.value !== null) {
24 | addOutputMarble({
25 | ...marble,
26 | timestamp: Date.now(),
27 | id: marble.id || Math.random().toString(36).substr(2),
28 | });
29 | }
30 | }
31 | });
32 |
33 | return () => subscription.unsubscribe();
34 | }, [stream1$, addOutputMarble]);
35 | };
--------------------------------------------------------------------------------
/src/utils/operators/combineLatestOperator.ts:
--------------------------------------------------------------------------------
1 | import { Observable, combineLatest, map, delay } from 'rxjs';
2 | import type { Marble } from '../../types/marble';
3 | import { getOperatorDelay } from './baseOperator';
4 |
5 | export const combineLatestOperator = (
6 | stream1$: Observable,
7 | stream2$: Observable,
8 | stream3$: Observable,
9 | isStream3Enabled: boolean,
10 | speed: number = 1
11 | ): Observable => {
12 | const streams$ = isStream3Enabled
13 | ? { s1: stream1$, s2: stream2$, s3: stream3$ }
14 | : { s1: stream1$, s2: stream2$ };
15 |
16 | return combineLatest(streams$).pipe(
17 | delay(getOperatorDelay(speed)),
18 | map(combined => ({
19 | id: Object.values(combined).map(m => m.id).join('-'),
20 | value: Object.values(combined).map(m => m.value).join(''),
21 | timestamp: Date.now(),
22 | color: 'rgb(34, 197, 94)',
23 | sourceValues: {
24 | stream1: combined.s1.value,
25 | stream2: combined.s2.value,
26 | stream3: isStream3Enabled ? combined.s3.value : ''
27 | }
28 | }))
29 | );
30 | };
--------------------------------------------------------------------------------
/src/components/ThemeToggle.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import {useThemeStore} from "../store/themeStore";
3 | import {Moon, Sun} from "lucide-react";
4 |
5 |
6 | export const ThemeToggle: React.FC = () => {
7 | const { theme, toggleTheme } = useThemeStore();
8 |
9 | useEffect(() => {
10 | if (theme === "dark") {
11 | document.documentElement.classList.add("dark");
12 | document.documentElement.classList.remove("light");
13 | } else {
14 | document.documentElement.classList.add("light");
15 | document.documentElement.classList.remove("dark");
16 | }
17 | }, [theme]);
18 |
19 |
20 | return (
21 |
32 | )
33 | };
34 |
--------------------------------------------------------------------------------
/src/components/Timeline.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useMarbleStore } from '../store/marbleStore';
3 | import {
4 | MapTimeline,
5 | FilterTimeline,
6 | MergeTimeline,
7 | CombineLatestTimeline,
8 | ConcatTimeline,
9 | ScanTimeline
10 | } from './Timeline/index';
11 | import type { Marble as MarbleType } from '../types/marble';
12 |
13 | interface TimelineProps {
14 | marbles: MarbleType[];
15 | label: string;
16 | streamId?: number;
17 | isOutput?: boolean;
18 | }
19 |
20 | export const Timeline: React.FC = (props) => {
21 | const { currentOperator } = useMarbleStore();
22 |
23 | switch (currentOperator) {
24 | case 'map':
25 | return ;
26 | case 'filter':
27 | return ;
28 | case 'merge':
29 | return ;
30 | case 'combineLatest':
31 | return ;
32 | case 'concat':
33 | return ;
34 | case 'scan':
35 | return ;
36 | default:
37 | return null;
38 | }
39 | };
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2025 Daniel Glejzner
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/components/Timeline/ConcatTimeline.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Marble } from './Marble';
3 | import { TimelineLabel } from './TimelineLabel';
4 | import type { Marble as MarbleType } from '../../types/marble';
5 |
6 | interface TimelineProps {
7 | marbles: MarbleType[];
8 | label: string;
9 | streamId?: number;
10 | isOutput?: boolean;
11 | }
12 |
13 | export const ConcatTimeline: React.FC = ({
14 | marbles = [],
15 | label,
16 | streamId,
17 | isOutput = false
18 | }) => {
19 | // Only show Stream 1, Stream 2, and Output
20 | if (streamId === 3) {
21 | return null;
22 | }
23 |
24 | return (
25 |
26 |
27 |
28 |
29 |
30 | {marbles?.map((marble) => (
31 | marble &&
32 | ))}
33 |
34 |
35 |
25 |
26 |
27 | {isStream3Enabled && (
28 |
29 | )}
30 |
31 |
32 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/src/hooks/operators/useMergeStream.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { merge, map } from 'rxjs';
3 | import { useMergeStore } from '../../store/operators/mergeStore';
4 |
5 | export const useMergeStream = () => {
6 | const {
7 | stream1$,
8 | stream2$,
9 | stream3$,
10 | isStream3Enabled,
11 | addOutputMarble
12 | } = useMergeStore();
13 |
14 | useEffect(() => {
15 | const streams = isStream3Enabled
16 | ? [stream1$, stream2$, stream3$]
17 | : [stream1$, stream2$];
18 |
19 | const subscription = merge(...streams).pipe(
20 | map(marble => ({
21 | ...marble,
22 | id: `${marble.id}-merged`,
23 | color: 'rgb(34, 197, 94)'
24 | }))
25 | ).subscribe({
26 | next: marble => {
27 | if (marble && marble.value !== undefined && marble.value !== null) {
28 | addOutputMarble({
29 | ...marble,
30 | timestamp: Date.now(),
31 | id: marble.id || Math.random().toString(36).substr(2),
32 | });
33 | }
34 | }
35 | });
36 |
37 | return () => subscription.unsubscribe();
38 | }, [stream1$, stream2$, stream3$, isStream3Enabled, addOutputMarble]);
39 | };
--------------------------------------------------------------------------------
/src/utils/operators/scanOperator.ts:
--------------------------------------------------------------------------------
1 | import { Observable, scan, delay } from 'rxjs';
2 | import type { Marble } from '../../types/marble';
3 | import { getOperatorDelay } from './baseOperator';
4 |
5 | export const scanOperator = (
6 | stream1$: Observable,
7 | speed: number = 1
8 | ): Observable => {
9 | let isFirstValue = true;
10 |
11 | return stream1$.pipe(
12 | delay(getOperatorDelay(speed)),
13 | scan((acc, marble) => {
14 | if (isFirstValue) {
15 | isFirstValue = false;
16 | return {
17 | ...marble,
18 | id: `${marble.id}-scanned`,
19 | color: 'rgb(34, 197, 94)'
20 | };
21 | }
22 |
23 | try {
24 | return {
25 | ...marble,
26 | id: `${marble.id}-scanned`,
27 | value: typeof acc.value === 'number' && typeof marble.value === 'number'
28 | ? acc.value + marble.value
29 | : marble.value,
30 | color: 'rgb(34, 197, 94)'
31 | };
32 | } catch (error) {
33 | throw error;
34 | }
35 | }, {
36 | id: '',
37 | value: 0,
38 | timestamp: Date.now(),
39 | color: 'rgb(34, 197, 94)'
40 | })
41 | );
42 | };
--------------------------------------------------------------------------------
/src/components/Timeline/MapTimeline.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Marble } from './Marble';
3 | import { MapTimelineLabel } from './labels';
4 | import type { Marble as MarbleType } from '../../types/marble';
5 |
6 | interface TimelineProps {
7 | marbles: MarbleType[];
8 | label: string;
9 | streamId?: number;
10 | isOutput?: boolean;
11 | }
12 |
13 | export const MapTimeline: React.FC = ({
14 | marbles = [],
15 | label,
16 | streamId,
17 | isOutput = false
18 | }) => {
19 | // Map only shows Stream 1
20 | if (streamId && streamId !== 1 && !isOutput) {
21 | return null;
22 | }
23 |
24 | return (
25 |
26 |
27 |
28 | {/* Horizontal line */}
29 |
30 |
31 | {/* Marbles container */}
32 |
33 | {marbles?.map((marble) => (
34 | marble &&
35 | ))}
36 |
37 |
38 |
26 |
27 |
28 | {/* Horizontal line */}
29 |
30 |
31 | {/* Marbles container */}
32 |
33 | {marbles?.map((marble) => (
34 | marble &&
35 | ))}
36 |
37 |
38 |
22 | {streamId === 1 && (
23 |
30 | )}
31 |
{label}
32 |
26 |
27 |
28 | {/* Horizontal line */}
29 |
30 |
31 | {/* Marbles container */}
32 |
33 | {marbles?.map((marble) => (
34 | marble &&
35 | ))}
36 |
37 |
38 |
22 | {streamId === 1 && (
23 |
30 | )}
31 |
{label}
32 |
22 | {streamId === 1 && (
23 |
30 | )}
31 |
{label}
32 |
35 | {displayValue}
36 |
37 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/src/components/Timeline/MergeTimeline.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Marble } from './Marble';
3 | import { MergeTimelineLabel } from './labels';
4 | import { useMarbleStore } from '../../store/marbleStore';
5 | import type { Marble as MarbleType } from '../../types/marble';
6 |
7 | interface TimelineProps {
8 | marbles: MarbleType[];
9 | label: string;
10 | streamId?: number;
11 | isOutput?: boolean;
12 | }
13 |
14 | export const MergeTimeline: React.FC = ({
15 | marbles = [],
16 | label,
17 | streamId,
18 | isOutput = false
19 | }) => {
20 | const { isStream3Enabled } = useMarbleStore();
21 |
22 | if (streamId === 3 && !isStream3Enabled) {
23 | return null;
24 | }
25 |
26 | return (
27 |
28 |
29 |
30 | {/* Horizontal line */}
31 |
32 |
33 | {/* Marbles container */}
34 |
35 | {marbles?.map((marble) => (
36 | marble &&
37 | ))}
38 |
39 |
40 |
28 |
29 |
30 | {/* Horizontal line */}
31 |
32 |
33 | {/* Marbles container */}
34 |
35 | {marbles?.map((marble) => (
36 | marble &&
37 | ))}
38 |
39 |
40 |
37 |
38 |
39 |
40 | {marbles?.map((marble) => (
41 | marble && (
42 | handleMarbleCrossLine(marble)}
46 | />
47 | )
48 | ))}
49 |
50 |
39 | {streamId && (
40 |
47 | )}
48 |
{label}
49 |
39 | {streamId && (
40 |
47 | )}
48 |
{label}
49 |
53 | {marble.value}
54 |
55 |
56 | );
57 | };
58 |
--------------------------------------------------------------------------------
/src/store/operators/mapStore.ts:
--------------------------------------------------------------------------------
1 | import { create } from 'zustand';
2 | import { BaseOperatorState, createNewSubjects } from './baseOperatorStore';
3 | import { resetMapIndexes } from '../../utils/marbleUtils';
4 |
5 | export const useMapStore = create((set) => ({
6 | stream1Marbles: [],
7 | stream2Marbles: [],
8 | stream3Marbles: [],
9 | outputMarbles: [],
10 | ...createNewSubjects(),
11 | isStream3Enabled: false, // Always false for map
12 | speed: 1,
13 |
14 | addMarble: (streamId, marble) => {
15 | if (streamId !== 1) return; // Only allow Stream 1 marbles
16 |
17 | set((state) => {
18 | const newMarble = {
19 | ...marble,
20 | timestamp: Date.now(),
21 | id: marble.id || Math.random().toString(36).substr(2)
22 | };
23 |
24 | state.stream1$.next(newMarble);
25 | return { stream1Marbles: [...state.stream1Marbles, newMarble] };
26 | });
27 | },
28 |
29 | addOutputMarble: (marble) => set((state) => ({
30 | outputMarbles: [...state.outputMarbles, marble]
31 | })),
32 |
33 | setSpeed: (speed) => set({ speed }),
34 |
35 | clearMarbles: () => {
36 | resetMapIndexes();
37 | set({
38 | stream1Marbles: [],
39 | stream2Marbles: [],
40 | stream3Marbles: [],
41 | outputMarbles: []
42 | });
43 | },
44 |
45 | resetPipeline: () => {
46 | set((state) => {
47 | state.stream1$.complete();
48 | state.stream2$.complete();
49 | state.stream3$.complete();
50 | resetMapIndexes();
51 | return {
52 | ...createNewSubjects(),
53 | stream1Marbles: [],
54 | stream2Marbles: [],
55 | stream3Marbles: [],
56 | outputMarbles: []
57 | };
58 | });
59 | },
60 |
61 | // Remove toggleStream3 since Map only uses Stream 1
62 | toggleStream3: () => set((state) => state) // No-op
63 | }));
--------------------------------------------------------------------------------
/src/store/operators/scanStore.ts:
--------------------------------------------------------------------------------
1 | import { create } from 'zustand';
2 | import { BaseOperatorState, createNewSubjects } from './baseOperatorStore';
3 | import { resetScanIndexes } from '../../utils/marbleUtils';
4 |
5 | export const useScanStore = create((set) => ({
6 | stream1Marbles: [],
7 | stream2Marbles: [],
8 | stream3Marbles: [],
9 | outputMarbles: [],
10 | ...createNewSubjects(),
11 | isStream3Enabled: false, // Always false for scan
12 | speed: 1,
13 |
14 | addMarble: (streamId, marble) => {
15 | if (streamId !== 1) return; // Only allow Stream 1 marbles
16 |
17 | set((state) => {
18 | const newMarble = {
19 | ...marble,
20 | timestamp: Date.now(),
21 | id: marble.id || Math.random().toString(36).substr(2)
22 | };
23 |
24 | state.stream1$.next(newMarble);
25 | return { stream1Marbles: [...state.stream1Marbles, newMarble] };
26 | });
27 | },
28 |
29 | addOutputMarble: (marble) => set((state) => ({
30 | outputMarbles: [...state.outputMarbles, marble]
31 | })),
32 |
33 | setSpeed: (speed) => set({ speed }),
34 |
35 | clearMarbles: () => {
36 | resetScanIndexes();
37 | set({
38 | stream1Marbles: [],
39 | stream2Marbles: [],
40 | stream3Marbles: [],
41 | outputMarbles: []
42 | });
43 | },
44 |
45 | resetPipeline: () => {
46 | set((state) => {
47 | state.stream1$.complete();
48 | state.stream2$.complete();
49 | state.stream3$.complete();
50 | resetScanIndexes();
51 | return {
52 | ...createNewSubjects(),
53 | stream1Marbles: [],
54 | stream2Marbles: [],
55 | stream3Marbles: [],
56 | outputMarbles: []
57 | };
58 | });
59 | },
60 |
61 | // Remove toggleStream3 since Scan only uses Stream 1
62 | toggleStream3: () => set((state) => state) // No-op
63 | }));
--------------------------------------------------------------------------------
/src/store/operators/filterStore.ts:
--------------------------------------------------------------------------------
1 | import { create } from 'zustand';
2 | import { BaseOperatorState, createNewSubjects } from './baseOperatorStore';
3 | import { resetFilterIndexes } from '../../utils/marbleUtils';
4 |
5 | export const useFilterStore = create((set) => ({
6 | stream1Marbles: [],
7 | stream2Marbles: [],
8 | stream3Marbles: [],
9 | outputMarbles: [],
10 | ...createNewSubjects(),
11 | isStream3Enabled: false, // Always false for filter
12 | speed: 1,
13 |
14 | addMarble: (streamId, marble) => {
15 | if (streamId !== 1) return; // Only allow Stream 1 marbles
16 |
17 | set((state) => {
18 | const newMarble = {
19 | ...marble,
20 | timestamp: Date.now(),
21 | id: marble.id || Math.random().toString(36).substr(2)
22 | };
23 |
24 | state.stream1$.next(newMarble);
25 | return { stream1Marbles: [...state.stream1Marbles, newMarble] };
26 | });
27 | },
28 |
29 | addOutputMarble: (marble) => set((state) => ({
30 | outputMarbles: [...state.outputMarbles, marble]
31 | })),
32 |
33 | setSpeed: (speed) => set({ speed }),
34 |
35 | clearMarbles: () => {
36 | resetFilterIndexes();
37 | set({
38 | stream1Marbles: [],
39 | stream2Marbles: [],
40 | stream3Marbles: [],
41 | outputMarbles: []
42 | });
43 | },
44 |
45 | resetPipeline: () => {
46 | set((state) => {
47 | state.stream1$.complete();
48 | state.stream2$.complete();
49 | state.stream3$.complete();
50 | resetFilterIndexes();
51 | return {
52 | ...createNewSubjects(),
53 | stream1Marbles: [],
54 | stream2Marbles: [],
55 | stream3Marbles: [],
56 | outputMarbles: []
57 | };
58 | });
59 | },
60 |
61 | // Remove toggleStream3 since Filter only uses Stream 1
62 | toggleStream3: () => set((state) => state) // No-op
63 | }));
--------------------------------------------------------------------------------
/src/components/Timeline/Marble.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { motion, useAnimation } from 'framer-motion';
3 | import { useMarbleStore } from '../../store/marbleStore';
4 | import type { Marble as MarbleType } from '../../types/marble';
5 |
6 | interface MarbleProps {
7 | marble: MarbleType;
8 | onCrossLine?: () => void;
9 | }
10 |
11 | export const Marble: React.FC = ({ marble, onCrossLine }) => {
12 | const { speed } = useMarbleStore();
13 | const controls = useAnimation();
14 | const displayValue = marble.sourceValues
15 | ? `${marble.sourceValues.stream1}${marble.sourceValues.stream2}${marble.sourceValues.stream3}`
16 | : marble.value;
17 |
18 | useEffect(() => {
19 | let hasCrossedLine = false;
20 | const LINE_POSITION = 0.35; // 35% - matches the line position in App.tsx
21 | const TOTAL_DURATION = 3.2; // Base duration in seconds
22 |
23 | const animate = async () => {
24 | await controls.start({
25 | left: "100%",
26 | transition: {
27 | duration: TOTAL_DURATION / speed,
28 | ease: "linear"
29 | },
30 | onUpdate: (latest) => {
31 | if (!hasCrossedLine && latest >= LINE_POSITION) {
32 | hasCrossedLine = true;
33 | onCrossLine?.();
34 | }
35 | }
36 | });
37 | };
38 |
39 | animate();
40 |
41 | return () => {
42 | controls.stop();
43 | };
44 | }, [controls, speed, onCrossLine]);
45 |
46 | return (
47 |
52 |
56 | {displayValue}
57 |
58 |
59 | );
60 | };
61 |
--------------------------------------------------------------------------------
/src/hooks/operators/useScanStream.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { scan } from 'rxjs';
3 | import { useScanStore } from '../../store/operators/scanStore';
4 |
5 | export const useScanStream = () => {
6 | const {
7 | stream1$,
8 | addOutputMarble
9 | } = useScanStore();
10 |
11 | useEffect(() => {
12 | let isFirstValue = true;
13 |
14 | const subscription = stream1$.pipe(
15 | scan((acc, marble) => {
16 | // For first value, if no seed is provided
17 | // we use the first value as initial state but with green color
18 | if (isFirstValue) {
19 | isFirstValue = false;
20 | return {
21 | ...marble,
22 | id: `${marble.id}-scanned`,
23 | color: 'rgb(34, 197, 94)' // Always green for output
24 | };
25 | }
26 |
27 | // For subsequent values, accumulate using the operator
28 | try {
29 | return {
30 | ...marble,
31 | id: `${marble.id}-scanned`,
32 | value: typeof acc.value === 'number' && typeof marble.value === 'number'
33 | ? acc.value + marble.value
34 | : marble.value,
35 | color: 'rgb(34, 197, 94)' // Always green for output
36 | };
37 | } catch (error) {
38 | // If accumulator throws, the process ends
39 | throw error;
40 | }
41 | })
42 | ).subscribe({
43 | next: marble => {
44 | if (marble && marble.value !== undefined && marble.value !== null) {
45 | addOutputMarble({
46 | ...marble,
47 | timestamp: Date.now(),
48 | id: marble.id || Math.random().toString(36).substr(2),
49 | });
50 | }
51 | },
52 | error: (error) => {
53 | console.error('Scan operator error:', error);
54 | }
55 | });
56 |
57 | return () => subscription.unsubscribe();
58 | }, [stream1$, addOutputMarble]);
59 | };
--------------------------------------------------------------------------------
/src/components/Controls.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { RotateCcw, Plus, Minus } from 'lucide-react';
3 | import { useMarbleStore } from '../store/marbleStore';
4 | import { SpeedControl } from './SpeedControl';
5 | import type { RxJSOperator } from '../types/marble';
6 |
7 | const operators: RxJSOperator[] = ['map', 'filter', 'merge', 'combineLatest', 'scan'];
8 |
9 | const multiStreamOperators = ['merge', 'combineLatest'];
10 |
11 | export const Controls: React.FC = () => {
12 | const {
13 | currentOperator,
14 | setOperator,
15 | resetPipeline,
16 | isStream3Enabled,
17 | toggleStream3
18 | } = useMarbleStore();
19 |
20 | // Only show Stream 3 toggle for operators that support it
21 | const showStream3Toggle = multiStreamOperators.includes(currentOperator);
22 |
23 | return (
24 |
25 |
26 |
27 | {showStream3Toggle && (
28 |
35 | )}
36 |
37 |
44 |
45 |
46 |
47 |
48 |
59 |
60 |
66 | {streamId && (streamId !== 3 || (streamId === 3 && isStream3Enabled)) && (
67 |
74 | )}
75 |
{label}
76 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
RxJS Marble Diagram Visualizer Beta V1.1
30 | Updated Feb 22, 2025
31 |
32 |
*added Subscriber Boundary line to showcase Stream Emission vs. Output Emission
33 |
34 |
38 | 
43 |
44 |
45 |
46 |
47 | {/* Vertical line with text */}
48 |
49 | {/* Purple line */}
50 |
54 |
55 | {/* Vertical text */}
56 |
57 |
61 | SUBSCRIBER BOUNDARY
62 |
63 |
64 |
65 |
66 | {/* Timeline container */}
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |