docs: DOC-1463: Add html diagrams to improve look of docs

[margaretkennedy]

Switch out ugly diagrams for cohesive diagrams using html for animation

[github-actions]

Deploying docs previews for aed382a (available for 14 days)

Python
Groovy

[Copilot]

Pull request overview

Replaces static architecture SVGs with animated, design-system-based HTML diagrams in Python and Groovy documentation.

Changes:

• Embeds four architecture diagrams through iframes.
• Adds animated HTML diagrams and supporting design tokens.
• Removes superseded SVG assets.

Reviewed changes

Copilot reviewed 26 out of 34 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
docs/python/conceptual/deephaven-design.md	Embeds HTML diagrams.
docs/python/assets/conceptual/unified-batch-streaming.svg	Removes legacy SVG.
docs/python/assets/conceptual/table-structure.svg	Removes legacy SVG.
docs/python/assets/conceptual/deephaven-architecture-overview.svg	Removes legacy SVG.
docs/python/assets/conceptual/chunk-architecture.svg	Removes legacy SVG.
docs/python/assets/conceptual/architecture/unified-batch-streaming.html	Adds animated streaming diagram.
docs/python/assets/conceptual/architecture/table-structure.html	Adds animated table diagram.
docs/python/assets/conceptual/architecture/deephaven-architecture-overview.html	Adds animated architecture diagram.
docs/python/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/typography.css	Defines typography tokens.
docs/python/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/spacing.css	Defines spacing tokens.
docs/python/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/fonts.css	Loads diagram fonts.
docs/python/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/effects.css	Defines visual effects.
docs/python/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/colors.css	Defines color tokens.
docs/python/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/styles.css	Aggregates design styles.
docs/python/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/_ds_manifest.json	Describes design-system resources.
docs/groovy/conceptual/deephaven-design.md	Embeds HTML diagrams.
docs/groovy/assets/conceptual/unified-batch-streaming.svg	Removes legacy SVG.
docs/groovy/assets/conceptual/table-structure.svg	Removes legacy SVG.
docs/groovy/assets/conceptual/deephaven-architecture-overview.svg	Removes legacy SVG.
docs/groovy/assets/conceptual/chunk-architecture.svg	Removes legacy SVG.
docs/groovy/assets/conceptual/architecture/unified-batch-streaming.html	Adds animated streaming diagram.
docs/groovy/assets/conceptual/architecture/table-structure.html	Adds animated table diagram.
docs/groovy/assets/conceptual/architecture/deephaven-architecture-overview.html	Adds animated architecture diagram.
docs/groovy/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/typography.css	Defines typography tokens.
docs/groovy/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/spacing.css	Defines spacing tokens.
docs/groovy/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/fonts.css	Loads diagram fonts.
docs/groovy/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/effects.css	Defines visual effects.
docs/groovy/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/colors.css	Defines color tokens.
docs/groovy/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/styles.css	Aggregates design styles.
docs/groovy/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/_ds_manifest.json	Describes design-system resources.

Suppressed comments (6)

docs/python/conceptual/deephaven-design.md:116

• This iframe has no accessible name, so screen-reader users cannot identify the batch-and-streaming diagram. Add a concise title.
  docs/python/conceptual/deephaven-design.md:156
• This iframe has no accessible name, so screen-reader users cannot identify the table-structure diagram. Add a concise title.
  docs/python/conceptual/deephaven-design.md:194
• This iframe has no accessible name, so screen-reader users cannot identify the chunk-architecture diagram. Add a concise title.
  docs/groovy/conceptual/deephaven-design.md:154
• This iframe has no accessible name, so screen-reader users cannot identify the table-structure diagram. Add a concise title.

<iframe src="../assets/conceptual/architecture/table-structure.html" style={{width: '100%', height: '650px', border: 'none'}} />

docs/groovy/conceptual/deephaven-design.md:191

• This iframe has no accessible name, so screen-reader users cannot identify the chunk-architecture diagram. Add a concise title.

<iframe src="../assets/conceptual/architecture/chunk-architecture.html" style={{width: '100%', height: '700px', border: 'none'}} />

docs/groovy/conceptual/deephaven-design.md:116

• This iframe has no accessible name, so screen-reader users cannot identify the batch-and-streaming diagram. Add a concise title.

<iframe src="../assets/conceptual/architecture/unified-batch-streaming.html" style={{width: '100%', height: '480px', border: 'none'}} />

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Pull request overview

Copilot reviewed 26 out of 34 changed files in this pull request and generated no new comments.

Suppressed comments (32)

