@@ -15,7 +15,7 @@ import { Attribute } from '../components/attribute.js';
1515import { Input } from '../components/input.js' ;
1616import { Icon } from '../components/icon.js' ;
1717import { withTooltip } from '../components/tooltip.js' ;
18- import { emitEvent } from '../utils.js' ;
18+ import { emitEvent , loadStylesheet } from '../utils.js' ;
1919import { RadioGroup } from '../components/radio_group.js' ;
2020import { Checkbox } from '../components/checkbox.js' ;
2121import { capitalize } from '../display_utils.js' ;
@@ -26,7 +26,7 @@ import { Alert } from '../components/alert.js';
2626
2727const { div, span } = van . tags ;
2828
29- const attributeWidth = 300 ;
29+ const attributeWidth = 250 ;
3030const descriptionWidth = 932 ;
3131const multiEditWidth = 400 ;
3232
@@ -79,10 +79,12 @@ const TAG_HELP = {
7979 * @returns
8080 */
8181const MetadataTagsCard = ( props , item ) => {
82+ loadStylesheet ( 'metadata-tags' , stylesheet ) ;
83+
8284 const title = `${ item . type } Tags ` ;
8385 const attributes = [
8486 'critical_data_element' ,
85- ...( item . type === 'column' ? [ 'excluded_data_element ' , 'pii_flag ' ] : [ ] ) ,
87+ ...( item . type === 'column' ? [ 'pii_flag ' , 'excluded_data_element ' ] : [ ] ) ,
8688 'description' ,
8789 ...TAG_KEYS ,
8890 ] . map ( key => {
@@ -235,33 +237,40 @@ const InheritedIcon = (/** @type string */ inheritedFrom) => withTooltip(
235237 * @returns
236238 */
237239const CdeDisplay = ( value , isColumn , isInherited ) => {
240+ if ( value ) {
241+ return div (
242+ { style : `width: ${ attributeWidth } px` } ,
243+ span (
244+ { class : 'flex-row fx-gap-1 metadata-badge cde' } ,
245+ Icon ( { size : 24 , classes : 'text-purple' } , 'star' ) ,
246+ span ( isColumn ? 'Critical data element' : 'All critical data elements' ) ,
247+ ( isColumn && isInherited ) ? InheritedIcon ( 'table' ) : null ,
248+ ) ,
249+ ) ;
250+ }
238251 return span (
239252 { class : 'flex-row fx-gap-1' , style : `width: ${ attributeWidth } px` } ,
240- Icon (
241- { size : value ? 24 : 20 , classes : value ? 'text-purple' : 'text-disabled' } ,
242- value ? 'star' : 'cancel' ,
243- ) ,
244- span (
245- { class : value ? '' : 'text-secondary' } ,
246- isColumn
247- ? ( value ? 'Critical data element' : 'Not a critical data element' )
248- : ( value ? 'All critical data elements' : 'Not all critical data elements' ) ,
249- ) ,
253+ Icon ( { size : 20 , classes : 'text-disabled' } , 'cancel' ) ,
254+ span ( { class : 'text-secondary' } , isColumn ? 'Not a critical data element' : 'Not all critical data elements' ) ,
250255 ( isColumn && isInherited ) ? InheritedIcon ( 'table' ) : null ,
251256 ) ;
252257}
253258
254259const XdeDisplay = ( /** @type boolean */ value ) => {
260+ if ( value ) {
261+ return div (
262+ { style : `width: ${ attributeWidth } px` } ,
263+ span (
264+ { class : 'flex-row fx-gap-1 metadata-badge xde' } ,
265+ Icon ( { size : 20 , classes : 'text-brown' } , 'visibility_off' ) ,
266+ span ( 'Excluded data element' ) ,
267+ ) ,
268+ ) ;
269+ }
255270 return span (
256271 { class : 'flex-row fx-gap-1' , style : `width: ${ attributeWidth } px` } ,
257- Icon (
258- { size : 20 , classes : value ? 'text-brown' : 'text-disabled' } ,
259- value ? 'visibility_off' : 'visibility' ,
260- ) ,
261- span (
262- { class : value ? '' : 'text-secondary' } ,
263- value ? 'Excluded data element' : 'Not an excluded data element' ,
264- ) ,
272+ Icon ( { size : 20 , classes : 'text-disabled' } , 'visibility' ) ,
273+ span ( { class : 'text-secondary' } , 'Not an excluded data element' ) ,
265274 ) ;
266275}
267276
@@ -273,13 +282,13 @@ const PiiDisplay = (/** @type string|null */ value) => {
273282 const typeLabel = pii_type_map [ type ] ;
274283 caption = `${ pii_risk_map [ risk ] ?? 'Moderate' } Risk${ typeLabel ? ' - ' + typeLabel : '' } ${ detail && detail !== typeLabel ? ' / ' + detail : '' } ` ;
275284 }
276- return span (
277- { class : 'flex-row fx-gap-1' , style : `width: ${ attributeWidth } px` } ,
278- Icon ( { size : 24 , classes : 'text-orange' } , 'shield_person' ) ,
279- div (
280- { class : 'flex-column fx-gap-1 ' } ,
285+ return div (
286+ { style : `width: ${ attributeWidth } px` } ,
287+ span (
288+ { class : 'flex-row fx-gap-1 metadata-badge pii' } ,
289+ Icon ( { size : 21 , classes : 'text-orange ' } , 'shield_person' ) ,
281290 span ( 'PII data' ) ,
282- caption ? span ( { class : 'text-caption' } , caption ) : null ,
291+ caption ? withTooltip ( Icon ( { size : 16 } , 'help' ) , { text : caption } ) : null ,
283292 ) ,
284293 ) ;
285294 }
@@ -300,8 +309,8 @@ const MetadataTagsMultiEdit = (props, selectedItems) => {
300309
301310 const attributes = [
302311 'critical_data_element' ,
303- 'excluded_data_element' ,
304312 'pii_flag' ,
313+ 'excluded_data_element' ,
305314 ...TAG_KEYS ,
306315 ] . map ( key => ( {
307316 key,
@@ -451,4 +460,31 @@ const WarningDialog = (open, pendingAction, warnCde, warnPii) => {
451460 ) ;
452461} ;
453462
463+ const stylesheet = new CSSStyleSheet ( ) ;
464+ stylesheet . replace ( `
465+ .metadata-badge {
466+ display: inline-flex;
467+ padding: 4px 12px 4px 6px;
468+ border-radius: 15px;
469+ height: 30px;
470+ box-sizing: border-box;
471+ }
472+
473+ .metadata-badge.cde {
474+ background-color: rgba(171, 71, 188, 0.15);
475+ }
476+
477+ .metadata-badge.cde i {
478+ margin-top: -3px;
479+ }
480+
481+ .metadata-badge.pii {
482+ background-color: rgba(255, 152, 0, 0.15);
483+ }
484+
485+ .metadata-badge.xde {
486+ background-color: rgba(141, 110, 99, 0.15);
487+ }
488+ ` ) ;
489+
454490export { MetadataTagsCard , MetadataTagsMultiEdit , TAG_KEYS } ;
0 commit comments