Git Product home page Git Product logo

Comments (9)

alanaberdeen avatar alanaberdeen commented on September 26, 2024 1

Hi @rcasero

I think the route of this problem is there is a large amount of redundancy in the annotation schema resulting in ridiculously large JSON files. We should never be working with a 290M json!

Therefore, as @stefano-malacrino suggested, I think we should update the schema with a focus on efficiency for large annotation files. IIRC @stefano-malacrino thought GeoJSON might be a good starting point.

This would have both the benefit of solving your current issue and also improving the general utility of AIDA and annotation data.

--

After annotations are loaded, simply by cliking the "Move" tool, the interface hangs up, and after a while, the browser (Chrome) reports that the page has crashed, and offers to reload it, which takes you back to the dashboard.

On this point. My first guess is this is because the "Move" tools is performing a paperJS hitTest which is naively looping through all your items and causing a crash. A potential solution would be to try and replace the hitTest method inside paperJS with a new more performant version. Perhaps utilising the new RBush tree implemented to help pan/zooming (see below).

--

A related issue is seeing significant lag panning/zooming around the image after the annotations are loaded.

On this point, we've just integrated and pushed some performance updates that should help quite a bit panning/zooming the image with many annotation items. These are based on using RBush to efficiently check and render only the necessary items in a particular frame.

from aida.

rcasero avatar rcasero commented on September 26, 2024

@alanaberdeen suggested to edit aidaLocal.js to adjust the limit for the bodyParser (currently set at 100mb) on line 108.

This was increased to 1000mb, but it didn't fix the problem.

I've also tried increasing the node's memory to 8GB

node --max-old-space-size=8192 aidaLocal.js

but it doesn't seem to help.

from aida.

rcasero avatar rcasero commented on September 26, 2024

For reading large json files, I think you have stream-json or big-json, but I haven't found something similar for writing

https://www.npmjs.com/package/stream-json
https://www.npmjs.com/package/big-json

But maybe the problem is not with the writing to disk itself, but the JSON.stringify() step, and that can be solved with the stream version implemented in those other packages.

I've tried replacing in aidaLocal.js the JSON.stringify() by big-json stringify(), and no difference. But maybe I wasn't using it right.

from aida.

rcasero avatar rcasero commented on September 26, 2024

Hi @alanaberdeen ,

Thanks for your update. I have pulled commit b6296da, and here's my report using the large annotations file:

  • Time to load and display annotations from the moment the image filename is clicked on the dashboard: 35 s.
  • Panning and zooming. Significant lag (several seconds) when you start from the image fully zoomed out. As you zoom in, the lag reduces, I imagine because fewer and fewer annotations are visible and need to be considered. In my case, with a titanrtx server, the interface is smooth from 15x zoom onwards.
  • The "Delete" tool has become less responsive. Now it lags when clicking to delete annotations. The interface still crashes when trying to save the changes, or when selecting the "Move" tool.

Looking forward to the improvements you suggest. Have you considered GraphicsJS as an alternative to PaperJS? A review here states:

Powerful line drawing
Not only Bezier curves but also any lines, shapes, arcs, etc. out-of-the-box.

Virtual DOM
Rapid drawing. Only what is necessary is drawn.

from aida.

stefano-malacrino avatar stefano-malacrino commented on September 26, 2024

Hi all,

Panning and zooming. Significant lag (several seconds) when you start from the image fully zoomed out. As you zoom in, the lag reduces, I imagine because fewer and fewer annotations are visible and need to be considered. In my case, with a titanrtx server, the interface is smooth from 15x zoom onwards.

This is caused by the fact that when the image is zoomed out the browser has to render a huge number of items on the canvas. Unfortunately at this moment there isn't much that we can do about this issue.

The "Delete" tool has become less responsive. Now it lags when clicking to delete annotations. The interface still crashes when trying to save the changes, or when selecting the "Move" tool.

The delete tool has currently a bug that I haven't been able to fix yet (it seems to be caused by paperjs), so for now it's better to select the items and delete them using the keyboard.

Therefore, as @stefano-malacrino suggested, I think we should update the schema with a focus on efficiency for large annotation files. IIRC @stefano-malacrino thought GeoJSON might be a good starting point.

I think the main cause of verbosity in the JSON schema is the representation of paths.
I.e. for a generic path instead of

{"class": "test", "type": "path", "segments": [{"point": {"x": 40807.0, "y": 891.5}}, {"point": {"x": 40800.5, "y": 886.0}}]}

we should use

{"class": "test", "type": "path", "segments": [[40807.0, 891.5], [40800.5, 886.0]]}

This type of representation is supported natively by paperjs so deserialization is straightforward.

from aida.

alanaberdeen avatar alanaberdeen commented on September 26, 2024

Hi all,

I've implemented the more efficient array serialisation for paths and updated the wiki page to reflect this.

The new schema essentially reads and writes segments and points like this:
segment: [point[, handleIn[, handleOut]]]
point: [x, y]

therefore, as @stefano-malacrino said you end up with something like:

{  "class": "test",
   "type": "path",
   "segments": [
        [[159, 171], [142, 120], [160, 165]],
        [[200, 271], [198, 255], [234, 289]],
        [[250, 312], [242, 301], [260, 335]],
        ....
    ]
}

In my quick tests this seemed to reduce file size by a factor of ~2 but could be more depending on the redundancy in your data.

This is all pushed to master and built in /dist

from aida.

rcasero avatar rcasero commented on September 26, 2024

Good work, @alanaberdeen .

