#584 updated for 6.1.0

senzing-garage · Sep 5, 2023 · b43baff · b43baff
1 parent df7c5a1
commit b43baff
Show file tree

Hide file tree

Showing 123 changed files with 7,402 additions and 3,793 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,7 @@ The major feature being added for this release is the inclusion a a new "How" re
     - `SzHowStepCardComponent` is the card component representing a Add Record, Singleton, Merge, Interim.
     - `SzHowSingletonCardComponent` represents a step or a non-resolved state with a single record that was not merged in.
     - `SzHowFinalEntityCardComponent` represents the top level node for a final state in a tree.
+- "How" UI service(`SzHowUIService`) that provides inter-op, eventing, and caching for different How components to use a shared service so things only need to be parsed/transformed once, and if something changes all the components can be notified etc.
 
 relevant tickets: #438 #496 #499 #513 #516 #525 #527 #529 #531 #534 #538 #545 #547 #548 #551 #555 #557 #558 #565 #567 #571 #572 #574 #581
 

diff --git a/docs/additional-documentation/graph-components.html b/docs/additional-documentation/graph-components.html
@@ -13,7 +13,7 @@
     </head>
     <body>
 
-        <div class="navbar navbar-default navbar-fixed-top visible-xs">
+        <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
             <a href="../" class="navbar-brand">Senzing SDK Components</a>
             <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
         </div>
@@ -51,7 +51,7 @@
 
 
 
-<h1 id="graph-components">Graph Components</h1>
+<h1>Graph Components</h1>
 <p>Graph components offer a visual representation of search results, or specified entities, and the relationships between or around them.</p>
 <ul>
 <li><code>SzStandaloneGraphComponent</code> is a rollup that contains both a <code>SzRelationshipNetworkComponent</code> and a <code>SzEntityDetailGraphFilterComponent</code> pre-wired together.</li>

diff --git a/docs/additional-documentation/graph-components/szrelationshipnetworkcomponent.html b/docs/additional-documentation/graph-components/szrelationshipnetworkcomponent.html
@@ -13,7 +13,7 @@
     </head>
     <body>
 
-        <div class="navbar navbar-default navbar-fixed-top visible-xs">
+        <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
             <a href="../../" class="navbar-brand">Senzing SDK Components</a>
             <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
         </div>
@@ -59,29 +59,29 @@
             style="width:100%; height:100%; margin:1%;">
     </object>
 </div>-->
-<h1 id="szrelationshipnetworkcomponent">SzRelationshipNetworkComponent</h1>
+<h1>SzRelationshipNetworkComponent</h1>
 <p>The <code>SzRelationshipNetworkComponent</code> creates a graphical representation of an entity and it&#39;s relationships to other entities.</p>
 <p><img src="../../images/ss-sz-relationship-network.png" alt="screen shot of SzRelationshipNetworkComponent" class="img-responsive"></p>
-<h2 id="properties-and-methods">Properties and Methods</h2>
+<h2>Properties and Methods</h2>
 <p>see <code>sdk-graph-components</code> documentation for the full list of component methods and properties: <a href="http://certified.senzing.com/sdk-graph-components/components/SzRelationshipNetworkComponent.html" target="_szdocs_graph">http://certified.senzing.com/sdk-graph-components/components/SzRelationshipNetworkComponent.html</a></p>
-<h2 id="examples">Examples</h2>
-<h4 id="angular">Angular</h4>
+<h2>Examples</h2>
+<h4>Angular</h4>
 <div><pre class="line-numbers"><code class="language-html">  &lt;sz-relationship-network
     svgWidth=2000
     svgHeight=1000
     port=2080
     entityIds=&quot;1001&quot;
     maxDegrees=3
     buildOut=2
-    maxEntities=1000&gt;&lt;/sz-relationship-network&gt;</code></pre></div><h4 id="web-component">Web Component</h4>
+    maxEntities=1000&gt;&lt;/sz-relationship-network&gt;</code></pre></div><h4>Web Component</h4>
 <div><pre class="line-numbers"><code class="language-html">  &lt;sz-wc-relationship-network-graph
     entity-ids=&quot;1,1001,1002&quot;
     svg-view-box=&quot;150 50 400 300&quot;
     svg-preserve-aspect-ratio=&quot;xMinYMid meet&quot;
     max-degrees=&quot;2&quot;
     build-out=&quot;5&quot;
     show-link-labels=&quot;true&quot;
