Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle large files #25

Open
praneshr opened this issue Aug 16, 2019 · 20 comments
Open

Handle large files #25

praneshr opened this issue Aug 16, 2019 · 20 comments
Assignees
Labels
feature request New feature request help wanted Extra attention is needed

Comments

@praneshr
Copy link
Owner

Try introducing the windowing technique to handle large DOM nodes.

@praneshr praneshr self-assigned this Aug 16, 2019
@praneshr praneshr added the feature request New feature request label Aug 16, 2019
@praneshr praneshr added the help wanted Extra attention is needed label Oct 19, 2019
@taeyangee
Copy link

Encounter the same problem,looking forward optimization~

@cczz598
Copy link

cczz598 commented Dec 6, 2019

I need to diff large text(145k) with 90% difference, but actually the browser crashed when rendering large text.
I'm also looking forward your optimization~

@skyunBoss
Copy link

How long does it take

@praneshr
Copy link
Owner Author

@skyunBoss - I don't have a timeline for it. I'm experimenting with few techniques. But, I'll address this issue soon!

@Azrog
Copy link

Azrog commented Mar 27, 2020

Would the use of a web worker help?
https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API

@SamSamskies
Copy link

SamSamskies commented May 9, 2020

@praneshr I also have to support large diffs and my temporary solution is to display a spinner and put a message that this may take a while if the changeset is huge 😂.

Have you thought about using react-virtual (https://github.com/tannerlinsley/react-virtual) to solve the issue? Here's examples of using react-virtual https://codesandbox.io/s/github/tannerlinsley/react-virtual/tree/master/examples/sandbox.

@praneshr
Copy link
Owner Author

@SamSamskies Thanks for the comment. Yes, I've explored the windowing option. But, I don't have the bandwidth to work on it now. So, I cannot guarantee a release date. Sorry.

@SamSamskies
Copy link

@praneshr np. I'll try and take a crack at it if I get some bandwidth myself.

@SamSamskies
Copy link

Would the use of a web worker help?
https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API

I think the main problem is the number of DOM nodes generated for large diffs, so I don't think web workers would help much.

@souljuse
Copy link

souljuse commented Jan 5, 2021

I am guessing that the problem stems from the "diff" library in the dependencies. It has the same unsolved issue with large diffs -> kpdecker/jsdiff#163

I suggest using https://github.com/google/diff-match-patch for handling large diffs

@josephwaiguru
Copy link

Is there are progress on this one ?

@hperrin
Copy link

hperrin commented May 10, 2021

I'm hitting this one as well on a diff between two 3kb strings. The page essentially freezes and must be killed by the browser's task manager. The problem is definitely in the diff library (not this one), so I think it would be better to switch to another diff library.

@hperrin
Copy link

hperrin commented May 10, 2021

Check out this package:
https://www.npmjs.com/package/diff-match-patch

You can essentially get the same characteristics using diff_main as a substitute for "character" diffing, and diff_cleanupSemantic on the resulting diff for "word" diffing.

Since you first operate on a line diff though, you'll need this part:
https://github.com/google/diff-match-patch/wiki/Line-or-Word-Diffs

There is also a section in there about actual word diff mode, if using the semantic cleanup is not appropriate.

@lordprana
Copy link

Would have liked to use this package, but I need this feature. Had to find another solution.

@gladsonrobinson
Copy link

Any updates on it. Or any one got an alternate solution for it.

@gladsonrobinson
Copy link

@lordprana Have you find any solution for the large data?

@usutaria
Copy link

So I figured that if you use json.Stringify(jsonstr, null, 2) to format the string first and then use json diff viewer then it's faster to compare.

@usutaria
Copy link

One can also try react-diff-viewer-continued along with json string formatted for new line using json.stringify(jsonstr, null, 2).

@m-s-abeer
Copy link

Any progress on this issue?

@jfaMan
Copy link

jfaMan commented Jan 17, 2024

I am guessing that the problem stems from the "diff" library in the dependencies. It has the same unsolved issue with large diffs -> kpdecker/jsdiff#163

I suggest using https://github.com/google/diff-match-patch for handling large diffs

It looks like someone potentially fixed the issue and a new release is in the works though the owner of that library doesn't seem to be all that active either.

This library would then need to be updated with it, but seeing as @praneshr doesn't seem to be working on this anymore, there might be more luck hoping for an update to the forked react-diff-viewer-continued instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request New feature request help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests