Refactor code to add DisplayResult component for displaying output in NotebookCell (#223)

Author: xuwenyihust

examples/sg-resale-flat-prices/sg-resale-flat-prices.ipynb

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { Card, CardContent } from '@mui/material';
-import AceEditor from 'react-ace';
+import { Card, CardContent, Typography } from '@mui/material';
 import 'ace-builds/src-noconflict/mode-python';
 import 'ace-builds/src-noconflict/mode-markdown';
 import 'ace-builds/src-noconflict/theme-github';
@@ -15,6 +14,7 @@ import MarkdownEditor from './content/MarkdownEditor';
 import TextResult from './result/TextResult';
 import ErrorResult from './result/ErrorResult';
 import CodeResult from './result/CodeResult';
+import DisplayResult from './result/DisplayResult';
 
 
 function Cell({ 
@@ -155,7 +155,9 @@ function Cell({
                 ErrorResult(index, isFocused, output)
               ) : (output.output_type === OutputType.STREAM ? (
                 CodeResult(index, output)
-              ) : null)
+              ) : (output.output_type === OutputType.DISPLAY_DATA ? (
+                DisplayResult(output)
+              ) : null))
             )
         )}
       </div>

webapp/src/components/notebook/cell/Cell.js

@@ -42,9 +42,9 @@ function CodeResult(index, output) {
                 remarkPlugins={[gfm]} 
                 children={StringUtils.convertJupyterTableToMarkdownTable(output.text)}
                 components={{
-                  // table: ({node, ...props}) => <table style={{border: '0.2px solid lightgrey'}} {...props} />,
-                  th: ({node, ...props}) => <th style={{border: '0.2px solid lightgrey', padding: '5px'}} {...props} />,
-                  td: ({node, ...props}) => <td style={{border: '0.2px solid lightgrey', padding: '5px'}} {...props} />,
+                  table: ({node, ...props}) => <table style={{borderCollapse: 'collapse'}} {...props} />,
+                  th: ({node, ...props}) => <th style={{border: '0.2px solid lightblue', padding: '3px'}} {...props} />,
+                  td: ({node, ...props}) => <td style={{border: '0.2px solid lightblue', padding: '3px'}} {...props} />,
                 }} />
             ) : (
               output.text

webapp/src/components/notebook/cell/result/CodeResult.js

@@ -0,0 +1,41 @@
+import { Card } from '@mui/material';
+
+
+function DisplayResult(output) {
+
+  return (
+<   div 
+      variant="body1"
+      component="div"
+      sx={{
+        color: 'black',
+        width: '85%',
+        fontFamily: 'Arial',
+        fontSize: '14px',
+        fontWeight: 'bold',
+        textAlign: 'left',
+        marginLeft: 0,
+        marginRight: 1,
+        marginTop: 0,
+        marginBottom: 1,
+        marginRight: 1,
+      }}>
+        <Card
+          elevation={0}
+          sx={{
+            width: '85%',
+            marginTop: 0,
+            marginBottom: 1,
+            marginLeft: 10,
+            marginRight: 1,
+            border: 0.1,
+            borderColor: 'lightgrey',
+            backgroundColor: 'rgba(0, 0, 0, 0.01)',
+          }}>
+          <img src={`data:image/png;base64,${output.data['image/png']}`} />
+        </Card>
+    </div>
+  )
+}
+
+export default DisplayResult;

webapp/src/components/notebook/cell/result/DisplayResult.js

@@ -3,4 +3,5 @@ export const OutputType = {
   ERROR: 'error',
   STREAM: 'stream',
   STATUS: 'status',
+  DISPLAY_DATA: 'display_data',
 };

webapp/src/components/notebook/cell/result/OutputType.js

@@ -322,7 +322,7 @@ class NotebookModel {
           const message = JSON.parse(event.data);
           // Only process messages that are in response to this execution
           if (message.parent_header.msg_id === msg_id) {
-              console.log('Received message:', message);
+              // console.log('Received message:', message);
               cell.lastExecutionTime = new Date().toISOString().slice(0, 19).replace('T', ' ');
               if (message.header.msg_type === OutputType.STATUS) {
                   // Update the cell's status
@@ -356,7 +356,15 @@ class NotebookModel {
                       evalue: message.content.evalue,
                       traceback: message.content.traceback,
                   });
-              }}
+              } else if (message.header.msg_type === OutputType.DISPLAY_DATA) {
+                  // Add the output to the cell's outputs array
+                  cell.outputs.push({
+                      output_type: OutputType.DISPLAY_DATA,
+                      data: message.content.data,
+                      metadata: message.content.metadata,
+                  });
+              }
+            }
         };
       });