Graph display breaks when using zero dimension tensors

[raphCode]

Environment information (required)

--- check: autoidentify
INFO: diagnose_tensorboard.py version df7af2c6fc0e4c4a5b47aeae078bc7ad95777ffa

--- check: installed_packages
INFO: installed: tensorboard==2.12.0
WARNING: no installation among: ['tensorflow', 'tensorflow-gpu', 'tf-nightly', 'tf-nightly-2.0-preview', 'tf-nightly-gpu', 'tf-nightly-gpu-2.0-preview']
WARNING: no installation among: ['tensorflow-estimator', 'tensorflow-estimator-2.0-preview', 'tf-estimator-nightly']
INFO: installed: tensorboard-data-server==0.7.0

Issue description

Using Tensors with a zero dimension size breaks the tensorboard graph display and triggers an error in the browser js console.
Screenshots as well as pytorch code to reproduce can be found here: pytorch/pytorch#88707

I realize that applications outside of tensorflow do not have first-class support.
However, when reading the ProtoBuf specifications, zero dimension Tensors seem to be supported:

tensorboard/tensorboard/compat/proto/tensor_shape.proto

Lines 13 to 21 in 00eeb7a

	message TensorShapeProto {
	// One dimension of the tensor.
	message Dim {
	// Size of the tensor in that dimension.
	// This value must be >= -1, but values of -1 are reserved for "unknown"
	// shapes (values of -1 mean "unknown" dimension). Certain wrappers
	// that work with TensorShapeProto may fail at runtime when deserializing
	// a TensorShapeProto containing a dim value of -1.
	int64 size = 1;

In practice, the graph looses its edges when using a zero-dim tensor anywhere. On the left, the correct graph with non-zero tensor shapes:

Interestingly, using a negative number for the dimension size fixes the graph again, displaying a ? question mark for the respective dimension. So it seems the only problematic case is zero.
I wonder if this is a protobuf-related problem: Zero is the default value for a Dimension size and default values are omitted during serialization. This leads to the entire Dimension entry to be empty in the serialized representation. So maybe the js code expects something which is not there...?

When trying to render such a graph, an error is reported in the browser's js console.

Console error log

Reading graph pbtxt : 111 ms index.js:96897:20
Parsing graph.pbtxt : 1 ms index.js:96897:20
Normalizing names : 0 ms index.js:96816:19
Building the data structure : 1 ms index.js:96816:19
Adding nodes : 1 ms index.js:96816:19
Detect series : 0 ms index.js:96816:19
Adding edges : 0 ms index.js:96816:19
new tf_graph_render.Hierarchy : 1 ms index.js:96816:19
tf-graph-scene (layout): : 6 ms index.js:96816:19
tf-graph-scene (build scene): : 7 ms index.js:96816:19
Finding similar subgraphs : 5 ms index.js:96816:19
Uncaught TypeError: n is null
    k_t index.js:77183
    Lle index.js:99857
    Bcr index.js:99922
    Hcr index.js:99936
    i index.js:79042
    a index.js:78858
    o index.js:78843
    _Y index.js:78741
    $yt index.js:78749
    requestAnimationFrame index.js:2089
    requestAnimationFrame index.js:2087
    gY index.js:78770
    restart index.js:78727
    A_ index.js:78735
    Ewe index.js:78839
    Gm index.js:78806
    D1t index.js:79373
    Hcr index.js:99935
    kle index.js:99831
    L_t index.js:77144
    kle index.js:99830
    rct index.js:100513
    _build index.js:101602
    Rd index.js:96814
    _build index.js:101601
    _renderHierarchyChanged index.js:101642
    wG index.js:57664
    YM index.js:57346
    _propertiesChanged index.js:57925
    _flushProperties index.js:57016
    __enableOrFlushClients index.js:57899
    _flushClients index.js:57891
    _propertiesChanged index.js:57923
    _flushProperties index.js:57016
    _invalidateProperties index.js:57883
    _setProperty index.js:57880
    <anonymous> index.js:58035
    _buildRenderHierarchy index.js:101979
    _buildNewRenderHierarchy index.js:101923
    wG index.js:57664
    YM index.js:57346
    _propertiesChanged index.js:57925
    _flushProperties index.js:57016
    __enableOrFlushClients index.js:57899
    _flushClients index.js:57891
    _propertiesChanged index.js:57923
    _flushProperties index.js:57016
    __enableOrFlushClients index.js:57899
    _flushClients index.js:57891
    _propertiesChanged index.js:57923
    _flushProperties index.js:57016
    _invalidateProperties index.js:57883
    $1e index.js:57376
    _propertiesChanged index.js:57926
    _flushProperties index.js:57016
    _invalidateProperties index.js:57883
    _setProperty index.js:57880
    <anonymous> index.js:58035
    _fetchAndConstructHierarchicalGraph index.js:107086
    invoke index.js:150770
    run index.js:150608
    Vr index.js:151341
    invokeTask index.js:150787
    runTask index.js:150644
    Hn index.js:150901
    invokeTask index.js:150835
    invoke index.js:150825
    0 index.js:152477
    setTimeout handler*me index.js:152479
    scheduleTask index.js:150779
    scheduleTask index.js:150666
    scheduleMacroTask index.js:150680
    h index.js:151017
    X index.js:152501
    re index.js:151154
    ev index.js:96874
    ct index.js:151363
    ev index.js:96872
    xH index.js:97913
    invoke index.js:150770
    run index.js:150608
    Vr index.js:151341
    invokeTask index.js:150787
    runTask index.js:150644
    Hn index.js:150901
    invokeTask index.js:150835
    invoke index.js:150825
    0 index.js:152477
    setTimeout handler*me index.js:152479
    scheduleTask index.js:150779
    scheduleTask index.js:150666
    scheduleMacroTask index.js:150680
    h index.js:151017
    X index.js:152501
    re index.js:151154
    ev index.js:96874
    ct index.js:151363
    ev index.js:96872
index.js:77183:25

I have attached the problematic event file:
event.zip

[groszewn]

Thanks for reporting, I've opened #6420 which I've verified fixes the issue locally.

[raphCode]

Thank you so much!

This was a longstanding issue for me causing quite a bit of pain, so I am very happy to see it resolved so quickly!