I can report that with the new commit:

  • The loading time of the annotations has gone from 35 s to 5 s, a factor of 0.14.
  • My annotations file size has gone down from 289M to 77M, a factor of 0.27.
  • Now, deleting annotations (with the Delete tool) and saving works, the interface no longer crashes.

As a minor comment, it could be useful if the saving function added some line breaks to the .json file, perhaps before every "segments". Now it looks something like below, and that makes it hard for exploring or editing the file manually with a text editor:

{"name":"An AIDA project","layers":[{"name":"Cell layer","opacity":1,"items":[{"class":"","type":"path","color":{"fill":{"hue":0,"saturation":0.44,"lightness":0.69,"alpha":0.7},"stroke":{"hue":0,"saturation":0.44,"lightness":0.69,"alpha":1}},"segments":[[62737.42144638404,7995.725685785536],[62728.62079909162,7993.411471321696],[62720.6433915212,7988.579472827518],[62714.09376977303,7982.997506234414],[62707.915211970074,7977.044475696109],[62706.553158724746,7967.171612590081],[62702.12967581047,7959.9224706198565],[62692.57793917165,7958.69825436409],[62685.93017456359,7964.182078097293],[62681.720759763586,7971.426433915212],[62671.67611229326,7970.479104811964],[62664.40022647257,7964.483790523691],[62654.442471948234,7963.326683291771],[62646.42747113673,7959.115750438479],[62640.48523505126,7953.173514353004],[62639.64588528678,7943.084140376106],[62631.76953411494,7940.184538653367],[62623.4463840399,7937.053918110474],[62623.261877671364,7926.693299117748],[62621.132169576056,7917.1384090618],[62619.99367905584,7907.1883658319375],[62621.64639507531,7897.435899189033],[62623.4463840399,7888.42225272071],[62622.28927680798,7878.464498196373],[62625.76059850374,7869.465322689199],[62626.91770573566,7859.507568164862],[62631.54637191313,7851.665598161687],[62635.992591905015,7843.748056474041],[62645.63532653474,7841.83042394015],[62653.47739481,7837.201995012469],[62662.788029925185,7835.73667723307],[62665.102244389025,7826.258212217314],[62671.30029655522,7821.002493765586],[62680.762485626314,7818.648985695384],[62688.24438902743,7812.666682970253],[62696.34413965087,7808.295936390759],[62704.5034946115,7803.645885286783],[62711.18845565483,7809.431421446384],[62721.625499687754,7809.431421446384],[62731.58325421209,7810.588528678304],[62742.02029824501,7810.588528678304],[62751.498763260766,7808.274314214464],[62757.50590658076,7814.059850374065],[62765.149446641255,7817.5311720698255],[62775.10720116559,7816.374064837905],[62783.12718204489,7819.807854576535],[62792.70849575043,7821.002493765586],[62801.7076712576,7824.473815461347],[62807.91334279235,7831.416458852867],[62816.234700576184,7834.887780548628],[62825.23387608336,7838.359102244389],[62830.056413237326,7845.368133935583],[62837.51122194514,7851.3616596501515],[62839.76705159135,7860.864308449205],[62844.213271583234,7868.781850136851],[62847.92518703242,7877.003550724996],[62849.494009224334,7886.790767329071],[62846.7680798005,7891.811341337408],[62843.29675810474,7900.132699121243],[62843.29675810474,7910.56974315416],[62852.553615960096,7913.105564778395],[62853.71072319202,7923.0633193027315],[62853.71072319202,7933.500363335649],[62853.71072319202,7943.937407368568],[62848.24023122284,7950.598503740648],[62838.2260358421,7951.61935069157],[62828.80401168274,7954.069825436409],[62818.366967649825,7954.069825436409],[62809.740648379055,7953.556588553096],[62799.60856583307,7952.912718204489],[62791.96502577257,7949.441396508728],[62784.28428927681,7952.536612907549],[62784.443761134986,7962.9076015339915],[62783.629208631086,7969.188746481136],[62775.57128629652,7974.932454351853],[62768.33156233222,7981.01507108424],[62759.67424884219,7985.311720698254],[62749.23720480927,7985.311720698254],[62739.413071265175,7986.791417512882],[62737.42144638404,7995.725685785536]],"closed":true,"locked":false},{"class":"","type":"path","color":{"fill":{"hue":30,"saturation":0.44,"lightness":0.69,"alpha":0.7},"stroke":{"hue":30,"saturation":0.44,"lightness":0.69,"alpha":1}},"segments":[[63028.493765586034,7998.154613466334],[63017.87168516911,7998.154613466334],[63007.2496047522,7998.154613466334],[62996.62752433528,7998.154613466334],[62987.76266955853,7993.912295493688],[62978.30868222623,7991.092269326683],[62969.052369077304,7992.802788712586],[62959.70423811139,7991.092269326683],[62949.569710815274,7989.915211970075],[62940.008181558704,7987.354814975163],[62937.33810660428,7978.14463840399],[62930.26572481049,7972.904128800511],[62923.03798968585,7966.374064837
...

from aida.

alanaberdeen avatar alanaberdeen commented on September 26, 2024

Great, glad to hear that helped out!

White-space in the .json output:
As our files are quickly becoming bloated my preference would be to keep the output as efficient as possible.

I appreciate what you mean about ease-of-use when manually editing but this is likely to be necessary in the minority of cases. There is also the option use another tool to post-process and pretty-print your files. Many text editors have built in functionality, VS Code for example you can right-click and hit Format Document.

from aida.

rcasero avatar rcasero commented on September 26, 2024

Thanks. I've found that in emacs I can just open the .json file, and then M-x json-pretty-print formats the file.

from aida.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.