search

Taylor-CCB-Group / MDV

GNU General Public License v3.0
9 stars 6 forks source link

Layout / gridstack etc #29

Open xinaesthete opened 1 year ago

xinaesthete commented 1 year ago

I have integrated gridstack, which will be used if the ChartManager is created with a truthy gridstack property in config. npm run run-obvios in my branch does that.

I haven't put much thought into loading and saving layout. In obvios-example.js initialCharts uses the old size and position and hopefully does an ok job of fitting something approximating that shape into the grid structure. It also seems to be reasonably ok at fitting in new charts when added.

I don't currently save any properties relating to grid row / column / size, but when initialising ChartManager it'll try to approximate layout based on the position and size passed in. When making new charts at runtime, it'll try to fit them into available space rather than moving things around (doesn't always do a brilliant job).

I'm not sure I'm entirely happy with how it works / whether it's the right approach... maybe something more along the lines of a docking layout would be preferable, the most obvious thing I found being GoldenLayout which uses jQuery, but seems reasonably clean and maintained.

Now that I'm using gridstack I find it a bit irritating if you have two things side-by-side and you want to change their relative sizes, it pushes the whole layout around. Also I'm getting a few seemingly strange results when trying to explicitly set the number of columns, for instance, and it's supposed to have default 10px margins around things but I've not had any luck getting the margin option to work and am currently using border in CSS. I suppose it's rubbing up against our CSS badly in some way, but don't see why it should. So it feels a little bit buggy to me in a way, but after a little bit of setup is working reasonably ok.

Brief video demo of current version, very much not cherry-picking good behaviour:

https://user-images.githubusercontent.com/674834/204530178-6ecb902f-7677-4aac-b6fa-a357f82f6725.mp4

bioinfbloke commented 1 year ago

I'd have to try it to make a final judgement but looks good Pete!

On Tue, 29 Nov 2022 at 12:40, Peter Todd @.***> wrote:

I have integrated gridstack, which will be used if the ChartManager is created with a truthy gridstack property in config. npm run run-obvios in my branch does that.

I haven't put much thought into loading and saving layout. In obvios-example.js initialCharts uses the old size and position and hopefully does an ok job of fitting something approximating that shape into the grid structure. It also seems to be reasonably ok at fitting in new charts when added.

I don't currently save any properties relating to grid row / column / size, but when initialising ChartManager it'll try to approximate layout based on the position and size passed in. When making new charts at runtime, it'll try to fit them into available space rather than moving things around (doesn't always do a brilliant job).

I'm not sure I'm entirely happy with how it works / whether it's the right approach... maybe something more along the lines of a docking layout would be preferable, the most obvious thing I found being GoldenLayout https://golden-layout.com/ which uses jQuery, but seems reasonably clean and maintained.

Now that I'm using gridstack I find it a bit irritating if you have two things side-by-side and you want to change their relative sizes, it pushes the whole layout around. Also I'm getting a few seemingly strange results when trying to explicitly set the number of columns, for instance, and it's supposed to have default 10px margins around things but I've not had any luck getting the margin option to work and am currently using border in CSS. I suppose it's rubbing up against our CSS badly in some way, but don't see why it should. So it feels a little bit buggy to me in a way, but after a little bit of setup is working reasonably ok.

Brief video demo of current version, very much not cherry-picking good behaviour:

https://user-images.githubusercontent.com/674834/204530178-6ecb902f-7677-4aac-b6fa-a357f82f6725.mp4

— Reply to this email directly, view it on GitHub https://github.com/Taylor-CCB-Group/MDV/issues/29, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACQIC7AOFI2UUTHL75JJOGDWKX2SRANCNFSM6AAAAAASON4I7M . You are receiving this because you are subscribed to this thread.Message ID: @.***>

xinaesthete commented 1 year ago

I added a 'lock' so you can make certain charts not get pushed around, I think that helps a bit. It'd be nice to have resize handles on the sides, not just bottom-right.

Still tidying up some of the logic around stuff like PopOutWindow. A while ago I had a thought that allowing this kind of layout within PopOuts themselves could be a cheap way of adding lots of real-estate with something like Quest, I'm not making that a priority (not planning on doing it in the foreseeable), but there are a couple of bugs around pop-out (especially with this) that I'm cleaning up while I'm here, and somewhat bearing in mind a couple of minor adaptations that could make that work if we wanted. I say minor, definitely not a 5-minute job...