Update packages/webviz-core from internal repo

packages/webviz-core/package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@cruise-automation/hooks": "0.0.1",
     "@mdi/svg": "3.2.89",
+    "@sentry/browser": "5.7.1",
     "chart.js": "2.7.3",
     "chartjs-plugin-annotation": "0.5.7",
     "chartjs-plugin-datalabels": "0.4.0",
@@ -29,9 +30,9 @@
     "monaco-vim": "0.1.3",
     "natsort": "2.0.0",
     "nearley": "2.15.1",
+    "panzoom": "8.4.0",
     "promise-queue": "2.2.5",
     "prop-types": "15.6.2",
-    "raven-js": "3.27.0",
     "react": "16.10.2",
     "react-autocomplete": "janpaul123/react-autocomplete#bc8737070b5744069719c8fcd4e0a197192b0d48",
     "react-chartjs-2": "2.7.4",
@@ -46,7 +47,9 @@
     "react-markdown": "4.0.4",
     "react-monaco-editor": "0.28.0",
     "react-mosaic-component": "1.0.3",
+    "react-outside-click-handler": "1.2.4",
     "react-redux": "7.1.0",
+    "react-resize-detector": "4.2.1",
     "react-router": "5.0.1",
     "react-router-dom": "5.0.1",
     "react-select": "1.2.1",

packages/webviz-core/src/PanelAPI/index.js

@@ -15,3 +15,4 @@ export { default as useDataSourceInfo } from "./useDataSourceInfo";
 export type { DataSourceInfo } from "./useDataSourceInfo";
 
 export { useMessages } from "webviz-core/src/components/MessageHistory/MessageHistoryOnlyTopics";
+export type { RequestedTopic } from "webviz-core/src/components/MessageHistory/MessageHistoryOnlyTopics";

packages/webviz-core/src/PanelAPI/useDataSourceInfo.js

@@ -6,12 +6,10 @@
 //  found in the LICENSE file in the root directory of this source tree.
 //  You may not use this file except in compliance with the License.
 
-import { useMemo, useContext, useCallback } from "react";
+import { useCallback } from "react";
 import { type Time } from "rosbag";
 
 import { useMessagePipeline } from "webviz-core/src/components/MessagePipeline";
-import PanelContext from "webviz-core/src/components/PanelContext";
-import filterMap from "webviz-core/src/filterMap";
 import { type Topic } from "webviz-core/src/players/types";
 import type { RosDatatypes } from "webviz-core/src/types/RosDatatypes";
 
