serial monitor style and perfo

arduino · AlbyIanna · Oct 5, 2021 · Sep 28, 2021 · Sep 29, 2021 · Sep 29, 2021
commit 8c91be95ac07090649ac8ff7dbb8252e93862eeb
diff --git a/arduino-ide-extension/src/browser/monitor/monitor-utils.ts b/arduino-ide-extension/src/browser/monitor/monitor-utils.ts
@@ -7,17 +7,25 @@ export function messageToLines(
 ): [Line[], number] {
  const linesToAdd: Line[] = prevLines.length
    ? [prevLines[prevLines.length - 1]]
-    : [{ message: '' }];
+    : [{ message: '', lineLen: 0 }];
  let charCount = 0;

  for (const message of messages) {
-    charCount += message.length;
+    const messageLen = message.length;
+    charCount += messageLen;
    const lastLine = linesToAdd[linesToAdd.length - 1];

+    // if the previous messages ends with "separator" add a new line
    if (lastLine.message.charAt(lastLine.message.length - 1) === separator) {
-      linesToAdd.push({ message, timestamp: new Date() });
+      linesToAdd.push({
+        message,
+        timestamp: new Date(),
+        lineLen: messageLen,
+      });
    } else {
+      // concatenate to the last line
      linesToAdd[linesToAdd.length - 1].message += message;
+      linesToAdd[linesToAdd.length - 1].lineLen += messageLen;
      if (!linesToAdd[linesToAdd.length - 1].timestamp) {
        linesToAdd[linesToAdd.length - 1].timestamp = new Date();
      }
@@ -33,16 +41,26 @@ export function truncateLines(
  charCount: number
 ): [Line[], number] {
  let charsToDelete = charCount - SerialMonitorOutput.MAX_CHARACTERS;
+  let lineIndex = 0;
  while (charsToDelete > 0) {
-    const firstLineLength = lines[0]?.message?.length;
+    const firstLineLength = lines[lineIndex]?.lineLen;
+
+    if (charsToDelete >= firstLineLength) {
+      // every time a full line to delete is found, move the index.
+      lineIndex++;
+      charsToDelete -= firstLineLength;
+      charCount -= firstLineLength;
+      continue;
+    }
+
+    // delete all previous lines
+    lines.splice(0, lineIndex);
+
    const newFirstLine = lines[0]?.message?.substring(charsToDelete);
    const deletedCharsCount = firstLineLength - newFirstLine.length;
    charCount -= deletedCharsCount;
    charsToDelete -= deletedCharsCount;
    lines[0].message = newFirstLine;
-    if (!newFirstLine?.length) {
-      lines.shift();
-    }
  }
  return [lines, charCount];
 }
diff --git a/arduino-ide-extension/src/browser/monitor/serial-monitor-send-output.tsx b/arduino-ide-extension/src/browser/monitor/serial-monitor-send-output.tsx
@@ -8,7 +8,7 @@ import { MonitorConnection } from './monitor-connection';
 import dateFormat = require('dateformat');
 import { messageToLines, truncateLines } from './monitor-utils';

-export type Line = { message: string; timestamp?: Date };
+export type Line = { message: string; timestamp?: Date; lineLen: number };

 export class SerialMonitorOutput extends React.Component<
  SerialMonitorOutput.Props,
@@ -17,11 +17,12 @@ export class SerialMonitorOutput extends React.Component<
  /**
   * Do not touch it. It is used to be able to "follow" the serial monitor log.
   */
-  protected anchor: HTMLElement | null;
  protected toDisposeBeforeUnmount = new DisposableCollection();
+  private listRef: React.RefObject<any>;

  constructor(props: Readonly<SerialMonitorOutput.Props>) {
    super(props);
+    this.listRef = React.createRef();
    this.state = {
      lines: [],
      timestamp: this.props.monitorModel.timestamp,
@@ -35,7 +36,7 @@ export class SerialMonitorOutput extends React.Component<
        <AutoSizer>
          {({ height, width }) => (
            <List
-              className="List"
+              className="serial-monitor-messages"
              height={height}
              itemData={
                {
@@ -46,22 +47,13 @@ export class SerialMonitorOutput extends React.Component<
              itemCount={this.state.lines.length}
              itemSize={20}
              width={width}
+              ref={this.listRef}
+              onItemsRendered={this.scrollToBottom}
            >
              {Row}
            </List>
          )}
        </AutoSizer>
-        {/* <div style={{ whiteSpace: 'pre', fontFamily: 'monospace' }}>
-          {this.state.lines.map((line, i) => (
-            <MonitorTextLine text={line} key={i} />
-          ))}
-        </div> */}
-        <div
-          style={{ float: 'left', clear: 'both' }}
-          ref={(element) => {
-            this.anchor = element;
-          }}
-        />
      </React.Fragment>
    );
  }
@@ -94,25 +86,23 @@ export class SerialMonitorOutput extends React.Component<
          const { timestamp } = this.props.monitorModel;
          this.setState({ timestamp });
        }
+        if (property === 'autoscroll') {
+          this.scrollToBottom();
+        }
      }),
    ]);
  }

-  componentDidUpdate(): void {
-    this.scrollToBottom();
-  }
-
  componentWillUnmount(): void {
    // TODO: "Your preferred browser's local storage is almost full." Discard `content` before saving layout?
    this.toDisposeBeforeUnmount.dispose();
  }

-  protected scrollToBottom(): void {
-    if (this.props.monitorModel.autoscroll && this.anchor) {
-      this.anchor.scrollIntoView();
-      // this.listRef.current.scrollToItem(this.state.lines.length);
+  scrollToBottom = ((): void => {
+    if (this.listRef.current && this.props.monitorModel.autoscroll) {
+      this.listRef.current.scrollToItem(this.state.lines.length, 'end');
    }
-  }
+  }).bind(this);
 }

 const Row = ({
@@ -129,10 +119,13 @@ const Row = ({
      `${dateFormat(data.lines[index].timestamp, 'H:M:ss.l')} -> `) ||
    '';
  return (
-    <div style={style}>
-      {timestamp}
-      {data.lines[index].message}
-    </div>
+    (data.lines[index].lineLen && (
+      <div style={style}>
+        {timestamp}
+        {data.lines[index].message}
+      </div>
+    )) ||
+    null
  );
 };


diff --git a/arduino-ide-extension/src/browser/style/monitor.css b/arduino-ide-extension/src/browser/style/monitor.css
@@ -9,6 +9,11 @@
    flex-direction: column;
 }

+.serial-monitor-messages {
+    white-space: 'pre';
+    font-family: monospace
+}
+
 .serial-monitor .head {
    display: flex;
    padding: 5px;