outputs.rs

  1use std::sync::Arc;
  2use std::time::Duration;
  3
  4use crate::stdio::TerminalOutput;
  5use anyhow::Result;
  6use base64::prelude::*;
  7use gpui::{
  8    img, percentage, Animation, AnimationExt, AnyElement, FontWeight, ImageData, Render, Task,
  9    TextRun, Transformation, View,
 10};
 11use runtimelib::datatable::TableSchema;
 12use runtimelib::media::datatable::TabularDataResource;
 13use runtimelib::{ExecutionState, JupyterMessageContent, MimeBundle, MimeType};
 14use serde_json::Value;
 15use settings::Settings;
 16use theme::ThemeSettings;
 17use ui::{div, prelude::*, v_flex, IntoElement, Styled, ViewContext};
 18
 19use markdown_preview::{
 20    markdown_elements::ParsedMarkdown, markdown_parser::parse_markdown,
 21    markdown_renderer::render_markdown_block,
 22};
 23
 24/// When deciding what to render from a collection of mediatypes, we need to rank them in order of importance
 25fn rank_mime_type(mimetype: &MimeType) -> usize {
 26    match mimetype {
 27        MimeType::DataTable(_) => 6,
 28        MimeType::Png(_) => 4,
 29        MimeType::Jpeg(_) => 3,
 30        MimeType::Markdown(_) => 2,
 31        MimeType::Plain(_) => 1,
 32        // All other media types are not supported in Zed at this time
 33        _ => 0,
 34    }
 35}
 36
 37/// ImageView renders an image inline in an editor, adapting to the line height to fit the image.
 38pub struct ImageView {
 39    height: u32,
 40    width: u32,
 41    image: Arc<ImageData>,
 42}
 43
 44impl ImageView {
 45    fn render(&self, cx: &ViewContext<ExecutionView>) -> AnyElement {
 46        let line_height = cx.line_height();
 47
 48        let (height, width) = if self.height as f32 / line_height.0 == u8::MAX as f32 {
 49            let height = u8::MAX as f32 * line_height.0;
 50            let width = self.width as f32 * height / self.height as f32;
 51            (height, width)
 52        } else {
 53            (self.height as f32, self.width as f32)
 54        };
 55
 56        let image = self.image.clone();
 57
 58        div()
 59            .h(Pixels(height))
 60            .w(Pixels(width))
 61            .child(img(image))
 62            .into_any_element()
 63    }
 64
 65    fn from(base64_encoded_data: &str) -> Result<Self> {
 66        let bytes = BASE64_STANDARD.decode(base64_encoded_data)?;
 67
 68        let format = image::guess_format(&bytes)?;
 69        let mut data = image::load_from_memory_with_format(&bytes, format)?.into_rgba8();
 70
 71        // Convert from RGBA to BGRA.
 72        for pixel in data.chunks_exact_mut(4) {
 73            pixel.swap(0, 2);
 74        }
 75
 76        let height = data.height();
 77        let width = data.width();
 78
 79        let gpui_image_data = ImageData::new(vec![image::Frame::new(data)]);
 80
 81        return Ok(ImageView {
 82            height,
 83            width,
 84            image: Arc::new(gpui_image_data),
 85        });
 86    }
 87}
 88
 89/// TableView renders a static table inline in a buffer.
 90/// It uses the https://specs.frictionlessdata.io/tabular-data-resource/ specification for data interchange.
 91pub struct TableView {
 92    pub table: TabularDataResource,
 93    pub widths: Vec<Pixels>,
 94}
 95
 96fn cell_content(row: &Value, field: &str) -> String {
 97    match row.get(&field) {
 98        Some(Value::String(s)) => s.clone(),
 99        Some(Value::Number(n)) => n.to_string(),
100        Some(Value::Bool(b)) => b.to_string(),
101        Some(Value::Array(arr)) => format!("{:?}", arr),
102        Some(Value::Object(obj)) => format!("{:?}", obj),
103        Some(Value::Null) | None => String::new(),
104    }
105}
106
107// Declare constant for the padding multiple on the line height
108const TABLE_Y_PADDING_MULTIPLE: f32 = 0.5;
109
110impl TableView {
111    pub fn new(table: TabularDataResource, cx: &mut WindowContext) -> Self {
112        let mut widths = Vec::with_capacity(table.schema.fields.len());
113
114        let text_system = cx.text_system();
115        let text_style = cx.text_style();
116        let text_font = ThemeSettings::get_global(cx).buffer_font.clone();
117        let font_size = ThemeSettings::get_global(cx).buffer_font_size;
118        let mut runs = [TextRun {
119            len: 0,
120            font: text_font,
121            color: text_style.color,
122            background_color: None,
123            underline: None,
124            strikethrough: None,
125        }];
126
127        for field in table.schema.fields.iter() {
128            runs[0].len = field.name.len();
129            let mut width = text_system
130                .layout_line(&field.name, font_size, &runs)
131                .map(|layout| layout.width)
132                .unwrap_or(px(0.));
133
134            let Some(data) = table.data.as_ref() else {
135                widths.push(width);
136                continue;
137            };
138
139            for row in data {
140                let content = cell_content(&row, &field.name);
141                runs[0].len = content.len();
142                let cell_width = cx
143                    .text_system()
144                    .layout_line(&content, font_size, &runs)
145                    .map(|layout| layout.width)
146                    .unwrap_or(px(0.));
147
148                width = width.max(cell_width)
149            }
150
151            widths.push(width)
152        }
153
154        Self { table, widths }
155    }
156
157    pub fn render(&self, cx: &ViewContext<ExecutionView>) -> AnyElement {
158        let data = match &self.table.data {
159            Some(data) => data,
160            None => return div().into_any_element(),
161        };
162
163        let mut headings = serde_json::Map::new();
164        for field in &self.table.schema.fields {
165            headings.insert(field.name.clone(), Value::String(field.name.clone()));
166        }
167        let header = self.render_row(&self.table.schema, true, &Value::Object(headings), cx);
168
169        let body = data
170            .iter()
171            .map(|row| self.render_row(&self.table.schema, false, &row, cx));
172
173        v_flex()
174            .id("table")
175            .overflow_x_scroll()
176            .w_full()
177            .child(header)
178            .children(body)
179            .into_any_element()
180    }
181
182    pub fn render_row(
183        &self,
184        schema: &TableSchema,
185        is_header: bool,
186        row: &Value,
187        cx: &ViewContext<ExecutionView>,
188    ) -> AnyElement {
189        let theme = cx.theme();
190
191        let line_height = cx.line_height();
192
193        let row_cells = schema
194            .fields
195            .iter()
196            .zip(self.widths.iter())
197            .map(|(field, width)| {
198                let container = match field.field_type {
199                    runtimelib::datatable::FieldType::String => div(),
200
201                    runtimelib::datatable::FieldType::Number
202                    | runtimelib::datatable::FieldType::Integer
203                    | runtimelib::datatable::FieldType::Date
204                    | runtimelib::datatable::FieldType::Time
205                    | runtimelib::datatable::FieldType::Datetime
206                    | runtimelib::datatable::FieldType::Year
207                    | runtimelib::datatable::FieldType::Duration
208                    | runtimelib::datatable::FieldType::Yearmonth => v_flex().items_end(),
209
210                    _ => div(),
211                };
212
213                let value = cell_content(row, &field.name);
214
215                let mut cell = container
216                    .min_w(*width + px(22.))
217                    .w(*width + px(22.))
218                    .child(value)
219                    .px_2()
220                    .py((TABLE_Y_PADDING_MULTIPLE / 2.0) * line_height)
221                    .border_color(theme.colors().border);
222
223                if is_header {
224                    cell = cell.border_1().bg(theme.colors().border_focused)
225                } else {
226                    cell = cell.border_1()
227                }
228                cell
229            })
230            .collect::<Vec<_>>();
231
232        let mut total_width = px(0.);
233        for width in self.widths.iter() {
234            // Width fudge factor: border + 2 (heading), padding
235            total_width += *width + px(22.);
236        }
237
238        h_flex()
239            .w(total_width)
240            .children(row_cells)
241            .into_any_element()
242    }
243}
244
245/// Userspace error from the kernel
246pub struct ErrorView {
247    pub ename: String,
248    pub evalue: String,
249    pub traceback: TerminalOutput,
250}
251
252impl ErrorView {
253    fn render(&self, cx: &ViewContext<ExecutionView>) -> Option<AnyElement> {
254        let theme = cx.theme();
255
256        let padding = cx.line_height() / 2.;
257
258        Some(
259            v_flex()
260                .w_full()
261                .px(padding)
262                .py(padding)
263                .border_1()
264                .border_color(theme.status().error_border)
265                .child(
266                    h_flex()
267                        .font_weight(FontWeight::BOLD)
268                        .child(format!("{}: {}", self.ename, self.evalue)),
269                )
270                .child(self.traceback.render(cx))
271                .into_any_element(),
272        )
273    }
274}
275
276pub struct MarkdownView {
277    contents: Option<ParsedMarkdown>,
278    parsing_markdown_task: Option<Task<Result<()>>>,
279}
280
281impl MarkdownView {
282    pub fn from(text: String, cx: &mut ViewContext<Self>) -> Self {
283        let task = cx.spawn(|markdown, mut cx| async move {
284            let text = text.clone();
285            let parsed = cx
286                .background_executor()
287                .spawn(async move { parse_markdown(&text, None, None).await });
288
289            let content = parsed.await;
290
291            markdown.update(&mut cx, |markdown, cx| {
292                markdown.parsing_markdown_task.take();
293                markdown.contents = Some(content);
294                cx.notify();
295            })
296        });
297
298        Self {
299            contents: None,
300            parsing_markdown_task: Some(task),
301        }
302    }
303}
304
305impl Render for MarkdownView {
306    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
307        let Some(parsed) = self.contents.as_ref() else {
308            return div().into_any_element();
309        };
310
311        let mut markdown_render_context =
312            markdown_preview::markdown_renderer::RenderContext::new(None, cx);
313
314        v_flex()
315            .gap_3()
316            .py_4()
317            .children(parsed.children.iter().map(|child| {
318                div().relative().child(
319                    div()
320                        .relative()
321                        .child(render_markdown_block(child, &mut markdown_render_context)),
322                )
323            }))
324            .into_any_element()
325    }
326}
327
328pub struct Output {
329    content: OutputContent,
330    display_id: Option<String>,
331}
332
333impl Output {
334    pub fn new(data: &MimeBundle, display_id: Option<String>, cx: &mut WindowContext) -> Self {
335        Self {
336            content: OutputContent::new(data, cx),
337            display_id,
338        }
339    }
340
341    pub fn from(content: OutputContent) -> Self {
342        Self {
343            content,
344            display_id: None,
345        }
346    }
347}
348
349pub enum OutputContent {
350    Plain(TerminalOutput),
351    Stream(TerminalOutput),
352    Image(ImageView),
353    ErrorOutput(ErrorView),
354    Message(String),
355    Table(TableView),
356    Markdown(View<MarkdownView>),
357    ClearOutputWaitMarker,
358}
359
360impl OutputContent {
361    fn render(&self, cx: &ViewContext<ExecutionView>) -> Option<AnyElement> {
362        let el = match self {
363            // Note: in typical frontends we would show the execute_result.execution_count
364            // Here we can just handle either
365            Self::Plain(stdio) => Some(stdio.render(cx)),
366            Self::Markdown(markdown) => Some(markdown.clone().into_any_element()),
367            Self::Stream(stdio) => Some(stdio.render(cx)),
368            Self::Image(image) => Some(image.render(cx)),
369            Self::Message(message) => Some(div().child(message.clone()).into_any_element()),
370            Self::Table(table) => Some(table.render(cx)),
371            Self::ErrorOutput(error_view) => error_view.render(cx),
372            Self::ClearOutputWaitMarker => None,
373        };
374
375        el
376    }
377
378    pub fn new(data: &MimeBundle, cx: &mut WindowContext) -> Self {
379        match data.richest(rank_mime_type) {
380            Some(MimeType::Plain(text)) => OutputContent::Plain(TerminalOutput::from(text, cx)),
381            Some(MimeType::Markdown(text)) => {
382                let view = cx.new_view(|cx| MarkdownView::from(text.clone(), cx));
383                OutputContent::Markdown(view)
384            }
385            Some(MimeType::Png(data)) | Some(MimeType::Jpeg(data)) => match ImageView::from(data) {
386                Ok(view) => OutputContent::Image(view),
387                Err(error) => OutputContent::Message(format!("Failed to load image: {}", error)),
388            },
389            Some(MimeType::DataTable(data)) => {
390                OutputContent::Table(TableView::new(data.clone(), cx))
391            }
392            // Any other media types are not supported
393            _ => OutputContent::Message("Unsupported media type".to_string()),
394        }
395    }
396}
397
398#[derive(Default, Clone, Debug)]
399pub enum ExecutionStatus {
400    #[default]
401    Unknown,
402    ConnectingToKernel,
403    Queued,
404    Executing,
405    Finished,
406    ShuttingDown,
407    Shutdown,
408    KernelErrored(String),
409}
410
411pub struct ExecutionView {
412    pub outputs: Vec<Output>,
413    pub status: ExecutionStatus,
414}
415
416impl ExecutionView {
417    pub fn new(status: ExecutionStatus, _cx: &mut ViewContext<Self>) -> Self {
418        Self {
419            outputs: Default::default(),
420            status,
421        }
422    }
423
424    /// Accept a Jupyter message belonging to this execution
425    pub fn push_message(&mut self, message: &JupyterMessageContent, cx: &mut ViewContext<Self>) {
426        let output: Output = match message {
427            JupyterMessageContent::ExecuteResult(result) => Output::new(
428                &result.data,
429                result.transient.as_ref().and_then(|t| t.display_id.clone()),
430                cx,
431            ),
432            JupyterMessageContent::DisplayData(result) => {
433                Output::new(&result.data, result.transient.display_id.clone(), cx)
434            }
435            JupyterMessageContent::StreamContent(result) => {
436                // Previous stream data will combine together, handling colors, carriage returns, etc
437                if let Some(new_terminal) = self.apply_terminal_text(&result.text, cx) {
438                    Output::from(new_terminal)
439                } else {
440                    return;
441                }
442            }
443            JupyterMessageContent::ErrorOutput(result) => {
444                let mut terminal = TerminalOutput::new(cx);
445                terminal.append_text(&result.traceback.join("\n"));
446
447                Output::from(OutputContent::ErrorOutput(ErrorView {
448                    ename: result.ename.clone(),
449                    evalue: result.evalue.clone(),
450                    traceback: terminal,
451                }))
452            }
453            JupyterMessageContent::ExecuteReply(reply) => {
454                for payload in reply.payload.iter() {
455                    match payload {
456                        // Pager data comes in via `?` at the end of a statement in Python, used for showing documentation.
457                        // Some UI will show this as a popup. For ease of implementation, it's included as an output here.
458                        runtimelib::Payload::Page { data, .. } => {
459                            let output = Output::new(data, None, cx);
460                            self.outputs.push(output);
461                        }
462
463                        // There are other payloads that could be handled here, such as updating the input.
464                        // Below are the other payloads that _could_ be handled, but are not required for Zed.
465
466                        // Set next input adds text to the next cell. Not required to support.
467                        // However, this could be implemented by adding text to the buffer.
468                        // Trigger in python using `get_ipython().set_next_input("text")`
469                        //
470                        // runtimelib::Payload::SetNextInput { text, replace } => {},
471
472                        // Not likely to be used in the context of Zed, where someone could just open the buffer themselves
473                        // Python users can trigger this with the `%edit` magic command
474                        // runtimelib::Payload::EditMagic { filename, line_number } => {},
475
476                        // Ask the user if they want to exit the kernel. Not required to support.
477                        // runtimelib::Payload::AskExit { keepkernel } => {},
478                        _ => {}
479                    }
480                }
481                cx.notify();
482                return;
483            }
484            JupyterMessageContent::ClearOutput(options) => {
485                if !options.wait {
486                    self.outputs.clear();
487                    cx.notify();
488                    return;
489                }
490
491                // Create a marker to clear the output after we get in a new output
492                Output::from(OutputContent::ClearOutputWaitMarker)
493            }
494            JupyterMessageContent::Status(status) => {
495                match status.execution_state {
496                    ExecutionState::Busy => {
497                        self.status = ExecutionStatus::Executing;
498                    }
499                    ExecutionState::Idle => self.status = ExecutionStatus::Finished,
500                }
501                cx.notify();
502                return;
503            }
504            _msg => {
505                return;
506            }
507        };
508
509        // Check for a clear output marker as the previous output, so we can clear it out
510        if let Some(output) = self.outputs.last() {
511            if let OutputContent::ClearOutputWaitMarker = output.content {
512                self.outputs.clear();
513            }
514        }
515
516        self.outputs.push(output);
517
518        cx.notify();
519    }
520
521    pub fn update_display_data(
522        &mut self,
523        data: &MimeBundle,
524        display_id: &str,
525        cx: &mut ViewContext<Self>,
526    ) {
527        let mut any = false;
528
529        self.outputs.iter_mut().for_each(|output| {
530            if let Some(other_display_id) = output.display_id.as_ref() {
531                if other_display_id == display_id {
532                    output.content = OutputContent::new(data, cx);
533                    any = true;
534                }
535            }
536        });
537
538        if any {
539            cx.notify();
540        }
541    }
542
543    fn apply_terminal_text(
544        &mut self,
545        text: &str,
546        cx: &mut ViewContext<Self>,
547    ) -> Option<OutputContent> {
548        if let Some(last_output) = self.outputs.last_mut() {
549            match &mut last_output.content {
550                OutputContent::Stream(last_stream) => {
551                    last_stream.append_text(text);
552                    // Don't need to add a new output, we already have a terminal output
553                    cx.notify();
554                    return None;
555                }
556                // Edge case note: a clear output marker
557                OutputContent::ClearOutputWaitMarker => {
558                    // Edge case note: a clear output marker is handled by the caller
559                    // since we will return a new output at the end here as a new terminal output
560                }
561                // A different output type is "in the way", so we need to create a new output,
562                // which is the same as having no prior output
563                _ => {}
564            }
565        }
566
567        let mut new_terminal = TerminalOutput::new(cx);
568        new_terminal.append_text(text);
569        Some(OutputContent::Stream(new_terminal))
570    }
571}
572
573impl Render for ExecutionView {
574    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
575        let status = match &self.status {
576            ExecutionStatus::ConnectingToKernel => Label::new("Connecting to kernel...")
577                .color(Color::Muted)
578                .into_any_element(),
579            ExecutionStatus::Executing => h_flex()
580                .gap_2()
581                .child(
582                    Icon::new(IconName::ArrowCircle)
583                        .size(IconSize::Small)
584                        .color(Color::Muted)
585                        .with_animation(
586                            "arrow-circle",
587                            Animation::new(Duration::from_secs(3)).repeat(),
588                            |icon, delta| icon.transform(Transformation::rotate(percentage(delta))),
589                        ),
590                )
591                .child(Label::new("Executing...").color(Color::Muted))
592                .into_any_element(),
593            ExecutionStatus::Finished => Icon::new(IconName::Check)
594                .size(IconSize::Small)
595                .into_any_element(),
596            ExecutionStatus::Unknown => Label::new("Unknown status")
597                .color(Color::Muted)
598                .into_any_element(),
599            ExecutionStatus::ShuttingDown => Label::new("Kernel shutting down...")
600                .color(Color::Muted)
601                .into_any_element(),
602            ExecutionStatus::Shutdown => Label::new("Kernel shutdown")
603                .color(Color::Muted)
604                .into_any_element(),
605            ExecutionStatus::Queued => Label::new("Queued...")
606                .color(Color::Muted)
607                .into_any_element(),
608            ExecutionStatus::KernelErrored(error) => Label::new(format!("Kernel error: {}", error))
609                .color(Color::Error)
610                .into_any_element(),
611        };
612
613        if self.outputs.len() == 0 {
614            return v_flex()
615                .min_h(cx.line_height())
616                .justify_center()
617                .child(status)
618                .into_any_element();
619        }
620
621        div()
622            .w_full()
623            .children(
624                self.outputs
625                    .iter()
626                    .filter_map(|output| output.content.render(cx)),
627            )
628            .children(match self.status {
629                ExecutionStatus::Executing => vec![status],
630                ExecutionStatus::Queued => vec![status],
631                _ => vec![],
632            })
633            .into_any_element()
634    }
635}