Merge pull request #108 from alephdata/develop

1.3.0

Author: kjacks

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@alephdata/vislib",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Graph network visualisation tool for aleph/followthemoney ",
   "keywords": [],
   "files": [
@@ -83,8 +83,8 @@
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-img": "^1.1.0",
     "rollup-plugin-json": "^4.0.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-sass": "^1.2.2",
+    "rollup-plugin-node-resolve": "^4.2.1",
+    "rollup-plugin-postcss": "^2.0.3",
     "rollup-plugin-sourcemaps": "^0.4.2",
     "rollup-plugin-typescript2": "^0.24.3",
     "ts-jest": "^24.1.0",

package.json

@@ -3,7 +3,8 @@ import commonjs from 'rollup-plugin-commonjs'
 import sourceMaps from 'rollup-plugin-sourcemaps'
 import typescript from 'rollup-plugin-typescript2'
 import json from 'rollup-plugin-json'
-import sass from 'rollup-plugin-sass'
+import postcss from 'rollup-plugin-postcss';
+
 import image from 'rollup-plugin-img'
 
 const pkg = require('./package.json');
@@ -21,15 +22,14 @@ export default {
   },
   plugins: [
     json(),
-    sass({
-      output: true,
-      insert: true
+    postcss({
+      extensions: [ '.css', '.scss' ],
     }),
     image(),
     // Allow node_modules resolution, so you can use 'external' to control
     // which external modules to include in the bundle
     // https://github.com/rollup/rollup-plugin-node-resolve#usage
-    resolve({browser: true,}),
+    resolve({browser: true}),
     // Compile TypeScript files
     typescript({useTsconfigDeclarationDir: true, objectHashIgnoreUnknownHack: true}),
     // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)

rollup.config.ts

@@ -9,12 +9,10 @@ import { Toolbar } from './Toolbar';
 import { Sidebar } from './Sidebar';
 import { History } from './History';
 import { EdgeCreateDialog, GroupingCreateDialog, VertexCreateDialog, TableEditor } from "./editor";
-import { Model, defaultModel } from '@alephdata/followthemoney'
 import { modes } from './interactionModes'
 
 interface IVisGraphProps {
   config: GraphConfig,
-  model: Model,
   layout: GraphLayout,
   viewport: Viewport,
   updateLayout: (layout:GraphLayout, historyModified?: boolean) => void,
@@ -40,7 +38,7 @@ export class VisGraph extends React.Component<IVisGraphProps, IVisGraphState> {
 
   constructor(props: any) {
     super(props)
-    const { config, model, layout, viewport } = props
+    const { config, layout, viewport } = props
 
     this.history = new History();
     this.svgRef = React.createRef()
@@ -91,10 +89,10 @@ export class VisGraph extends React.Component<IVisGraphProps, IVisGraphState> {
   }
 
   navigateHistory(factor:number) {
-    const { config, model } = this.props;
+    const { config } = this.props;
 
     const nextLayoutData = this.history.go(factor);
-    this.updateLayout(GraphLayout.fromJSON(config, model, nextLayoutData))
+    this.updateLayout(GraphLayout.fromJSON(config, nextLayoutData))
   }
 
   addVertexToPosition(initialPos?: Point) {

src/VisGraph.tsx

@@ -27,6 +27,7 @@ $border-color: rgba(16, 22, 26, 0.15);
     .bp3-table-container {
       box-shadow: none;
       height: inherit;
+      outline: none !important;
     }
 
     .bp3-popover-target {
@@ -59,14 +60,12 @@ $border-color: rgba(16, 22, 26, 0.15);
 
   &__schemaAdd {
     margin-top: $table-editor-padding;
-    padding-top: $table-editor-padding;
-    border-top: 1px solid $border-color;
   }
 
   &__ghostCell.bp3-table-cell {
     background-color: white;
     box-shadow: none;
-    pointer-events: none;    
+    pointer-events: none;
   }
 
   .bp3-table-cell {

src/editor/TableEditor.scss

@@ -218,7 +218,7 @@ class TableForSchema extends React.Component<ITableForSchemaProps, ITableForSche
             cellRenderer={(i) => {
               const entity = entities[i];
               return (
-                <Cell onKeyDown={(e) => console.log('asdasdasda')}>
+                <Cell>
                   {entity && (
                     <Popover
                       minimal
@@ -244,7 +244,7 @@ class TableForSchema extends React.Component<ITableForSchemaProps, ITableForSche
           <Column
             id="add-field"
             cellRenderer={() => (
-              <Cell className="TableEditor__ghostCell" />
+              <Cell className="TableEditor__ghostCell" interactive />
             )}
             columnHeaderCellRenderer={() => (
               <ColumnHeaderCell>

src/editor/TableEditor.tsx

@@ -1 +1,25 @@
+body {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  display: flex;
 
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  min-width: 100%;
+  height: 100vh;
+}
+
+.vertex--icon {
+  pointer-events: none;
+}
+
+.bp3-tab:focus, .bp3-button:focus {
+  outline: none;
+}

src/index.scss

@@ -1,3 +1,10 @@
+import '@blueprintjs/core/lib/css/blueprint.css';
+import '@blueprintjs/select/lib/css/blueprint-select.css';
+import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
+import '@blueprintjs/table/lib/css/table.css';
+
+import './index.scss';
+
 export * from './layout'
 export * from './editor'
 export * from './renderer'

src/index.ts

@@ -1,4 +1,4 @@
-import { Entity, Model, IEntityDatum } from '@alephdata/followthemoney'
+import { defaultModel, Entity, Model, IEntityDatum } from '@alephdata/followthemoney'
 import { forceSimulation, forceLink, forceCollide } from 'd3-force';
 import { DraggableEvent } from 'react-draggable';
 import { Vertex } from './Vertex'
@@ -31,12 +31,12 @@ export class GraphLayout {
   selection = new Array<string>()
   private hasDraggedSelection = false
 
-  constructor(config: GraphConfig, model: Model) {
+  constructor(config: GraphConfig) {
     this.config = config
-    this.model = model
+    this.model = new Model(defaultModel);
 
-    this.addVertex = this.addVertex.bind(this)
-    this.addEdge = this.addEdge.bind(this)
+    this.addVertex = this.addVertex.bind(this);
+    this.addEdge = this.addEdge.bind(this);
     this.addEntity = this.addEntity.bind(this);
     this.removeEntity = this.removeEntity.bind(this);
     this.isGroupingSelected = this.isGroupingSelected.bind(this);
@@ -153,11 +153,11 @@ export class GraphLayout {
   }
 
   selectVerticesByFilter(predicate: VertexPredicate) {
-    this.selection = this.getVertices().filter(predicate).map((v) => v.id)
+    this.selection = this.getVertices().filter((vertex) => !vertex.isHidden()).filter(predicate).map((v) => v.id)
   }
 
   selectArea(area: Rectangle) {
-    const selected = this.getVertices().filter((vertex) => area.contains(vertex.position))
+    const selected = this.getVertices().filter((vertex) => !vertex.isHidden() && area.contains(vertex.position))
     this.selection = selected.map((vertex) => vertex.id)
   }
 
@@ -376,7 +376,7 @@ export class GraphLayout {
   }
 
   update(withData:IGraphLayoutData):GraphLayout{
-    return GraphLayout.fromJSON(this.config, this.model, withData)
+    return GraphLayout.fromJSON(this.config, withData)
   }
 
   toJSON(): IGraphLayoutData {
@@ -389,11 +389,11 @@ export class GraphLayout {
     }
   }
 
-  static fromJSON(config: GraphConfig, model: Model, data: any): GraphLayout {
+  static fromJSON(config: GraphConfig, data: any): GraphLayout {
     const layoutData = data as IGraphLayoutData
-    const layout = new GraphLayout(config, model)
+    const layout = new GraphLayout(config)
     layoutData.entities.forEach((edata) => {
-      layout.entities.set(edata.id, model.getEntity(edata))
+      layout.entities.set(edata.id, layout.model.getEntity(edata))
     })
     layoutData.vertices.forEach((vdata) => {
       const vertex = Vertex.fromJSON(layout, vdata)

src/layout/GraphLayout.ts

@@ -164,7 +164,6 @@ export class GraphRenderer extends React.Component<IGraphRendererProps> {
             viewport={viewport}
             sourcePoint={this.getEdgeCreateSourcePoint()}/>
         }
-        {this.renderSelectionBox()}
         {this.renderGroupings()}
         {this.renderEdges()}
         {this.renderVertices()}