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.

JSON Data Structure

[
	{
		name: "Layer 1",
		id: "l1",
		visible: true,
		hideable: true
	}
	,
	{
		name: "Layer 1",
		id: "l1",
		visible: true,
		hideable: true
	}
	,
	{
		name: "Layer 1",
		id: "l1",
		visible: true,
		hideable: true,
		nestedColumns: [
	                 {
		                 name: "Layer 1",
		                 id: "l1",
		                 visible: true,
		                 hideable: true
	                 }
	                 ,
	                 {
		                 name: "Layer 1",
		                 id: "l1",
		                 visible: true,
		                 hideable: true
	                 }
	                 ,
	                 {
		                 name: "Layer 1",
		                 id: "l1",
		                 visible: true,
		                 hideable: true
	                 }
		]
	}
	,
	{
		name: "Layer 1",
		id: "l1",
		visible: true,
		hideable: true
	}
	,
]