Filter based on flow classifications

finos#6887

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

@@ -8,7 +8,7 @@
     import {filters, resetFlowDetailsStore, selectedLogicalFlow, selectedPhysicalFlow} from "./flow-details-store";
     import PhysicalFlowTable from "./PhysicalFlowTable.svelte";
     import {mkFlowDetails} from "./flow-detail-utils";
-    import {mkAssessmentFilters} from "./filters/filter-utils";
+    import {getAssessmentFilters} from "./filters/filter-utils";
     import SelectedFlowDetailPanel from "./SelectedFlowDetailPanel.svelte";
     import {onMount} from "svelte";
     import DataExtractLink from "../../../../common/svelte/DataExtractLink.svelte";
@@ -18,7 +18,6 @@
     export let parentEntityRef;
 
     function filterFlows(allFlows, filters) {
-        console.log("ff", {allFlows, filters})
         return _
             .chain(allFlows)
             .map(d => Object.assign(d, {visible: _.every(filters, f => f.test(d))}))
@@ -35,6 +34,8 @@
     let mappedDataTypes = [];
     let assessmentFilters = [];
     let dataTypes = [];
+    let allDataTypes = [];
+    let flowClassifications = [];
     let allFlows = [];
     let physicalFlows = [];
     let logicalFlows = [];
@@ -71,7 +72,7 @@
 
             const mappedDataTypeIds = _.map(mappedDataTypes, d => d.dataTypeId);
             dataTypes = reduceToSelectedNodesOnly(allDataTypes, mappedDataTypeIds);
-            assessmentFilters = mkAssessmentFilters(flowView);
+            assessmentFilters = getAssessmentFilters(flowView);
             allFlows = mkFlowDetails(flowView, parentEntityRef);
         }
     }
@@ -89,6 +90,7 @@
     <div class="flow-detail-table">
         <FlowDetailFilters {dataTypes}
                            {assessmentFilters}
+                           {flowClassifications}
                            {physicalFlows}/>
 
         <LogicalFlowTable {logicalFlows}

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

