mirror of
https://github.com/qdrant/landing_page.git
synced 2026-09-25 14:08:30 +02:00
78beef7e01
* feat(viz): switch a chart between views Adds `views` to a chart spec: a segmented control above the chart that switches which measure it draws. Modelled on the charts in the author's own blog, which use the same control for the same job. Every view is rendered into the same committed SVG, one <g> each, and all but the first are inline-hidden. Switching shows one and hides the rest, so nothing re-renders and nothing is fetched on click. With JavaScript off a reader still gets a complete chart rather than dead buttons. A view is a patch over the base spec, so it can change the column plotted, the axis, the title and the y-max. Applies it to oversampling/recall, whose CSV already carried ndcg_at_10 while the chart only drew recall_at_10 -- the second measure was in the table but invisible in the picture. The default view is byte-identical to the chart published today, so the page looks the same until a reader picks the other tab. The Markdown output is unchanged and carries every view's columns, since it prints the whole CSV. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(viz): the caption has to follow the view Caught this in a screenshot: the oversampling caption cites recall going 0.605 to 0.988, and it stayed put when the reader switched to the nDCG view, where every bar sits between 0.2786 and 0.3238. A caption is a claim about the numbers on screen, so leaving it fixed makes the figure lie. Each view after the first takes caption2=, caption3= and so on, alongside the existing caption= at the call site, where the rest of the prose lives. The build fails if a view has no caption rather than letting it inherit one. The figcaption is also the figure's accessible name, so it changes for screen readers too. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * style(viz): white label on the active toggle, and fewer comments The active segment took its colour from --qi-surface, which flips to near-black in dark mode, so the label sat dark-on-red. Neither surface clears AA on the accent anyway (4.30 light, 3.73 dark); white gives 4.77. Adds --qi-accent-ink for text sitting on the accent. Also cuts the comments this branch added from 21 lines to 9. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(viz): Markdown output carries every view's claim The table is the whole CSV, so for a chart with views it holds every view's columns at once. The title and caption were still view 0's, so the .md read "Recall@10 by quantization" over a table that also carried nDCG. Now emits one caption per view, labelled, and the oversampling title no longer names a single measure. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * Trigger CI * refactor(viz): call the view picker a toggle, not a switch `.qi-switch` in islands.scss is already a binary on/off control with a track and a knob. The chart's control picks one of N views, so it was borrowing a name that meant something else. viz-switch -> viz-toggle, data-viz-view-btn -> data-viz-toggle-btn, wireSwitch -> wireToggle. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * refactor(viz): resolve a chart's arguments in one place chart.html and chart.markdown.md both derived the id, the caption, the spec and the per-view captions, from eleven identical lines. The rules had already drifted: the HTML output refused a view missing its caption2=, while the Markdown output printed an empty claim for it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(viz): refuse a per-chart width rather than stretch the chart Charts deliberately share one width: the SVG scales to the column, so a wider viewBox renders identical font sizes smaller. The manifest spread a spec over that default, so a spec setting "width" drew at its own size inside the 980-wide viewBox the shortcode builds, and came out stretched. No chart sets one today; this makes the next one a build error. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * test(viz): check each chart's CSV against the table in its post The same numbers live twice, in the CSV a chart is drawn from and in the markdown table above it. Nothing compared them, so correcting one and not the other publishes a chart that disagrees with its own table. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com> Co-authored-by: Abdon Pijpelink <abdon.pijpelink@qdrant.com>
22 lines
10 KiB
XML
22 lines
10 KiB
XML
<g data-viz-view="0"><g transform="translate(0,0)"><text x="490" y="20" text-anchor="middle" font-family="'Geist Mono', ui-monospace, monospace" font-size="15" font-weight="700" fill="var(--qi-fg)">Recall@10</text><text x="490" y="38" text-anchor="middle" font-family="'Geist Mono', ui-monospace, monospace" font-size="13" fill="var(--qi-muted)">higher is better</text><text transform="translate(13,197) rotate(-90)" text-anchor="middle" font-family="'Geist Mono', ui-monospace, monospace" font-size="12" fill="var(--qi-muted)">recall@10</text><g fill="currentColor" style="color:var(--qi-muted)" font-family="'Geist Mono', ui-monospace, monospace" font-size="13" text-anchor="middle"><style>:where(.plot-d6a7b5) {
|
|
--plot-background: white;
|
|
display: block;
|
|
height: auto;
|
|
height: intrinsic;
|
|
max-width: 100%;
|
|
}
|
|
:where(.plot-d6a7b5 text),
|
|
:where(.plot-d6a7b5 tspan) {
|
|
white-space: pre;
|
|
}</style><g aria-label="y-grid" aria-hidden="true" stroke="currentColor" stroke-opacity="0.1"><line x1="74" x2="944" y1="332" y2="332"></line><line x1="74" x2="944" y1="282.9090909090909" y2="282.9090909090909"></line><line x1="74" x2="944" y1="233.8181818181818" y2="233.8181818181818"></line><line x1="74" x2="944" y1="184.72727272727275" y2="184.72727272727275"></line><line x1="74" x2="944" y1="135.63636363636363" y2="135.63636363636363"></line><line x1="74" x2="944" y1="86.54545454545455" y2="86.54545454545455"></line></g><g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-9,0)"><text y="0.32em" transform="translate(74,332)">0.0</text><text y="0.32em" transform="translate(74,282.9090909090909)">0.2</text><text y="0.32em" transform="translate(74,233.8181818181818)">0.4</text><text y="0.32em" transform="translate(74,184.72727272727275)">0.6</text><text y="0.32em" transform="translate(74,135.63636363636363)">0.8</text><text y="0.32em" transform="translate(74,86.54545454545455)">1.0</text></g><g aria-label="x-axis tick label" transform="translate(126,9)"><text y="0.71em" transform="translate(103,332)"></text><text y="0.71em" transform="translate(383,332)"></text><text y="0.71em" transform="translate(663,332)"></text></g><g aria-label="bar"><rect data-viz-key="Qdrant|2 vCPU" x="117" width="224" y="112.57272727272732" height="205.42727272727268" rx="1.5" fill="#abb1c7"></rect><rect data-viz-key="Qdrant|4 vCPU" x="397" width="224" y="106.19090909090912" height="211.80909090909088" rx="1.5" fill="#dc244c"></rect><rect data-viz-key="Qdrant|8 vCPU" x="677" width="224" y="103.49090909090913" height="214.50909090909087" rx="1.5" fill="#6047ff"></rect></g><g text-anchor="middle" aria-label="text" font-family="'Geist Mono', ui-monospace, monospace" font-size="13" font-weight="600" transform="translate(126,-9)"><text y="0.32em" transform="translate(103,98.57272727272732)" fill="var(--qi-fg)">0.951</text><text y="0.32em" transform="translate(383,92.19090909090912)" fill="var(--qi-fg)">0.977</text><text y="0.32em" transform="translate(663,89.49090909090913)" fill="var(--qi-fg)">0.988</text></g><g text-anchor="middle" aria-label="text" fill="var(--qi-fg)" font-family="'Geist Mono', ui-monospace, monospace" font-size="13" font-weight="600" transform="translate(126,24)"><text transform="translate(103,332)">Qdrant</text><text transform="translate(383,332)">Qdrant</text><text transform="translate(663,332)">Qdrant</text></g><g text-anchor="middle" aria-label="text" fill="var(--qi-muted)" font-family="'Geist Mono', ui-monospace, monospace" font-size="12" transform="translate(126,40)"><text transform="translate(103,332)">2 vCPU</text><text transform="translate(383,332)">4 vCPU</text><text transform="translate(663,332)">8 vCPU</text></g></g><rect data-viz-zone data-viz-key="Qdrant|2 vCPU" data-viz-title="Qdrant · 2 vCPU" data-viz-rows="[{"k":"recall@10","v":"0.951","c":"#abb1c7"},{"k":"throughput","v":"67.2 QPS","c":"#abb1c7"}]" tabindex="0" role="button" aria-label="Qdrant 2 vCPU" x="74" y="62" width="290" height="270" fill="transparent"/><rect data-viz-zone data-viz-key="Qdrant|4 vCPU" data-viz-title="Qdrant · 4 vCPU" data-viz-rows="[{"k":"recall@10","v":"0.977","c":"#dc244c"},{"k":"throughput","v":"111.9 QPS","c":"#dc244c"}]" tabindex="0" role="button" aria-label="Qdrant 4 vCPU" x="364" y="62" width="290" height="270" fill="transparent"/><rect data-viz-zone data-viz-key="Qdrant|8 vCPU" data-viz-title="Qdrant · 8 vCPU" data-viz-rows="[{"k":"recall@10","v":"0.988","c":"#6047ff"},{"k":"throughput","v":"168.4 QPS","c":"#6047ff"}]" tabindex="0" role="button" aria-label="Qdrant 8 vCPU" x="654" y="62" width="290" height="270" fill="transparent"/></g></g><g data-viz-view="1" style="display:none"><g transform="translate(0,0)"><text x="490" y="20" text-anchor="middle" font-family="'Geist Mono', ui-monospace, monospace" font-size="15" font-weight="700" fill="var(--qi-fg)">Throughput</text><text x="490" y="38" text-anchor="middle" font-family="'Geist Mono', ui-monospace, monospace" font-size="13" fill="var(--qi-muted)">higher is better</text><text transform="translate(13,197) rotate(-90)" text-anchor="middle" font-family="'Geist Mono', ui-monospace, monospace" font-size="12" fill="var(--qi-muted)">QPS</text><g fill="currentColor" style="color:var(--qi-muted)" font-family="'Geist Mono', ui-monospace, monospace" font-size="13" text-anchor="middle"><style>:where(.plot-d6a7b5) {
|
|
--plot-background: white;
|
|
display: block;
|
|
height: auto;
|
|
height: intrinsic;
|
|
max-width: 100%;
|
|
}
|
|
:where(.plot-d6a7b5 text),
|
|
:where(.plot-d6a7b5 tspan) {
|
|
white-space: pre;
|
|
}</style><g aria-label="y-grid" aria-hidden="true" stroke="currentColor" stroke-opacity="0.1"><line x1="74" x2="944" y1="332" y2="332"></line><line x1="74" x2="944" y1="305" y2="305"></line><line x1="74" x2="944" y1="278" y2="278"></line><line x1="74" x2="944" y1="250.99999999999997" y2="250.99999999999997"></line><line x1="74" x2="944" y1="224" y2="224"></line><line x1="74" x2="944" y1="197" y2="197"></line><line x1="74" x2="944" y1="170" y2="170"></line><line x1="74" x2="944" y1="143" y2="143"></line><line x1="74" x2="944" y1="116" y2="116"></line><line x1="74" x2="944" y1="89" y2="89"></line><line x1="74" x2="944" y1="62" y2="62"></line></g><g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-9,0)"><text y="0.32em" transform="translate(74,332)">0</text><text y="0.32em" transform="translate(74,305)">20</text><text y="0.32em" transform="translate(74,278)">40</text><text y="0.32em" transform="translate(74,250.99999999999997)">60</text><text y="0.32em" transform="translate(74,224)">80</text><text y="0.32em" transform="translate(74,197)">100</text><text y="0.32em" transform="translate(74,170)">120</text><text y="0.32em" transform="translate(74,143)">140</text><text y="0.32em" transform="translate(74,116)">160</text><text y="0.32em" transform="translate(74,89)">180</text><text y="0.32em" transform="translate(74,62)">200</text></g><g aria-label="x-axis tick label" transform="translate(126,9)"><text y="0.71em" transform="translate(103,332)"></text><text y="0.71em" transform="translate(383,332)"></text><text y="0.71em" transform="translate(663,332)"></text></g><g aria-label="bar"><rect data-viz-key="Qdrant|2 vCPU" x="117" width="224" y="255.27999999999997" height="62.72000000000003" rx="1.5" fill="#abb1c7"></rect><rect data-viz-key="Qdrant|4 vCPU" x="397" width="224" y="194.935" height="123.065" rx="1.5" fill="#dc244c"></rect><rect data-viz-key="Qdrant|8 vCPU" x="677" width="224" y="118.65999999999998" height="199.34000000000003" rx="1.5" fill="#6047ff"></rect></g><g text-anchor="middle" aria-label="text" font-family="'Geist Mono', ui-monospace, monospace" font-size="13" font-weight="600" transform="translate(126,-9)"><text y="0.32em" transform="translate(103,241.27999999999997)" fill="var(--qi-fg)">67.2 QPS</text><text y="0.32em" transform="translate(383,180.935)" fill="var(--qi-fg)">111.9 QPS</text><text y="0.32em" transform="translate(663,104.65999999999998)" fill="var(--qi-fg)">168.4 QPS</text></g><g text-anchor="middle" aria-label="text" fill="var(--qi-fg)" font-family="'Geist Mono', ui-monospace, monospace" font-size="13" font-weight="600" transform="translate(126,24)"><text transform="translate(103,332)">Qdrant</text><text transform="translate(383,332)">Qdrant</text><text transform="translate(663,332)">Qdrant</text></g><g text-anchor="middle" aria-label="text" fill="var(--qi-muted)" font-family="'Geist Mono', ui-monospace, monospace" font-size="12" transform="translate(126,40)"><text transform="translate(103,332)">2 vCPU</text><text transform="translate(383,332)">4 vCPU</text><text transform="translate(663,332)">8 vCPU</text></g></g><rect data-viz-zone data-viz-key="Qdrant|2 vCPU" data-viz-title="Qdrant · 2 vCPU" data-viz-rows="[{"k":"recall@10","v":"0.951","c":"#abb1c7"},{"k":"throughput","v":"67.2 QPS","c":"#abb1c7"}]" tabindex="0" role="button" aria-label="Qdrant 2 vCPU" x="74" y="62" width="290" height="270" fill="transparent"/><rect data-viz-zone data-viz-key="Qdrant|4 vCPU" data-viz-title="Qdrant · 4 vCPU" data-viz-rows="[{"k":"recall@10","v":"0.977","c":"#dc244c"},{"k":"throughput","v":"111.9 QPS","c":"#dc244c"}]" tabindex="0" role="button" aria-label="Qdrant 4 vCPU" x="364" y="62" width="290" height="270" fill="transparent"/><rect data-viz-zone data-viz-key="Qdrant|8 vCPU" data-viz-title="Qdrant · 8 vCPU" data-viz-rows="[{"k":"recall@10","v":"0.988","c":"#6047ff"},{"k":"throughput","v":"168.4 QPS","c":"#6047ff"}]" tabindex="0" role="button" aria-label="Qdrant 8 vCPU" x="654" y="62" width="290" height="270" fill="transparent"/></g></g>
|