Mapping Pane Simplefication
I have a application in which user maps one table column to other table column .
To do this I have developed a screen in html which initially shows two tables in two separate pane facing each other and then to map user can select column and then drag and drop to other target table column .
But User faces problem when column list is huge , below are list of problems :
Problem 1 : User need to scroll first and then drag and drop to target if list is huge.
Problem 2: If mapping connection increases Lines start's overlapping with each other , so its not informative
Problem 3 : First column of source column could be mapped to target column last and to view it need to be scrolled and if not it shows half .
I am now thinking of rebuilding it with different UI using canvas html which can have transition and animation .
Can you suggest some different way to show this mapping which solves above problem .
Current UI sketch :
Answers comment
- Do users refer back to this page for insight, or is this a configuration page, where the output is different than the configuration?
This page for both insight and for creating mapping . so in first view it should give idea that which column is mapped to whom in target table .
2.How many items can there be in each table?
1000 to 2000
3.Have you thought about allowing a simple grid for a Completed View for linked items, so users can toggle between a two column scrollable table view and the column Configuration View with the edges?
Not thought about this , can you give me more idea
Too many lines overlap
If first shown list is mapped to bottom list of target table , which is hidden now and need to be scrolled yet to view . The lines connecting is dense and start overlapping and gives no idea that who is mapped to whom to user . Like suppose 1st column of source column is connected to 200 columns of bottom most columns of target , in this case all lines overlap and thick region is formed which gives no idea which is mapped to whom
