melloware / react-logviewer

React Lazy LogViewer
https://melloware.github.io/react-logviewer/
Mozilla Public License 2.0
52 stars 12 forks source link

highlight not updated when the property is changed #43

Open yonghah opened 1 week ago

yonghah commented 1 week ago

Hi, It seems that changing highlight property doesn't update the component. I have a react code like below to scroll AND highlight to the specific line.

const [lineNumber, setLineNumber] = useState(1);
<LazyLog
  text={mlirData?.content}
  scrollToLine={lineNumber}
  highlight={lineNumber}
/>

When the lineNumber is updated, LazyLog is scrolled to the line number as expected. But the highlight is not updated. Do you have any idea?

melloware commented 1 week ago

I think your issue is similar to this one: https://github.com/melloware/react-logviewer/issues/37

It seems wiht React Virtual Window is scrolling to the end of the first virtual frame or something.

melloware commented 1 week ago

I just released 5.2.1 can you try it and report back i think its fixed.

yonghah commented 1 week ago

Hi melloware! Thanks for your attention. I updated to the 5.2.1 release, but highlight is still not working. It seems that highlight state is not updated. If I add onHighlight, then onHighlight function is triggered when I change the lineNumber, but the value printed from console.log(line) is always the initial value, not mutated at all.

const [lineNumber, setLineNumber] = useState(1);
<LazyLog
  text={mlirData?.content}
  scrollToLine={lineNumber}
  highlight={lineNumber}
  onHighlight={(line)=>console.log(line)}
/>
melloware commented 1 week ago

yep i see that too with a stackblitz: https://stackblitz.com/edit/vitejs-vite-lesej7?file=package.json,src%2FApp.tsx&terminal=dev

melloware commented 1 week ago

I see why.

highlight:
                previousHighlight === Range(0, 0)
                    ? getHighlightRange(highlight)
                    : previousHighlight || getHighlightRange(previousHighlight),

The old code intentionally only set the Highlight on initialization but after that it was controlled by your mouse clicks. I wonder if this is so highlighting would not be lost between re-renders?