Code window
Shows a file as a numbered window, with the line that failed.
Fail
steps/extract.py from pipelines import step @step(retries=2)def extract(partition: str): return read_parquet(f"lake://lake/events/{partition}") @stepdef load(rows): warehouse.write("events_daily", rows)nonedefault
steps/extract.py from pipelines import step @step(retries=2)def extract(partition: str): return read_parquet(f"lake://lake/events/{partition}") @stepdef load(rows): warehouse.write("events_daily", rows)one line
States
orders_by_region.sql -- Orders by region, last 7 daysselect region, count(*) as ordersfrom warehouse.orderswhere placed_at >= current_date - 7group by region;rest
orders_by_region.sql -- Orders by region, last 7 daysselect region, count(*) as ordersfrom warehouse.orderswhere placed_at >= current_date - 7group by region;highlighted
orders_by_region.sql -- Orders by region, last 7 daysselect region, count(*) as ordersfrom warehouse.orderswhere placed_at >= current_date - 7group by region;failed
steps/extract.py from pipelines import step @step(retries=2)def extract(partition: str): return read_parquet(f"lake://lake/events/{partition}") @stepdef load(rows): warehouse.write("events_daily", rows)wrapped
Usage
When to use it
- Use
- A pipeline step's source on its run page, with the line that raised marked.
- Use
- A file a person reads as a whole, with its line numbers, rather than a snippet to copy.
- Not for
- A short snippet or a command to copy. Use Code block.
- Not for
- The run's output. Use Log viewer.
Rules
6 rules
- Must
- Mark the line that failed with fail, never with a red class or a comment typed into the source. Because fail draws the failure band across the window, turns the number to the failure word, adds the FAIL label and says "Failed" to a screen reader, and none of it is copied.
- Should
- Mark only the line that raised, not the lines that called it. Because one band reads as the cause; three read as three failures.
- Must
- Give the window its filename as the path a person would open. Because the header is the window's only name, and "Python" does not say which of the run's steps this is.
- Never
- Draw window controls (dots or squares) in the header. Because they do nothing and say nothing, so they are decoration, and red and yellow already mean a failure and the action in Sodium.
- Should
- Mark the lines the page talks about with highlight, and keep fail for the line that broke. Because the selection wash says "look here" and the failure band says "this failed"; a failure drawn as a highlight reads as a pointer, not a cause.
- Should
- Pass startLine with an excerpt, so its numbers match the file. Because line 5 of an excerpt that starts at 120 is line 124 in the stack trace beside it.
State order
3 states, highest first
- 1
- failed
- 2
- highlighted
- 3
- rest
Accessibility
4 checks
- The window is named by its filename.
- A failing line is read as "Failed:" before its code; a highlighted one as "Highlighted:". Neither is copied.
- The failure number and label are --fail-text on --fail-tint, 5.7:1 in light; the code on the band stays text-1.
- Line numbers are aria-hidden and unselectable.
Keyboard
2 keys
- Tab
- Reaches wrap and copy, then the body while it scrolls.
- Arrow keys
- Scroll the focused body.
Edge cases
5 edge cases
- Long failing line
- The FAIL label sticks to the window's end while the line scrolls under it.
- Failed and highlighted
- Failure wins; the line takes one band.
- Narrow at 390
- The filename truncates from its end; the body scrolls sideways.
- Forced colours
- Failing and highlighted lines keep an outline; the label keeps its word.
- Dark theme
- The body is the near-black page and the band the dark failure tint.
API
10 props
codestringlanguage'ts' | 'tsx' | 'js' | 'json' | 'bash' | 'python' | 'sql' | 'yaml' | 'text'default'text'filenamestringfailnumber[] | stringfailLabelstringdefault'Fail'highlightnumber[] | stringstartLinenumberdefault1defaultWrapbooleandefaultfalsemaxLinesnumbercopybooleandefaulttrue
Tokens
16 tokens
--page- #ffffff
--panel- #fafaf7
--line- #e2dfd5
--fail-tint- #fdecea
--fail-text- #b3261e
--selected- #fff4bf
--type-code- 400 13px/20px var(--font-mono)
--type-code-sm- 400 12px/16px var(--font-mono)
--type-label- 400 13px/16px var(--font-mono)
--type-label-sm- 400 12px/16px var(--font-mono)
--text-1- #161512
--text-2- #55524a
--text-3- #6b675e
--row- 40px
--control-sm- 26px
--space-4- 16px