-  &gt;&lt;/sz-wc-relationship-network-graph&gt;</code></pre></div><h1 id="differences-between-web-components-and-angular-implementations">Differences between Web Components and Angular Implementations</h1>
+  &gt;&lt;/sz-wc-relationship-network-graph&gt;</code></pre></div><h1>Differences between Web Components and Angular Implementations</h1>
 <p>The <code>SzRelationshipNetworkComponent</code> is not native to the <em>SDK Components</em> package, but is re-exported and included for convenience. The <code>sdk-components-ng</code> and <code>sdk-components-web</code> npm packages both re-export the graph components network relationship component. Due to tag namespace collision issues all web components are prefixed with <code>sz-wc</code>.</p>
 <p>If using the <code>sdk-components-ng</code> package the tag is called <code>sz-relationship-network</code>.
 If using the <code>sdk-components-web</code> package the tag is prefixed with <code>sz-wc-relationship-network</code>.</p>

diff --git a/docs/additional-documentation/graph-components/szstandalonegraphcomponent.html b/docs/additional-documentation/graph-components/szstandalonegraphcomponent.html
@@ -13,7 +13,7 @@
     </head>
     <body>
 
-        <div class="navbar navbar-default navbar-fixed-top visible-xs">
+        <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
             <a href="../../" class="navbar-brand">Senzing SDK Components</a>
             <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
         </div>
@@ -51,14 +51,14 @@
 
 
 
-<h1 id="szstandalonegraphcomponent">SzStandaloneGraphComponent</h1>
+<h1>SzStandaloneGraphComponent</h1>
 <p>The <code>SzStandaloneGraphComponent</code> creates a graphical representation of an entity and it&#39;s relationships to other entities and includes optional filtering and parameter control tray.</p>
 <p><img src="../../images/ss-graph-large.png" alt="screen shot of SzRelationshipNetworkComponent" class="img-responsive">
 <br/><br/><br/><br/></p>
-<h2 id="properties-and-methods">Properties and Methods</h2>
+<h2>Properties and Methods</h2>
 <p>see the component <code>sdk-graph-components</code> documentation for the full list of component methods and properties: <a href="http://certified.senzing.com/sdk-components-ng/components/SzStandaloneGraphComponent.html">http://certified.senzing.com/sdk-components-ng/components/SzStandaloneGraphComponent.html</a></p>
-<h2 id="examples">Examples</h2>
-<h4 id="angular">Angular</h4>
+<h2>Examples</h2>
+<h4>Angular</h4>
 <div><pre class="line-numbers"><code class="language-html">  &lt;sz-standalone-graph
     filterWidth=&quot;320&quot;
     [graphIds]=&quot;graphIds&quot;
@@ -68,15 +68,15 @@ <h4 id="angular">Angular</h4>
     [filterControlPosition]=&quot;&#39;top-right&#39;&quot;
     (entityClick)=&quot;onGraphEntityClick($event)&quot;
     [showMatchKeys]=&quot;true&quot;
-    &gt;&lt;/sz-standalone-graph&gt;</code></pre></div><h4 id="web-component">Web Component</h4>
+    &gt;&lt;/sz-standalone-graph&gt;</code></pre></div><h4>Web Component</h4>
 <div><pre class="line-numbers"><code class="language-html">  &lt;sz-wc-standalone-graph
     filter-width=&quot;320&quot;
     graph-ids=&quot;1,1001,1002&quot;
     show-pop-out-icon=&quot;false&quot;
     show-match-key-control=&quot;false&quot;
     show-filters-control=&quot;false&quot;
     filter-control-position=&quot;top-right&quot;
