enwaytech · elgohr · Oct 7, 2019 · Oct 8, 2019 · Oct 17, 2019 · Oct 29, 2019
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -25,7 +25,9 @@ jobs:
       - run: .circleci/find-screenshots-compare-commit.sh
       - run: echo $REG_SUIT_EXPECTED_KEY
 
-      - run: docker run -v `pwd`:`pwd` -w `pwd` -it --rm -e CI -e CIRCLE_SHA1 -e REG_SUIT_EXPECTED_KEY -e AWS_ACCESS_KEY_ID -e AWS_SECRET_ACCESS_KEY -e AWS_DEFAULT_REGION cruise/webviz-ci:0.0.8 npm run ci
+      - run:
+          command: docker run -v `pwd`:`pwd` -w `pwd` -it --rm -e CI -e CIRCLE_SHA1 -e REG_SUIT_EXPECTED_KEY -e AWS_ACCESS_KEY_ID -e AWS_SECRET_ACCESS_KEY -e AWS_DEFAULT_REGION cruise/webviz-ci:0.0.8 npm run ci
+          no_output_timeout: 30m
 
       - save_cache:
           paths: ["node_modules"]

diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,11 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/.flowconfig b/.flowconfig
@@ -12,6 +12,7 @@ dist
 emoji=true
 esproposal.class_static_fields=enable
 esproposal.class_instance_fields=enable
+esproposal.optional_chaining=enable
 # Cheap workaround to make flow typechecking work across packages in the monorepo
 module.system.node.resolve_dirname=node_modules
 module.system.node.resolve_dirname=./packages

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -0,0 +1,31 @@
+on: [push]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x]
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - name: npm bootstrap & build
+      run: |
+        npm run bootstrap
+        npm run build --if-present
+        #npm run docs (runs webserver)
+      env:
+        CI: true
+    - uses: elgohr/Publish-Docker-Github-Action@v5
+      with:
+        name: cruise-automation/webviz/webwiz:latest
+        registry: docker.pkg.github.com
+        dockerfile: Dockerfile
+        username: warpoe
+        password: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,13 +1,13 @@
 {
   "editor.formatOnSave": true,
-  "eslint.autoFixOnSave": true,
   "flow.useNPMPackagedFlow": true,
   "javascript.validate.enable": false,
   "typescript.validate.enable": false,
   "files.associations": {
     "*.mdx": "markdown"
   },
   "editor.codeActionsOnSave": {
-    "source.organizeImports": false
+    "source.organizeImports": false,
+    "source.fixAll.eslint": true
   }
 }
diff --git a/README.md b/README.md
@@ -1,12 +1,12 @@
 # [Webviz](https://webviz.io/) [![CircleCI](https://circleci.com/gh/cruise-automation/webviz.svg?style=svg)](https://circleci.com/gh/cruise-automation/webviz)
 
