Update packages/webviz-core from internal repo (cruise-automation#273)

Changelog: - Added a new "Flat" mode to the 3D panel topic picker. Now when playing multiple bags in the "Flat" mode, bag1 topics are grouped under `Bag` and bag2 topics are grouped under `Bag 2 /webviz_bag_2`. In the "Flat" mode, you can temporarily toggle the topic's visibility by clicking the eye icon next to the edit icon. This is the first step in the ongoing work to improve multi-bag comparison in the 3D panel. - Sped up local bag reading by decompressing bag chunks ahead of playback. - Added support for negative slices in the topic path syntax, e.g. to get the last element of an array. - Added the ability to plot numerical values in Diagnostics - Detail panel. - Added ability to pan, zoom and do auto zoom in imageView panel. - Clicking on stacked objects is now automatically turned on in the 3D panel when playback is paused. If there are multiple clicked objects, the object id will be displayed in the context menu if available. - Added ability to toggle visibility of Plot panel's legends. - Implemented a workaround to runaway disk usage due to a Chrome bug, which has been causing very slow Webviz start up times. If possible, please clear out your local instance of IndexedDB on Webviz. - Fixed image panel with synchronized markers not loading data when seeking, by increasing the amount of data we load when seeking. - Fixed a `Time should never move backwards` error when seeking. - Fixed negative numbers showing incorrect colors in the State Transitions panel. cruise-automation#271
enwaytech · Dec 31, 2019 · e8e4696 · e8e4696
1 parent c90c1da
commit e8e4696
Show file tree

Hide file tree

Showing 126 changed files with 5,926 additions and 2,503 deletions.
diff --git a/packages/webviz-core/package-lock.json b/packages/webviz-core/package-lock.json
diff --git a/packages/webviz-core/package.json b/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",

diff --git a/packages/webviz-core/src/PanelAPI/index.js b/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";
diff --git a/packages/webviz-core/src/PanelAPI/useDataSourceInfo.js b/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,

diff --git a/packages/webviz-core/src/PanelAPI/useDataSourceInfo.test.js b/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();
-  });
 });
diff --git a/packages/webviz-core/src/assets/Mark.svg b/packages/webviz-core/src/assets/Mark.svg
diff --git a/packages/webviz-core/src/components/AppMenu/index.js b/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);

diff --git a/packages/webviz-core/src/components/Autocomplete.js b/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,

diff --git a/packages/webviz-core/src/components/Checkbox.js b/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>
   );
 }
diff --git a/packages/webviz-core/src/components/ErrorBoundary.js b/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 });

diff --git a/packages/webviz-core/src/components/MessageHistory/MessageHistoryInput.js b/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,