@@ -0,0 +1,95 @@
+<script>
+    import {
+        mkClassificationFilterId,
+        mkClassificationFilter,
+        FilterKinds
+    } from "./filter-utils";
+    import _ from "lodash";
+    import {filters, updateFilters} from "../flow-details-store";
+    import RatingIndicatorCell
+        from "../../../../../ratings/components/rating-indicator-cell/RatingIndicatorCell.svelte";
+
+
+    export let flowClassifications = [];
+
+    function selectClassification(classification) {
+
+        const filterId = mkClassificationFilterId();
+
+        const existingFilter = _.find($filters, f => f.id === filterId);
+
+        const existingClassifications = _.get(existingFilter, "classifications", []);
+
+        const newClassifications = _.some(existingClassifications, r => _.isEqual(r, classification.code))
+            ? _.filter(existingClassifications, d => !_.isEqual(d, classification.code))
+            : _.concat(existingClassifications, [classification.code]);
+
+        const newFilter = mkClassificationFilter(filterId, newClassifications)
+
+        updateFilters(filterId, newFilter);
+    }
+
+
+    function isSelected(filters, fcCode){
+        const classificationFilter = _.find(
+            filters,
+            f => f.id === mkClassificationFilterId());
+        return _.some(
+            _.get(classificationFilter, "classifications", []),
+            selectedFcCode => fcCode === selectedFcCode);
+    }
+
+    function onClearFilters() {
+        $filters = _.reject($filters, f => f.kind === FilterKinds.FLOW_CLASSIFICATION);
+    }
+
+    $: hasFilters = _.some($filters, f => f.kind === FilterKinds.FLOW_CLASSIFICATION);
+
+</script>
+
+<div class="help-block"
+ style="padding-top: 1em;">
+    Filters the flows based upon their classification ratings.
+</div>
+<div style="display: flex; padding-top: 1em;  padding-bottom: 1em">
+    <table class="table table-condensed table table-hover">
+        <thead>
+        <tr>
+            <th>
+                Flow Classification
+            </th>
+            <th>
+                {#if hasFilters}
+                    <button class="btn-skinny"
+                            style="font-weight: lighter"
+                            on:click={onClearFilters}>
+                        Clear
+                    </button>
+                {/if}
+            </th>
+        </tr>
+        </thead>
+        <tbody>
+        {#each _.orderBy(flowClassifications, d => d.name) as fc}
+        <tr class="clickable"
+            class:selected={isSelected($filters, fc.code)}
+            on:click={() => selectClassification(fc)}>
+            <td>
+                <RatingIndicatorCell {...fc}/>
+            </td>
+            <td>
+                {fc.description}
+            </td>
+        </tr>
+        {/each}
+        </tbody>
+    </table>
+</div>
+
+<style>
+
+    .selected {
+        background-color: #eefaee !important;
+    }
+
+</style>

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

@@ -8,10 +8,16 @@ import AssessmentFilters from "./AssessmentFilters.svelte";
 import InboundOutboundFilters from "./InboundOutboundFilters.svelte";
 import PhysicalFlowAttributeFilters from "./PhysicalFlowAttributeFilters.svelte";
 import DataTypeFilters from "./DataTypeFilters.svelte";
+import FlowClassificationFilters from "./FlowClassificationFilters.svelte";
 
 export let dataTypes = [];
 export let assessmentFilters = [];
 export let physicalFlows = [];
+export let flowClassifications = [];
+
+
+$: classificationFilter = _.find($filters, d => d.kind === FilterKinds.FLOW_CLASSIFICATION);
+$: directionFilter = _.find($filters, d => d.kind === FilterKinds.DIRECTION);
 
 </script>
 
@@ -28,8 +34,8 @@ export let physicalFlows = [];
 
     <details class="filter-set" style="margin-top: 1em">
         <summary>
-            <Icon name="random"/> Flow Direction & Classification
-            {#if _.some($filters, d => d.kind === FilterKinds.DIRECTION) && _.find($filters, d => d.kind === FilterKinds.DIRECTION).direction !== Directions.ALL}
+            <Icon name="random"/> Flow Direction
+            {#if !_.isEqual(_.get(directionFilter, ["direction"], Directions.ALL), Directions.ALL)}
                 <span style="color: darkorange"
                       title="Flows have been filtered by direction">
                     <Icon name="exclamation-circle"/>
@@ -39,6 +45,19 @@ export let physicalFlows = [];
         <InboundOutboundFilters/>
     </details>
 
+    <details class="filter-set" style="margin-top: 1em">
+        <summary>
+            <Icon name="shield"/> Flow Classification
+            {#if !_.isEmpty(_.get(classificationFilter, ["classifications"], []))}
+                <span style="color: darkorange"
+                      title="Flows have been filtered by classification">
+                    <Icon name="exclamation-circle"/>
+                </span>
+            {/if}
+        </summary>
+        <FlowClassificationFilters {flowClassifications}/>
+    </details>
+
     <details class="filter-set">
         <summary>
             <Icon name="qrcode"/> Data Types

waltz-ng/client/data-flow/components/svelte/flow-detail-tab/filters/filter-utils.js

@@ -6,10 +6,11 @@ export const FilterKinds = {
     DATA_TYPE: "DATA_TYPE",
     ASSESSMENT: "ASSESSMENT",
     PHYSICAL_FLOW_ATTRIBUTE: "PHYSICAL_FLOW_ATTRIBUTE",
-    SELECTED_LOGICAL: "SELECTED_LOGICAL"
+    SELECTED_LOGICAL: "SELECTED_LOGICAL",
+    FLOW_CLASSIFICATION: "FLOW_CLASSIFICATION"
 }
 
-export function mkAssessmentFilters(flowView) {
+export function getAssessmentFilters(flowView) {
 
     const ratingSchemeItemsById = _.keyBy(flowView.ratingSchemeItems, d => d.id);
     const definitions = _.compact(_.concat(
@@ -57,6 +58,10 @@ export function mkDefinitionFilterId(definitionId) {
     return `ASSESSMENT_DEFINITION_${definitionId}`;
 }
 
+export function mkClassificationFilterId() {
+    return `FLOW_CLASSIFICATION`;
+}
+
 export function mkDataTypeFilterId() {
     return "DATA_TYPE";
 }
@@ -134,3 +139,18 @@ export function mkDirectionFilter(id, direction) {
             : _.isEqual(r.direction, direction)
     };
 }
+
+export function mkClassificationFilter(id, desiredClassificationRatings = []) {
+    return {
+        id,
+        kind: FilterKinds.FLOW_CLASSIFICATION,
+        classifications: desiredClassificationRatings,
+        test: flowRow => _.isEmpty(desiredClassificationRatings)
+            ? true
+            : _.some(
+                flowRow.dataTypesForLogicalFlow,
+                x => _.some(
+                    desiredClassificationRatings,
+                    d => _.isEqual(d, x.rating)))
+    }
+}