- more labels for flow classifications

- nicer popovers

#6895

Author: davidwatkins73

waltz-ng/client/common/svelte/Toggle.svelte

@@ -41,3 +41,9 @@
         </span>
     {/if}
 {/if}
+
+<style>
+    button {
+        font-size: inherit;
+    }
+</style>

waltz-ng/client/common/svelte/Tooltip.svelte

@@ -10,6 +10,7 @@
 
     export let content;
     export let props;
+    export let trigger = "mouseenter click";
     export let placement = "top";
     export let delay = [300, 100];
 
@@ -22,7 +23,7 @@
                 arrow: true,
                 interactive: true,
                 appendTo: document.body,
-                trigger: 'mouseenter click',
+                trigger,
                 theme: "light-border",
                 placement,
                 delay,

waltz-ng/client/data-flow/components/svelte/flow-detail-tab/DataTypeMiniTable.svelte

@@ -0,0 +1,75 @@
+<script context="module">
+    import {writable} from "svelte/store";
+    let hideRatings = writable(true);
+</script>
+
+<script>
+    import _ from "lodash";
+    import EntityLabel from "../../../../common/svelte/EntityLabel.svelte";
+    import Toggle from "../../../../common/svelte/Toggle.svelte";
+
+    export let decorators = [];
+    export let flowClassifications = []
+
+
+    $: flowClassificationsByCode = _.keyBy(flowClassifications, d => d.code);
+
+    $: hasRatings =  !_.isEmpty(flowClassifications)
+    $: showRatings = !$hideRatings && hasRatings;
+
+</script>
+
+<table class="">
+    <tbody class="small">
+    {#each _.orderBy(decorators, d => d.decoratorEntity.name) as type}
+        <tr>
+            <td>
+                <div class="rating-icon"
+                     style={`background-color: ${flowClassificationsByCode[type.rating]?.color}`}>
+                </div>
+                <EntityLabel ref={type.decoratorEntity}
+                             showIcon={false}>
+                </EntityLabel>
+            </td>
+            {#if showRatings}
+                <td>
+                    {_.get(flowClassificationsByCode, [type.rating, "name"], "-")}
+                </td>
+            {/if}
+        </tr>
+    {/each}
+    </tbody>
+</table>
+
+{#if hasRatings}
+    <div class="smaller">
+        <Toggle state={showRatings}
+                labelOn="Hide Ratings"
+                onToggle={() => $hideRatings = !$hideRatings}
+                labelOff="Show Ratings"/>
+    </div>
+{/if}
+
+
+
+<style>
+
+    .rating-icon {
+        display: inline-block;
+        height: 1em;
+        width: 1em;
+        border:1px solid #ccc;
+        border-radius: 2px;
+    }
+
+    table {
+        width: 100%;
+    }
+
+    table td {
+        padding-bottom: 0.2em;
+        padding-right: 0.6em;
+        border-bottom: 1px solid #eee;
+        vertical-align: top;
+    }
+</style>

waltz-ng/client/data-flow/components/svelte/flow-detail-tab/DataTypeTooltipContent.svelte

@@ -23,6 +23,8 @@
     import PhysicalFlowAttributeFilters from "./filters/PhysicalFlowAttributeFilters.svelte";
     import Icon from "../../../../common/svelte/Icon.svelte";
     import DataExtractLink from "../../../../common/svelte/DataExtractLink.svelte";
+    import FlowClassificationFilters from "./filters/FlowClassificationFilters.svelte";
+    import {flowClassificationStore} from "../../../../svelte-stores/flow-classification-store";
 
     export let parentEntityRef;
 
@@ -35,6 +37,9 @@
     let allFlows = [];
     let physicalFlows = [];
     let logicalFlows = [];
+    let flowClassificationCall = flowClassificationStore.findAll();
+
+    $: flowClassifications = $flowClassificationCall?.data;
 
     $: {
         if (parentEntityRef) {
@@ -108,7 +113,7 @@
 
             <details class="filter-set" style="margin-top: 1em">
                 <summary>
-                    <Icon name="random"/> Flow Direction
+                    <Icon name="random"/> Flow Direction & Classification
                     {#if _.some($filters, d => d.kind === FilterKinds.DIRECTION) && _.find($filters, d => d.kind === FilterKinds.DIRECTION).direction !== Directions.ALL}
                         <span style="color: darkorange"
                               title="Flows have been filtered by direction">
@@ -117,6 +122,7 @@
                     {/if}
                 </summary>
                 <InboundOutboundFilters/>
+                <FlowClassificationFilters/>
             </details>
 
             <details class="filter-set">
@@ -160,9 +166,11 @@
         </details>
 
         <LogicalFlowTable {logicalFlows}
+                          {flowClassifications}
                           assessments={logicalFlowPrimaryAssessments}/>
         <br>
-        <PhysicalFlowTable {physicalFlows}/>
+        <PhysicalFlowTable {physicalFlows}
+                           {flowClassifications}/>
 
         <div style="padding-top: 1em" class="pull-right">
             <span>
@@ -184,7 +192,8 @@
     </div>
     {#if $selectedLogicalFlow || $selectedPhysicalFlow}
         <div class="flow-detail-context-panel">
-            <SelectedFlowDetailPanel assessmentDefinitions={logicalFlowPrimaryAssessments}/>
+            <SelectedFlowDetailPanel flowClassifications={flowClassifications}
+                                     assessmentDefinitions={logicalFlowPrimaryAssessments}/>
         </div>
     {/if}
 </div>

waltz-ng/client/data-flow/components/svelte/flow-detail-tab/FlowDetailPanel.svelte

@@ -7,10 +7,11 @@
     import {filters, selectedLogicalFlow, selectedPhysicalFlow, updateFilters} from "./flow-details-store";
     import {truncate} from "../../../../common/string-utils";
     import Tooltip from "../../../../common/svelte/Tooltip.svelte";
-    import DataTypeTooltipContent from "./DataTypeTooltipContent.svelte";
+    import DataTypeTooltipContent from "./DataTypeMiniTable.svelte";
     import NoData from "../../../../common/svelte/NoData.svelte";
 
     export let logicalFlows = [];
+    export let flowClassifications = [];
     export let assessments;
 
     let qry;
@@ -67,7 +68,8 @@
 
     function mkDataTypeTooltipProps(row) {
         return {
-            decorators: row.dataTypesForLogicalFlow
+            decorators: row.dataTypesForLogicalFlow,
+            flowClassifications
         };
     }
 
@@ -102,9 +104,10 @@
 <div>
     <SearchInput bind:value={qry}/>
 </div>
+
 <div class="table-container"
      class:waltz-scroll-region-350={_.size(logicalFlows) > 10}>
-    <table class="table table-condensed small"
+    <table class="table table-condensed small table-hover"
            style="margin-top: 1em">
         <thead>
         <tr>
@@ -137,6 +140,7 @@
                 </td>
                 <td>
                     <Tooltip content={DataTypeTooltipContent}
+                             trigger={"mouseenter"}
                              props={mkDataTypeTooltipProps(flow)}>
                         <svelte:fragment slot="target">
                             <span>{truncate(mkDataTypeString(flow.dataTypesForLogicalFlow), 30)}</span>

waltz-ng/client/data-flow/components/svelte/flow-detail-tab/LogicalFlowTable.svelte

@@ -13,11 +13,12 @@
     import {selectedPhysicalFlow, selectedLogicalFlow} from "./flow-details-store";
     import {mkLogicalFromFlowDetails} from "./flow-detail-utils";
     import NoData from "../../../../common/svelte/NoData.svelte";
-    import DataTypeTooltipContent from "./DataTypeTooltipContent.svelte";
+    import DataTypeTooltipContent from "./DataTypeMiniTable.svelte";
     import {truncate} from "../../../../common/string-utils";
     import Tooltip from "../../../../common/svelte/Tooltip.svelte";
 
-    export let physicalFlows;
+    export let physicalFlows = [];
+    export let flowClassifications = [];
 
     function selectPhysicalFlow(flow) {
         if ($selectedPhysicalFlow === flow) {
@@ -29,9 +30,27 @@
     }
 
     function mkDataTypeTooltipProps(row) {
+        row.dataTypesForSpecification;
+
+        const ratingByDataTypeId = _.reduce(
+            row.dataTypesForLogicalFlow,
+            (acc, d) => {
+                acc[d.decoratorEntity.id] = d.rating;
+                return acc;
+            },
+            {});
+
+        const decorators = _.map(
+            row.dataTypesForSpecification,
+            d => Object.assign(
+                {},
+                d,
+                { rating: ratingByDataTypeId[d.decoratorEntity?.id] }));
+
         return {
-            decorators: row.dataTypesForSpecification
-        }
+            decorators,
+            flowClassifications
+        };
     }
 
     function mkDataTypeString(dataTypes) {
@@ -43,7 +62,6 @@
             .value();
     }
 
-
     let qry;
     let visibleFlows;
     let enumsCall = enumValueStore.load();
@@ -64,8 +82,6 @@
                 "logicalFlow.target.name",
                 "logicalFlow.target.externalId"
             ]);
-
-
 </script>
 
 
@@ -86,7 +102,7 @@
 </div>
 <div class="table-container"
      class:waltz-scroll-region-350={_.size(physicalFlows) > 10}>
-    <table class="table table-condensed small"
+    <table class="table table-condensed small table-hover"
            style="margin-top: 1em">
         <thead>
         <tr>
@@ -127,6 +143,7 @@
                 </td>
                 <td>
                     <Tooltip content={DataTypeTooltipContent}
+                             trigger={"mouseenter"}
                              props={mkDataTypeTooltipProps(flow)}>
                         <svelte:fragment slot="target">
                             <span>{truncate(mkDataTypeString(flow.dataTypesForSpecification), 30)}</span>

waltz-ng/client/data-flow/components/svelte/flow-detail-tab/PhysicalFlowTable.svelte

@@ -1,14 +1,17 @@
 <script>
-    import {selectedLogicalFlow, selectedPhysicalFlow} from "./flow-details-store";
+    import {filters, selectedLogicalFlow, selectedPhysicalFlow} from "./flow-details-store";
     import Icon from "../../../../common/svelte/Icon.svelte";
     import SelectedLogicalFlowDetail from "./SelectedLogicalFlowDetail.svelte";
     import SelectedPhysicalFlowDetail from "./SelectedPhysicalFlowDetail.svelte";
+    import _ from "lodash";
 
     export let assessmentDefinitions = [];
+    export let flowClassifications = [];
 
     function clearSelected() {
         $selectedPhysicalFlow = null;
         $selectedLogicalFlow = null;
+        $filters = _.reject($filters, d => d.id === "SELECTED_LOGICAL")
     }
 
 </script>
@@ -32,7 +35,8 @@
         <div class="col-md-12">
 
             {#if $selectedLogicalFlow}
-                <SelectedLogicalFlowDetail {assessmentDefinitions}/>
+                <SelectedLogicalFlowDetail {flowClassifications}
+                                           {assessmentDefinitions}/>
             {/if}
 
             {#if $selectedPhysicalFlow}