Feature/angular app

README.md

@@ -5,31 +5,34 @@ Contains a list of Popoto.js examples
     <tr valign="top">
         <td width="25%">Add-relation-event<br><a href="add-relation-event/readme.md"><img width="222" src="add-relation-event/screen/main.png"></a></td>
         <td width="25%">Auto-complete<br><a href="auto-complete/readme.md"><img width="222" src="auto-complete/screen/main.png"></a></td>
+        <td width="25%">Angular app<br><a href="angular-app/readme.md"><img width="222" src="angular-app/screen/main.png"></a></td>        
         <td width="25%">Change-query-root<br><a href="change-query-root/readme.md"><img width="222" src="change-query-root/screen/main.png"></a></td>
-        <td width="25%">Css-customization<br><a href="css-customization/readme.md"><img width="222" src="css-customization/screen/main.png"></a></td>
     </tr>
     <tr valign="top">
         <td width="25%">Cypher-viewer<br><a href="cypher-viewer/readme.md"><img width="222" src="cypher-viewer/screen/main.png"></a></td>
         <td width="25%">Factual<br><a href="factual/readme.md"><img width="222" src="factual/screen/main.png"></a></td>
         <td width="25%">Fit-text<br><a href="fit-text/readme.md"><img width="222" src="fit-text/screen/main.png"></a></td>
-        <td width="25%">Graph-results<br><a href="graph-results/readme.md"><img width="222" src="graph-results/screen/main.png"></a></td>
+        <td width="25%">Css-customization<br><a href="css-customization/readme.md"><img width="222" src="css-customization/screen/main.png"></a></td>
     </tr>
     <tr valign="top">
+        <td width="25%">Graph-results<br><a href="graph-results/readme.md"><img width="222" src="graph-results/screen/main.png"></a></td>    
         <td width="25%">Marker<br><a href="marker/readme.md"><img width="222" src="marker/screen/main.png"></a></td>
         <td width="25%">Materialize<br><a href="materialize/readme.md"><img width="222" src="materialize/screen/main.png"></a></td>
         <td width="25%">Multiple-selection<br><a href="multiple-selection/readme.md"><img width="222" src="multiple-selection/screen/main.png"></a></td>
-        <td width="25%">Northwind<br><a href="northwind/readme.md"><img width="222" src="northwind/screen/main.png"></a></td>
     </tr>
     <tr valign="top">
+        <td width="25%">Northwind<br><a href="northwind/readme.md"><img width="222" src="northwind/screen/main.png"></a></td>    
         <td width="25%">Query-viewer<br><a href="query-viewer/readme.md"><img width="222" src="query-viewer/screen/main.png"></a></td>
         <td width="25%">Reset-customization<br><a href="reset-customization/readme.md"><img width="222" src="reset-customization/screen/main.png"></a></td>
         <td width="25%">Results<br><a href="results/readme.md"><img width="222" src="results/screen/main.png"></a></td>
-        <td width="25%">Save<br><a href="save/readme.md"><img width="222" src="save/screen/main.png"></a></td>
     </tr>
     <tr valign="top">
+        <td width="25%">Save<br><a href="save/readme.md"><img width="222" src="save/screen/main.png"></a></td>
         <td width="25%">Simple-graph<br><a href="simple-graph/readme.md"><img width="222" src="simple-graph/screen/main.png"></a></td>
         <td width="25%">Start-from-schema<br><a href="start-from-schema/readme.md"><img width="222" src="start-from-schema/screen/main.png"></a></td>
         <td width="25%">Taxonomy<br><a href="taxonomy/readme.md"><img width="222" src="taxonomy/screen/main.png"></a></td>
+    </tr>
+        <tr valign="top">
         <td width="25%">US-regions<br><a href="us-regions/readme.md"><img width="222" src="us-regions/screen/main.png"></a></td>
     </tr>
 </table>

angular-app/.gitignore

@@ -0,0 +1,46 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events.json
+speed-measure-plugin.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

angular-app/README.md

