Clear ui.log

[HVisMyLife]

I want to clear ui.log object, but .clear() seems to be doing nothing... So how to make it "empty"?

[Allen-Taylor]

It looks like the code for that isn't complete. I only see the push method in the log.py class and log.js file.

The clear() method is inherited from Element, but it doesn't actually clear the text.

You might be able to clear the log with the ui.run_javascript(), access the log.id and clear it.

[Allen-Taylor]

The following code fixes the issue.

I named it clear_log() so it doesn't interfere with clear() that is inherited from the Element class.

log.js

export default {
  template: "<textarea disabled></textarea>",
  data() {
    return {
      num_lines: 0,
    };
  },
  mounted() {
    const text = decodeURIComponent(this.lines);
    this.$el.innerHTML = text;
    this.num_lines = text ? text.split("\n").length : 0;
  },
  methods: {
    push(line) {
      const decoded = decodeURIComponent(line);
      const textarea = this.$el;
      textarea.innerHTML += (this.num_lines ? "\n" : "") + decoded;
      textarea.scrollTop = textarea.scrollHeight;
      this.num_lines += decoded.split("\n").length;
      while (this.max_lines && this.num_lines > this.max_lines) {
        const index = textarea.innerHTML.indexOf("\n");
        if (index == -1) break;
        textarea.innerHTML = textarea.innerHTML.slice(index + 1);
        this.num_lines -= 1;
      }
    },
    clear_log() {
      const textarea = this.$el;
      textarea.innerHTML = '';
      this.num_lines = 0;
    }
  },
  props: {
    max_lines: Number,
    lines: String,
  },
};

log.py

from collections import deque
from typing import Optional

from ..dependencies import register_component
from ..element import Element

register_component('log', __file__, 'log.js')


class Log(Element):

    def __init__(self, max_lines: Optional[int] = None) -> None:
        """Log view

        Create a log view that allows to add new lines without re-transmitting the whole history to the client.

        :param max_lines: maximum number of lines before dropping oldest ones (default: `None`)
        """
        super().__init__('log')
        self._props['max_lines'] = max_lines
        self._props['lines'] = ''
        self.classes('border whitespace-pre font-mono')
        self.style('opacity: 1 !important; cursor: text !important')
        self.lines: deque[str] = deque(maxlen=max_lines)

    def push(self, line: str) -> None:
        self.lines.extend(line.splitlines())
        self._props['lines'] = '\n'.join(self.lines)
        self.run_method('push', line)

    def clear_log(self) -> None:
        self._props['lines'] = ''
        self.lines.clear()
        self.num_lines = 0
        self.run_method('clear_log')
        self.update()

[rodja]

@Allen-Taylor Thanks for figuring this out. Why do you introduce a new method clear_log? Would it not be good if the clear() method from Element is overwritten to also do the special code for clearing the log?

[rodja]

For anyone who needs this feature before the next release:

from nicegui import ui

log = ui.log()
log.push('A')
log.push('B')
log.push('C')


async def clear():
    log._props['lines'] = ''
    log.lines.clear()
    log.num_lines = 0
    await ui.run_javascript(f'var log = getElement({log.id}); log.$el.innerHTML = ""; log.num_lines = 0;')
    log.update()

ui.button('Clear log', on_click=clear)

ui.run()

[Allen-Taylor]

@Allen-Taylor Thanks for figuring this out. Why do you introduce a new method clear_log? Would it not be good if the clear() method from Element is overwritten to also do the special code for clearing the log?

Okay I can just leave the name as clear() instead of clear_log(). I'll check it out tomorrow.

[Allen-Taylor]

For anyone who needs this feature before the next release:

from nicegui import ui

log = ui.log()
log.push('A')
log.push('B')
log.push('C')


async def clear():
    log._props['lines'] = ''
    log.lines.clear()
    log.num_lines = 0
    await ui.run_javascript(f'var log = getElement({log.id}); log.$el.innerHTML = ""; log.num_lines = 0;')
    log.update()

ui.button('Clear log', on_click=clear)

ui.run()

The clear() method wouldn't override until I added a doc string, then VScode got the correct method. Without the doc string it was only seeing the Element clear() method. Strange!?

Also, for whatever reason the java script method cannot be named "clear", not sure why, so I just left that as clear_log. It is invisible to the user so it shouldn't matter.

I'm learning how to do a Pull request. I'm doing some testing on the changes then I'll try to do it. This is actually my first one.

[rodja]

Hey @Allen-Taylor, do you still plan to do the pull request. We would really like to honor your contribution. The 1.1.10 release is imminent.

[Allen-Taylor]

Hey @Allen-Taylor, do you still plan to do the pull request. We would really like to honor your contribution. The 1.1.10 release is imminent.

I want to but I'm trying to understand how to do so. :
This is my first contribution to anything on GitHub.

[falkoschindler]

@Allen-Taylor How can we proceed? Have you looked into the instructions @rodja posted here? Where exactly are you struggling?

[rodja]

Whats the status, @Allen-Taylor?

[falkoschindler]

Commit de84175 (based on Allen's suggestion) should fix this issue.

@Allen-Taylor We'd really like to add you as an official contributor to NiceGUI, which - unfortunately only works via pull requests. But if you're still into it: Your table demo from #404 would make a great example.