Added data-table to data-cube-edit

Author: lorem--ipsum

src/client/components/simple-table/simple-table.tsx

@@ -18,19 +18,19 @@ require('./simple-table.css');
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { $, Expression, Executor, Dataset } from 'plywood';
-import { Stage, Clicker, Essence, DataCube, Filter, Dimension, Measure } from '../../../common/models/index';
+import { } from '../../../common/models/index';
 
 import { classNames } from '../../utils/dom/dom';
 
-import { SvgIcon } from '../svg-icon/svg-icon';
-import { Scroller, ScrollerPart } from '../scroller/scroller';
+import { SvgIcon, Scroller, ScrollerPart } from '../index';
 
 export interface SimpleTableColumn {
   label: string;
   field: string | ((row: any) => any);
   width: number;
   cellIcon?: string;
+  render?: (column: SimpleTableColumn, hovered: boolean) => JSX.Element;
+  data?: any;
 }
 
 export interface SimpleTableAction {
@@ -44,12 +44,16 @@ export interface SimpleTableProps extends React.Props<any> {
   rows: any[];
   actions?: SimpleTableAction[];
   onRowClick?: (row: any) => void;
+  onHeaderClick?: (column: SimpleTableColumn) => boolean;
+
+  headerHeight?: number;
 }
 
 export interface SimpleTableState {
   sortColumn?: SimpleTableColumn;
   sortAscending?: boolean;
   hoveredRowIndex?: number;
+  hoveredColumnIndex?: number;
   hoveredActionIndex?: number;
 }
 
@@ -58,18 +62,32 @@ const HEADER_HEIGHT = 26;
 const ACTION_WIDTH = 30;
 
 export class SimpleTable extends React.Component<SimpleTableProps, SimpleTableState> {
+  static defaultProps = {
+    actions: [] as SimpleTableAction[],
+    headerHeight: HEADER_HEIGHT
+  };
+
   constructor() {
     super();
 
     this.state = {};
   }
 
   renderHeaders(columns: SimpleTableColumn[], sortColumn: SimpleTableColumn, sortAscending: boolean): JSX.Element {
+    const { hoveredRowIndex, hoveredColumnIndex } = this.state;
+
     var items: JSX.Element[] = [];
 
     for (let i = 0; i < columns.length; i++) {
       let column = columns[i];
 
+      let isHovered = hoveredRowIndex === -1 && i === hoveredColumnIndex;
+
+      if (column.render) {
+        items.push(column.render(column, isHovered));
+        continue;
+      }
+
       let icon: JSX.Element = null;
       if (sortColumn && sortColumn === column) {
         icon = <SvgIcon
@@ -79,7 +97,7 @@ export class SimpleTable extends React.Component<SimpleTableProps, SimpleTableSt
       }
 
       items.push(<div
-        className="header"
+        className={classNames("header", {hover: isHovered})}
         style={{width: column.width}}
         key={`column-${i}`}
       >{column.label}{icon}</div>);
@@ -186,6 +204,8 @@ export class SimpleTable extends React.Component<SimpleTableProps, SimpleTableSt
   getLayout(columns: SimpleTableColumn[], rows: any[], actions: SimpleTableAction[]) {
     const width = columns.reduce((a, b) => a + b.width, 0);
 
+    actions = actions || [];
+
     const directActionsCount = actions.filter((a) => !a.inEllipsis).length;
     const indirectActionsCount = directActionsCount !== actions.length ? 1 : 0;
 
@@ -195,7 +215,7 @@ export class SimpleTable extends React.Component<SimpleTableProps, SimpleTableSt
       bodyHeight: rows.length * ROW_HEIGHT,
 
       // Gutters
-      top: HEADER_HEIGHT,
+      top: this.props.headerHeight,
       right: directActionsCount * 30 + indirectActionsCount * 30,
       bottom: 0,
       left: 0
@@ -240,8 +260,8 @@ export class SimpleTable extends React.Component<SimpleTableProps, SimpleTableSt
     var rowIndex = -1; // -1 means header
 
     // Not in the header
-    if (y > HEADER_HEIGHT) {
-      rowIndex = Math.floor((y - HEADER_HEIGHT) / ROW_HEIGHT);
+    if (y > this.props.headerHeight) {
+      rowIndex = Math.floor((y - this.props.headerHeight) / ROW_HEIGHT);
     }
 
     return rowIndex;
@@ -302,6 +322,11 @@ export class SimpleTable extends React.Component<SimpleTableProps, SimpleTableSt
   }
 
   onHeaderClick(column: SimpleTableColumn) {
+    if (this.props.onHeaderClick) {
+      let shouldSort = this.props.onHeaderClick(column);
+      if (!shouldSort) return;
+    }
+
     this.setState({
       sortColumn: column,
       sortAscending: this.state.sortColumn === column ? !this.state.sortAscending : true
@@ -317,8 +342,10 @@ export class SimpleTable extends React.Component<SimpleTableProps, SimpleTableSt
     const headerWidth = this.getHeaderWidth(columns);
 
     var rowIndex = this.getRowIndex(y);
+    var columnIndex = this.getColumnIndex(x, headerWidth);
 
     this.setState({
+      hoveredColumnIndex: columnIndex,
       hoveredRowIndex: rowIndex > rows.length ? undefined : rowIndex,
       hoveredActionIndex: part === Scroller.RIGHT_GUTTER ? this.getActionIndex(x, headerWidth) : undefined
     });
@@ -327,6 +354,7 @@ export class SimpleTable extends React.Component<SimpleTableProps, SimpleTableSt
   onMouseLeave() {
     this.setState({
       hoveredRowIndex: undefined,
+      hoveredColumnIndex: undefined,
       hoveredActionIndex: undefined
     });
   }

src/client/config/constants.ts

@@ -42,6 +42,7 @@ export const SEARCH_WAIT = 900;
 // Do not set an explicit type for STRINGS, let typescript figure it out and type check that we are using string correctly
 export const STRINGS = {
   add: 'Add',
+  addAttributes: 'Add attributes',
   addFromCube: 'Add from Cube',
   addNewCollection: 'Add new collection',
   addNewTile: 'Add new tile',
@@ -89,6 +90,7 @@ export const STRINGS = {
   explore: 'Explore',
   exportToCSV: 'Export to CSV',
   filter: 'Filter',
+  filters: 'Filters',
   generalSettings: 'General settings',
   goToUrl: 'Go to URL',
   granularity: 'Granularity',
@@ -135,6 +137,7 @@ export const STRINGS = {
   stringSearch: 'String search',
   subsplit: 'Split',
   suggestion: 'suggestion',
+  suggestions: 'suggestions',
   timezone: 'Timezone',
   thereAreNoSuggestionsAtTheMoment: 'There are no suggestions at the moment',
   undo: 'Click here to undo',

src/client/icons/dim-set-string.svg

@@ -15,9 +15,9 @@
  */
 
 
-import { STRINGS } from "../../config/constants";
 require('./attribute-modal.css');
 
+import { STRINGS } from "../../config/constants";
 import * as React from 'react';
 import { AttributeInfo } from 'plywood';
 

src/client/modals/attribute-modal/attribute-modal.tsx

@@ -29,7 +29,8 @@ $danger: #e24c4c;
 // Colors -------------------
 
 $brand:                   hsl(200, 80%, 51%);
-$dark:                    #004584;
+$brand-dark:              #004584;
+$dark:                    $brand-dark;
 
 $error:                   hsla(0, 72%, 59%, 1.00);
 

src/client/utils/styles/_variables.scss

@@ -82,6 +82,10 @@
   @include unpin-top($header-height);
   left: $left-panel-width;
   background-color: $white;
+
+  &.full-width {
+    left: 0;
+  }
 }
 
 .title-bar {

src/client/views/settings-view/_layout.scss

@@ -33,14 +33,39 @@
 
       padding: 10px 5px;
 
-      button,
-      .button {
-        @extend %button-light;
-
+      button {
+        background-color: transparent;
         display: block;
         width: 100%;
-        padding: 10px 15px;
+        height: 35px;
         text-align: left;
+        color: $text-medium;
+
+        &.icon {
+          padding-left: 38px;
+
+          .svg-icon {
+            position: absolute;
+            top: 8px;
+            left: 12px;
+
+            path {
+              fill: hsla(0, 0%, 75%, 1.00);
+            }
+          }
+        }
+
+        &:hover {
+          background-color: hsla(200, 73%, 93%, 1.00);
+        }
+
+        &:active, &.active {
+          background-color: hsla(200, 73%, 93%, 1.00);
+
+          .svg-icon path {
+            fill: $brand;
+          }
+        }
       }
     }
 
@@ -65,6 +90,13 @@
         }
       }
 
+      .data-table {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        right: 20px;
+        bottom: 20px;
+      }
 
     }
   }