Mapping Pane Simplefication

by Sumeet   Last Updated November 10, 2017 18:16 PM

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 :

enter image description here

Related Questions

Task progress as factor of user completed steps

Updated March 22, 2017 20:16 PM

Designing trees out of lists?

Updated June 26, 2018 13:16 PM