docs/python/conceptual/deephaven-design.md:116

• This iframe has no accessible name, and the 480px frame is shorter than the comparison plus code-example content, creating a nested scroll area. Add a descriptive title and resize the frame from the child's content height instead of fixing it at 480px.
  docs/python/conceptual/deephaven-design.md:39
• This iframe has no accessible name, and the 580px frame is shorter than the child document (which continues through the language, protocol, and client sections), creating a nested scroll area. Add a descriptive title and resize the frame from the child's content height instead of fixing it at 580px.
  docs/python/conceptual/deephaven-design.md:156
• This iframe has no accessible name, and the 650px frame is shorter than the child document's table, sharing summary, and key-concepts sections, creating a nested scroll area. Add a descriptive title and resize the frame from the child's content height instead of fixing it at 650px.
  docs/python/conceptual/deephaven-design.md:194
• This iframe has no accessible name, and the 700px frame is shorter than the child document's pipeline, pooling, benefits, and example sections, creating a nested scroll area. Add a descriptive title and resize the frame from the child's content height instead of fixing it at 700px.
  docs/groovy/conceptual/deephaven-design.md:39
• This iframe has no accessible name, and the 580px frame is shorter than the child document (which continues through the language, protocol, and client sections), creating a nested scroll area. Add a descriptive title and resize the frame from the child's content height instead of fixing it at 580px.

<iframe src="../assets/conceptual/architecture/deephaven-architecture-overview.html" style={{width: '100%', height: '580px', border: 'none'}} />

docs/groovy/conceptual/deephaven-design.md:116

• This iframe has no accessible name, and the 480px frame is shorter than the comparison plus code-example content, creating a nested scroll area. Add a descriptive title and resize the frame from the child's content height instead of fixing it at 480px.

<iframe src="../assets/conceptual/architecture/unified-batch-streaming.html" style={{width: '100%', height: '480px', border: 'none'}} />

docs/groovy/conceptual/deephaven-design.md:154

• This iframe has no accessible name, and the 650px frame is shorter than the child document's table, sharing summary, and key-concepts sections, creating a nested scroll area. Add a descriptive title and resize the frame from the child's content height instead of fixing it at 650px.

<iframe src="../assets/conceptual/architecture/table-structure.html" style={{width: '100%', height: '650px', border: 'none'}} />

docs/groovy/conceptual/deephaven-design.md:191

• This iframe has no accessible name, and the 700px frame is shorter than the child document's pipeline, pooling, benefits, and example sections, creating a nested scroll area. Add a descriptive title and resize the frame from the child's content height instead of fixing it at 700px.

<iframe src="../assets/conceptual/architecture/chunk-architecture.html" style={{width: '100%', height: '700px', border: 'none'}} />

docs/python/assets/conceptual/architecture/unified-batch-streaming.html:23

