Merge pull request #182 from uc-cdis/chore/data-style

Chore/data style

.eslintrc.js

@@ -36,5 +36,6 @@ module.exports = {
         // see https://github.com/clayne11/eslint-import-resolver-meteor/issues/17
         // - seems to affect Codacy :-(
         "import/extensions": ["off", "never"],
+        "react/jsx-indent": "off"
     }
 };

src/DataDictionary/DataDictionaryNode.jsx

@@ -35,7 +35,7 @@ const LinkTable = ({ links }) => {
     <Table>
       <TableHead>
         <TableRow>
-          {fields.map((field) =>
+          {fields.map(field =>
             <TableData first_cr key={field}>{field}</TableData>)}
         </TableRow>
       </TableHead>
@@ -210,7 +210,6 @@ const DownloadButton = styled.a`
 `;
 
 
-
 /**
  * Component renders a view with details of a particular dictionary type (node - /dd/typename) or
  * of the whole dictionary (/dd/graph)

src/DataDictionary/GraphCreator.js

@@ -1,12 +1,12 @@
-//import * as d3 from 'd3';
+// import * as d3 from 'd3';
 import { select, selectAll } from 'd3-selection';
 import { forceSimulation, forceLink } from 'd3-force';
 import { extent } from 'd3-array';
 
 import { color, legendCreator, addArrows, addLinks, calculatePosition } from '../utils';
 
 const d3 = {
-  select, selectAll, forceSimulation, forceLink, extent
+  select, selectAll, forceSimulation, forceLink, extent,
 };
 
 

src/DataModelGraph/SvgGraph.jsx

@@ -108,7 +108,7 @@ export function createSvgGraph(nodesIn, edges) {
     } else {
       nodeInfo.adjust_text_pos = 0;
     }
-    for (let i = 0; i < splitName.length; i++) { 
+    for (let i = 0; i < splitName.length; i++) {
       graph.select('#'.concat(nodeInfo.name))
         .append('text')
         .attr('text-anchor', 'middle')

src/DataModelGraph/utils.test.js

@@ -26,7 +26,7 @@ describe('the DataModelGraph utils helper', () => {
     const { nodes, edges } = buildTestData();
     const { bfOrder, treeLevel2Names, name2Level } = nodesBreadthFirst(nodes, edges);
     console.log('tree info', treeLevel2Names);
-    expect(bfOrder.length).toBe(nodes.length-1); // node z is floating ...
+    expect(bfOrder.length).toBe(nodes.length - 1); // node z is floating ...
     expect(treeLevel2Names.length).toBe(3); // 'd' should fall under 'project' with 'b'
     expect(treeLevel2Names[0].length).toBe(1); // project
     expect(treeLevel2Names[1].length).toBe(2); // b, d
@@ -68,7 +68,7 @@ describe('the DataModelGraph utils helper', () => {
         expect(node.position[0] > 0 && node.position[0] <= 1).toBe(true);
         expect(node.position[1] > 0 && node.position[1] <= 1).toBe(true);
         expect(node.positionIndex[0] < 2).toBe(true); // at most 2 nodes per row
-        expect(node.positionIndex[1] ).toBeLessThan( maxRows );
+        expect(node.positionIndex[1]).toBeLessThan(maxRows);
       },
     );
   });

src/Explorer/ExplorerComponent.jsx

@@ -5,7 +5,7 @@ import { GQLHelper } from '../gqlHelper';
 import { getReduxStore } from '../reduxStore';
 import ExplorerTabPanel from './ExplorerTabPanel';
 import SideBar from './ExplorerSideBar';
-
+import { BodyBackground } from './style';
 
 const gqlHelper = GQLHelper.getGQLHelper();
 
@@ -159,7 +159,7 @@ class ExplorerComponent extends Component {
 }
 
 export const RelayExplorerComponent = createRefetchContainer(
-  withBoxAndNav(withAuthTimeout(ExplorerComponent)),
+  withBoxAndNav(withAuthTimeout(ExplorerComponent), BodyBackground),
   {
     viewer: gqlHelper.explorerPageFragment,
   },

src/Explorer/ExplorerSideBar.jsx

@@ -55,22 +55,23 @@ class ExplorerSidebar extends Component {
         <StyledCheckBoxGroup
           listItems={projects}
           title="Projects"
-          selected_items={this.props.selectedFilters.projects}
+          selectedItems={this.props.selectedFilters.projects}
           group_name="projects"
           onChange={state => this.props.onChange({ ...this.props.selectedFilters, ...state })}
         />
         <StyledCheckBoxGroup
           listItems={fileFormats}
-          selected_items={this.props.selectedFilters.file_formats}
+          selectedItems={this.props.selectedFilters.file_formats}
           title="File Formats"
           group_name="file_formats"
           onChange={state => this.props.onChange({ ...this.props.selectedFilters, ...state })}
         />
         <StyledCheckBoxGroup
           listItems={fileTypes}
-          selected_items={this.props.selectedFilters.file_types}
+          selectedItems={this.props.selectedFilters.file_types}
           title="File Types"
           group_name="file_types"
+          lastChild
           onChange={state => this.props.onChange({ ...this.props.selectedFilters, ...state })}
         />
       </ExplorerSidebarStyle>

src/Explorer/ExplorerTable.jsx

@@ -19,6 +19,8 @@ export const ExplorerTableStyle = styled.table`
   width: 100%;
   border-collapse: collapse;
   overflow: hidden;
+  font-size: 15px;
+
 `;
 
 

src/Explorer/style.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Sidebar } from '../theme';
+import { TableRow, Sidebar } from '../theme';
 
 export const Cell = styled.td`
   padding: 0.25rem 0px 0.25rem 0.5em;
@@ -16,9 +16,8 @@ export const TableData = styled.td`
   background: ${props => (props.first_cr ? ExplorerTableBarColor : 'white')};
   color: ${props => (props.first_cr ? 'white' : '#222')};
   display: table-cell;
-  padding: 0.5rem 1rem;
+  padding: 1rem 1rem;
   height: 100%;
-  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
@@ -37,6 +36,11 @@ export const TableFootCell = styled(TableData)`
 export const ExplorerSidebarStyle = styled(Sidebar)`
   width: 25%;
   font-size: 15px;
+  background: ${ExplorerTableBarColor};
+  margin-right: 2em;
+  padding: 0em 2em;
+  border: 1px solid #a9a9a9;
+  border-radius: 5px;
 `;
 
 export const TableFooter = styled.tfoot`
@@ -61,6 +65,7 @@ const ActivePageButtonColor = '#71594d';
 export const PageButton = styled.button`
   width: 30px;
   height: 30px;
+  border: 0px;
   background: ${props => (props.active ? ActivePageButtonColor : ExplorerTableBarColor)};
   color: ${props => (props.active ? 'white' : '#000000')};
   outline: none;
@@ -83,27 +88,35 @@ export const ExplorerTabs = styled.div`
 
 export const ExplorerTab = styled.div`
   display: inline-block;
-  border: outset 1px gray;
-  padding: 5px;
-  background-color: ${props => (props.active ? 'white' : '#f8fcf9')};
-  border-bottom: ${props => (props.active ? 'solid 2px white' : 'outset 1px gray')};
-  margin-bottom:0px;
-  margin-left:0px;
-  margin-right:0px;
+  background-color: ${props => (props.active ? 'white' : 'none')};
   cursor:pointer;
+  padding: 10px;
   font-size: 15px;
+  display: inline-block;
+  border: ${props => (props.active ? '1.5px solid #a9a9a9' : '0px')};
+  border-bottom: 0px;
+  border-top-left-radius: ${props => (props.active ? '5px' : '0px')};
+  border-top-right-radius: ${props => (props.active ? '5px' : '0px')};
+}
 `;
 
 export const ExplorerTabFrame = styled.div`
   display: inline-block;
   position: relative;
   margin-top: -1px;
   margin-left:0px;
-  border: outset 1px gray;
-  padding: 10px;
+  background: ${ExplorerTableBarColor};
   width: 100%;
+  border: 1.5px solid #a9a9a9;
 `;
 
 export const ExplorerTabBox = styled.div`
   display:${props => (props.active ? 'block' : 'none')};
 `;
+
+export const BodyBackground = '#ecebeb';
+
+export const ExplorerTableRow = styled.tr`
+  ${TableRow};
+  overflow: visible;
+`;

src/Popup/Popup.jsx

@@ -63,11 +63,11 @@ const Popup = ({ message, code, error, closeText, cancelText, confirmText,
       <Message>
         <div>{message}</div>
         {code &&
-        <Code className="json"> {code} </Code>
+          <Code className="json"> {code} </Code>
         }
         {error && <Error>Error</Error>}
         {error &&
-        <Code className="json"> {error} </Code>
+          <Code className="json"> {error} </Code>
         }
       </Message>
       {onClose &&

src/components/CheckBox.jsx

@@ -16,19 +16,23 @@ const LabelCheckBox = styled(Label)`
 
 const CheckBox = styled.div`
    padding: 1em 0em;
-   border-bottom: 2px solid #7d7474;
+   border-bottom: ${props => (props.lastChild ? '0px' : '2px solid #7d7474')};
 `;
 
 
 export class CheckBoxGroup extends Component {
   static propTypes = {
-    listItems: PropTypes.array,
-    group_name: PropTypes.string,
-    selected_items: PropTypes.array,
-    title: PropTypes.string,
-    onChange: PropTypes.func,
+    listItems: PropTypes.array.isRequired,
+    group_name: PropTypes.string.isRequired,
+    selectedItems: PropTypes.array.isRequired,
+    title: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    lastChild: PropTypes.bool,
   };
 
+  static defaultProps = {
+    lastChild: false,
+  };
   constructor(props) {
     super(props);
     this.state = {
@@ -37,26 +41,27 @@ export class CheckBoxGroup extends Component {
   }
 
   onChangeBox = (item) => {
-    const pos = this.props.selected_items.indexOf(item);
+    const pos = this.props.selectedItems.indexOf(item);
     let selectedItems = [];
+
     if (pos === -1) {
-      selectedItems = [...this.props.selected_items, item];
+      selectedItems = [...this.props.selectedItems, item];
     } else {
-      selectedItems = [...this.props.selected_items.slice(0, pos), ...this.props.selected_items.slice(pos + 1)];
+      selectedItems = [...this.props.selectedItems.slice(0, pos), ...this.props.selectedItems.slice(pos + 1)];
     }
     const state = { [this.props.group_name]: selectedItems };
     this.props.onChange(state);
   };
 
   render() {
-    const selectedItems = this.props.selected_items;
+    const selectedItems = this.props.selectedItems;
     // console.log(selectedItems);
     const listItems = (this.state.collapsed === 1)
       ? this.props.listItems.slice(0, 3)
       : this.props.listItems;
 
     return (
-      <CheckBox>
+      <CheckBox lastChild={this.props.lastChild}>
         {this.props.title}
         {listItems.map((item, i) => (
           <div key={i}>

src/components/SelectComponent.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import Select from 'react-select';
 
 
 const makeDefaultSelectedState = value => ({
@@ -9,21 +10,37 @@ const makeDefaultSelectedState = value => ({
 
 export const SelectionDiv = styled.div`
   font-size: 15px;
-`;
+  position: relative;
+  vertical-align: middle;  
+  span {
+    vertical-align: middle;
+    margin-right: 10px;
+  }
 
+  .Select-menu-outer {
+    top: auto;
+    bottom: 100%;
+  }
+`;
+const Dropdown = styled(Select)`
+  display: inline-block;
+  vertical-align: middle;
+`;
 
 export default class SelectComponent extends Component {
   static propTypes = {
     title: PropTypes.string,
     values: PropTypes.arrayOf(PropTypes.number),
     onChange: PropTypes.func,
     defaultSelect: PropTypes.any,
+    placeholder: PropTypes.string,
     selectedValue: PropTypes.number,
   };
 
   static defaultProps = {
     title: '',
     values: [],
+    placeholder: 'Select...',
     defaultSelect: 0,
     selectedValue: 0,
     onChange: () => {},
@@ -49,18 +66,19 @@ export default class SelectComponent extends Component {
   }
 
   render() {
+    const options = this.props.values.map(value => ({ value, label: value }));
+
     return (
       <SelectionDiv>
-        <label>{this.props.title}</label>
-        <select
+        <span>{this.props.title}</span>
+        <Dropdown
+          name={this.props.title}
+          options={options}
           value={this.state.selectedValue}
-          onChange={event => this.doChangeSelectedValue(event.nativeEvent.target.value)}
-        >
-          {this.props.values.map((item, i) => (
-            <option key={i} value={item}>{item}</option>
-          ),
-          )}
-        </select>
+          placeholder={this.props.placeholder}
+          onChange={event => this.doChangeSelectedValue(event.value)}
+          clearable={false}
+        />
       </SelectionDiv>
     );
   }

src/theme.js

@@ -56,14 +56,16 @@ export const Box = styled.div`
 
 export const Body = styled.div`
   padding: 50px 100px;
+  background: ${props => props.background}
 `;
 
 export const Margin = styled.div`
   height: 100px;
+  background: ${props => props.background};
   width: 100%;
 `;
 
-export const TableBarColor = '#585585';
+export const TableBarColor = '#7d7474';
 
 export const Table = styled.table`
   table-layout:auto;
@@ -115,9 +117,9 @@ export const TableRow = styled.tr`
   text-overflow: ellipsis;
   overflow: hidden;
   overflow-x: hidden;
-  overflow-y: hidden;
+  overflow-y: visible;
   display: table;
-  font-size: 1.3rem;
+  font-size: 1.5rem;
   width: 100%;
 `;
 
@@ -186,5 +188,4 @@ export const Label = styled.label`
 
 export const Sidebar = styled.div`
   float:left;
-  border-top: 2px solid tomato;
 `;