-    show-match-keys=&quot;true&quot;&gt;&lt;/sz-wc-standalone-graph&gt;</code></pre></div><h1 id="differences-between-web-components-and-angular-implementations">Differences between Web Components and Angular Implementations</h1>
+    show-match-keys=&quot;true&quot;&gt;&lt;/sz-wc-standalone-graph&gt;</code></pre></div><h1>Differences between Web Components and Angular Implementations</h1>
 <p>If using the <code>sdk-components-ng</code> package the tag is called <code>sz-standalone-graph</code>.
 If using the <code>sdk-components-web</code> package the tag is called <code>sz-wc-standalone-graph</code>.</p>
 <p>The other main difference between the two implementations is that if using angular the attributes are <a href="https://en.wikipedia.org/wiki/Camel_case">Camel Case</a>, and if using web components the attributes are kabob case. See <a href="https://en.wikipedia.org/wiki/Letter_case#Special_case_styles">https://en.wikipedia.org/wiki/Letter_case#Special_case_styles</a></p>

diff --git a/docs/additional-documentation/themes.html b/docs/additional-documentation/themes.html
@@ -13,7 +13,7 @@
     </head>
     <body>
 
-        <div class="navbar navbar-default navbar-fixed-top visible-xs">
+        <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
             <a href="../" class="navbar-brand">Senzing SDK Components</a>
             <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
         </div>
@@ -51,7 +51,7 @@
 
 
 
-<h1 id="themes">Themes</h1>
+<h1>Themes</h1>
 <p>By default things will come unstyled. It&#39;s much easier to add styles than it is to remove them. Component styles are opt-in rather than opt-out.</p>
 <p>The theming of components is handled via CSS Variables. Essentially you add the css-var key and it&#39;s css value to which the selector/property combination applies to your documents body styles like below:</p>
 <div><pre class="line-numbers"><code class="language-scss">body {
@@ -60,10 +60,10 @@ <h1 id="themes">Themes</h1>
         --sz-search-button-clear-font-size: 10px;
         --sz-search-label-margin: 0 0 10px 4px;
         --sz-search-input-border-radius: 8px;
-}</code></pre></div><h2 id="pre-built">Pre-Built</h2>
+}</code></pre></div><h2>Pre-Built</h2>
 <p>For a list of precompiled themes and how to use them 
 see <a href="./themes/pre-built.html">the docs</a> for more information.</p>
-<h2 id="custom">Custom</h2>
+<h2>Custom</h2>
 <p>For more information about creating a custom theme 
 see <a href="./themes/customizing.html">the docs</a> for more information.</p>
 

diff --git a/docs/additional-documentation/themes/customizing.html b/docs/additional-documentation/themes/customizing.html
@@ -13,7 +13,7 @@
     </head>
     <body>
 
-        <div class="navbar navbar-default navbar-fixed-top visible-xs">
+        <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
             <a href="../../" class="navbar-brand">Senzing SDK Components</a>
             <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
         </div>
@@ -51,7 +51,7 @@
 
 
 