@@ -0,0 +1,26 @@
+# AngularApp
+
+Example of [Popoto.js](http://popotojs.com/) on Neo4j movie dataset in angular 2+ app.
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.1.
+
+![Main screenshot](./screen/main.png "Main screenshot")
+
+## Add popoto to angular 2+ app
+
+1. do `yarn add popoto` (or `npm i popoto`)
+
+2. add `import * as popoto from 'popoto'` to top of `component.ts`
+
+![Add import](./screen/import.png "Add import")
+
+3. add code for initialization (config) popoto to `ngOnInit()` function (**not in `constructor`**)
+
+![Add configuration popoto](./screen/ngOnInit.png "Add configuration popoto")
+
+4. add html template to `app.component.html`
+
+5. add `"node_modules/popoto/dist/popoto.min.css"` to `angular.json > projects > angular-app > architect > build > options > styles` section
+
+![Add css to angular.json](./screen/css.png "Add css to angular.json")
+

angular-app/angular.json

@@ -0,0 +1,113 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-app": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:component": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:module": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/angular-app",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css",
+              "node_modules/popoto/dist/popoto.min.css",
+              "node_modules/materialize-css/dist/css/materialize.min.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angular-app:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular-app:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angular-app:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "tsconfig.app.json",
+              "tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }},
+  "defaultProject": "angular-app"
+}

angular-app/browserslist

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

angular-app/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "angular-app",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "~8.0.0",
+    "@angular/common": "~8.0.0",
+    "@angular/compiler": "~8.0.0",
+    "@angular/core": "~8.0.0",
+    "@angular/forms": "~8.0.0",
+    "@angular/platform-browser": "~8.0.0",
+    "@angular/platform-browser-dynamic": "~8.0.0",
+    "@angular/router": "~8.0.0",
+    "@types/jquery": "^3.3.31",
+    "materialize-css": "^1.0.0",
+    "popoto": "^2.0.18",
+    "rxjs": "~6.4.0",
+    "tslib": "^1.9.0",
+    "zone.js": "~0.9.1"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.800.0",
+    "@angular/cli": "~8.0.1",
+    "@angular/compiler-cli": "~8.0.0",
+    "@angular/language-service": "~8.0.0",
+    "@types/node": "~8.9.4",
+    "ts-node": "~7.0.0",
+    "tslint": "~5.15.0",
+    "typescript": "~3.4.3"
+  }
+}

angular-app/src/app/app-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

angular-app/src/app/app.component.html

@@ -0,0 +1,48 @@
+<div class="">
+    <ul id="collapsible-components" class="collapsible popout">
+        <!-- ======================================================================================================= -->
+        <!-- GRAPH QUERY-->
+        <!-- ======================================================================================================= -->
+        <li id="p-collapsible-popoto" class="active">
+            <div class="collapsible-header white-text" style="background-color: #525863; border-bottom: 0;"><i
+                    class="ppt-icon ppt-icon-logo" style="color:#8bb71a;"></i> Graph
+                Query in Angular 2+ application
+            </div>
+            <div class="collapsible-body no-padding" style="height: 600px; border-bottom: 0;">
+                <div id="popoto-taxonomy" class="ppt-taxo-nav" style="color: white; width: 280px">
+                </div>
+                <div id="popoto-graph" class="ppt-div-graph">
+                </div>
+            </div>
+        </li>
+        <!-- ======================================================================================================= -->
+        <!-- QUERY -->
+        <!-- ======================================================================================================= -->
+        <li id="p-collapsible-query" class="active">
+            <div class="collapsible-header white-text" style="background-color: #525863;border-bottom: 0;"><i
+                    class="ppt-icon ppt-icon-wrench" style="color:#8bb71a;"></i>Query
+            </div>
+            <div class="collapsible-body no-padding" style="border-bottom: 0;">
+                <div id="popoto-cypher" class="ppt-container-cypher center-align">
+                </div>
+            </div>
+        </li>
+        <!-- ======================================================================================================= -->
+        <!-- RESULTS -->
+        <!-- ======================================================================================================= -->
+        <li id="p-collapsible-results" class="active">
+            <div class="collapsible-header white-text" style="background-color: #525863;border-bottom: 0;"><i
+                    class="ppt-icon ppt-icon-sort-alpha-asc" style="color:#8bb71a;"></i>Results&nbsp;
+                <span class="" id="result-total-count">0</span>
+            </div>
+            <div class="collapsible-body no-padding" style="border-bottom: 0;">
+                <div class="row">
+                    <div id="popoto-results" class="col s12 cards-container">
+
+                    </div>
+                </div>
+            </div>
+        </li>
+    </ul>
+
+</div>