search

cruise-automation / webviz

web-based visualization libraries
https://webviz.io/
Apache License 2.0
2.08k stars 412 forks source link

[bug-report] Unable to split/close panels using the gearbox UI #506

Closed shivaghose closed 4 years ago

shivaghose commented 4 years ago

Hi folks!

I think a bug was introduced recently: I'm unable to split panels or remove panels. I found this error reproduces on the latest version of Google Chrome (Version 85.0.4183.83 on Mac OS, and 85.0.4183.102 on Ubuntu) as well as Safari and persists if I try it out in incognito mode. For what it's worth, I am still able to split panels using the `/~ shortcut (although that doesn't let me close panels).

Steps to reproduce this:

  1. Go to: https://webviz.io/app/?demo=&seek-to=1490150279727

  2. Click on the split */ Remove panel buttons (it doesn't do anything).

image

Please let me know if I should file a bug report using some other mechanism.

As always, thanks for the awesome work you're doing!

Best, -Shiva

vidaaudrey commented 4 years ago

Hi Shiva, thanks for reporting! Definitely a bug at our side and remove panel is also not working. Will working on fixing it now! As a temporary workaround, you can drag the panel to the place and it'll auto split for you: panel

shivaghose commented 4 years ago

Thanks, Audrey! Cheers!

vidaaudrey commented 4 years ago

@shivaghose it's working now. Let us know if you still see issues!

shivaghose commented 4 years ago

Yup, can confirm it works. Thank you very much! :party-parrot:

@vidaaudrey Also FYI (not sure if this is intentional): the point clouds aren't colored by default anymore in the webviz demo (they're usually colored with the rainbow setting, I believe).

vidaaudrey commented 4 years ago

Yeah, the settings got cleared and wasn't intentional. I just played around and this default layout looks good (let me know if you think otherwise). Will update the default layout tomorrow. 

{
  "layout": {
    "direction": "row",
    "first": "3D Panel!2ccsjwx",
    "second": {
      "direction": "column",
      "second": {
        "first": "RawMessages!48wvnv5",
        "second": "Plot!ry117m",
        "direction": "row",
        "splitPercentage": 52.15845606907058
      },
      "first": {
        "first": "ImageViewPanel!vn68db",
        "second": {
          "direction": "row",
          "second": "DiagnosticStatusPanel!49o9wd0",
          "first": "DiagnosticSummary!3f5wist",
          "splitPercentage": 36.61757237176232
        },
        "direction": "column",
        "splitPercentage": 50.889679715302485
      },
      "splitPercentage": 67.01112877583466
    },
    "splitPercentage": 51.091924834941594
  },
  "savedProps": {
    "ImageViewPanel!vn68db": {
      "cameraTopic": "/image_raw",
      "enabledMarkerTopics": [],
      "customMarkerTopicOptions": [],
      "scale": 0.2,
      "transformMarkers": true,
      "synchronize": false,
      "mode": "fit",
      "zoomPercentage": 46.714285714285715,
      "offset": [
        0,
        0.9114285714285728
      ],
      "enabledMarkerNames": []
    },
    "DiagnosticStatusPanel!49o9wd0": {
      "topicToRender": "/diagnostics",
      "selectedHardwareId": "Velodyne HDL-32E",
      "selectedName": "velodyne_nodelet_manager: velodyne_packets topic status"
    },
    "RawMessages!48wvnv5": {
      "topicPath": "/velodyne_points",
      "diffTopicPath": "",
      "diffMethod": "custom",
      "diffEnabled": false,
      "showFullMessageForDiff": false,
      "topicName": "/radar/tracks",
      "diffTopicName": ""
    },
    "Plot!ry117m": {
      "paths": [
        {
          "value": "/radar/tracks.tracks[:].rate",
          "enabled": true,
          "timestampMethod": "receiveTime"
        },
        {
          "value": "/radar/tracks.tracks[:].accel",
          "enabled": true,
          "timestampMethod": "receiveTime"
        }
      ],
      "minYValue": "-10",
      "maxYValue": "10",
      "showLegend": true,
      "xAxisVal": "index"
    },
    "3D Panel!2ccsjwx": {
      "checkedKeys": [
        "name:Topics",
        "t:/velodyne_points"
      ],
      "expandedKeys": [],
      "followTf": "velodyne",
      "cameraState": {
        "targetOffset": [
          0.5484836711840236,
          8.23880767949497,
          0
        ],
        "distance": 75,
        "perspective": true,
        "phi": 0.7853981633974483,
        "thetaOffset": 0.02499899999999616,
        "fovy": 0.7853981633974483,
        "near": 0.01,
        "far": 5000
      },
      "modifiedNamespaceTopics": [],
      "pinTopics": false,
      "settingsByKey": {
        "t:/velodyne_points": {
          "colorMode": {
            "mode": "rainbow",
            "colorField": "intensity"
          }
        }
      },
      "autoSyncCameraState": false,
      "autoTextBackgroundColor": true,
      "followOrientation": false
    }
  },
  "globalVariables": {},
  "userNodes": {},
  "linkedGlobalVariables": [],
  "playbackConfig": {
    "speed": 1,
    "messageOrder": "receiveTime"
  }
}
shivaghose commented 4 years ago

I'm partial to the colored point clouds (it does a really good job of highlighting various objects in the FOV):

{
  "layout": {
    "direction": "row",
    "first": "3D Panel!2ccsjwx",
    "second": {
      "direction": "column",
      "second": {
        "first": "RawMessages!48wvnv5",
        "second": "Plot!ry117m",
        "direction": "row",
        "splitPercentage": 52.15845606907058
      },
      "first": {
        "first": "ImageViewPanel!vn68db",
        "second": {
          "direction": "row",
          "second": "DiagnosticStatusPanel!49o9wd0",
          "first": "DiagnosticSummary!3f5wist",
          "splitPercentage": 36.61757237176232
        },
        "direction": "column",
        "splitPercentage": 50.889679715302485
      },
      "splitPercentage": 67.01112877583466
    },
    "splitPercentage": 51.091924834941594
  },
  "savedProps": {
    "ImageViewPanel!vn68db": {
      "cameraTopic": "/image_raw",
      "enabledMarkerTopics": [],
      "customMarkerTopicOptions": [],
      "scale": 0.2,
      "transformMarkers": true,
      "synchronize": false,
      "mode": "fit",
      "zoomPercentage": 84.5703125,
      "offset": [
        32.0078125,
        -0.15624999999994316
      ],
      "enabledMarkerNames": []
    },
    "DiagnosticStatusPanel!49o9wd0": {
      "topicToRender": "/diagnostics",
      "selectedHardwareId": "Velodyne HDL-32E",
      "selectedName": "velodyne_nodelet_manager: velodyne_packets topic status"
    },
    "RawMessages!48wvnv5": {
      "topicPath": "/velodyne_points",
      "diffTopicPath": "",
      "diffMethod": "custom",
      "diffEnabled": false,
      "showFullMessageForDiff": false,
      "topicName": "/radar/tracks",
      "diffTopicName": ""
    },
    "Plot!ry117m": {
      "paths": [
        {
          "value": "/radar/tracks.tracks[:].rate",
          "enabled": true,
          "timestampMethod": "receiveTime"
        },
        {
          "value": "/radar/tracks.tracks[:].accel",
          "enabled": true,
          "timestampMethod": "receiveTime"
        }
      ],
      "minYValue": "-10",
      "maxYValue": "10",
      "showLegend": true,
      "xAxisVal": "index"
    },
    "3D Panel!2ccsjwx": {
      "checkedKeys": [
        "name:Topics",
        "t:/velodyne_points"
      ],
      "expandedKeys": [
        "name:root",
        "t:/tf",
        "name:Topics",
        "t:/velodyne_points",
        "t:/radar/points"
      ],
      "followTf": "velodyne",
      "cameraState": {
        "targetOffset": [
          0,
          8,
          0
        ],
        "distance": 75,
        "perspective": true,
        "phi": 0.5977515644920507,
        "thetaOffset": -0.05828360533946886,
        "fovy": 0.7853981633974483,
        "near": 0.01,
        "far": 5000
      },
      "modifiedNamespaceTopics": [],
      "pinTopics": false,
      "settingsByKey": {
        "t:/velodyne_points": {
          "colorMode": {
            "mode": "rainbow",
            "colorField": "ring"
          }
        }
      },
      "autoSyncCameraState": false,
      "autoTextBackgroundColor": true,
      "followOrientation": false
    }
  },
  "globalVariables": {},
  "userNodes": {},
  "linkedGlobalVariables": [],
  "playbackConfig": {
    "speed": 1,
    "messageOrder": "receiveTime"
  },
  "version": 10
}

But other than that, LGTM! :shipit:

shivaghose commented 4 years ago

Also I'm a big fan of the single 3D panel on the left as opposed to two panels like in the older default config.

vidaaudrey commented 4 years ago

Updated with your suggestion :)

shivaghose commented 4 years ago

🍻 😄