Design for Organizing Columns

This page presents the design to support reorganizing columns in Karma. The goal is to enable users to reorder and to hide/un-hide columns. The tricky part is dealing with the hierarchy because the columns of a nested table can be reordered, but only within its containing table.

Interface Design

Adobe Illustrator (AI) has a good interface to reorder and to hide/un-hide layers, which maps exactly to our problem. The following figure shows the AI interface for working with layers.

Each layer represents a column. When a column contains a nested table, then it contains nested entries (e.g., Layer 3). In Karma, we don't need the white rectangle, so our design should not have it.

Behavior for hiding/un-hiding columns

• Expand/Collapse icon: the user can click the icon to expand or collapse the contents of nested tables.
• Show/Hide icon: the user can toggle the visibility of a column by clicking on the eye icon. The eye icon actually has three states:
  • Visible: means that the column is visible on the screen.
  • Not visible: means that the column will be hidden.
  • Greyed out: means that parent column is not visible, but if it was, the current column would be visible. For example, in the figure below, the eye for Layer 9 is greyed out because Layer 5 is hidden.

Behavior for reordering columns

To reorder columns, the user can drag the columns up or down. When the user starts dragging a column, a line appears (see figure below) to show where the column will be moved if the user releases the mouse.

The figure below illustrates the dragging behavior. In this case, the user is dragging Layer 12. As the cursor moves, a white line appears to indicate the place where the layer will appear if the user releases the mouse. In the example, Layer 12 will appear between Layer 4 and Layer 3.

Users cannot change the nesting of the columns. So, if the user drags a column over a nested table, the white line should appear in the closest legal location. For example, in the figure above, the white line will stay above Layer 3 even if the user drags the mouse inside Layer 3, e.g., over Layer 10. As the user continues to drag the mouse down, the white line will eventually appear below Layer 11, to indicate that if the user releases the mouse, Layer 12 will appear just above Layer 2.

When the user drags a column contained within a nested table, such as Layer 10, the white line will always appear within Layer 3, i.e., below Layer 3 and above Layer 2.

Implementation

This interface needs to be implemented in Javascript, HTML5 and Twitter Bootstrap version 3. Preferred implementation is in jQuery version 2, but if it is hard to do it, then it is OK to do it in D3.js.

The HTML component should be placed inside a DIV and it's size should be dependent on the DIV. Scrollbars should appear if the component does not fit in the containing DIV.

Appearance

Do not imitate the appearance of the screenshots shown above. The screenshots are from Adobe Illustrator and we want to control the appearance using CSS. The default appearance should be defined using Bootstrap.

JSON Data Structure

The component should take as input a JSON data structure as defined below, and produce as output a JSON data structure with identical structure. The meaning of the attributes is the following:

• name: the label displayed on the screen
• id: not used in the GUI
• visible: mapped to the eye icon
• hideable: if false, the label should be greyed out and the eye icon should be dimmed.

When the user changes the order on the screen, the corresponding objects should be rearranged in the array.

The hideable attribute is used to prevent columns that have semantic types to become hidden (this would mess up our display)

[
	{
		name: "Layer 12",
		id: "l1",
		visible: true,
		hideable: true
	}
	,
	{
		name: "Layer 4",
		id: "l1",
		visible: false,
		hideable: false
	}
	,
	{
		name: "Layer 3",
		id: "l1",
		visible: true,
		hideable: true,
		nestedColumns: [
	                 {
		                 name: "Layer 5",
		                 id: "l1",
		                 visible: true,
		                 hideable: true
	                 }
	                 ,
	                 {
		                 name: "Layer 9",
		                 id: "l1",
		                 visible: true,
		                 hideable: false
	                 }
	                 ,
	                 {
		                 name: "Layer 8",
		                 id: "l1",
		                 visible: false,
		                 hideable: true
	                 }
		]
	}
	,
	{
		name: "Layer 2",
		id: "l1",
		visible: true,
		hideable: true
	}
	,
]