-
Notifications
You must be signed in to change notification settings - Fork 11
feat(cockpit-render): redesign spec-rendering playback UI (encapsulated CSS, no Tailwind) #759
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
7991e71
docs: spec-rendering playback redesign design spec
blove 2e4eedc
docs: spec-rendering playback redesign implementation plan
blove cf2125a
feat(cockpit-render): truncation-tolerant JSON syntax tokenizer
blove 0bd636e
feat(cockpit-render): restyle streaming transport timeline with encap…
blove fe3bf69
feat(cockpit-render): redesign spec-rendering playback UI with encaps…
blove 223d0ec
chore(cockpit-render): --ds-* body styling + shared sr-skeleton loader
blove 719706c
fix(cockpit-render): exclude colocated spec files from spec-rendering…
blove 53be9d3
fix(cockpit-render): pin streaming-JSON console to dark surface in bo…
blove File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
cockpit/render/spec-rendering/angular/src/app/json-highlight.spec.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| // SPDX-License-Identifier: MIT | ||
| import { highlightJson } from './json-highlight'; | ||
|
|
||
| describe('highlightJson', () => { | ||
| it('returns no tokens for empty input', () => { | ||
| expect(highlightJson('')).toEqual([]); | ||
| }); | ||
|
|
||
| it('classifies an object key vs a string value', () => { | ||
| const toks = highlightJson('{"type": "Card"}'); | ||
| expect(toks.find((t) => t.text === '"type"')?.kind).toBe('key'); | ||
| expect(toks.find((t) => t.text === '"Card"')?.kind).toBe('string'); | ||
| }); | ||
|
|
||
| it('marks structural characters as punct', () => { | ||
| const puncts = highlightJson('{}[],:').filter((t) => t.kind === 'punct'); | ||
| expect(puncts.map((t) => t.text)).toEqual(['{', '}', '[', ']', ',', ':']); | ||
| }); | ||
|
|
||
| it('tokenizes numbers including negatives and exponents', () => { | ||
| const nums = highlightJson('[1, -2.5, 3e4]').filter((t) => t.kind === 'number'); | ||
| expect(nums.map((t) => t.text)).toEqual(['1', '-2.5', '3e4']); | ||
| }); | ||
|
|
||
| it('tokenizes true/false/null as literals', () => { | ||
| const lits = highlightJson('[true, false, null]').filter((t) => t.kind === 'literal'); | ||
| expect(lits.map((t) => t.text)).toEqual(['true', 'false', 'null']); | ||
| }); | ||
|
|
||
| it('treats an unterminated trailing string as a plain string, not a key', () => { | ||
| const toks = highlightJson('{"title": "Streaming De'); | ||
| expect(toks.find((t) => t.text === '"title"')?.kind).toBe('key'); | ||
| const last = toks[toks.length - 1]; | ||
| expect(last.text).toBe('"Streaming De'); | ||
| expect(last.kind).toBe('string'); | ||
| }); | ||
|
|
||
| it('is loss-less: joining token texts reproduces the input', () => { | ||
| const sample = '{\n "root": "root",\n "elements": {\n "a": { "type": "Card" }\n }\n}'; | ||
| expect(highlightJson(sample).map((t) => t.text).join('')).toBe(sample); | ||
| }); | ||
|
|
||
| it('preserves whitespace as plain tokens', () => { | ||
| const toks = highlightJson('{ }'); | ||
| expect(toks.map((t) => t.text).join('')).toBe('{ }'); | ||
| expect(toks.some((t) => t.kind === 'plain' && t.text === ' ')).toBe(true); | ||
| }); | ||
| }); | ||
85 changes: 85 additions & 0 deletions
85
cockpit/render/spec-rendering/angular/src/app/json-highlight.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| // SPDX-License-Identifier: MIT | ||
|
|
||
| export type JsonTokenKind = 'key' | 'string' | 'punct' | 'number' | 'literal' | 'plain'; | ||
|
|
||
| export interface JsonToken { | ||
| text: string; | ||
| kind: JsonTokenKind; | ||
| } | ||
|
|
||
| const PUNCT = new Set(['{', '}', '[', ']', ':', ',']); | ||
| const WS = new Set([' ', '\n', '\r', '\t']); | ||
| const isWs = (c: string) => WS.has(c); | ||
| const isDigit = (c: string) => c >= '0' && c <= '9'; | ||
| const isAlpha = (c: string) => (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z'); | ||
| const isNumberPart = (c: string) => isDigit(c) || c === '.' || c === 'e' || c === 'E' || c === '+' || c === '-'; | ||
|
|
||
| /** | ||
| * Tokenize a (possibly incomplete) streaming JSON string for syntax | ||
| * highlighting. Never throws; tolerant of truncation. A string token is | ||
| * classified as a `key` only when it is properly closed AND the next | ||
| * non-whitespace character is a colon; the trailing (possibly unterminated) | ||
| * string has no colon yet and is emitted as a plain string. The token stream | ||
| * is loss-less — concatenating every token's `text` reproduces the input. | ||
| */ | ||
| export function highlightJson(raw: string): JsonToken[] { | ||
| const tokens: JsonToken[] = []; | ||
| const n = raw.length; | ||
| let i = 0; | ||
|
|
||
| while (i < n) { | ||
| const ch = raw[i]; | ||
|
|
||
| if (isWs(ch)) { | ||
| let j = i + 1; | ||
| while (j < n && isWs(raw[j])) j++; | ||
| tokens.push({ text: raw.slice(i, j), kind: 'plain' }); | ||
| i = j; | ||
| continue; | ||
| } | ||
|
|
||
| if (PUNCT.has(ch)) { | ||
| tokens.push({ text: ch, kind: 'punct' }); | ||
| i += 1; | ||
| continue; | ||
| } | ||
|
|
||
| if (ch === '"') { | ||
| let j = i + 1; | ||
| let closed = false; | ||
| while (j < n) { | ||
| if (raw[j] === '\\') { j += 2; continue; } | ||
| if (raw[j] === '"') { j += 1; closed = true; break; } | ||
| j += 1; | ||
| } | ||
| const text = raw.slice(i, Math.min(j, n)); | ||
| let k = j; | ||
| while (k < n && isWs(raw[k])) k++; | ||
| const isKey = closed && k < n && raw[k] === ':'; | ||
| tokens.push({ text, kind: isKey ? 'key' : 'string' }); | ||
| i = Math.min(j, n); | ||
| continue; | ||
| } | ||
|
|
||
| if (ch === '-' || isDigit(ch)) { | ||
| let j = i + 1; | ||
| while (j < n && isNumberPart(raw[j])) j++; | ||
| tokens.push({ text: raw.slice(i, j), kind: 'number' }); | ||
| i = j; | ||
| continue; | ||
| } | ||
|
|
||
| if (isAlpha(ch)) { | ||
| let j = i + 1; | ||
| while (j < n && isAlpha(raw[j])) j++; | ||
| tokens.push({ text: raw.slice(i, j), kind: 'literal' }); | ||
| i = j; | ||
| continue; | ||
| } | ||
|
|
||
| tokens.push({ text: ch, kind: 'plain' }); | ||
| i += 1; | ||
| } | ||
|
|
||
| return tokens; | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Missing edge-case test: string truncated after a backslash
The
j += 2escape branch atjson-highlight.ts:51can advancejpastnwhen the input ends with\. The main guards (Math.min(j, n)) handle it correctly, but it would be good to have a test confirming the tokenizer doesn't throw and remains lossless: