SzStandaloneGraph, SzPrefDictComponent, preference changes, datasource colors

angular.json

@@ -170,6 +170,113 @@
         }
       }
     },
+    "example/search-in-graph": {
+      "root": "examples/search-in-graph/",
+      "sourceRoot": "examples/search-in-graph/src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {
+        "@schematics/angular:component": {
+          "styleext": "scss",
+          "spec": false
+        },
+        "@schematics/angular:class": {
+          "spec": false
+        },
+        "@schematics/angular:directive": {
+          "spec": false
+        },
+        "@schematics/angular:guard": {
+          "spec": false
+        },
+        "@schematics/angular:module": {
+          "spec": false
+        },
+        "@schematics/angular:pipe": {
+          "spec": false
+        },
+        "@schematics/angular:service": {
+          "spec": false
+        }
+      },
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/@senzing/examples/search-in-graph",
+            "index": "examples/search-in-graph/src/index.html",
+            "main": "examples/search-in-graph/src/main.ts",
+            "polyfills": "examples/search-in-graph/src/polyfills.ts",
+            "tsConfig": "examples/search-in-graph/tsconfig.app.json",
+            "assets": [
+              "examples/search-in-graph/src/favicon.ico",
+              "examples/search-in-graph/src/assets"
+            ],
+            "styles": [
+              "src/lib/scss/styles.scss",
+              "examples/search-in-graph/src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "examples/search-in-graph/src/environments/environment.ts",
+                  "with": "examples/search-in-graph/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": "example/search-in-graph:build",
+            "port": 4300
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "example/search-in-graph:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "example/search-in-graph:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "examples/search-in-graph/tsconfig.app.json",
+              "examples/search-in-graph/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
     "example/search-with-results-and-details": {
       "root": "examples/search-with-results-and-details/",
       "sourceRoot": "examples/search-with-results-and-details/src",

examples/graph/src/app/app.component.html

@@ -4,7 +4,7 @@
   svgWidth=2000
   svgHeight=1000
   port=2080
-  entityIds="6443,18454,22365"
+  entityIds="1001"
   maxDegrees=3
   buildOut=2
   maxEntities=1000>

examples/graph/src/app/app.module.ts

@@ -4,7 +4,7 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { CommonModule, TitleCasePipe } from '@angular/common';
 import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { SenzingSdkModule, SzRestConfiguration, SzPoweredByComponent  } from '@senzing/sdk-components-ng';
-
+import { SenzingSdkGraphModule } from '@senzing/sdk-graph-components';
 import { AppComponent } from './app.component';
 
 @NgModule({
@@ -16,7 +16,8 @@ import { AppComponent } from './app.component';
     HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
-    SenzingSdkModule.forRoot()
+    SenzingSdkModule.forRoot(),
+    SenzingSdkGraphModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]

examples/search-in-graph/browserslist

@@ -0,0 +1,11 @@
+# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+#
+# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11

examples/search-in-graph/src/app/app.component.html

@@ -0,0 +1,66 @@
+<div style="text-align:left; font-weight: bold; font-size: 1.5em">
+  @senzing/sdk-components-ng/examples/search-in-graph
+</div>
+<div style="text-align:left; text-decoration: italic; font-size: 0.8em; margin: 2px 0 10px 0;">
+  An example Angular app showing usage of the sz-search, sz-standalone-graph working together.
+  yup
+</div>
+
+<!-- start search box -->
+<div class="component-example">
+  <sz-search
+    name="Jenny Smith"
+    #searchBox
+    disableIdentifierOptions="SSN_LAST4"
+    enableIdentifierOptions="SOCIAL_NETWORK"
+    (resultsChange)="onSearchResults($event)"
+    (resultsCleared)="onSearchResultsCleared($event)"
+    (exception)="onSearchException($event)"
+    (parameterChange)="onSearchParameterChange($event)"></sz-search>
+</div>
+<!-- end search box -->
+
+<!-- start graph context menu template -->
+<ng-template #graphContextMenu let-entityEvt>
+    <ul class="graph-context-menu">
+        <li>#{{entityEvt?.entityId}}</li>
+        <li (click)="openGraphItemInNewMenu(entityEvt.entityId)">Open in new tab</li>
+    </ul>
+</ng-template>
+<!-- end graph context menu template -->
+
+<button (click)="onTabClick('detail')">show detail</button>
+<button (click)="onTabClick('filters')">show filters</button>
+<h2>Loading: "{{ showSpinner }}"</h2>
+<div class="content-container">
+  <!-- start graph control -->
+  <div #graphContainer>
+      <sz-standalone-graph data-html2canvas-ignore
+        #graphComponent
+        *ngIf="showSearchResults"
+        filterWidth="320"
+        [graphIds]="searchResultEntityIds"
+        [showPopOutIcon]="false"
+        [showMatchKeyControl]="false"
+        [showFiltersControl]="showFilters"
+        [filterControlPosition]="'top-right'"
+        (entityClick)="onGraphEntityClick($event)"
+        [showMatchKeys]="true"
+        (requestStarted)="onRequestStarted($event)"
+        (renderComplete)="onRenderComplete($event)"
+        (requestComplete)="onRequestComplete($event)"
+    ></sz-standalone-graph>
+  </div>
+  <!--  end graph control  -->
+
+  <!-- start entity detail -->
+  <div *ngIf="showEntityDetail" class="embedded-detail-viewer">
+    <sz-entity-detail
+      #entityDetailComponent
+      [updatePrefsOnChange]="false"
+      [showGraphSection]="false"
+      [forceLayout]="'layout-rail'"
+      [entityId]="currentlySelectedEntityId"></sz-entity-detail>
+  </div>
+  <!-- end entity detail -->
+</div>

examples/search-in-graph/src/app/app.component.scss

@@ -0,0 +1,40 @@
+
+:host {
+  .download-pdf {
+    padding: 5px 10px;
+    display: inline-flex;
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+
+    svg { margin-right: 5px; }
+  }
+
+  .content-container {
+    position: relative;
+    background-color: #fff;
+    --sz-large-graph-height: 720px;
+    --sz-entity-graph-control-border-top: none;
+    --sz-entity-graph-control-border-right: none;
+    --sz-entity-graph-control-border-bottom: none;
+    --sz-entity-graph-control-border-left: none;
+    --sz-entity-graph-control-border-top-left-radius: 0;
+    --sz-entity-graph-control-border-top-right-radius: 0;
+    --sz-entity-graph-control-border-bottom-left-radius: 0;
+    --sz-entity-graph-control-border-bottom-right-radius: 0;
+    --sz-entity-graph-control-item-background-color: none;
+
+    .embedded-detail-viewer {
+      background-color: #fafafa;
+      border: 1px solid #c0c0c0;
+      width: 340px;
+      height: 100%;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      overflow: scroll;
+    }
+
+
+  }
+}