• The continuously moving flow dots ignore the user's reduced-motion preference. Add a prefers-reduced-motion override so this decorative animation is disabled for users who request reduced motion.

    @keyframes dh-tick-flow {
      0% { offset-distance: 0%; opacity: 0; }
      15% { opacity: 1; }
      85% { opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }

docs/python/assets/conceptual/architecture/table-structure.html:23

• The continuously moving sharing dots ignore the user's reduced-motion preference. Add a prefers-reduced-motion override so this decorative animation is disabled for users who request reduced motion.

    @keyframes dh-tick-flow {
      0% { offset-distance: 0%; opacity: 0; }
      12% { opacity: 1; }
      88% { opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }

docs/python/assets/conceptual/architecture/deephaven-architecture-overview.html:23

• The continuously moving flow dots ignore the user's reduced-motion preference. Add a prefers-reduced-motion override so this decorative animation is disabled for users who request reduced motion.

    @keyframes dh-tick-flow {
      0% { offset-distance: 0%; opacity: 0; }
      15% { opacity: 1; }
      85% { opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }

docs/groovy/assets/conceptual/architecture/unified-batch-streaming.html:23

• The continuously moving flow dots ignore the user's reduced-motion preference. Add a prefers-reduced-motion override so this decorative animation is disabled for users who request reduced motion.

    @keyframes dh-tick-flow {
      0% { offset-distance: 0%; opacity: 0; }
      15% { opacity: 1; }
      85% { opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }

docs/groovy/assets/conceptual/architecture/table-structure.html:23

• The continuously moving sharing dots ignore the user's reduced-motion preference. Add a prefers-reduced-motion override so this decorative animation is disabled for users who request reduced motion.

    @keyframes dh-tick-flow {
      0% { offset-distance: 0%; opacity: 0; }
      12% { opacity: 1; }
      88% { opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }

docs/groovy/assets/conceptual/architecture/deephaven-architecture-overview.html:23

• The continuously moving flow dots ignore the user's reduced-motion preference. Add a prefers-reduced-motion override so this decorative animation is disabled for users who request reduced motion.

    @keyframes dh-tick-flow {
      0% { offset-distance: 0%; opacity: 0; }
      15% { opacity: 1; }
      85% { opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }

docs/groovy/assets/conceptual/architecture/unified-batch-streaming.html:127

• This Groovy-specific diagram uses the Python API name agg_by, contradicting the surrounding Groovy example, which uses aggBy. Use the Groovy method name here.

          <div style="font-family:var(--dh-font-mono);font-size:11px;color:var(--dh-text-secondary);margin-top:2px;">.where() .agg_by() .join() - works on all data</div>

docs/groovy/assets/conceptual/architecture/table-structure.html:39

• This Groovy-specific diagram uses the Python time_table function even though the surrounding Groovy guide uses timeTable. Use the Groovy function name so the diagram matches the API being documented.

      <div style="position:absolute;top:44px;left:16px;right:16px;height:26px;box-sizing:border-box;padding:5px 10px;background:var(--dh-surface-sunken);border:1px solid var(--dh-border);border-radius:var(--dh-radius-md);font-family:var(--dh-font-mono);font-size:12px;color:var(--dh-text-secondary);">time_table("PT1S")</div>

docs/python/assets/conceptual/architecture/unified-batch-streaming.html:164

• This Python example is syntactically invalid when copied: a statement cannot continue on the next line with .agg_by unless it is enclosed in parentheses. Keep the fluent call on one line (as in the surrounding guide) or wrap the expression.

            <div>live = consume_kafka({"topic": "trades"})</div>
            <div>result = live.where("Price &gt; 100")</div>
            <div>&nbsp;&nbsp;.agg_by([agg.avg("Price")], by=["Symbol"])</div>

docs/groovy/assets/conceptual/architecture/unified-batch-streaming.html:153

• The Groovy diagram labels this as Python and shows Python-only functions and agg_by calls. Replace this block with Groovy syntax consistent with the example in docs/groovy/conceptual/deephaven-design.md:101-111, otherwise Groovy readers are given code that does not exist in their API.

      <div style="font-size:12px;color:var(--dh-text-secondary);margin-bottom:14px;">Python code works identically for batch and real-time data:</div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
        <div>
          <div style="font-size:12px;font-weight:700;color:var(--dh-text-primary);margin-bottom:6px;">Batch (Historical):</div>
          <div style="box-sizing:border-box;padding:12px;background:var(--dh-surface-sunken);border:1px solid var(--dh-primary-700);border-radius:var(--dh-radius-md);font-family:var(--dh-font-mono);font-size:11px;color:var(--dh-text-primary);line-height:var(--dh-leading-relaxed);">

docs/python/assets/conceptual/architecture/chunk-architecture.html:96

• This 12px green text uses --dh-positive-200 (#368e16) on a white card, which is only about 4.2:1 contrast and misses the 4.5:1 requirement for normal text. Use the darker --dh-positive-100 token.

            <div style="font-size:12px;color:var(--dh-positive-200);">Sequential memory access</div>

docs/python/assets/conceptual/architecture/chunk-architecture.html:100

• This 12px green text uses --dh-positive-200 (#368e16) on a white card, which is only about 4.2:1 contrast and misses the 4.5:1 requirement for normal text. Use the darker --dh-positive-100 token.

            <div style="font-size:12px;color:var(--dh-positive-200);">JIT can vectorize (SIMD)</div>

docs/groovy/assets/conceptual/architecture/chunk-architecture.html:96

• This 12px green text uses --dh-positive-200 (#368e16) on a white card, which is only about 4.2:1 contrast and misses the 4.5:1 requirement for normal text. Use the darker --dh-positive-100 token.

            <div style="font-size:12px;color:var(--dh-positive-200);">Sequential memory access</div>

docs/groovy/assets/conceptual/architecture/chunk-architecture.html:100

• This 12px green text uses --dh-positive-200 (#368e16) on a white card, which is only about 4.2:1 contrast and misses the 4.5:1 requirement for normal text. Use the darker --dh-positive-100 token.

            <div style="font-size:12px;color:var(--dh-positive-200);">JIT can vectorize (SIMD)</div>

docs/groovy/assets/conceptual/architecture/table-structure.html:35

• The diagram is hard-coded to 1200px, so any documentation viewport narrower than that gets horizontal scrolling inside the iframe rather than responsive reflow. This is especially problematic at mobile/zoomed widths; make the coordinate-based canvas scale to width: 100% or add a responsive layout for narrow viewports.

  <div style="position:relative;width:1200px;height:320px;">

docs/python/assets/conceptual/architecture/table-structure.html:35

• The diagram is hard-coded to 1200px, so any documentation viewport narrower than that gets horizontal scrolling inside the iframe rather than responsive reflow. This is especially problematic at mobile/zoomed widths; make the coordinate-based canvas scale to width: 100% or add a responsive layout for narrow viewports.

  <div style="position:relative;width:1200px;height:320px;">

docs/python/assets/conceptual/architecture/chunk-architecture.html:25

• The continuously moving pipeline dots ignore the user's reduced-motion preference. Add a prefers-reduced-motion override so this decorative animation is disabled for users who request reduced motion.

    @keyframes dh-tick-flow {
      0% { offset-distance: 0%; opacity: 0; }
      15% { opacity: 1; }
      85% { opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }

docs/groovy/assets/conceptual/architecture/chunk-architecture.html:25

• The continuously moving pipeline dots ignore the user's reduced-motion preference. Add a prefers-reduced-motion override so this decorative animation is disabled for users who request reduced motion.

    @keyframes dh-tick-flow {
      0% { offset-distance: 0%; opacity: 0; }
      15% { opacity: 1; }
      85% { opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }

docs/python/assets/conceptual/architecture/unified-batch-streaming.html:156

• This Python example is syntactically invalid when copied: a statement cannot continue on the next line with .agg_by unless it is enclosed in parentheses. Keep the fluent call on one line (as in the surrounding guide) or wrap the expression.

This issue also appears on line 162 of the same file.

            <div>historical = read_csv("trades_2024.csv")</div>
            <div>result = historical.where("Price &gt; 100")</div>
            <div>&nbsp;&nbsp;.agg_by([agg.avg("Price")], by=["Symbol"])</div>

docs/groovy/assets/conceptual/architecture/table-structure.html:83

• This Groovy-specific diagram uses Python list syntax for view, while the surrounding Groovy example calls source.view("A", "C = B"). Show the Groovy varargs form here.

      <div style="position:absolute;top:44px;left:16px;right:16px;height:26px;box-sizing:border-box;padding:5px 10px;background:var(--dh-surface-sunken);border:1px solid var(--dh-border);border-radius:var(--dh-radius-md);font-family:var(--dh-font-mono);font-size:12px;color:var(--dh-text-secondary);">.view(["A", "C=B"])</div>

docs/python/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/colors.css:135

• --dh-text-muted resolves to #7f8095, which has only about 3.6:1 contrast against the default --dh-surface-page (#f3f7fa). The diagrams use this token for 9–12px text, so that content does not meet the 4.5:1 contrast requirement for normal text; use a darker foreground token such as --dh-fg-700.

  --dh-text-muted: var(--dh-fg-800);

docs/groovy/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/colors.css:135

• --dh-text-muted resolves to #7f8095, which has only about 3.6:1 contrast against the default --dh-surface-page (#f3f7fa). The diagrams use this token for 9–12px text, so that content does not meet the 4.5:1 contrast requirement for normal text; use a darker foreground token such as --dh-fg-700.

  --dh-text-muted: var(--dh-fg-800);

docs/python/assets/conceptual/architecture/chunk-architecture.html:92

• This 12px green text uses --dh-positive-200 (#368e16) on a white card, which is only about 4.2:1 contrast and misses the 4.5:1 requirement for normal text. Use the darker --dh-positive-100 token.

This issue also appears in the following locations of the same file:

• line 96
• line 100

            <div style="font-size:12px;color:var(--dh-positive-200);">One call for 4096 cells</div>

docs/groovy/assets/conceptual/architecture/chunk-architecture.html:92

• This 12px green text uses --dh-positive-200 (#368e16) on a white card, which is only about 4.2:1 contrast and misses the 4.5:1 requirement for normal text. Use the darker --dh-positive-100 token.

This issue also appears in the following locations of the same file:

• line 96
• line 100

            <div style="font-size:12px;color:var(--dh-positive-200);">One call for 4096 cells</div>

[Copilot]

Pull request overview

Copilot reviewed 26 out of 34 changed files in this pull request and generated no new comments.

Suppressed comments (12)

docs/groovy/conceptual/deephaven-design.md:191

• This iframe has no accessible name, so screen-reader users cannot tell what embedded content they are entering. Add a descriptive title attribute.

<iframe src="../assets/conceptual/architecture/chunk-architecture.html" style={{width: '100%', height: '900px', border: 'none'}} />

docs/python/assets/conceptual/architecture/chunk-architecture.html:125

• This depicts a getChunk(offset, size) overload that does not exist and presents 4096 as a fixed chunk size. ChunkSource#getChunk accepts a GetContext and RowSequence, while capacity is configured separately by makeGetContext(int); for example, ChunkedColumnIterator defaults to 2048 and also accepts other sizes. Use the actual call shape and describe a configurable batch size throughout the diagram.

        <div style="margin-top:8px;font-family:var(--dh-font-mono);font-size:11px;color:var(--dh-text-secondary);">getChunk(offset,</div>
        <div style="font-family:var(--dh-font-mono);font-size:11px;color:var(--dh-text-secondary);">&nbsp;&nbsp;size=4096)</div>

docs/groovy/assets/conceptual/architecture/chunk-architecture.html:125

• This depicts a getChunk(offset, size) overload that does not exist and presents 4096 as a fixed chunk size. ChunkSource#getChunk accepts a GetContext and RowSequence, while capacity is configured separately by makeGetContext(int); for example, ChunkedColumnIterator defaults to 2048 and also accepts other sizes. Use the actual call shape and describe a configurable batch size throughout the diagram.

        <div style="margin-top:8px;font-family:var(--dh-font-mono);font-size:11px;color:var(--dh-text-secondary);">getChunk(offset,</div>
        <div style="font-family:var(--dh-font-mono);font-size:11px;color:var(--dh-text-secondary);">&nbsp;&nbsp;size=4096)</div>

docs/groovy/assets/conceptual/architecture/table-structure.html:39

• This is the Python factory name, but this file is embedded in the Groovy guide, whose adjacent example uses timeTable. Showing Python syntax in the Groovy-specific diagram makes the example inconsistent.

      <div style="position:absolute;top:44px;left:16px;right:16px;height:26px;box-sizing:border-box;padding:5px 10px;background:var(--dh-surface-sunken);border:1px solid var(--dh-border);border-radius:var(--dh-radius-md);font-family:var(--dh-font-mono);font-size:12px;color:var(--dh-text-secondary);">time_table("PT1S")</div>

docs/python/conceptual/deephaven-design.md:156

• This iframe has no accessible name, so screen-reader users cannot tell what embedded content they are entering. Add a descriptive title attribute.
  docs/python/conceptual/deephaven-design.md:194
• This iframe has no accessible name, so screen-reader users cannot tell what embedded content they are entering. Add a descriptive title attribute.
  docs/groovy/conceptual/deephaven-design.md:154
• This iframe has no accessible name, so screen-reader users cannot tell what embedded content they are entering. Add a descriptive title attribute.

This issue also appears on line 191 of the same file.

<iframe src="../assets/conceptual/architecture/table-structure.html" style={{width: '100%', height: '900px', border: 'none'}} />

docs/python/assets/conceptual/architecture/table-structure.html:23

• The diagram applies this animation indefinitely but provides neither a pause mechanism nor a prefers-reduced-motion override. This can make the page unusable for motion-sensitive readers; stop the decorative animation after a short run or add controls and disable it when reduced motion is requested.

    @keyframes dh-tick-flow {
      0% { offset-distance: 0%; opacity: 0; }
      12% { opacity: 1; }
      88% { opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }

docs/python/assets/conceptual/architecture/chunk-architecture.html:23

• The diagram's animations run indefinitely without a pause mechanism or a prefers-reduced-motion override. This can make the page unusable for motion-sensitive readers; stop them after a short run or add controls and disable them when reduced motion is requested.

This issue also appears on line 124 of the same file.

    @keyframes dh-tick-flow {
      0% { offset-distance: 0%; opacity: 0; }
      15% { opacity: 1; }
      85% { opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }

docs/groovy/assets/conceptual/architecture/table-structure.html:23

• The diagram applies this animation indefinitely but provides neither a pause mechanism nor a prefers-reduced-motion override. This can make the page unusable for motion-sensitive readers; stop the decorative animation after a short run or add controls and disable it when reduced motion is requested.

This issue also appears on line 39 of the same file.

    @keyframes dh-tick-flow {
      0% { offset-distance: 0%; opacity: 0; }
      12% { opacity: 1; }
      88% { opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }

docs/groovy/assets/conceptual/architecture/chunk-architecture.html:23

• The diagram's animations run indefinitely without a pause mechanism or a prefers-reduced-motion override. This can make the page unusable for motion-sensitive readers; stop them after a short run or add controls and disable them when reduced motion is requested.

This issue also appears on line 124 of the same file.

    @keyframes dh-tick-flow {
      0% { offset-distance: 0%; opacity: 0; }
      15% { opacity: 1; }
      85% { opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }

docs/groovy/assets/conceptual/architecture/table-structure.html:83

• This list argument is Python syntax, but the diagram is embedded in the Groovy guide. Match the adjacent Groovy example and pass the two column expressions as separate arguments.

      <div style="position:absolute;top:44px;left:16px;right:16px;height:26px;box-sizing:border-box;padding:5px 10px;background:var(--dh-surface-sunken);border:1px solid var(--dh-border);border-radius:var(--dh-radius-md);font-family:var(--dh-font-mono);font-size:12px;color:var(--dh-text-secondary);">.view(["A", "C=B"])</div>

[Copilot]

Pull request overview

Copilot reviewed 26 out of 34 changed files in this pull request and generated no new comments.

Suppressed comments (14)

docs/python/assets/conceptual/architecture/table-structure.html:31

• The diagram canvas is fixed at 1280px and only scaled to 960px with zoom. Because the iframe itself is 100% wide, narrower documentation/mobile viewports will get horizontal scrolling or clipped content. Please make the layout responsive rather than relying on a fixed canvas.

<div style="width:1280px;box-sizing:border-box;padding:40px;background:var(--dh-surface-page);font-family:var(--dh-font-sans);color:var(--dh-text-primary);zoom:0.75;">

docs/python/assets/conceptual/architecture/chunk-architecture.html:41

• The diagram canvas is fixed at 1280px and only scaled to 960px with zoom. Because the iframe itself is 100% wide, narrower documentation/mobile viewports will get horizontal scrolling or clipped content. Please make the layout responsive rather than relying on a fixed canvas.

<div style="width:1280px;box-sizing:border-box;padding:40px;background:var(--dh-surface-page);font-family:var(--dh-font-sans);color:var(--dh-text-primary);zoom:0.75;">

docs/groovy/assets/conceptual/architecture/table-structure.html:31

• The diagram canvas is fixed at 1280px and only scaled to 960px with zoom. Because the iframe itself is 100% wide, narrower documentation/mobile viewports will get horizontal scrolling or clipped content. Please make the layout responsive rather than relying on a fixed canvas.

<div style="width:1280px;box-sizing:border-box;padding:40px;background:var(--dh-surface-page);font-family:var(--dh-font-sans);color:var(--dh-text-primary);zoom:0.75;">

docs/groovy/assets/conceptual/architecture/chunk-architecture.html:41

• The diagram canvas is fixed at 1280px and only scaled to 960px with zoom. Because the iframe itself is 100% wide, narrower documentation/mobile viewports will get horizontal scrolling or clipped content. Please make the layout responsive rather than relying on a fixed canvas.

<div style="width:1280px;box-sizing:border-box;padding:40px;background:var(--dh-surface-page);font-family:var(--dh-font-sans);color:var(--dh-text-primary);zoom:0.75;">

docs/python/assets/conceptual/architecture/table-structure.html:6

• This diagram is hidden by support.js before that runtime loads React and ReactDOM from unpkg.com (support.js:1143-1146, 1906-1909). If third-party scripts are blocked or unavailable, the iframe remains blank, unlike the local SVG it replaces. Please self-host the runtime dependencies or leave a visible static fallback.

<script src="./support.js"></script>

docs/python/assets/conceptual/architecture/chunk-architecture.html:6

• This diagram is hidden by support.js before that runtime loads React and ReactDOM from unpkg.com (support.js:1143-1146, 1906-1909). If third-party scripts are blocked or unavailable, the iframe remains blank, unlike the local SVG it replaces. Please self-host the runtime dependencies or leave a visible static fallback.

This issue also appears on line 41 of the same file.

<script src="./support.js"></script>

docs/groovy/assets/conceptual/architecture/table-structure.html:6

• This diagram is hidden by support.js before that runtime loads React and ReactDOM from unpkg.com (support.js:1143-1146, 1906-1909). If third-party scripts are blocked or unavailable, the iframe remains blank, unlike the local SVG it replaces. Please self-host the runtime dependencies or leave a visible static fallback.

<script src="./support.js"></script>

docs/groovy/assets/conceptual/architecture/chunk-architecture.html:6

• This diagram is hidden by support.js before that runtime loads React and ReactDOM from unpkg.com (support.js:1143-1146, 1906-1909). If third-party scripts are blocked or unavailable, the iframe remains blank, unlike the local SVG it replaces. Please self-host the runtime dependencies or leave a visible static fallback.

This issue also appears on line 41 of the same file.

<script src="./support.js"></script>

docs/groovy/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/colors.css:112

• These logo colors are used as 10–12px foreground text throughout the new diagrams, but cyan has only 1.64–1.85:1 contrast and red 3.37–3.80:1 on the configured light surfaces, below the 4.5:1 WCAG AA requirement for normal text. Add accessible foreground variants (or use the semantic text colors) for diagram labels while retaining these tokens for decorative graphics.

  --dh-logo-cyan: #4dccfa;
  --dh-logo-red: #f33666;

docs/python/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/colors.css:112

• These logo colors are used as 10–12px foreground text throughout the new diagrams, but cyan has only 1.64–1.85:1 contrast and red 3.37–3.80:1 on the configured light surfaces, below the 4.5:1 WCAG AA requirement for normal text. Add accessible foreground variants (or use the semantic text colors) for diagram labels while retaining these tokens for decorative graphics.

  --dh-logo-cyan: #4dccfa;
  --dh-logo-red: #f33666;

docs/python/conceptual/deephaven-design.md:156

• This script-heavy diagram is below the initial viewport but loads eagerly. Adding native iframe lazy loading avoids downloading and executing a separate React/runtime bundle until the reader scrolls to it.
  docs/python/conceptual/deephaven-design.md:194
• This script-heavy diagram is well below the initial viewport but loads eagerly. Adding native iframe lazy loading avoids downloading and executing another React/runtime bundle unless the reader reaches this section.
  docs/groovy/conceptual/deephaven-design.md:154
• This script-heavy diagram is below the initial viewport but loads eagerly. Adding native iframe lazy loading avoids downloading and executing a separate React/runtime bundle until the reader scrolls to it.

<iframe src="../assets/conceptual/architecture/table-structure.html" title="Diagram showing table structure with RowSets and ColumnSources" style={{width: '100%', height: '900px', border: 'none'}} />

docs/groovy/conceptual/deephaven-design.md:191

• This script-heavy diagram is well below the initial viewport but loads eagerly. Adding native iframe lazy loading avoids downloading and executing another React/runtime bundle unless the reader reaches this section.

<iframe src="../assets/conceptual/architecture/chunk-architecture.html" title="Diagram showing chunk-oriented architecture for bulk data processing" style={{width: '100%', height: '900px', border: 'none'}} />

[Copilot]

Pull request overview

Copilot reviewed 26 out of 34 changed files in this pull request and generated no new comments.

Suppressed comments (14)

docs/python/assets/conceptual/architecture/chunk-architecture.html:41

• The diagram canvas is fixed at 1280px and only reduced by a fixed zoom: 0.75, so it still needs roughly 960px of horizontal space. The surrounding iframe is width: 100%; narrower documentation panes and mobile viewports will therefore clip or horizontally scroll this content, unlike the responsive SVG being replaced. Please make the canvas/layout scale with the viewport.

<div style="width:1280px;box-sizing:border-box;padding:40px;background:var(--dh-surface-page);font-family:var(--dh-font-sans);color:var(--dh-text-primary);zoom:0.75;">

docs/groovy/assets/conceptual/architecture/table-structure.html:31

• The diagram canvas is fixed at 1280px and only reduced by a fixed zoom: 0.75, so it still needs roughly 960px of horizontal space. The surrounding iframe is width: 100%; narrower documentation panes and mobile viewports will therefore clip or horizontally scroll this content, unlike the responsive SVG being replaced. Please make the canvas/layout scale with the viewport.

<div style="width:1280px;box-sizing:border-box;padding:40px;background:var(--dh-surface-page);font-family:var(--dh-font-sans);color:var(--dh-text-primary);zoom:0.75;">

docs/python/assets/conceptual/architecture/table-structure.html:31

• The diagram canvas is fixed at 1280px and only reduced by a fixed zoom: 0.75, so it still needs roughly 960px of horizontal space. The surrounding iframe is width: 100%; narrower documentation panes and mobile viewports will therefore clip or horizontally scroll this content, unlike the responsive SVG being replaced. Please make the canvas/layout scale with the viewport.

<div style="width:1280px;box-sizing:border-box;padding:40px;background:var(--dh-surface-page);font-family:var(--dh-font-sans);color:var(--dh-text-primary);zoom:0.75;">

docs/python/assets/conceptual/architecture/table-structure.html:6

• This runtime fetches React and ReactDOM from unpkg, and it hides the raw <x-dc> template before those requests complete. If third-party scripts are blocked or unavailable, this new iframe stays entirely blank. Please self-host the runtime dependencies with the documentation assets or provide a static fallback that remains visible when bootstrapping fails.

<script src="./support.js"></script>

docs/groovy/assets/conceptual/architecture/chunk-architecture.html:6

• This runtime fetches React and ReactDOM from unpkg, and it hides the raw <x-dc> template before those requests complete. If third-party scripts are blocked or unavailable, this new iframe stays entirely blank. Please self-host the runtime dependencies with the documentation assets or provide a static fallback that remains visible when bootstrapping fails.

<script src="./support.js"></script>

docs/groovy/assets/conceptual/architecture/chunk-architecture.html:41

• The diagram canvas is fixed at 1280px and only reduced by a fixed zoom: 0.75, so it still needs roughly 960px of horizontal space. The surrounding iframe is width: 100%; narrower documentation panes and mobile viewports will therefore clip or horizontally scroll this content, unlike the responsive SVG being replaced. Please make the canvas/layout scale with the viewport.

<div style="width:1280px;box-sizing:border-box;padding:40px;background:var(--dh-surface-page);font-family:var(--dh-font-sans);color:var(--dh-text-primary);zoom:0.75;">

docs/python/assets/conceptual/architecture/chunk-architecture.html:6

• This runtime fetches React and ReactDOM from unpkg, and it hides the raw <x-dc> template before those requests complete. If third-party scripts are blocked or unavailable, this new iframe stays entirely blank. Please self-host the runtime dependencies with the documentation assets or provide a static fallback that remains visible when bootstrapping fails.

This issue also appears on line 41 of the same file.

<script src="./support.js"></script>

docs/groovy/assets/conceptual/architecture/table-structure.html:6

• This runtime fetches React and ReactDOM from unpkg, and it hides the raw <x-dc> template before those requests complete. If third-party scripts are blocked or unavailable, this new iframe stays entirely blank. Please self-host the runtime dependencies with the documentation assets or provide a static fallback that remains visible when bootstrapping fails.

<script src="./support.js"></script>

docs/python/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/colors.css:135

• --dh-text-muted is used for 9–12px diagram text, but #7f8095 has only about 3.43–3.87:1 contrast against the new light surfaces, below the 4.5:1 requirement for normal text. Use a darker token so labels remain readable; --dh-fg-600 provides at least 5.76:1 against these surfaces.

  --dh-text-muted: var(--dh-fg-800);

docs/groovy/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/colors.css:135

• --dh-text-muted is used for 9–12px diagram text, but #7f8095 has only about 3.43–3.87:1 contrast against the new light surfaces, below the 4.5:1 requirement for normal text. Use a darker token so labels remain readable; --dh-fg-600 provides at least 5.76:1 against these surfaces.

  --dh-text-muted: var(--dh-fg-800);

docs/python/assets/conceptual/architecture/table-structure.html:2

• This iframe document does not declare its language, so assistive technologies may use the wrong pronunciation rules for all diagram text. Add an English language declaration to the root element.

This issue also appears on line 6 of the same file.

<html>

docs/python/assets/conceptual/architecture/chunk-architecture.html:2

• This iframe document does not declare its language, so assistive technologies may use the wrong pronunciation rules for all diagram text. Add an English language declaration to the root element.

<html>

docs/groovy/assets/conceptual/architecture/chunk-architecture.html:2

• This iframe document does not declare its language, so assistive technologies may use the wrong pronunciation rules for all diagram text. Add an English language declaration to the root element.

This issue also appears on line 6 of the same file.

<html>

docs/groovy/assets/conceptual/architecture/table-structure.html:2

• This iframe document does not declare its language, so assistive technologies may use the wrong pronunciation rules for all diagram text. Add an English language declaration to the root element.

<html>

[elijahpetty]

A few comments.

[elijahpetty]

"UI updates" is misaligned, as is the "Peformance: 1M rows..." line

[elijahpetty]

Update Graph cycles in the top box is also misaligned.

[elijahpetty]

"merges into" should be bigger, and the alignment seems slightly off.

Overall these images are kind of hard to read at standard zoom on my screen; since there is extra white space, maybe a larger font would still work?

[elijahpetty]

I think the arrow and "Columns A& B shared with filtered" should be adjusted down slightly.

This still cuts off horizontally.

[elijahpetty]

There's a bunch of white space at the bottom of this one, too.

[elijahpetty]

Cuts off horizontally, but only cuts off white space that can probably be cropped/resized out.