Last week, I worked on gathering all the features that we want the new Metadata Environment to have, and identified some useful JavaScript libraries for implementing them. This week, I started outlining in more specific terms how I plan to implement some of these features.
When the user imports a CSV file into the environment, scripts render it as a table on the browser page; from this table display, the user can then drag and drop properties and classes to the column headers. The column headers right now are constructed from the headers of the original CSV file, but we want to be able to convey additional information in these headers when the table is rendered.
Many of the planned functions I discussed with my mentors relate to feedback from or interactions with the headers. For example, we want the color of the headers to change to reflect whether or not the user has completed all of the designations necessary for the CSV to RDF conversion – this way, it will be easy for the user to simply glance at the headers and see what still requires his or her attention. This means providing obvious blanks for classes and properties. Additionally, these blank spots should highlight somehow when a user is dragging a class or property, to give visual feedback for valid places to drop those items. Style changes that react to user interactions should make it easier for the user to understand how the environment works.
The column headers must also perform more complex tasks, as well, that require the page scripts to know which columns in the table (if any) have been selected by the user. I have been working on getting these functionalities down late this week, and I will be continuing early next week. I have been working in small test files to get these functions up and running, so that they will hopefully be easier to implement in the existing page starting next week.