Add better sizing of errors, use Inter font family

Author: marthacryan

dash/dash-renderer/src/DashRenderer.js

@@ -5,6 +5,25 @@ import AppProvider from './AppProvider.react';
 
 class DashRenderer {
     constructor(hooks) {
+        // TODO: move this to a more appropriate place?
+        const head = document.head;
+        const link1 = document.createElement('link');
+        link1.rel = 'preconnect';
+        link1.href = 'https://fonts.googleapis.com';
+        head.appendChild(link1);
+
+        const link2 = document.createElement('link');
+        link2.rel = 'preconnect';
+        link2.href = 'https://fonts.gstatic.com';
+        link2.crossorigin = true;
+        head.appendChild(link2);
+
+        const link3 = document.createElement('link');
+        link3.href =
+            'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap';
+        link3.rel = 'stylesheet';
+        head.appendChild(link3);
+
         // render Dash Renderer upon initialising!
         const container = document.getElementById('react-entry-point');
 

dash/dash-renderer/src/components/core/Toolbar.css

@@ -6,13 +6,12 @@
     text-align: center;
     z-index: 9999;
     background-color: rgba(255, 255, 255, 0.9);
-
 }
-._dash-undo-redo>div {
+._dash-undo-redo > div {
     position: relative;
 }
 ._dash-undo-redo-link {
-    color: #0074D9;
+    color: #0074d9;
     cursor: pointer;
     margin-left: 10px;
     margin-right: 10px;

dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.css

@@ -1,8 +1,8 @@
 .dash-callback-dag--container {
     border-radius: 4px;
-    position: fixed;
-    bottom: 165px;
-    right: 16px;
+    position: absolute;
+    bottom: calc(100% + 4px);
+    right: 0;
     width: 80vw;
     height: calc(100vh - 180px);
     overflow: auto;
@@ -25,9 +25,9 @@
     max-height: 50%;
     overflow: auto;
     box-sizing: border-box;
-    background: rgba(255,255,255,0.9);
+    background: rgba(255, 255, 255, 0.9);
     border: 2px solid #ccc;
-    font-family: "Arial", sans-serif;
+    font-family: 'Arial', sans-serif;
 }
 
 .dash-callback-dag--message {
@@ -37,7 +37,7 @@
     align-items: center;
     height: 100%;
     line-height: 2em;
-    font-family: "Arial", sans-serif;
+    font-family: 'Arial', sans-serif;
 }
 
 .dash-callback-dag--layoutSelector {

dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.css

@@ -6,29 +6,27 @@
     position: absolute;
     right: 0;
     top: 0;
-    color: #B9C2CE;
+    color: #b9c2ce;
     font-size: 20px;
     cursor: pointer;
-    margin-right: 10px
+    margin-right: 10px;
 }
 
 .dash-debug-menu__upgrade-button {
-    background-color: #A159FF0D;
-    border: 1px solid #864AD433;
-    color: #7F4BC4;
+    background-color: #a159ff0d;
+    border: 1px solid #864ad433;
+    color: #7f4bc4;
     margin-left: 10px;
 }
 
 .dash-debug-menu__upgrade-button:hover {
-    background-color: #864AD433;
+    background-color: #864ad433;
 }
 
-.dash-fe-error__icon-x:hover
-{
- color:#a1a9b5;
+.dash-fe-error__icon-x:hover {
+    color: #a1a9b5;
 }
 
-
 .dash-fe-errors {
     min-width: 386px;
     max-width: 650px;
@@ -58,7 +56,7 @@
 .dash-debug-menu__error-count {
     font-size: 12px;
     color: #fff;
-    background-color: #C73A3A;
+    background-color: #c73a3a;
     padding: 3px 5px;
     border-radius: 3px;
     margin: 0 5px;
@@ -131,7 +129,7 @@
 .dash-fe-error__curved-bottom {
     border-radius-bottom-left: 4px;
     border-radius-bottom-right: 4px;
-    background-color: #FFEFEF;
+    background-color: #ffefef;
 }
 
 .dash-be-error__st {
@@ -152,7 +150,6 @@
     white-space: pre-wrap;
 }
 
-
 .dash-error-menu {
     max-width: 50%;
     max-height: 60%;
@@ -197,15 +194,17 @@
     margin-bottom: 7px;
     background-color: white;
     overflow: auto;
-    z-index: 1100;  /* above the plotly.js toolbar and Bootstrap components */
-    box-shadow: 0 0 15px 6px #0000000D;
+    z-index: 1100; /* above the plotly.js toolbar and Bootstrap components */
+    box-shadow: 0 0 15px 6px #0000000d;
 }
 
 .dash-error-card__topbar {
     width: 100%;
     height: 32px;
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
+    font-family: Inter;
+    font-size: 14px;
     align-items: center;
     position: relative;
 }
@@ -221,8 +220,10 @@
     box-sizing: border-box;
     background-color: white;
     border-radius: 2px;
-    margin-bottom: 8px;
-    border: 1px solid #0018661A;
+    margin-bottom: 15px;
+    border: 1px solid #0018661a;
+    font-family: Menlo;
+    font-size: 12.6px;
 }
 
 .dash-fe-error-item {
@@ -231,9 +232,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border: 1px solid #0018661A;
     padding: 10px;
-    margin: 10px 0;
     cursor: pointer;
 }
 

dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js

@@ -1,6 +1,6 @@
 import {connect} from 'react-redux';
 import './FrontEndError.css';
-import {Component} from 'react';
+import {Component, useRef, useState, useEffect} from 'react';
 import CollapseIcon from '../icons/CollapseIcon.svg';
 import PropTypes from 'prop-types';
 import '../Percy.css';
@@ -57,17 +57,68 @@ class FrontEndError extends Component {
             </div>
         );
 
-        return collapsed ? (
-            <>{errorHeader}</>
-        ) : (
+        return (
             <div className={cardClasses}>
                 {errorHeader}
-                <ErrorContent error={e.error} />
+                {!collapsed && <ErrorContent error={e.error} />}
             </div>
         );
     }
 }
 
+function BackendError({error, base}) {
+    const iframeRef = useRef(null);
+    const [height, setHeight] = useState('500px'); // Default height
+
+    useEffect(() => {
+        const handleMessage = event => {
+            if (
+                event.data &&
+                typeof event.data === 'object' &&
+                event.data.type === 'IFRAME_HEIGHT'
+            ) {
+                setHeight(`${event.data.height}px`);
+            }
+        };
+
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, []);
+
+    return (
+        <iframe
+            ref={iframeRef}
+            srcDoc={error.html
+                .replace(
+                    '</head>',
+                    `<style type="text/css">${werkzeugCss}</style>
+                    <script>
+  function sendHeight() {
+    const height = document.body.scrollHeight;
+    window.parent.postMessage({ type: "IFRAME_HEIGHT", height }, "*");
+  }
+
+  window.addEventListener("load", sendHeight);
+  window.addEventListener("resize", sendHeight);
+  window.addEventListener("click", sendHeight);
+</script></head>`
+                )
+                .replace('="?__debugger__', `="${base}?__debugger__`)}
+            style={{
+                /*
+                 * 67px of padding and margin between this
+                 * iframe and the parent container.
+                 * 67 was determined manually in the
+                 * browser's dev tools.
+                 */
+                width: 'calc(600px - 67px)',
+                border: 'none',
+                height: height
+            }}
+        />
+    );
+}
+
 const MAX_MESSAGE_LENGTH = 40;
 /* eslint-disable no-inline-comments */
 function UnconnectedErrorContent({error, base}) {
@@ -114,31 +165,10 @@ function UnconnectedErrorContent({error, base}) {
                 <div className='dash-be-error__st'>
                     <div className='dash-backend-error'>
                         {/* Embed werkzeug debugger in an iframe to prevent
-                        CSS leaking - werkzeug HTML includes a bunch
-                        of CSS on base html elements like `<body/>`
-                      */}
-
-                        <iframe
-                            srcDoc={error.html
-                                .replace(
-                                    '</head>',
-                                    `<style type="text/css">${werkzeugCss}</style></head>`
-                                )
-                                .replace(
-                                    '="?__debugger__',
-                                    `="${base}?__debugger__`
-                                )}
-                            style={{
-                                /*
-                                 * 67px of padding and margin between this
-                                 * iframe and the parent container.
-                                 * 67 was determined manually in the
-                                 * browser's dev tools.
-                                 */
-                                width: 'calc(600px - 67px)',
-                                border: 'none'
-                            }}
-                        />
+                            CSS leaking - werkzeug HTML includes a bunch
+                            of CSS on base html elements like `<body/>`
+                        */}
+                        <BackendError error={error} base={base} />
                     </div>
                 </div>
             ) : (

dash/dash-renderer/src/components/error/GlobalErrorOverlay.css

@@ -41,7 +41,7 @@
     max-height: calc(100vh - 50px);
     margin: 10px;
     overflow: auto;
-    z-index: 1100;  /* above the plotly.js toolbar and Bootstrap components */
+    z-index: 1100; /* above the plotly.js toolbar and Bootstrap components */
 }
 
 .dash-error-card__topbar {

dash/dash-renderer/src/components/error/menu/DebugMenu.css

@@ -34,7 +34,7 @@
     z-index: 10000;
     border-radius: 5px;
     padding: 5px;
-    background-color: #F5F6FA;
+    background-color: #f5f6fa;
     box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25),
         0px 1px 3px rgba(162, 177, 198, 0.32);
 }
@@ -54,7 +54,7 @@
     flex-direction: column;
     background-color: white;
     border-radius: 3px;
-    border: 1px solid #0018661A;
+    border: 1px solid #0018661a;
     padding: 11px;
     box-shadow: 0px 0px 14px 5px #00000012;
     z-index: 1200;
@@ -75,7 +75,7 @@
     border: none;
     padding: 2px 5px;
     white-space: nowrap;
-    color: #7F4BC4;
+    color: #7f4bc4;
     font-size: 10pt;
     text-decoration: none;
     font-family: none;
@@ -84,7 +84,7 @@
 }
 
 .dash-debug-menu__upgrade-tooltip:after {
-    content: " ";
+    content: ' ';
     position: absolute;
     top: 100%;
     left: 50%;
@@ -110,13 +110,13 @@
     width: 1.5px;
     height: 26px;
     margin: 0px 13px;
-    background-color: #0015594D;
+    background-color: #0015594d;
 }
 
 .dash-debug-menu__button {
     background: none;
     border: none;
-    box-shadow: 0 1px #D3DAE6;
+    box-shadow: 0 1px #d3dae6;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -129,8 +129,8 @@
 }
 
 .dash-debug-menu__button.dash-debug-menu__button--selected {
-    color: #7F4BC4;
-    box-shadow: 0 2px #0071C2;
+    color: #7f4bc4;
+    box-shadow: 0 2px #0071c2;
 }
 .dash-debug-menu__button.dash-debug-menu__button--selected:hover {
     color: #5806c4;

dash/dash-renderer/src/components/error/werkzeugcss.js

@@ -4,11 +4,7 @@
 export default `
 body {
     margin: 0px;
-    margin-top: 10px;
-}
-
-.error-container {
-    font-family: Roboto;
+    overflow: hidden;
 }
 
 .traceback {