You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@resilientdb.apache.org by ha...@apache.org on 2026/05/28 22:32:15 UTC
(incubator-resilientdb) branch master updated: Update Code for the Architecture Diagram (#257)
This is an automated email from the ASF dual-hosted git repository.
harish876 pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-resilientdb.git
The following commit(s) were added to refs/heads/master by this push:
new da5c217f Update Code for the Architecture Diagram (#257)
da5c217f is described below
commit da5c217f966fd05ccec9c53a36c1f27753543178
Author: Harish <ha...@gmail.com>
AuthorDate: Thu May 28 15:32:11 2026 -0700
Update Code for the Architecture Diagram (#257)
Update Code for the Archietcture Diagram to match the image in the main repository
---
.../beacon/components/DataFlowDiagram.module.css | 235 +++++++--
.../ai-tools/beacon/components/DataFlowDiagram.tsx | 570 +++++++++++++++------
2 files changed, 603 insertions(+), 202 deletions(-)
diff --git a/ecosystem/ai-tools/beacon/components/DataFlowDiagram.module.css b/ecosystem/ai-tools/beacon/components/DataFlowDiagram.module.css
index 804ae938..88f8ed51 100644
--- a/ecosystem/ai-tools/beacon/components/DataFlowDiagram.module.css
+++ b/ecosystem/ai-tools/beacon/components/DataFlowDiagram.module.css
@@ -68,7 +68,7 @@
padding: 2.5rem 2rem 4rem;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75);
background: #0f0f1a;
- min-height: 720px;
+ min-height: 820px;
}
.frameCompact {
@@ -125,16 +125,210 @@
gap: 0.75rem;
}
-.gridExec {
+/* Architecture layout: ecosystem column aligned with main layers */
+.architectureLayout {
display: grid;
- grid-template-columns: minmax(0, 0.2fr) minmax(0, 1fr);
- gap: 0.75rem;
+ grid-template-columns: minmax(190px, 240px) 2.25rem minmax(0, 1fr);
+ grid-template-rows: auto auto auto auto auto auto;
+ column-gap: 0.625rem;
+ row-gap: 0.5rem;
+ align-items: center;
+}
+
+.ecosystemHeader {
+ grid-column: 1;
+ grid-row: 1;
+ font-size: 0.7rem;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ color: rgba(148, 163, 184, 0.85);
+ padding: 0 0.25rem 0.25rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.ecosystemRowClient {
+ grid-column: 1;
+ grid-row: 2;
+ align-self: center;
+}
+
+.arrowRowClient,
+.arrowRowService,
+.arrowRowExec {
+ grid-column: 2;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.arrowRowClient {
+ grid-row: 2;
+}
+
+.mainRowClient {
+ grid-column: 3;
+ grid-row: 2;
+ min-width: 0;
+}
+
+.connectorRpc {
+ grid-column: 3;
+ grid-row: 3;
+ display: flex;
+ justify-content: center;
+}
+
+.ecosystemRowService {
+ grid-column: 1;
+ grid-row: 4;
+ align-self: center;
+}
+
+.arrowRowService {
+ grid-row: 4;
+}
+
+.mainRowService {
+ grid-column: 3;
+ grid-row: 4;
+ min-width: 0;
}
-.gridConsensus {
+.connectorFc {
+ grid-column: 3;
+ grid-row: 5;
+ display: flex;
+ justify-content: center;
+}
+
+.ecosystemRowExec {
+ grid-column: 1;
+ grid-row: 6;
+ align-self: start;
+}
+
+.arrowRowExec {
+ grid-row: 6;
+ align-self: start;
+ padding-top: 1.25rem;
+}
+
+.mainRowExec {
+ grid-column: 3;
+ grid-row: 6;
+ min-width: 0;
+}
+
+.ecosystemGroup {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ padding: 0.625rem 0.5rem;
+ border-radius: 0.625rem;
+ border: 1px solid var(--group-border);
+ background: var(--group-bg);
+ transition: box-shadow 0.3s;
+}
+
+.ecosystemGroupGenAi {
+ --group-accent: #a5b4fc;
+ --group-title: rgba(199, 210, 254, 0.9);
+ --group-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.14) 0%, rgba(30, 27, 75, 0.35) 100%);
+ --group-border: rgba(129, 140, 248, 0.22);
+}
+
+.ecosystemGroupService {
+ --group-accent: #5eead4;
+ --group-title: rgba(153, 246, 228, 0.9);
+ --group-bg: linear-gradient(135deg, rgba(20, 184, 166, 0.12) 0%, rgba(6, 78, 59, 0.3) 100%);
+ --group-border: rgba(45, 212, 191, 0.2);
+}
+
+.ecosystemGroupMonitoring {
+ --group-accent: #60a5fa;
+ --group-title: rgba(191, 219, 254, 0.9);
+ --group-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(23, 37, 84, 0.4) 100%);
+ --group-border: rgba(96, 165, 250, 0.22);
+}
+
+.ecosystemGroupTitle {
+ font-size: 0.6rem;
+ text-transform: uppercase;
+ letter-spacing: 0.14em;
+ color: var(--group-title);
+ padding-bottom: 0.125rem;
+}
+
+.toolList {
+ display: flex;
+ flex-direction: column;
+ gap: 0.3rem;
+}
+
+.toolPill {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.7rem;
+ padding: 0.35rem 0.5rem;
+ border-radius: 0.4rem;
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ background: rgba(8, 12, 24, 0.55);
+ color: rgba(226, 232, 240, 0.95);
+}
+
+.toolIconBadge {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ width: 1.125rem;
+ height: 1.125rem;
+ color: var(--group-accent);
+}
+
+.toolIconSvg {
+ width: 100%;
+ height: 100%;
+}
+
+.toolName {
+ line-height: 1.2;
+ min-width: 0;
+}
+
+.arrowHorizontal {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+}
+
+.consensusGrid {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ margin-bottom: 0.75rem;
+}
+
+.consensusRow {
display: grid;
- grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
- gap: 0.75rem;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 0.5rem;
+}
+
+.consensusAlgo {
+ text-align: center;
+ font-size: 0.8125rem;
+}
+
+.networkSubstrate {
+ padding: 0.5rem 0.75rem;
+ text-align: center;
+ font-size: 0.8125rem;
+ color: rgb(236, 254, 255);
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
}
.flexCol {
@@ -331,29 +525,6 @@
color: rgb(148, 163, 184);
}
-/* Network block */
-.networkBlock {
- min-height: 140px;
- padding: 1rem 0;
- grid-row: span 2;
-}
-
-.networkBlockCompact {
- min-height: 100px;
- padding: 0.5rem 0;
-}
-
-/* RDBC block */
-.rdbcBlock {
- min-height: 72px;
- padding: 1.25rem 0;
-}
-
-.rdbcBlockCompact {
- min-height: 56px;
- padding: 0.75rem 0;
-}
-
/* Spacing */
.mb2 {
margin-bottom: 0.5rem;
@@ -373,12 +544,12 @@
margin-left: auto;
margin-right: auto;
width: 100%;
- max-width: 900px;
+ max-width: 1200px;
font-family: system-ui, -apple-system, sans-serif;
}
.wrapperCompact {
- max-width: 1100px;
+ max-width: 1320px;
}
/* Fit viewport */
diff --git a/ecosystem/ai-tools/beacon/components/DataFlowDiagram.tsx b/ecosystem/ai-tools/beacon/components/DataFlowDiagram.tsx
index ce01b19c..e30076c4 100644
--- a/ecosystem/ai-tools/beacon/components/DataFlowDiagram.tsx
+++ b/ecosystem/ai-tools/beacon/components/DataFlowDiagram.tsx
@@ -25,6 +25,184 @@ import styles from "./DataFlowDiagram.module.css";
const bgSvg = `url('data:image/svg+xml,<svg id="visual" viewBox="0 0 2000 1000" width="2000" height="1000" xmlns="http://www.w3.org/2000/svg"><path d="M0 341L400 241L800 141L1200 301L1600 251L2000 281L2000 0L1600 0L1200 0L800 0L400 0L0 0Z" fill="%230f0f1a"></path><path d="M0 481L400 451L800 311L1200 471L1600 431L2000 461L2000 279L1600 249L1200 299L800 139L400 239L0 339Z" fill="%23161623"></path><path d="M0 581L400 571L800 431L1200 591L1600 551L2000 581L2000 459L1600 429L1200 469L800 309L [...]
+const CONSENSUS_ALGORITHMS = [
+ ["Pbft", "Geo-Pbft", "PoC"],
+ ["HotStuff-1", "RCC", "SpotLess"],
+ ["ByShard", "RingBFT", "FairDAG"],
+ ["Thunderbolt", "Cerberus", "Trust-BFT"],
+ ["Fides", "Cassandra"],
+];
+
+type ToolIconType =
+ | "beacon"
+ | "mcp"
+ | "nexus"
+ | "pencil"
+ | "document"
+ | "terminal"
+ | "target"
+ | "arrowCircle"
+ | "search"
+ | "ansible"
+ | "orbit"
+ | "eye"
+ | "flame"
+ | "chart"
+ | "plus";
+
+type GroupTheme = "genAi" | "service" | "monitoring";
+
+interface EcosystemTool {
+ name: string;
+ icon: ToolIconType;
+}
+
+const GEN_AI_TOOLS: EcosystemTool[] = [
+ { name: "Beacon", icon: "beacon" },
+ { name: "All MCP Servers", icon: "mcp" },
+ { name: "Nexus", icon: "nexus" },
+ { name: "Drawing-lib", icon: "pencil" },
+];
+
+const SERVICE_TOOLS: EcosystemTool[] = [
+ { name: "ResContract", icon: "document" },
+ { name: "KV Service CLI", icon: "terminal" },
+ { name: "UTXO Client Tools", icon: "target" },
+ { name: "GraphQL Gateway Tools", icon: "arrowCircle" },
+];
+
+const MONITORING_TOOLS: EcosystemTool[] = [
+ { name: "ResLens", icon: "search" },
+ { name: "Ansible", icon: "ansible" },
+ { name: "Orbit", icon: "orbit" },
+ { name: "DeepObserve", icon: "eye" },
+ { name: "Prometheus", icon: "flame" },
+ { name: "Grafana", icon: "chart" },
+ { name: "Healthcheck Scripts", icon: "plus" },
+];
+
+const GROUP_THEME_CLASS: Record<GroupTheme, string> = {
+ genAi: styles.ecosystemGroupGenAi,
+ service: styles.ecosystemGroupService,
+ monitoring: styles.ecosystemGroupMonitoring,
+};
+
+const ToolIcon = ({ type }: { type: ToolIconType }) => {
+ const props = { className: styles.toolIconSvg, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round" as const, strokeLinejoin: "round" as const };
+
+ switch (type) {
+ case "beacon":
+ return (
+ <svg {...props}>
+ <rect x="5" y="5" width="14" height="14" rx="2" />
+ <path d="M12 15V9M9 12l3-3 3 3" />
+ </svg>
+ );
+ case "mcp":
+ return (
+ <svg {...props}>
+ <circle cx="6" cy="6" r="2" />
+ <circle cx="18" cy="6" r="2" />
+ <circle cx="12" cy="18" r="2" />
+ <path d="M7.5 7.5l3.5 8M16.5 7.5l-3.5 8M8 6h8" />
+ </svg>
+ );
+ case "nexus":
+ return (
+ <svg {...props}>
+ <circle cx="12" cy="12" r="9" />
+ <ellipse cx="12" cy="12" rx="9" ry="3.5" />
+ <path d="M12 3v18M3 12h18" />
+ </svg>
+ );
+ case "pencil":
+ return (
+ <svg {...props}>
+ <path d="M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4 12.5-12.5z" />
+ </svg>
+ );
+ case "document":
+ return (
+ <svg {...props}>
+ <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+ <path d="M14 2v6h6M9 13h6M9 17h4" />
+ </svg>
+ );
+ case "terminal":
+ return (
+ <svg {...props}>
+ <rect x="3" y="4" width="18" height="16" rx="2" />
+ <path d="M7 9l3 3-3 3M12 15h5" />
+ </svg>
+ );
+ case "target":
+ return (
+ <svg {...props}>
+ <circle cx="12" cy="12" r="8" />
+ <circle cx="12" cy="12" r="4" />
+ <circle cx="12" cy="12" r="1" fill="currentColor" stroke="none" />
+ </svg>
+ );
+ case "arrowCircle":
+ return (
+ <svg {...props}>
+ <circle cx="12" cy="12" r="9" />
+ <path d="M10 12h6M14 10l2 2-2 2" />
+ </svg>
+ );
+ case "search":
+ return (
+ <svg {...props}>
+ <circle cx="11" cy="11" r="7" />
+ <path d="M20 20l-3.5-3.5" />
+ </svg>
+ );
+ case "ansible":
+ return (
+ <svg {...props}>
+ <circle cx="12" cy="12" r="9" />
+ <path d="M8 16l4-10 4 10M9.5 12.5h5" strokeWidth={2} />
+ </svg>
+ );
+ case "orbit":
+ return (
+ <svg {...props}>
+ <circle cx="12" cy="12" r="4" />
+ <ellipse cx="12" cy="12" rx="9" ry="3" />
+ </svg>
+ );
+ case "eye":
+ return (
+ <svg {...props}>
+ <path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z" />
+ <circle cx="12" cy="12" r="2.5" />
+ </svg>
+ );
+ case "flame":
+ return (
+ <svg {...props}>
+ <path d="M12 3c-1 3-4 4-4 8a4 4 0 008 0c0-4-3-5-4-8z" />
+ <path d="M12 11v6" />
+ </svg>
+ );
+ case "chart":
+ return (
+ <svg {...props}>
+ <path d="M6 20V10M12 20V4M18 20v-8" strokeWidth={2.25} />
+ </svg>
+ );
+ case "plus":
+ return (
+ <svg {...props}>
+ <circle cx="12" cy="12" r="9" />
+ <path d="M12 8v8M8 12h8" strokeWidth={2} />
+ </svg>
+ );
+ default:
+ return null;
+ }
+};
+
const ArrowBidirectional = ({ label }: { label?: string }) => (
<div className={styles.arrow}>
<svg width="24" height="48" viewBox="0 0 24 48" fill="none" className={styles.arrowSvg}>
@@ -36,6 +214,56 @@ const ArrowBidirectional = ({ label }: { label?: string }) => (
</div>
);
+const ArrowRight = () => (
+ <div className={styles.arrowHorizontal} aria-hidden>
+ <svg width="40" height="24" viewBox="0 0 40 24" fill="none" className={styles.arrowSvg}>
+ <path d="M4 12h24" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+ <path d="M28 8l8 4-8 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+ </svg>
+ </div>
+);
+
+const ToolPill = ({ tool }: { tool: EcosystemTool }) => (
+ <div className={styles.toolPill}>
+ <span className={styles.toolIconBadge} aria-hidden>
+ <ToolIcon type={tool.icon} />
+ </span>
+ <span className={styles.toolName}>{tool.name}</span>
+ </div>
+);
+
+const EcosystemGroup = ({
+ title,
+ tools,
+ theme,
+ active,
+ className = "",
+}: {
+ title: string;
+ tools: EcosystemTool[];
+ theme: GroupTheme;
+ active?: boolean;
+ className?: string;
+}) => (
+ <div
+ className={[
+ styles.ecosystemGroup,
+ GROUP_THEME_CLASS[theme],
+ className,
+ active ? styles.sectionActive : "",
+ ]
+ .filter(Boolean)
+ .join(" ")}
+ >
+ <div className={styles.ecosystemGroupTitle}>{title}</div>
+ <div className={styles.toolList}>
+ {tools.map((tool) => (
+ <ToolPill key={tool.name} tool={tool} />
+ ))}
+ </div>
+ </div>
+);
+
export interface DataFlowDiagramProps {
interval?: number;
sectionCount?: number;
@@ -79,189 +307,191 @@ const DataFlowDiagram = ({
className={frameClass}
style={{ backgroundImage: bgSvg, backgroundSize: "cover", backgroundPosition: "center" }}
>
- <motion.div
- initial={{ y: -10, opacity: 0 }}
- animate={{ y: 0, opacity: 1 }}
- transition={{ type: "spring", stiffness: 90, damping: 18 }}
- className={sectionClass(0)}
- >
- <div className={styles.sectionHeader}>
- <span>Client Interfaces</span>
+ <div className={styles.architectureLayout}>
+ <div className={styles.ecosystemHeader}>Ecosystem Tools</div>
+
+ <EcosystemGroup
+ title="Gen AI Tools"
+ tools={GEN_AI_TOOLS}
+ theme="genAi"
+ active={isActive(0)}
+ className={styles.ecosystemRowClient}
+ />
+ <div className={styles.arrowRowClient}>
+ <ArrowRight />
</div>
- <div className={styles.grid3}>
- <motion.div whileHover={{ scale: 1.01 }} className={`${styles.cardBase} ${styles.cardSky} ${styles.flexCenter}`} style={{ padding: "0.75rem 1rem" }}>
- <div className={`${styles.textSky} ${styles.mb2}`} style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.16em" }}>SDKs</div>
- <div className={styles.textSkyLight} style={{ fontSize: "0.875rem" }}>C++ · Python · Go</div>
- </motion.div>
- <motion.div whileHover={{ scale: 1.01 }} className={`${styles.cardBase} ${styles.cardIndigo} ${styles.flexCenter}`} style={{ padding: "0.75rem 1rem" }}>
- <div className={`${styles.textIndigo} ${styles.mb2}`} style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.16em" }}>RESTful APIs</div>
- <div className={styles.textIndigoLight} style={{ fontSize: "0.875rem" }}>HTTP · JSON</div>
- </motion.div>
- <motion.div whileHover={{ scale: 1.01 }} className={`${styles.cardBase} ${styles.cardEmerald} ${styles.flexCenter}`} style={{ padding: "0.75rem 1rem" }}>
- <div className={`${styles.textEmerald} ${styles.mb2}`} style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.16em" }}>GraphQL</div>
- <div className={styles.textEmeraldLight} style={{ fontSize: "0.875rem" }}>Queries · Mutations</div>
- </motion.div>
+ <motion.div
+ initial={{ y: -10, opacity: 0 }}
+ animate={{ y: 0, opacity: 1 }}
+ transition={{ type: "spring", stiffness: 90, damping: 18 }}
+ className={`${sectionClass(0)} ${styles.mainRowClient}`}
+ >
+ <div className={styles.sectionHeader}>
+ <span>Client Interfaces</span>
+ </div>
+ <div className={styles.grid3}>
+ <motion.div whileHover={{ scale: 1.01 }} className={`${styles.cardBase} ${styles.cardSky} ${styles.flexCenter}`} style={{ padding: "0.75rem 1rem" }}>
+ <div className={`${styles.textSky} ${styles.mb2}`} style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.16em" }}>SDKs</div>
+ <div className={styles.textSkyLight} style={{ fontSize: "0.875rem" }}>C++ · Python · Go</div>
+ </motion.div>
+ <motion.div whileHover={{ scale: 1.01 }} className={`${styles.cardBase} ${styles.cardIndigo} ${styles.flexCenter}`} style={{ padding: "0.75rem 1rem" }}>
+ <div className={`${styles.textIndigo} ${styles.mb2}`} style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.16em" }}>RESTful APIs</div>
+ <div className={styles.textIndigoLight} style={{ fontSize: "0.875rem" }}>HTTP · JSON</div>
+ </motion.div>
+ <motion.div whileHover={{ scale: 1.01 }} className={`${styles.cardBase} ${styles.cardEmerald} ${styles.flexCenter}`} style={{ padding: "0.75rem 1rem" }}>
+ <div className={`${styles.textEmerald} ${styles.mb2}`} style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.16em" }}>GraphQL</div>
+ <div className={styles.textEmeraldLight} style={{ fontSize: "0.875rem" }}>Queries · Mutations</div>
+ </motion.div>
+ </div>
+ </motion.div>
+
+ <div className={styles.connectorRpc}>
+ <ArrowBidirectional label="RPC" />
</div>
- </motion.div>
-
- <ArrowBidirectional label="RPC" />
-
- <motion.div
- initial={{ y: -16, opacity: 0 }}
- animate={{ y: 0, opacity: 1 }}
- transition={{ delay: 0.05, type: "spring", stiffness: 90, damping: 18 }}
- className={sectionClass(1)}
- >
- <div className={styles.sectionHeader}>
- <span>Service Layer</span>
+
+ <EcosystemGroup
+ title="Service-Specific Tools"
+ tools={SERVICE_TOOLS}
+ theme="service"
+ active={isActive(1)}
+ className={styles.ecosystemRowService}
+ />
+ <div className={styles.arrowRowService}>
+ <ArrowRight />
</div>
- <div className={styles.flexCol}>
- <div className={styles.grid3} style={{ marginBottom: 0 }}>
- <motion.div whileHover={{ scale: 1.01 }} className={`${styles.cardBase} ${styles.cardTeal} ${styles.flexCenter}`} style={{ padding: "0.75rem 1rem" }}>
- <div className={`${styles.textTeal} ${styles.mb2}`} style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.16em" }}>Key-Value</div>
- <div className={styles.textTealLight} style={{ fontSize: "0.875rem" }}>KV Store</div>
- </motion.div>
- <motion.div whileHover={{ scale: 1.01 }} className={`${styles.cardBase} ${styles.cardIndigo} ${styles.flexCenter}`} style={{ padding: "0.75rem 1rem" }}>
- <div className={`${styles.textIndigo} ${styles.mb2}`} style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.16em" }}>Smart Contract</div>
- <div className={styles.textIndigoLight} style={{ fontSize: "0.875rem" }}>EVM · Solidity</div>
- </motion.div>
- <motion.div whileHover={{ scale: 1.01 }} className={`${styles.cardBase} ${styles.cardEmerald} ${styles.flexCenter}`} style={{ padding: "0.75rem 1rem" }}>
- <div className={`${styles.textEmerald} ${styles.mb2}`} style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.16em" }}>UTXO</div>
- <div className={styles.textEmeraldLight} style={{ fontSize: "0.875rem" }}>Unspent Outputs</div>
- </motion.div>
- </div>
- <ArrowBidirectional />
- <div className={`${styles.cardBase} ${styles.cardCyan}`} style={{ padding: "0.75rem 1.25rem", fontSize: "0.875rem", textAlign: "center", color: "rgb(103, 232, 249)", borderRadius: "0.75rem" }}>
- RDBC API
- </div>
+ <motion.div
+ initial={{ y: -16, opacity: 0 }}
+ animate={{ y: 0, opacity: 1 }}
+ transition={{ delay: 0.05, type: "spring", stiffness: 90, damping: 18 }}
+ className={`${sectionClass(1)} ${styles.mainRowService}`}
+ >
+ <div className={styles.sectionHeader}>
+ <span>Service Layer</span>
+ </div>
+ <div className={styles.grid3}>
+ <motion.div whileHover={{ scale: 1.01 }} className={`${styles.cardBase} ${styles.cardSky} ${styles.flexCenter}`} style={{ padding: "0.75rem 1rem" }}>
+ <div className={`${styles.textSky} ${styles.mb2}`} style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.16em" }}>Key-Value</div>
+ <div className={styles.textSkyLight} style={{ fontSize: "0.875rem" }}>KV Store</div>
+ </motion.div>
+ <motion.div whileHover={{ scale: 1.01 }} className={`${styles.cardBase} ${styles.cardIndigo} ${styles.flexCenter}`} style={{ padding: "0.75rem 1rem" }}>
+ <div className={`${styles.textIndigo} ${styles.mb2}`} style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.16em" }}>Smart Contract</div>
+ <div className={styles.textIndigoLight} style={{ fontSize: "0.875rem" }}>EVM · Solidity</div>
+ </motion.div>
+ <motion.div whileHover={{ scale: 1.01 }} className={`${styles.cardBase} ${styles.cardEmerald} ${styles.flexCenter}`} style={{ padding: "0.75rem 1rem" }}>
+ <div className={`${styles.textEmerald} ${styles.mb2}`} style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.16em" }}>UTXO</div>
+ <div className={styles.textEmeraldLight} style={{ fontSize: "0.875rem" }}>Unspent Outputs</div>
+ </motion.div>
+ </div>
+ </motion.div>
+
+ <div className={styles.connectorFc}>
+ <ArrowBidirectional label="Function Calling" />
</div>
- </motion.div>
-
- <ArrowBidirectional label="TCP" />
-
- <motion.div
- initial={{ scale: 0.96, opacity: 0 }}
- animate={{ scale: 1, opacity: 1 }}
- transition={{ delay: 0.1, type: "spring", stiffness: 85, damping: 18 }}
- className={styles.section}
- >
- <div className={styles.sectionHeader}>
- <span>Execution Layer</span>
+
+ <EcosystemGroup
+ title="Monitoring Tools"
+ tools={MONITORING_TOOLS}
+ theme="monitoring"
+ active={isActive(2) || isActive(4) || isActive(5)}
+ className={styles.ecosystemRowExec}
+ />
+ <div className={styles.arrowRowExec}>
+ <ArrowRight />
</div>
+ <motion.div
+ initial={{ scale: 0.96, opacity: 0 }}
+ animate={{ scale: 1, opacity: 1 }}
+ transition={{ delay: 0.1, type: "spring", stiffness: 85, damping: 18 }}
+ className={`${styles.section} ${styles.mainRowExec} ${isActive(2) || isActive(4) || isActive(5) ? styles.sectionActive : ""}`}
+ >
+ <div className={styles.sectionHeader}>
+ <span>Execution Layer</span>
+ </div>
- <div className={styles.gridExec}>
- <motion.div
- whileHover={{ scale: 1.01 }}
- className={`${styles.cardBase} ${styles.cardSlate} ${styles.flexCenter} ${compact ? styles.networkBlockCompact : styles.networkBlock} ${isActive(3) ? styles.sectionActive : ""}`}
- >
- <svg className={styles.iconSlate} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
- <circle cx="12" cy="12" r="2.5" />
- <circle cx="5" cy="5" r="1.5" />
- <circle cx="19" cy="5" r="1.5" />
- <circle cx="5" cy="19" r="1.5" />
- <circle cx="19" cy="19" r="1.5" />
- <line x1="12" y1="9.5" x2="7" y2="6.5" />
- <line x1="12" y1="9.5" x2="17" y2="6.5" />
- <line x1="12" y1="14.5" x2="7" y2="17.5" />
- <line x1="12" y1="14.5" x2="17" y2="17.5" />
- <line x1="9.5" y1="12" x2="6.5" y2="7" />
- <line x1="9.5" y1="12" x2="6.5" y2="17" />
- <line x1="14.5" y1="12" x2="17.5" y2="7" />
- <line x1="14.5" y1="12" x2="17.5" y2="17" />
- </svg>
- <div className={styles.flexColGap} style={{ gap: "0.125rem" }}>
- <span>Network</span>
- <span>Substrate</span>
- </div>
- </motion.div>
-
- <div style={{ display: "grid", gap: "0.75rem" }}>
- <motion.div
- whileHover={{ scale: 1.01 }}
- className={`${styles.cardBase} ${styles.cardCyan} ${styles.flexCenter} ${compact ? styles.rdbcBlockCompact : styles.rdbcBlock} ${isActive(2) ? styles.sectionActive : ""}`}
- >
- RDBC Driver
- </motion.div>
- <div className={styles.gridConsensus}>
- <motion.div whileHover={{ scale: 1.01 }} className={`${styles.cardBase} ${styles.cardTealLight} ${isActive(3) ? styles.sectionActive : ""}`} style={{ padding: "1rem" }}>
- <div className={`${styles.textTeal} ${styles.mb2}`} style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.16em" }}>Consensus & Ordering</div>
- <div className={styles.grid3} style={{ gap: "0.5rem", fontSize: "0.875rem" }}>
- <div className={`${styles.smallCard} ${styles.cardSlateDark} ${styles.textSlate}`}>Pbft</div>
- <div className={`${styles.smallCard} ${styles.cardSlateDark} ${styles.textSlate}`}>Geo-Pbft</div>
- <div className={`${styles.smallCard} ${styles.cardSlateDark} ${styles.textSlate}`}>PoC</div>
- </div>
- </motion.div>
<motion.div
- whileHover={{ scale: 1.01 }}
- className={`${styles.cardBase} ${styles.cardRose} ${styles.flexCenter} ${isActive(3) ? styles.sectionActive : ""}`}
- style={{ fontSize: "0.875rem" }}
+ whileHover={{ scale: 1.005 }}
+ className={`${styles.cardBase} ${styles.cardTealLight} ${isActive(2) ? styles.sectionActive : ""}`}
+ style={{ padding: "1rem", marginBottom: "1rem" }}
>
- <span>Settlement Notary</span>
- <span className={styles.textRoseMuted}>Finality & Receipts</span>
+ <div className={`${styles.textTeal} ${styles.mb2}`} style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.16em" }}>
+ Consensus & Ordering
+ </div>
+ <div className={styles.consensusGrid}>
+ {CONSENSUS_ALGORITHMS.map((row, rowIdx) => (
+ <div key={rowIdx} className={styles.consensusRow}>
+ {row.map((algo) => (
+ <div key={algo} className={`${styles.smallCard} ${styles.cardSlateDark} ${styles.textSlate} ${styles.consensusAlgo}`}>
+ {algo}
+ </div>
+ ))}
+ </div>
+ ))}
+ </div>
+ <div className={`${styles.smallCard} ${styles.cardCyanBold} ${styles.networkSubstrate}`}>
+ Network Substrate — TCP Messaging
+ </div>
</motion.div>
- </div>
- </div>
- </div>
- <div className={styles.gap5} style={{ marginTop: "1.25rem", display: "grid" }}>
- <motion.div whileHover={{ scale: 1.01 }} className={`${styles.cardBase} ${styles.cardEmeraldLight} ${isActive(4) ? styles.sectionActive : ""}`} style={{ padding: "1rem" }}>
- <div className={styles.sectionHeader} style={{ color: "rgba(167, 243, 208, 0.9)" }}>
- <span>Transaction Execution</span>
- </div>
- <div className={styles.grid3} style={{ fontSize: "0.875rem" }}>
- <div className={`${styles.executorCard} ${styles.executorCardTeal}`}>
- <svg className={`${styles.iconSm} ${styles.iconTeal}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
- </svg>
- <span style={{ fontWeight: 500 }}>Key-Value Executor</span>
- </div>
- <div className={`${styles.executorCard} ${styles.executorCardIndigo}`}>
- <svg className={`${styles.iconSm} ${styles.iconIndigo}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
- </svg>
- <span style={{ fontWeight: 500 }}>Smart Contract Executor</span>
- </div>
- <div className={`${styles.executorCard} ${styles.executorCardEmerald}`}>
- <svg className={`${styles.iconSm} ${styles.iconEmerald}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
- </svg>
- <span style={{ fontWeight: 500 }}>UTXO Executor</span>
- </div>
- </div>
- </motion.div>
-
- <motion.div whileHover={{ scale: 1.01 }} className={`${styles.cardBase} ${styles.cardSky} ${isActive(5) ? styles.sectionActive : ""}`} style={{ padding: "1rem" }}>
- <div className={styles.sectionHeader} style={{ marginBottom: "0.5rem", color: "rgba(186, 230, 253, 0.9)" }}>
- <span>Blockchain State & Storage</span>
- </div>
- <div style={{ display: "grid", gap: "0.75rem" }}>
- <div className={`${styles.smallCard} ${styles.cardCyanBold}`} style={{ padding: "0.5rem 0.75rem", textAlign: "center", fontSize: "0.875rem", color: "rgb(236, 254, 255)" }}>
- High-Throughput In-Memory Chain State
- </div>
- <div className={styles.grid2} style={{ fontSize: "0.875rem" }}>
- <div className={`${styles.smallCard} ${styles.cardSlateDarker}`} style={{ padding: "0.625rem 0.75rem", display: "flex", alignItems: "center", gap: "0.5rem", color: "rgb(240, 249, 255)" }}>
- <svg className={`${styles.iconSm} ${styles.iconCyan}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
- </svg>
- <div>
- <div style={{ fontWeight: 500 }}>Embeddable KV Store</div>
- <div style={{ fontSize: "10px", color: "rgba(186, 230, 253, 0.8)" }}>LevelDB</div>
+ <div className={styles.gap5} style={{ display: "grid" }}>
+ <motion.div whileHover={{ scale: 1.01 }} className={`${styles.cardBase} ${styles.cardEmeraldLight} ${isActive(4) ? styles.sectionActive : ""}`} style={{ padding: "1rem" }}>
+ <div className={styles.sectionHeader} style={{ color: "rgba(167, 243, 208, 0.9)" }}>
+ <span>Transaction Execution</span>
</div>
- </div>
- <div className={`${styles.smallCard} ${styles.cardSlateDarker}`} style={{ padding: "0.625rem 0.75rem", display: "flex", alignItems: "center", gap: "0.5rem", color: "rgb(240, 249, 255)" }}>
- <svg className={`${styles.iconSm} ${styles.iconCyan}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
- </svg>
- <div>
- <div style={{ fontWeight: 500 }}>Memory DB</div>
- <div style={{ fontSize: "10px", color: "rgba(186, 230, 253, 0.8)" }}>In-Memory Store</div>
+ <div className={styles.grid3} style={{ fontSize: "0.875rem" }}>
+ <div className={`${styles.executorCard} ${styles.executorCardTeal}`}>
+ <svg className={`${styles.iconSm} ${styles.iconTeal}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+ </svg>
+ <span style={{ fontWeight: 500 }}>Key-Value Executor</span>
+ </div>
+ <div className={`${styles.executorCard} ${styles.executorCardIndigo}`}>
+ <svg className={`${styles.iconSm} ${styles.iconIndigo}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+ </svg>
+ <span style={{ fontWeight: 500 }}>Smart Contract Executor</span>
+ </div>
+ <div className={`${styles.executorCard} ${styles.executorCardEmerald}`}>
+ <svg className={`${styles.iconSm} ${styles.iconEmerald}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+ </svg>
+ <span style={{ fontWeight: 500 }}>UTXO Executor</span>
+ </div>
</div>
- </div>
+ </motion.div>
+
+ <motion.div whileHover={{ scale: 1.01 }} className={`${styles.cardBase} ${styles.cardSky} ${isActive(5) ? styles.sectionActive : ""}`} style={{ padding: "1rem" }}>
+ <div className={styles.sectionHeader} style={{ marginBottom: "0.5rem", color: "rgba(186, 230, 253, 0.9)" }}>
+ <span>Blockchain State & Storage</span>
+ </div>
+ <div style={{ display: "grid", gap: "0.75rem" }}>
+ <div className={`${styles.smallCard} ${styles.cardCyanBold}`} style={{ padding: "0.5rem 0.75rem", textAlign: "center", fontSize: "0.875rem", color: "rgb(236, 254, 255)" }}>
+ High-Throughput In-Memory Chain State
+ </div>
+ <div className={styles.grid2} style={{ fontSize: "0.875rem" }}>
+ <div className={`${styles.smallCard} ${styles.cardSlateDarker}`} style={{ padding: "0.625rem 0.75rem", display: "flex", alignItems: "center", gap: "0.5rem", color: "rgb(240, 249, 255)" }}>
+ <svg className={`${styles.iconSm} ${styles.iconCyan}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+ </svg>
+ <div>
+ <div style={{ fontWeight: 500 }}>Embeddable KV Store</div>
+ <div style={{ fontSize: "10px", color: "rgba(186, 230, 253, 0.8)" }}>LevelDB</div>
+ </div>
+ </div>
+ <div className={`${styles.smallCard} ${styles.cardSlateDarker}`} style={{ padding: "0.625rem 0.75rem", display: "flex", alignItems: "center", gap: "0.5rem", color: "rgb(240, 249, 255)" }}>
+ <svg className={`${styles.iconSm} ${styles.iconCyan}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+ </svg>
+ <div>
+ <div style={{ fontWeight: 500 }}>Memory DB</div>
+ <div style={{ fontSize: "10px", color: "rgba(186, 230, 253, 0.8)" }}>In-Memory Store</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </motion.div>
</div>
- </div>
- </motion.div>
- </div>
- </motion.div>
+ </motion.div>
+ </div>
</motion.div>
);