From 1286f904448d18ae38f2d8678b6d39ec01194146 Mon Sep 17 00:00:00 2001
From: Joost Wooning <jwooning@gmail.com>
Date: Tue, 15 Feb 2022 14:29:16 +0100
Subject: [PATCH] fix message list scrollbar

---
 src/components/Meta.js           | 62 +++++++++++++++-----------------
 src/components/Meta/meta.scss    |  5 ++-
 src/components/RouteVideoSync.js | 25 -------------
 src/models/can/dbc.js            |  3 ++
 4 files changed, 34 insertions(+), 61 deletions(-)

diff --git a/src/components/Meta.js b/src/components/Meta.js
index 3a8d7e4..b860136 100644
--- a/src/components/Meta.js
+++ b/src/components/Meta.js
@@ -384,42 +384,38 @@ export default class Meta extends Component {
             </div>
           </div>
         </div>
-        <div className="cabana-meta-messages">
-          <div className="cabana-meta-messages-header">
-            <div
-              style={{
-                display: 'inline-block',
-                float: 'right'
-              }}
-            >
-              <h5 className="t-capline">
-                Show log events
-                <input
-                  type="checkbox"
-                  onChange={this.toggleShowLogEvents}
-                  checked={!!this.state.showLogEvents}
-                />
-              </h5>
-            </div>
-            <h5 className="t-capline">Available messages</h5>
+        <div className="cabana-meta-messages-header">
+          <div
+            style={{
+              display: 'inline-block',
+              float: 'right'
+            }}
+          >
+            <h5 className="t-capline">
+              Show log events
+              <input
+                type="checkbox"
+                onChange={this.toggleShowLogEvents}
+                checked={!!this.state.showLogEvents}
+              />
+            </h5>
           </div>
-          <div className="cabana-meta-messages-window">
-            <div className="cabana-meta-messages-filter">
-              <div className="form-field form-field--small">
-                <input
-                  type="text"
-                  value={this.state.filterText}
-                  onFocus={this.onFilterFocus}
-                  onBlur={this.onFilterUnfocus}
-                  onChange={this.onFilterChanged}
-                />
-              </div>
-            </div>
-            <div className="cabana-meta-messages-list">
-              {this.renderAvailableMessagesList()}
-            </div>
+          <h5 className="t-capline">Available messages</h5>
+        </div>
+        <div className="cabana-meta-messages-filter">
+          <div className="form-field form-field--small">
+            <input
+              type="text"
+              value={this.state.filterText}
+              onFocus={this.onFilterFocus}
+              onBlur={this.onFilterUnfocus}
+              onChange={this.onFilterChanged}
+            />
           </div>
         </div>
+        <div className="cabana-meta-messages-list">
+          {this.renderAvailableMessagesList()}
+        </div>
       </div>
     );
   }
diff --git a/src/components/Meta/meta.scss b/src/components/Meta/meta.scss
index a852122..3813752 100644
--- a/src/components/Meta/meta.scss
+++ b/src/components/Meta/meta.scss
@@ -12,8 +12,7 @@
   display: flex;
   flex: 0.5;
   flex-direction: column;
-  max-height: 100vh;
-  overflow-y: scroll;
+  height: 100%;
   &-header {
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     flex-direction: row;
@@ -79,7 +78,7 @@
       padding: 11px;
     }
     &-list {
-      height: 100%;
+      padding: 8px;
       overflow-x: hidden;
       overflow-y: scroll;
       &-item {
diff --git a/src/components/RouteVideoSync.js b/src/components/RouteVideoSync.js
index 4508411..c18876f 100644
--- a/src/components/RouteVideoSync.js
+++ b/src/components/RouteVideoSync.js
@@ -47,7 +47,6 @@ export default class RouteVideoSync extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      shouldShowJpeg: true,
       isLoading: true,
       videoElement: null,
       source: null,
@@ -114,14 +113,12 @@ export default class RouteVideoSync extends Component {
 
   onLoadStart() {
     this.setState({
-      shouldShowJpeg: true,
       isLoading: true
     });
   }
 
   onLoadEnd() {
     this.setState({
-      shouldShowJpeg: false,
       isLoading: false
     });
   }
@@ -174,24 +171,9 @@ export default class RouteVideoSync extends Component {
     return ratio * this.videoLength() + this.startTime();
   }
 
-  nearestFrameUrl() {
-    const { thumbnails } = this.props;
-    if (!this.seekTime) {
-      return '';
-    }
-    for (let i = 0, l = thumbnails.length; i < l; ++i) {
-      if (Math.abs(thumbnails[i].monoTime - this.seekTime) < 5) {
-        const data = btoa(String.fromCharCode(...thumbnails[i].data));
-        return `data:image/jpeg;base64,${data}`;
-      }
-    }
-    return '';
-  }
-
   render() {
     const {
       isLoading,
-      shouldShowJpeg,
       videoElement,
     } = this.state;
     const {
@@ -207,13 +189,6 @@ export default class RouteVideoSync extends Component {
     return (
       <div className="cabana-explorer-visuals-camera">
         {isLoading ? this.loadingOverlay() : null}
-        {shouldShowJpeg ? (
-          <img
-            src={this.nearestFrameUrl()}
-            className={css(Styles.img)}
-            alt={`Camera preview at t = ${Math.round(userSeekTime)}`}
-          />
-        ) : null}
         {this.state.source && <HLS
           className={css(Styles.hls)}
           source={this.state.source}
diff --git a/src/models/can/dbc.js b/src/models/can/dbc.js
index 5ad5820..cd225b0 100644
--- a/src/models/can/dbc.js
+++ b/src/models/can/dbc.js
@@ -621,6 +621,9 @@ export default class DBC {
 
     const signalValuesByName = {};
     Object.values(frame.signals).forEach((signalSpec) => {
+      if (isNaN(signalSpec.startBit)) {
+        return;
+      }
       let value;
       if (signalSpec.size > 32) {
         value = this.valueForInt64Signal(signalSpec, hexData);