-**Drag and drop your own bag files into [Webviz](https://webviz.io/try/) to explore your robotics data.**
+**Drag and drop your own bag files into [Webviz](https://webviz.io/app/) to explore your robotics data, or connect to a live robot or simulation using the [rosbridge_server](http://wiki.ros.org/rosbridge_suite/Tutorials/RunningRosbridge).**
 
-**View a demo of Webviz in action [here](https://webviz.io/try/?demo).**
+**View a demo of Webviz in action [here](https://webviz.io/app/?demo).**
 
 **Webviz** is a web-based application for playback and visualization of [ROS](http://www.ros.org/) [bag files](http://wiki.ros.org/Bags). This repository also contains some libraries that can be used independently to build web-based visualization tools.
 
-- **webviz-core** ([homepage](https://webviz.io/), [tool](https://webviz.io/try), [github](https://github.com/cruise-automation/webviz/tree/master/packages/webviz-core)): A tool to inspect [ROS bags](http://wiki.ros.org/ROS/Tutorials/Recording%20and%20playing%20back%20data).
+- **webviz-core** ([homepage](https://webviz.io/), [tool](https://webviz.io/app), [github](https://github.com/cruise-automation/webviz/tree/master/packages/webviz-core)): A tool to inspect [ROS bags](http://wiki.ros.org/ROS/Tutorials/Recording%20and%20playing%20back%20data).
 - **regl-worldview** ([homepage](https://webviz.io/worldview/), [npm](https://www.npmjs.com/package/regl-worldview), [github](https://github.com/cruise-automation/webviz/tree/master/packages/regl-worldview)): React library for rendering 2D and 3D scenes using [regl](https://github.com/regl-project/regl).
 - **react-key-listener** ([npm](https://www.npmjs.com/package/react-key-listener), [github](https://github.com/cruise-automation/webviz/tree/master/packages/react-key-listener)): React component for handling keyboard events, without interfering with editable fields and buttons.
 - **@cruise-automation/hooks** ([npm](https://www.npmjs.com/package/@cruise-automation/hooks), [github](https://github.com/cruise-automation/webviz/tree/master/packages/@cruise-automation/hooks)): A list of resusable React hooks.
@@ -19,7 +19,7 @@ Please see the individual package READMEs for details on how to install and use
 
 - `npm run bootstrap` in the root directory to install dependencies.
 - `npm run build` to run a single build or `npm run watch` to watch and build.
-- `npm run docs` to run the docs app (e.g. go to http://localhost:8080/try to open Webviz). Requires `build` to be run first.
+- `npm run docs` to run the docs app (e.g. go to http://localhost:8080/app to open Webviz). Requires `build` to be run first.
 - `npm run storybook` to run storybook. Requires `build` to be run first.
 - `npm run screenshot-debug` to generate screenshots from stories.
 - `npm run lint` to run the linters (and `npm run lint:fix` to automatically fix issues).
@@ -35,3 +35,5 @@ If you have the right permissions, you can publish:
 ## Contributing
 
 PRs, bug reports, and feature requests are welcome! Please observe [CONTRIBUTING.md](CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) when making a contribution.
+
+Note that while it's possible to fork Webviz to make your own custom version, we'd encourage you to use webviz.io/app and propose generic solutions that everyone would benefit from. Cruise also still has its own fork of Webviz, but long term we'd like to move away from that. For examples of generic features, see the Node Playground panel, using generic RViz markers in the 3d panel, streaming in bags from any cloud service, loading layouts hosted on arbitrary URLs, and so on. We'd love your creative ideas for making Webviz widely useful!
diff --git a/babel.config.js b/babel.config.js
@@ -9,6 +9,8 @@ module.exports = {
   plugins: [
     "@babel/plugin-transform-modules-commonjs",
     "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-syntax-dynamic-import",
     ["@babel/plugin-proposal-object-rest-spread", { useBuiltIns: true }],
   ],

diff --git a/docs/public/app/favicon.ico b/docs/public/app/favicon.ico
diff --git a/docs/public/app/index.html b/docs/public/app/index.html
@@ -0,0 +1 @@
+../../../packages/webviz-core/public/index.html
diff --git a/docs/public/index.html b/docs/public/index.html
@@ -9,15 +9,24 @@
 <html lang="en">
 
 <head>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-82819136-10"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-82819136-10');
+    </script>
+
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
     <meta name="viewport" content="width=device-width, initial-scale = 1.0,
 maximum-scale=1.0, user-scalable=no" />
     <meta name="description" content="Visualizing robotics data in the browser">
-    <title>Webviz</title>
+    <title>webviz</title>
     <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono&display=swap" rel="stylesheet">
-    <meta property="og:title" content="Webviz" />
+    <meta property="og:title" content="webviz" />
     <meta property="og:description" content="Visualizing robotics data in the browser" />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://webviz.io" />
@@ -563,7 +572,7 @@
 <body>
     <div class="container-overflow">
         <header>
-            <a target="_blank" href="https://webviz.io/try/">Use Webviz</a>
+            <a target="_blank" href="app/">Use Webviz</a>
             <a target="_blank" href="https://github.com/cruise-automation/webviz">Github</a>
             <a target="_blank" href="https://getcruise.com/">Cruise</a>
         </header>
@@ -573,7 +582,7 @@
                 <p id="text-webviz">WEBVIZ</p>
                 <h1>Visualizing robotics data in the browser</h1>
                 <div style="width: 100%; display: flex">
-                    <a target="_blank" href="https://webviz.io/try/?demo">
+                    <a target="_blank" href="app/?demo">
                         <button>
                             View demo
                         </button>
@@ -595,7 +604,8 @@ <h2>
                 Cruise uses Webviz to visualize thousands of complex decisions our vehicles make–both on the road and in
                 simulation.
                 Drag and drop your own <a target="_blank" class="in-copy" href="http://wiki.ros.org/Bags">ROS bag
-                    files</a> into Webviz to get immediate visual insight into your robotics data.
+                files</a> into Webviz to get immediate visual insight into your robotics data. Or even connect to
+                a <a target="_blank" class="in-copy" href="http://wiki.ros.org/rosbridge_suite/Tutorials/RunningRosbridge">live robot or simulation</a>.
             </h2>
 
             <h2>
@@ -681,7 +691,7 @@ <h2>
                 Engineering Productivity team.
             </h2>
             <div style="width: 100%; justify-content: start; display: flex  ; max-width: 720px;">
-                <a target="_blank" href="https://webviz.io/try/?demo">
+                <a target="_blank" href="app/?demo">
                     <button>
                         View demo
                     </button>
@@ -690,7 +700,7 @@ <h2>
         </section>
 
         <footer>
-            <a target="_blank" href="https://webviz.io/try/">Use Webviz</a>
+            <a target="_blank" href="app/">Use Webviz</a>
             <a target="_blank" href="https://github.com/cruise-automation/webviz">Github</a>
             <a target="_blank" href="https://getcruise.com/">Cruise</a>
         </footer>

diff --git a/docs/public/try/index.html b/docs/public/try/index.html
diff --git a/docs/public/try/index.html b/docs/public/try/index.html
@@ -0,0 +1,23 @@
+<!--
+  Copyright (c) 2018-present, Cruise LLC
+
+  This source code is licensed under the Apache License, Version 2.0,
+  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.
+-->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <title>webviz</title>
+    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
+    <script>
+      window.location.href = "/app" + window.location.search;
+    </script>
+  </head>
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+  </body>
+</html>
diff --git a/docs/public/worldview/index.html b/docs/public/worldview/index.html
@@ -8,6 +8,15 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-82819136-10"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-82819136-10');
+    </script>
+
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />

diff --git a/docs/src/2.4.ManagingTheCamera.mdx b/docs/src/2.4.ManagingTheCamera.mdx
@@ -1,5 +1,5 @@
-import CodeSandboxEmbed from './jsx/utils/CodeSandboxEmbed.js';
-import { MoveCamea, FollowObject, FollowObjectOrientation } from './jsx/allLiveEditors'
+import CodeSandboxEmbed from "./jsx/utils/CodeSandboxEmbed.js";
+import { MoveCamera, FollowObject, FollowObjectOrientation } from "./jsx/allLiveEditors";
 
 # Managing the Camera
 
@@ -33,7 +33,7 @@ import duckModel from "common/fixtures/Duck.glb"; // Webpack magic: we actually
 
 To move the camera, we'll use a handy [useAnimationFrame](https://github.com/cruise-automation/webviz/tree/master/packages/%40cruise-automation/hooks) hook that accepts a callback which will be called at each browser repaint. In our case, whenever the callback is called, we'll increase a `count` state by 1, and use the `count` state to adjust the camera's `phi` and `thetaOffset`.
 
-<MoveCamea />
+<MoveCamera />
 
 Now the camera is moving around the scene, giving us a 360° view of the duck model!
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		../../../packages/webviz-core/public/index.html