Switch from scroll to zoom in canvas to vertical scrolling about fabrik HOT 17 CLOSED

Hmm.. my concern was that we will be able to see more part of the network if we show the network horizontally. Using a touchpad to scroll will feel the same horizontally and vertically. However using a mouse scroll wheel to scroll will feel weird.
But maybe after putting menus / other features in the future we will be left with the same amount of space both horizontally & vertically.

Ok. Let's go with vertical then. Are we removing the ability for zoom? Can we do keyboard shortcuts, and pinch to zoom gesture on the touchpad to scroll.

from fabrik.

@virajprabhu I am interested in working on the issue. How do I start?

from fabrik.

@souravsingh Great! Have you setup the code locally? Presently, you would notice that if you load a large network (Say GoogLenet from the examples), the size of each node of the jsPlumb flowchart is small and the flowchart extends horizontally. Scrolling the mousepad zooms the canvas and is the only way to visualize the entire flowchart, which isn't a good user experience.
What I'm proposing is:
– The default size of boxes in the flowchart should be larger
– The flowchart should extend vertically instead of horizontally
– Scroll to zoom should be disabled. Instead, the flowchart should be loaded in a scrollable div and a vertical scrollbar should be generated if the flowchart does not fit on the page.

This is a good example of what I'm proposing.

Does this make sense?

from fabrik.

@souravsingh Any update on this? Do you want to take this up?

from fabrik.

@virajprabhu I am interested in working on this issue.

from fabrik.

@souravsingh Great. Does my updated description in the comment above make sense to you? Let me know if you need any help getting started.

from fabrik.

@virajprabhu can I work on this?

from fabrik.

@jainamritanshu Sure. Let me know if you need help.

from fabrik.

@virajprabhu Sir I am having some confusion. I have successfully installed all the dependencies for the initial setup. Although I installed caffe as a docker image. The application will still not be able to import caffe modules in my local environment. Can you help me with this?

from fabrik.

@jainamritanshu Sure. Can you share whatever issues you are running into on the Gitter channel?

from fabrik.

@virajprabhu @dexter1691 I have made some changes to the front end to address these issues:

• fixed size of boxes
• flowchart extends vertically
• canvas scrolls instead of zoom
• added support for nice formatting of resnets in addition to the existing sequential networks and googlenet
• also addresses one issue from #16 where the buttons are now changed in appearance
  Are these changes fine ?

from fabrik.

This looks great @utsavgarg, thanks! Can you share a screenshot of how the layer details on hover show up? In case you haven't seen this before, this is a neat implementation of the info boxes we could draw some ideas from. Apart from that, this is exactly what I had in mind, so please submit a PR. @dexter1691 @deshraj @abhshkdz may also have thoughts.

from fabrik.

@virajprabhu I have seen netscope before, but I haven't implemented that bit yet, the layer details are same as before, they pull up from the right side.

from fabrik.

I am unsure about the vertical part. most models are deep and not very wide while most screens are widescreen and are in landscape orientation. So to me, it makes more sense to display the model horizontally.

from fabrik.

But scrolling vertically is a lot more intuitive right? For any network that is deeper than what can fit in widescreen (which will be many, if we want to support ResNets!) I think vertical looks much nicer.

from fabrik.

@dexter1691 I have added back the ability to pan, and have added support for zoom in and out based on keyboard shortcuts and double clicks.

from fabrik.

Fixed in #67

from fabrik.