Comments (9)
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.
@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.
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.
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.
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.
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.
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.
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.
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)
- AIDA freezing browser with zoom + opacity slider HOT 1
- Display mouse XY coordinates on Navigator HOT 1
- Measure tool shows 0um HOT 1
- Move Tool freezes interface and Delete Tool cannot delete single objects HOT 3
- Select tool delete object when selecting another object HOT 3
- File browser now shows images and annotations directories HOT 1
- Rectangles plotted without colours HOT 1
- How to implement the function of annotating images HOT 5
- Bug with `cp aidaLocal/* dist` in `package.json` HOT 2
- PayloadTooLargeError: request entity too large
- Show/hide annotations by sliding threshold HOT 1
- How do i upload an image into the editor? HOT 1
- Viewing Zeiss .czi files HOT 2
- function to convert Zeiss .czi files to DeepZoom .dzi using aicsimageio and pyvips
- Errors with "Run locally" and "Develop" HOT 2
- How to add images to starting menu? HOT 7
- How do I connect a file of annotations to an image? HOT 1
- The eye icons don't seem to work HOT 5
- Data not visible when browing from another machine HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from aida.