senzing-garage · arawinters · Sep 6, 2023 · Sep 5, 2023 · Sep 5, 2023
@@ -6,18 +6,29 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 [markdownlint](https://dlaa.me/markdownlint/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [6.1.0] - 2023-05-05
+## [6.1.0] - 2023-09-06
 
 The major feature being added for this release is the inclusion a a new "How" report component. The How api functions are meant to provide information on HOW records in an entity came together or were pushed apart during resolution. The Visual How component will illustrate the final entity and allow the user to walk back through the entities resolution steps, branching off when singletons are merged in or virtual entities are created from the result of previous record resolution steps.
 
 ### Modified
 - new graph icons. see #499
 - match keys are now shown by default in the graph. #496
+- new why and why not report column formatting to match g2Explorer. #558 #551
+- why and why not datatransforms changed to match g2Explorer. #529
 
 ### Added
 - "How" entity report component(s) added. see #438
-
-relevant tickets: #438 #496 #499
+  - Added `SzHowEntityComponent` component which is the only component that should be used at an implementation level. The other components listed below are components that this component uses to create things like different color cards, nested trees, navigation, groups etc.
+  - Added `SzHowNavComponent` component which is used to provide quick step jumping based on filter criteria.
+  - Added `SzHowStepNodeComponent` component which represents a *node* in the step tree. Nodes are different that *Steps* since they can be other trees, groups, and recurse. Step nodes will contain `SzHowStepCardComponent`, `SzHowStepStackComponent`, `SzHowFinalEntityCardComponent`, `SzHowSingletonCardComponent`, and/or nested `SzHowStepNodeComponent` components.
+  - Added `SzHowStepStackComponent` component which represents a collapsible group of `ADD Record` steps found in sequence.
+  - Added `SzHowStepCardBase` which serves as a base class for card permutations.
+    - `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
 
 ## [6.0.0] - 2023-01-20
 

@@ -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>

@@ -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>

@@ -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>

@@ -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>
 

@@ -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 {

@@ -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">
 

@@ -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>