Disable code collapse

[e-karlsson]

Hi!

We are using this for visualizing json diffs and are really happy. However, we just realised the other day a case where the code collapse is causing an issue.

The image below shows the result of a comparison of two json strings. However, if you are not looking very sharp, it looks like it has been an addition to the row 33 for the property "includeApplications". However, the addition is actually to the property "excludeApplications" but that are not shown as there is a diff above the includeApplications but nothing around "excludeApplications". A work around for us would be to disable code collapse at this situations. Is this possible?

[rars]

Hi @e-karlsson, thank you for raising this. I see this is an issue. I'll look into this in the coming days and get back to you.

[rars]

Hi again @e-karlsson. Thanks for your patience. I've just published 7.0.0-alpha.0, please give that a try. In this version, you should be able to click on the ' - - ' of the ' ... ' placeholder row and it should unfold more of the collapsed code. Let me know if this helps.

It's also worth noting that code collapse can be turned off completely by not specifying [lineContextSize] or setting it as [lineContextSize]="undefined".

Let me know if you have any other questions/suggestions/feedback. If you're happy with this I will publish a non-alpha 7.0.0 version.

[e-karlsson]

Hi! Thanks! I will check during today and come back.

[e-karlsson]

Hi @rars ! Sorry for the slow reply. The fixes works great, thank you! I see that you released version 8.0.1 which is a highlight for the team. However, we have issues on the styling now instead.

In the styles.scss we use:

@use "@angular/material" as mat;
@use "ngx-diff/styles/default-theme";

And we then see this error:

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
2 │ @use "ngx-diff/styles/default-theme";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles.scss 2:1  root stylesheet

./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
2 │ @use "ngx-diff/styles/default-theme";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles.scss 2:1  root stylesheet

[rars]

Hi @e-karlsson. Sorry to hear this. Is it possible for you to provide some more context to help me reproduce this problem if you're still having it? E.g. what dependencies are you using? If you could create a new issue with that context that would help.

In the meantime, here are some things to try:

1. is it a caching problem after updating? Try npx ng cache clean,
2. verify that the file actually exists in your node_modules/ngx-diff/styles folder on disk - if not, something is wrong,
3. there is a demo branch that uses the package, you could compare your own workspace against this for potential differences.

Thanks.

[rars]

Hi @e-karlsson, is this still an issue? I will close this otherwise. Thanks.

[e-karlsson]

Hi @e-karlsson, is this still an issue? I will close this otherwise. Thanks.

Sorry, have not had the time. Will give you more details tomorrow.

[rars]

@e-karlsson - I suspect this is the same issue as #78

[e-karlsson]

Hi! Yes, #78 was the same issue and this now works. Feel free to close this.

Another issue I found - just for your info is how coloring is working with overflow areas.

So if the text is overflow, the green and red background is not filling filled on horizontal scroll. Made an example in your demo page with this content:

{
    "id": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ",
    "createdDateTime": "2024-03-14T16:15:07.851079+00:00",
}

[rars]

Thanks, will take a look separately.

[rars]

So if the text is overflow, the green and red background is not filling filled on horizontal scroll.

Think this is fixed in https://github.com/rars/ngx-diff/releases/tag/v8.0.4