Update packages/webviz-core from internal repo (#174)

* Update packages/webviz-core from internal repo

Changelog:
ImagePanel
- Image panel now supports mono8/8UC1 and mono16/16UC1 grayscale images.
- Image markers can now be used without CameraInfo, as long as image scale is set to 100%.
- Added support for more Bayer encodings: BGGR, GBRG, and GRBG.
- Image panel now displays an error message when the image encoding is unsupported.

Plot Panel
- The Plot panel now supports filtering out whole messages, such as /abc{node_name=="foo"}.cpu_elapsed_ns. See the Topic path syntax help page for more info. (Support for this feature in Raw Messages is still a work in progress, coming soon.)
- The Plot panel now allows you to add a number to show a horizontal reference line.
- The Plot panel settings now has an option to lock y-axis so that the graph won't grow to fit the data when min and max changes.

Other
- Control+O or Command+O keyboard shortcut can be used to open bag files.
- Webviz now displays dragged-in bags in Connection Picker.
- Added more options for playback speed.
- Added negative integers in topic filtering.
- Added copy button to Rosout.

packages/webviz-core/package.json

@@ -16,14 +16,17 @@
     "idb": "2.1.3",
     "inter-ui": "3.0.0",
     "intervals-fn": "3.0.3",
+    "js-yaml": "3.12.0",
     "lodash": "4.17.11",
+    "memoize-one": "5.0.4",
     "memoize-weak": "1.0.2",
     "micro-memoize": "^3.0.1",
     "moment": "2.22.2",
     "moment-duration-format": "2.2.2",
     "moment-timezone": "0.5.23",
     "natsort": "2.0.0",
     "nearley": "2.15.1",
+    "promise-queue": "2.2.5",
     "prop-types": "15.6.2",
     "raven-js": "3.27.0",
     "react": "16.8.6",

packages/webviz-core/src/actions/panels.js

@@ -8,16 +8,19 @@
 
 import { push } from "react-router-redux";
 
-import type { ImportPanelLayoutPayload, SaveConfigPayload } from "webviz-core/src/types/panels";
+import type { ImportPanelLayoutPayload, SaveConfigPayload, SaveFullConfigPayload } from "webviz-core/src/types/panels";
 import type { Dispatch, GetState } from "webviz-core/src/types/Store";
-
 // DANGER: if you change this you break existing layout urls
 export const URL_KEY = "layout";
 
 export type SAVE_PANEL_CONFIG = {
   type: "SAVE_PANEL_CONFIG",
   payload: SaveConfigPayload,
 };
+export type SAVE_FULL_PANEL_CONFIG = {
+  type: "SAVE_FULL_PANEL_CONFIG",
+  payload: SaveFullConfigPayload,
+};
 
 export type Dispatcher<T> = (dispatch: Dispatch, getState: GetState) => T;
 
@@ -47,6 +50,16 @@ export const savePanelConfig = (payload: SaveConfigPayload): Dispatcher<SAVE_PAN
   });
 };
 
+export const saveFullPanelConfig = (payload: SaveFullConfigPayload): Dispatcher<SAVE_FULL_PANEL_CONFIG> => (
+  dispatch,
+  getState
+) => {
+  return dispatch({
+    type: "SAVE_FULL_PANEL_CONFIG",
+    payload,
+  });
+};
+
 type IMPORT_PANEL_LAYOUT = {
   type: "IMPORT_PANEL_LAYOUT",
   payload: ImportPanelLayoutPayload,
@@ -103,5 +116,6 @@ export type PanelsActions =
   | CHANGE_PANEL_LAYOUT
   | IMPORT_PANEL_LAYOUT
   | SAVE_PANEL_CONFIG
+  | SAVE_FULL_PANEL_CONFIG
   | OVERWRITE_GLOBAL_DATA
   | SET_GLOBAL_DATA;

packages/webviz-core/src/components/Button.js

@@ -48,7 +48,7 @@ export default class Button extends React.Component<Props> {
       return (
         <Tooltip contents={tooltip} {...tooltipProps}>
           {/* Extra div allows Tooltip to insert the necessary event listeners */}
-          <div style={{ display: "flex" }}>
+          <div style={{ display: "inline-flex" }}>
             <BaseButton {...otherProps} {...eventHandlers} className={newClassName} ref={innerRef} />
           </div>
         </Tooltip>

packages/webviz-core/src/components/CopyText.js

@@ -27,18 +27,17 @@ const SCopyTextWrapper = styled.div`
 `;
 
 type Props = {|
-  copyText?: string,
+  copyText: string,
   tooltip: string,
   children: React.Node,
-  getCopyText?: () => string,
 |};
 
-function CopyText({ copyText, tooltip, children, getCopyText }: Props) {
+function CopyText({ copyText, tooltip, children }: Props) {
   if (!copyText || !children) {
     return null;
   }
   return (
-    <SCopyTextWrapper onClick={() => clipboard.copy(copyText || getCopyText)}>
+    <SCopyTextWrapper onClick={() => clipboard.copy(copyText)}>
       {children ? children : copyText}
       <Icon fade style={{ margin: "0 8px", verticalAlign: "middle" }} tooltip={tooltip}>
         <ClipboardOutlineIcon />

packages/webviz-core/src/components/DocumentDropListener.js

@@ -10,7 +10,7 @@ import * as React from "react";
 
 type Props = {
   children: React.Node, // Shown when dragging in a file.
-  filesSelected: ({ files: FileList, shiftPressed: boolean }) => any,
+  filesSelected: ({ files: FileList | File[], shiftPressed: boolean }) => any,
 };
 
 type State = {

packages/webviz-core/src/components/ErrorDisplay.js

@@ -18,12 +18,12 @@ import Menu from "webviz-core/src/components/Menu";
 import Modal, { Title } from "webviz-core/src/components/Modal";
 import renderToBody from "webviz-core/src/components/renderToBody";
 import colors from "webviz-core/src/styles/colors.module.scss";
-import { setErrorHandler } from "webviz-core/src/util/reportError";
+import { setErrorHandler, unsetErrorHandler, type DetailsType } from "webviz-core/src/util/reportError";
 
 type ErrorMessage = {
   +id: string,
   +message: string,
-  +details: string,
+  +details: DetailsType,
   +read: boolean,
   +created: Date,
 };
@@ -139,12 +139,16 @@ const ModalBody = styled.div`
 `;
 
 // Exporting for tests.
-export function showErrorModal(errorMessage: ErrorMessage): void {
+export function showErrorModal({ details, message }: ErrorMessage): void {
+  const detailsNode = React.isValidElement(details) ? details : null;
+  const detailsStr =
+    details instanceof Error ? details.stack : typeof details === "string" ? details : "No details provided";
+
   const modal = renderToBody(
     <Modal onRequestClose={() => modal.remove()}>
       <ModalBody>
-        <Title style={{ color: colors.red }}>{errorMessage.message}</Title>
-        <pre style={{ whiteSpace: "pre-wrap", lineHeight: 1.3 }}>{errorMessage.details}</pre>
+        <Title style={{ color: colors.red }}>{message}</Title>
+        {detailsNode ? detailsNode : <pre style={{ whiteSpace: "pre-wrap", lineHeight: 1.3 }}>{detailsStr}</pre>}
       </ModalBody>
     </Modal>
   );
@@ -167,10 +171,9 @@ export default class ErrorDisplay extends React.PureComponent<{}, State> {
 
   componentDidMount() {
     setErrorHandler(
-      (message: string, details: string | Error): void => {
+      (message: string, details: DetailsType): void => {
         this.setState((state: State) => {
-          const detailsAsError: string = typeof details !== "string" ? details.stack : details || "No details provided";
-          const newErrors = [{ id: uuid(), created: new Date(), message, details: detailsAsError, read: false }];
+          const newErrors = [{ id: uuid(), created: new Date(), message, details, read: false }];
           // shift errors in to the front of the array and keep a max of 100
           const errors = newErrors.concat(state.errors).slice(0, 100);
           return {
@@ -189,6 +192,10 @@ export default class ErrorDisplay extends React.PureComponent<{}, State> {
     );
   }
 
+  componentWillUnmount() {
+    unsetErrorHandler();
+  }
+
   toggleErrorList = () => {
     this.setState((state) => {
       const { showErrorList } = state;

packages/webviz-core/src/components/ErrorDisplay.stories.js

@@ -152,4 +152,18 @@ storiesOf("<ErrorDisplay>", module)
       created: new Date(),
     });
     return <div />;
+  })
+  .add("Error Modal with details in React.Node type", () => {
+    showErrorModal({
+      id: "1",
+      message: "Error 1",
+      details: (
+        <p>
+          This is <b style={{ color: "red" }}>customized</b> error detail.
+        </p>
+      ),
+      read: false,
+      created: new Date(),
+    });
+    return <div />;
   });