javascript streamreader only displaying second chunk in #log-box.append

Question

I am struggling through learning JQuery/Javascript and have a web application using the chrome "experimental" web serial API. When I enter a command and get a response back, this string is broken into 2 pieces in a random place, usually in the first third:

<p0><iDCC-EX V-0.2.1 / MEGA / STANDARD_MOTOR_SHIELD G-9db6d36>

All the other return messages are shorter and also wrapped in "<" and ">" brackets.

In the code below. The log window only ever shows the second chunk, even in the "ChunkTransformer() routine that simultaneously displays it properly in the devtools console log.

How can I get all my return messages to appear as one string? It is ok if the chunks are split as separate return values by the brackets as long as they display in the log. I think the <p0> is not displaying because the log window thinks it is a special character. It would not even display here until I wrapped in in a code tag. So I think I have at least two issues.

async function connectServer() {
        try{         
            port = await navigator.serial.requestPort(); // prompt user to select device connected to a com port
            await port.open({ baudRate: 115200 });         // open the port at the proper supported baud rate

            // create a text encoder output stream and pipe the stream to port.writeable
            const encoder = new TextEncoderStream();
            outputDone = encoder.readable.pipeTo(port.writable);
            outputStream = encoder.writable;
            // send a CTRL-C and turn off the echo
            writeToStream('\x03', 'echo(false);');

            let decoder = new TextDecoderStream();
            inputDone = port.readable.pipeTo(decoder.writable);
            inputStream = decoder.readable
            // test why only getting the second chunk in the log
            .pipeThrough(new TransformStream(new ChunkTransformer()));
            
            // get a reader and start the non-blocking asynchronous read loop to read data from the stream.
            reader = inputStream.getReader();
            readLoop();
            return true;
        } catch (err) {
            console.log("User didn't select a port to connect to")
            return false;
        }
}

async function readLoop() {
    while (true) {
        const { value, done } = await reader.read();
        if (value) {
            displayLog(value);
        }
        if (done) {
            console.log('[readLoop] DONE'+done.toString());
            displayLog('[readLoop] DONE'+done.toString());
            reader.releaseLock();
            break;
        }
    }
}

class ChunkTransformer {
    transform(chunk, controller) {
        displayLog(chunk.toString()); // only shows last chunk!
        console.log('dumping the raw chunk', chunk); // shows all chunks
        controller.enqueue(chunk);
    }
}

function displayLog(data){
    $("#log-box").append("<br>"+data+"<br>");
    $("#log-box").animate({scrollTop: $("#log-box").prop("scrollHeight"), duration: 1}, "fast");
}

Answer 1

First Step: Modify the displayLog() function in one of the following ways

With Animate:

function displayLog(data){
  $("#log-box").append("<br>"+data+"<br>");
  $("#log-box").animate({scrollTop: $("#log-box").prop("scrollHeight")}, "fast");
}

Without Animate:

function displayLog(data){
    $("#log-box").append("<br>"+data+"<br>");
    $("#log-box").scrollTop( $("#log-box").prop("scrollHeight"));
}

OR Just for your understanding:

function displayLog(data){
    $("#log-box").append("<br>"+data+"<br>");
    scrollHeight =  $("#log-box").prop("scrollHeight");
    $("#log-box").scrollTop(scrollHeight);
}