-<h1 id="customizing-themes">Customizing Themes</h1>
+<h1>Customizing Themes</h1>
 <p>sdk-components-ng and sdk-components-web both make use of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS Variables</a> for styling. This provides a easy way to modify the existing styles, or make entirely new themes just by editing the values in the dom inspector, and saving the overridden values in a simple stylesheet.</p>
 <p>the following are the currently supported css variables:</p>
 <div><pre class="line-numbers"><code class="language-css">body {

diff --git a/docs/additional-documentation/themes/pre-built.html b/docs/additional-documentation/themes/pre-built.html
@@ -13,7 +13,7 @@
     </head>
     <body>
 
-        <div class="navbar navbar-default navbar-fixed-top visible-xs">
+        <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
             <a href="../../" class="navbar-brand">Senzing SDK Components</a>
             <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
         </div>
@@ -51,15 +51,15 @@
 
 
 
-<h1 id="pre-defined">Pre Defined</h1>
+<h1>Pre Defined</h1>
 <p>We&#39;ve included some pre-built themes for quick usage to get you up and running. You&#39;ll almost certainly want to create your own, or tweak things to match your application&#39;s styling as needed. The compiled css files are located in the styles/themes directory in the package being used.</p>
-<h2 id="using-sass">using SASS</h2>
+<h2>using SASS</h2>
 <p>if you&#39;re using sass(and scss processor can reference node_modules), open up your main scss file(src/styles.scss in default angular layout) and include the following.</p>
-<div><pre class="line-numbers"><code class="language-scss">&#64;import &#39;&#64;senzing/sdk-components-ng/styles/themes/senzing.css&#39;;</code></pre></div><h2 id="using-css">using CSS</h2>
+<div><pre class="line-numbers"><code class="language-scss">&#64;import &#39;&#64;senzing/sdk-components-ng/styles/themes/senzing.css&#39;;</code></pre></div><h2>using CSS</h2>
 <p>there are several different ways to include a pre-built theme in your project.
 You could just add the stylesheet path to your main html file and include the css reference in the HEAD of your document.</p>
 <div><pre class="line-numbers"><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;node_modules/&#64;senzing/sdk-components-ng/styles/themes/senzing.css&quot;&gt;</code></pre></div><p>for production it is recommended you copy the theme stylesheet you will be using over to a static directory(probably a bad idea to leave node_modules open to the world) and change the above reference to point to it&#39;s location. </p>
-<h3 id="angular-projects">Angular projects</h3>
+<h3>Angular projects</h3>
 <p>if you&#39;re using the sdk components in the scope of an angular project the recommended way is to add the theme file path to your <em>angular.json</em> file for your project.</p>
 <img style="border: 1px solid #CCC; padding: 10px 20px 30px 20px; margin: 12px 0 40px 0;" src="../../docs/images/themes/add-to-style-paths.png">
 

diff --git a/docs/additional-documentation/web-components.html b/docs/additional-documentation/web-components.html
@@ -13,7 +13,7 @@
     </head>
     <body>
 
-        <div class="navbar navbar-default navbar-fixed-top visible-xs">
+        <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
             <a href="../" class="navbar-brand">Senzing SDK Components</a>
             <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
         </div>
@@ -51,15 +51,15 @@
 
 
 
-<h1 id="what-are-web-components-">What are Web Components ?</h1>
+<h1>What are Web Components ?</h1>
 <p>Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets built on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that work with HTML.</p>
 <p>For more information on the subject see the following sites:</p>
 <ul>
 <li><a href="https://www.webcomponents.org/introduction">WebComponents.org</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">Web Components | MDN</a></li>
 <li><a href="https://developers.google.com/web/fundamentals/web-components/">Building Components | Web Fundamentals | Google Developers</a></li>
 </ul>
-<h1 id="web-components-vs-angular">Web Components Vs. Angular</h1>
+<h1>Web Components Vs. Angular</h1>
 <ul>
 <li>Tag Attributes are kabob-case</li>
 <li>Tag names are prefixed with <code>sz-wc</code></li>
@@ -81,10 +81,10 @@ <h1 id="web-components-vs-angular">Web Components Vs. Angular</h1>
 &lt;script&gt;
     // hide graph filter control programatically
     document.querySelector(&#39;sz-wc-standalone-graph&#39;).showFiltersControl = false;
-&lt;/script&gt;</code></pre></div><h1 id="getting-started">Getting Started</h1>
+&lt;/script&gt;</code></pre></div><h1>Getting Started</h1>
 <p>Getting set up to work with the Senzing SDK Components can be done in as little as 10 minutes if you already have an Senzing REST API Server installation running. </p>
 <p>See the <a href="web-components/quick-start.html">Quick Start Guide</a> for instructions.</p>
-<h1 id="compatibility">Compatibility</h1>
+<h1>Compatibility</h1>
 <p>Any web page or application that can render web component tags can be enabled by adding the <code>@senzing/sdk-components-web</code> package to it&#39;s dependencies. The basic requirement is that the application hosting the tags can parse javascript and supports rendering custom component tags. All modern web browsers, some mobile browsers, and any native applications that support embedded web views should be able to render these components.</p>
 <p>Add the css file to your document:</p>
 <div><pre class="line-numbers"><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;/node_modules/\&#64;senzing/sdk-components-web/senzing-components-web.css&quot;&gt;</code></pre></div><p>Add the javascript to your document:</p>

diff --git a/docs/additional-documentation/web-components/examples.html b/docs/additional-documentation/web-components/examples.html
@@ -13,7 +13,7 @@
     </head>
     <body>
 
-        <div class="navbar navbar-default navbar-fixed-top visible-xs">
+        <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
             <a href="../../" class="navbar-brand">Senzing SDK Components</a>
             <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
         </div>
@@ -51,15 +51,15 @@
 
 
 
-<h1 id="what-are-web-components-">What are Web Components ?</h1>
+<h1>What are Web Components ?</h1>
 <p>Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets built on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that work with HTML.</p>
 <p>For more information on the subject see the following sites:</p>
 <ul>
 <li><a href="https://www.webcomponents.org/introduction">WebComponents.org</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">Web Components | MDN</a></li>
 <li><a href="https://developers.google.com/web/fundamentals/web-components/">Building Components | Web Fundamentals | Google Developers</a></li>
 </ul>
-<h1 id="web-components-vs-angular">Web Components Vs. Angular</h1>
+<h1>Web Components Vs. Angular</h1>
 <ul>
 <li>Tag Attributes are kabob-case</li>
 <li>Tag names are prefixed with <code>sz-wc</code></li>
@@ -81,10 +81,10 @@ <h1 id="web-components-vs-angular">Web Components Vs. Angular</h1>
 &lt;script&gt;
     // hide graph filter control programatically
     document.querySelector(&#39;sz-wc-standalone-graph&#39;).showFiltersControl = false;
-&lt;/script&gt;</code></pre></div><h1 id="getting-started">Getting Started</h1>
+&lt;/script&gt;</code></pre></div><h1>Getting Started</h1>
 <p>Getting set up to work with the Senzing SDK Components can be done in as little as 10 minutes if you already have an Senzing REST API Server installation running. </p>
 <p>See the <a href="web-components/quick-start.html">Quick Start Guide</a> for instructions.</p>
-<h1 id="compatibility">Compatibility</h1>
+<h1>Compatibility</h1>
 <p>Any web page or application that can render web component tags can be enabled by adding the <code>@senzing/sdk-components-web</code> package to it&#39;s dependencies. The basic requirement is that the application hosting the tags can parse javascript and supports rendering custom component tags. All modern web browsers, some mobile browsers, and any native applications that support embedded web views should be able to render these components.</p>
 <p>Add the css file to your document:</p>
 <div><pre class="line-numbers"><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;/node_modules/\&#64;senzing/sdk-components-web/senzing-components-web.css&quot;&gt;</code></pre></div><p>Add the javascript to your document:</p>

diff --git a/docs/additional-documentation/web-components/examples/attribute-search-with-results.html b/docs/additional-documentation/web-components/examples/attribute-search-with-results.html
@@ -13,7 +13,7 @@
     </head>
     <body>
 
-        <div class="navbar navbar-default navbar-fixed-top visible-xs">
+        <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
             <a href="../../../" class="navbar-brand">Senzing SDK Components</a>
             <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
         </div>
@@ -51,12 +51,12 @@
 
 
 
-<h1 id="search-by-attribute">Search By Attribute</h1>
+<h1>Search By Attribute</h1>
 <p>This is an example of how to wire the attribute search form to a results list, and the results list to a entity detail viewer. You submit the search, it sends it to the api server, returns the results, then those results are fed in to the result list component. </p>
 <p>When the user clicks on a individual result in the list the <code>resultClick</code> event is emitted, in the handler for this event the code grabs the <code>entityId</code> property from the json and sets the <code>entity-id</code> attribute on the detail viewer tag.</p>
 <p><img src="../../../images/ss-search-by-attributes.png" alt="screen shot of Search By Attribute example" class="img-responsive">
 <br/><br/><br/><br/></p>
-<h2 id="source">Source</h2>
+<h2>Source</h2>
 <div><pre class="line-numbers"><code class="language-html">&lt;!doctype html&gt;
 &lt;html lang=&quot;en&quot;&gt;
 &lt;head&gt;