11<script >
2-
32 import {dataTypeStore } from " ../../../../svelte-stores/data-type-store"
43 import {logicalFlowStore } from " ../../../../svelte-stores/logical-flow-store"
54 import {mkSelectionOptions } from " ../../../../common/selector-utils"
87 import LogicalFlowTable from " ./LogicalFlowTable.svelte"
98 import {filters , resetFlowDetailsStore , selectedLogicalFlow , selectedPhysicalFlow } from " ./flow-details-store"
109 import PhysicalFlowTable from " ./PhysicalFlowTable.svelte"
11- import {
12- Directions ,
13- mkFlowDetails ,
14- mkLogicalFromFlowDetails } from " ./flow-detail-utils"
15- import {
16- FilterKinds ,
17- mkAssessmentFilters } from " ./filters/filter-utils"
10+ import {mkFlowDetails } from " ./flow-detail-utils"
11+ import {mkAssessmentFilters } from " ./filters/filter-utils"
1812 import SelectedFlowDetailPanel from " ./SelectedFlowDetailPanel.svelte"
19- import AssessmentFilters from " ./filters/AssessmentFilters.svelte"
20- import DataTypeFilters from " ./filters/DataTypeFilters.svelte"
21- import InboundOutboundFilters from " ./filters/InboundOutboundFilters.svelte"
2213 import {onMount } from " svelte"
23- import PhysicalFlowAttributeFilters from " ./filters/PhysicalFlowAttributeFilters.svelte"
24- import Icon from " ../../../../common/svelte/Icon.svelte"
2514 import DataExtractLink from " ../../../../common/svelte/DataExtractLink.svelte"
26- import FlowClassificationFilters from " ./filters/FlowClassificationFilters.svelte"
2715 import {flowClassificationStore } from " ../../../../svelte-stores/flow-classification-store"
16+ import FlowDetailFilters from " ./filters/FlowDetailFilters.svelte"
2817
2918 export let parentEntityRef;
3019
20+ function filterFlows (allFlows , filters ) {
21+ console .log (" ff"
22+ return _
23+ .chain (allFlows)
24+ .map (d => Object .assign (d, {visible: _ .every (filters, f => f .test (d))}))
25+ .value ();
26+ }
27+
3128 let selectionOptions;
32- let flowViewCall;
29+
30+ let flowViewCall = null ;
31+ let flowClassificationCall = null ;
32+ let dataTypesCall = null ;
33+
3334 let flowView;
3435 let mappedDataTypes = [];
3536 let assessmentFilters = [];
3637 let dataTypes = [];
3738 let allFlows = [];
3839 let physicalFlows = [];
3940 let logicalFlows = [];
40- let flowClassificationCall = flowClassificationStore .findAll ();
4141
42- $: flowClassifications = $flowClassificationCall? .data ;
42+ onMount (() => {
43+ resetFlowDetailsStore ();
44+ flowClassificationCall = flowClassificationStore .findAll ();
45+ dataTypesCall = dataTypeStore .findAll ();
46+ });
4347
44- $: {
45- if (parentEntityRef) {
46- selectionOptions = mkSelectionOptions (parentEntityRef);
47- flowViewCall = logicalFlowStore .getViewForSelector (selectionOptions);
48- }
49- }
50-
51- onMount (() => resetFlowDetailsStore ());
52-
53- let dataTypesCall = dataTypeStore .findAll ();
5448 $: allDataTypes = $dataTypesCall? .data ;
55-
49+ $ : flowClassifications = $flowClassificationCall ? . data ;
5650 $: flowView = $flowViewCall? .data ;
5751
52+ $: filteredFlows = filterFlows (allFlows, $filters);
53+ $: physicalFlows = _ .filter (filteredFlows, d => ! _ .isEmpty (d .physicalFlow ));
54+ $: allAssessmentDefinitions = _ .concat (
55+ flowView? .logicalFlowAssessmentDefinitions || [],
56+ flowView? .physicalFlowAssessmentDefinitions || [],
57+ flowView? .physicalSpecificationAssessmentDefinitions || []);
58+
59+ $: logicalFlows = _
60+ .chain (filteredFlows)
61+ .uniqBy (d => d .logicalFlow .id )
62+ .value ();
63+
5864 $: {
5965 if (flowView && allDataTypes) {
60-
6166 mappedDataTypes = _
6267 .chain (flowView .dataTypeDecorators , d => d .decoratorEntity )
6368 .uniq ()
6469 .orderBy (d => d .name )
6570 .value ();
6671
6772 const mappedDataTypeIds = _ .map (mappedDataTypes, d => d .dataTypeId );
68-
6973 dataTypes = reduceToSelectedNodesOnly (allDataTypes, mappedDataTypeIds);
70-
7174 assessmentFilters = mkAssessmentFilters (flowView);
72-
7375 allFlows = mkFlowDetails (flowView, parentEntityRef);
7476 }
7577 }
7678
77- function filterFlows ( allFlows , filters ) {
78- return _
79- . chain (allFlows)
80- . map ( d => Object . assign (d, {visible : _ . every (filters, f => f . test (d))}))
81- . value ();
79+ $ : {
80+ if (parentEntityRef) {
81+ selectionOptions = mkSelectionOptions (parentEntityRef);
82+ flowViewCall = logicalFlowStore . getViewForSelector (selectionOptions);
83+ }
8284 }
8385
84- $: filteredFlows = filterFlows (allFlows, $filters);
85-
86- $: physicalFlows = _ .filter (filteredFlows, d => ! _ .isEmpty (d .physicalFlow ));
87-
88- $: logicalFlows = _
89- .chain (filteredFlows)
90- .map (d => mkLogicalFromFlowDetails (d))
91- .uniqBy (d => d .logicalFlow .id )
92- .value ();
93-
94- $: logicalFlowPrimaryAssessments = _ .get (flowView, " primaryAssessmentDefinitions"
95-
86+ $: console .log ({filterFlows, physicalFlows, logicalFlows})
9687< / script>
9788
9889
99-
10090< div class = " flow-detail-panel" >
10191 < div class = " flow-detail-table" >
102- <details >
103-
104- <summary >
105- Filters
106- {#if ! _ .isEmpty ($filters )}
107- <button class =" btn btn-skinny"
108- on:click ={() => $filters = []}>
109- Clear All
110- </button >
111- {/if }
112- </summary >
113-
114- <details class =" filter-set" style =" margin-top: 1em"
115- <summary >
116- <Icon name =" random"
117- {#if _ .some ($filters , d => d .kind === FilterKinds .DIRECTION ) && _ .find ($filters , d => d .kind === FilterKinds .DIRECTION ).direction !== Directions .ALL }
118- <span style =" color: darkorange"
119- title =" Flows have been filtered by direction"
120- <Icon name =" exclamation-circle"
121- </span >
122- {/if }
123- </summary >
124- <InboundOutboundFilters />
125- <FlowClassificationFilters />
126- </details >
127-
128- <details class =" filter-set"
129- <summary >
130- <Icon name =" qrcode"
131- {#if _ .some ($filters , d => d .kind === FilterKinds .DATA_TYPE )}
132- <span style =" color: darkorange"
133- title =" Data type filters have been applied"
134- <Icon name =" exclamation-circle"
135- </span >
136- {/if }
137- </summary >
138- <DataTypeFilters {dataTypes }/>
139- </details >
140-
141- <details class =" filter-set"
142- <summary >
143- <Icon name =" puzzle-piece"
144- {#if _ .some ($filters , d => d .kind === FilterKinds .ASSESSMENT )}
145- <span style =" color: darkorange"
146- title =" Assessment filters have been applied"
147- <Icon name =" exclamation-circle"
148- </span >
149- {/if }
150- </summary >
151- <AssessmentFilters {assessmentFilters }/>
152- </details >
153-
154- <details class =" filter-set"
155- <summary >
156- <Icon name =" asterisk"
157- {#if _ .some ($filters , d => d .kind === FilterKinds .PHYSICAL_FLOW_ATTRIBUTE )}
158- <span style =" color: darkorange"
159- title =" Physical flow attribute filters have been applied"
160- <Icon name =" exclamation-circle"
161- </span >
162- {/if }
163- </summary >
164- <PhysicalFlowAttributeFilters flows ={physicalFlows }/>
165- </details >
166- </details >
92+ < FlowDetailFilters {dataTypes}
93+ {assessmentFilters}
94+ {physicalFlows}/ >
16795
16896 < LogicalFlowTable {logicalFlows}
16997 {flowClassifications}
170- assessments ={ logicalFlowPrimaryAssessments }/>
98+ assessmentDefinitions = {allAssessmentDefinitions }/ >
17199 < br>
172100 < PhysicalFlowTable {physicalFlows}
173- {flowClassifications }/>
101+ {flowClassifications}
102+ assessmentDefinitions= {allAssessmentDefinitions}/ >
174103
175- <div style =" padding-top: 1em" class =" pull-right"
104+ < div style= " padding-top: 1em"
105+ class = " pull-right" >
176106 < span>
177107 < DataExtractLink name= " Export Logical Flow Details"
178108 filename= " Logical Flows"
193123 {#if $selectedLogicalFlow || $selectedPhysicalFlow}
194124 < div class = " flow-detail-context-panel" >
195125 < SelectedFlowDetailPanel flowClassifications= {flowClassifications}
196- assessmentDefinitions ={logicalFlowPrimaryAssessments }/>
126+ assessmentDefinitions= {allAssessmentDefinitions }/ >
197127 < / div>
198128 {/ if }
199129< / div>
200130
201131< style>
202-
203132 .flow - detail- context- panel {
204133 width: 30 % ;
205134 padding- left: 1em ;
215144 width: 70 % ;
216145 flex: 1 1 50 %
217146 }
218-
219- .filter-set {
220- background-color #fafafa ;
221- }
222-
223147< / style>
0 commit comments