@@ -26,9 +24,8 @@ export type DataSourceInfo = {|
 |};
 
 export default function useDataSourceInfo(): DataSourceInfo {
-  const { topicPrefix = "" } = useContext(PanelContext) || {};
   const datatypes = useMessagePipeline(useCallback(({ datatypes }) => datatypes, []));
-  const prefixedTopics = useMessagePipeline(useCallback(({ sortedTopics }) => sortedTopics, []));
+  const topics = useMessagePipeline(useCallback(({ sortedTopics }) => sortedTopics, []));
   const startTime = useMessagePipeline(
     useCallback(({ playerState: { activeData } }) => activeData && activeData.startTime, [])
   );
@@ -37,18 +34,8 @@ export default function useDataSourceInfo(): DataSourceInfo {
   );
   const capabilities = useMessagePipeline(useCallback(({ playerState: { capabilities } }) => capabilities, []));
 
-  const unprefixedTopics = useMemo(
-    () =>
-      topicPrefix
-        ? filterMap(prefixedTopics, ({ name, datatype }) =>
-            name.startsWith(topicPrefix) ? { name: name.slice(topicPrefix.length), datatype } : null
-          )
-        : prefixedTopics,
-    [topicPrefix, prefixedTopics]
-  );
-
   return {
-    topics: unprefixedTopics,
+    topics,
     datatypes,
     capabilities,
     startTime,

packages/webviz-core/src/PanelAPI/useDataSourceInfo.test.js

@@ -11,7 +11,6 @@ import * as React from "react";
 
 import * as PanelAPI from ".";
 import { MockMessagePipelineProvider } from "webviz-core/src/components/MessagePipeline";
-import { MockPanelContextProvider } from "webviz-core/src/components/Panel";
 
 describe("useDataSourceInfo", () => {
   const topics = [{ name: "/foo", datatype: "Foo" }];
@@ -115,35 +114,4 @@ describe("useDataSourceInfo", () => {
 
     root.unmount();
   });
-
-  it("removes PanelContext.topicPrefix from topics", () => {
-    const Test = createTest();
-    const root = mount(
-      <MockPanelContextProvider topicPrefix={"/foo"}>
-        <MockMessagePipelineProvider
-          topics={[
-            { name: "/foo/abc", datatype: "FooAbc" },
-            { name: "/foo123", datatype: "Foo123" },
-            { name: "/bar/xyz", datatype: "BarXyz" },
-          ]}>
-          <Test />
-        </MockMessagePipelineProvider>
-      </MockPanelContextProvider>
-    );
-    expect(Test.renderFn.mock.calls).toEqual([
-      [
-        {
-          topics: [
-            { name: "123", datatype: "Foo123" }, // FIXME: prefixes probably shouldn't be stripped this way
-            { name: "/abc", datatype: "FooAbc" },
-          ],
-          datatypes: {},
-          capabilities: [],
-          startTime: { sec: 100, nsec: 0 },
-          endTime: { sec: 100, nsec: 0 },
-        },
-      ],
-    ]);
-    root.unmount();
-  });
 });

packages/webviz-core/src/components/AppMenu/index.js

@@ -61,7 +61,7 @@ class UnconnectedAppMenu extends Component<Props, State> {
       newPanels = id;
     }
     if (panelConfig) {
-      savePanelConfig({ id, config: panelConfig });
+      savePanelConfig({ id, config: panelConfig, defaultConfig: {} });
     }
     changePanelLayout(newPanels);
     window.ga("send", "event", "Panel", "Select", panelType);

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

@@ -290,6 +290,7 @@ export default class Autocomplete extends PureComponent<AutocompleteProps, Autoc
             <div
               key={itemValue}
               data-highlighted={isHighlighted}
+              data-test-auto-item
               className={cx(styles.autocompleteItem, {
                 [styles.highlighted]: isHighlighted,
                 [styles.selected]: selectedItemValue != null && itemValue === selectedItemValue,

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

@@ -17,29 +17,40 @@ import { colors } from "webviz-core/src/util/colors";
 export const SCheckbox = styled.div`
   display: flex;
   align-items: center;
-  flex-direction: ${(props) => (props.isVertical ? "column" : "row")};
-  align-items: ${(props) => (props.isVertical ? "flex-start" : "center")};
+  flex-direction: ${(props) => (props.labelDirection === "top" ? "column" : "row")};
+  align-items: ${(props) => (props.labelDirection === "top" ? "flex-start" : "center")};
   color: ${(props) => (props.disabled ? colors.GRAY : colors.LIGHT1)};
   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
 `;
 
 export const SLabel = styled.label`
-  margin: 6px;
-  margin: ${(props) => (props.isVertical ? "6px 6px 6px 0" : "6px")};
-  color: ${(props) => (props.disabled || props.isVertical ? colors.GRAY : colors.LIGHT1)};
+  margin: ${(props) => (props.labelDirection === "top" ? "6px 6px 6px 0" : "6px")};
+  color: ${(props) => (props.disabled || props.labelDirection === "top" ? colors.GRAY : colors.LIGHT1)};
 `;
 
 export type Props = {
   checked: boolean,
   disabled?: boolean,
   label: string,
+  labelStyle?: { [string]: string | number },
+  labelDirection?: "top" | "left" | "right",
   tooltip?: string,
   onChange: (newChecked: boolean) => void,
-  isVertical?: boolean,
   style?: { [string]: string | number },
+  dataTest?: string,
 };
 
-export default function Checkbox({ label, checked, tooltip, onChange, disabled, isVertical, style = {} }: Props) {
+export default function Checkbox({
+  label,
+  labelStyle,
+  labelDirection = "right",
+  checked,
+  tooltip,
+  onChange,
+  disabled,
+  style = {},
+  dataTest,
+}: Props) {
   const Component = checked ? CheckboxMarkedIcon : CheckboxBlankOutlineIcon;
   const onClick = React.useCallback(
     () => {
@@ -50,17 +61,27 @@ export default function Checkbox({ label, checked, tooltip, onChange, disabled,
     [checked, disabled, onChange]
   );
 
+  const styledLabel = (
+    <SLabel labelDirection={labelDirection} disabled={disabled} style={labelStyle}>
+      {label}
+    </SLabel>
+  );
+
+  if (labelDirection === "top") {
+    return (
+      <SCheckbox disabled={disabled} labelDirection={labelDirection} style={style}>
+        {styledLabel}
+      </SCheckbox>
+    );
+  }
+
   return (
-    <SCheckbox disabled={disabled} isVertical={isVertical} style={style}>
-      {isVertical && (
-        <SLabel isVertical={isVertical} disabled={disabled}>
-          {label}
-        </SLabel>
-      )}
-      <Icon small tooltip={tooltip} onClick={onClick}>
+    <SCheckbox disabled={disabled} labelDirection={labelDirection} style={style}>
+      {labelDirection === "left" && styledLabel}
+      <Icon small tooltip={tooltip} onClick={onClick} dataTest={dataTest}>
         <Component />
       </Icon>
-      {!isVertical && <SLabel disabled={disabled}>{label}</SLabel>}
+      {labelDirection === "right" && styledLabel}
     </SCheckbox>
   );
 }

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

@@ -6,13 +6,13 @@
 //  found in the LICENSE file in the root directory of this source tree.
 //  You may not use this file except in compliance with the License.
 
+import * as Sentry from "@sentry/browser";
 import * as React from "react";
 import styled from "styled-components";
 
 import Button from "webviz-core/src/components/Button";
 import Flex from "webviz-core/src/components/Flex";
 import PanelToolbar from "webviz-core/src/components/PanelToolbar";
-import sentry from "webviz-core/src/util/sentry";
 
 const Heading = styled.div`
   font-size: 1.2em;
@@ -42,7 +42,7 @@ export default class ErrorBoundary extends React.Component<{ children: React.Nod
   };
 
   componentDidCatch(error: Error, errorInfo: any) {
-    sentry.captureException(error, {
+    Sentry.captureException(error, {
       extra: errorInfo,
     });
     this.setState({ error, errorInfo });

packages/webviz-core/src/components/MessageHistory/MessageHistoryInput.js

@@ -292,7 +292,7 @@ class MessageHistoryInputUnconnected extends React.PureComponent<MessageHistoryI
     const noHeaderStamp = topic && topicHasNoHeaderStamp(topic, datatypes);
 
     return (
-      <div style={{ display: "flex", flex: "1 1 auto", minWidth: 0 }}>
+      <div style={{ display: "flex", flex: "1 1 auto", minWidth: 0, justifyContent: "space-between" }}>
         <Autocomplete
           items={autocompleteItems}
           filterText={autocompleteFilterText}
@@ -314,7 +314,7 @@ class MessageHistoryInputUnconnected extends React.PureComponent<MessageHistoryI
               onChange={this._onTimestampMethodChange}
               value={timestampMethod}
               toggleComponent={
-                <Tooltip contents="Timestamp used for x-axis" placement="right">
+                <Tooltip contents="Timestamp used for x-axis" placement="top">
                   <div
                     className={cx({
                       [styles.timestampMethodDropdown]: true,