Impl [Feature sets][Feature vectors] Statistics: add icons (#679)

src/components/DetailsMetadata/DetailsMetadata.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
 import Tooltip from '../../common/Tooltip/Tooltip'
 import TextTooltipTemplate from '../../elements/TooltipTemplate/TextTooltipTemplate'
@@ -12,50 +13,55 @@ import './detailsMetadata.scss'
 const DetailsMetadata = ({ selectedItem }) => {
   const { primaryKey } = selectedItem.schema ?? { primaryKey: '' }
   const metadata = generateMetadata(selectedItem, primaryKey)
-  const headers = Object.keys(metadata[0] ?? {}).map(key => ({
-    value: key,
-    visible: metadata.some(metadataItem => metadataItem[key].visible)
+  const headers = Object.entries(metadata[0]).map(([label, value]) => ({
+    label,
+    type: value.type,
+    hidden: metadata.every(statisticsItem => statisticsItem[label].hidden)
   }))
 
   return (
-    <div className="artifact-metadata">
-      <div className="artifact-metadata__table">
-        <div className="artifact-metadata__table-header">
-          {headers.map(header => {
-            return header.visible ? (
-              <div
-                className={`artifact-metadata__table-item header-item metadata-cell_${
-                  !/icon/.test(header.value.toLowerCase())
-                    ? header.value
-                    : 'icon'
-                }`}
-                key={header.value}
-              >
-                <Tooltip template={<TextTooltipTemplate text={header.value} />}>
-                  {!/icon/.test(header.value.toLowerCase()) && header.value}
+    <div className="details-metadata">
+      <div className="details-metadata__table">
+        <div className="details-metadata__table-header">
+          {headers.map(({ label, type, hidden }) => {
+            const metadataHeaderClassNames = classnames(
+              'details-metadata__table-item',
+              'header-item',
+              `metadata-cell__${label}`,
+              `metadata-cell__type_${type}`,
+              hidden && 'metadata-cell_hidden'
+            )
+
+            return (
+              <div className={metadataHeaderClassNames} key={label}>
+                <Tooltip template={<TextTooltipTemplate text={label} />}>
+                  {type !== 'icon' && label}
                 </Tooltip>
               </div>
-            ) : null
+            )
           })}
         </div>
-        <div className="artifact-metadata__table-body">
+        <div>
           {metadata.map((metadataItem, metadataItemIndex) => (
             <div
               key={metadataItem.name.value + metadataItemIndex}
-              className="artifact-metadata__table-row"
+              className="details-metadata__table-row"
             >
-              {Object.values(metadataItem).map((metadataValue, index) =>
-                headers[index].visible ? (
+              {Object.values(metadataItem).map((metadataValue, index) => {
+                const metadataItemClassNames = classnames(
+                  'details-metadata__table-item',
+                  `metadata-cell__${headers[index].label}`,
+                  `metadata-cell__type_${headers[index].type}`,
+                  headers[index].hidden && 'metadata-cell_hidden'
+                )
+
+                return (
                   <div
                     key={Date.now() + index}
-                    className={`artifact-metadata__table-item metadata-cell_${
-                      metadataValue.type.match('icon')
-                        ? 'icon'
-                        : headers[index].value
-                    }`}
+                    className={metadataItemClassNames}
                   >
                     {metadataValue.type.match(/icon|html/) &&
-                      metadataValue.visible &&
+                      !metadataValue.hidden &&
                       metadataValue.value}
                     {metadataValue.type === 'chip' && (
                       <ChipCell
@@ -77,8 +83,8 @@ const DetailsMetadata = ({ selectedItem }) => {
                       </Tooltip>
                     )}
                   </div>
-                ) : null
-              )}
+                )
+              })}
             </div>
           ))}
         </div>

src/components/DetailsMetadata/detailsMetadata.scss

@@ -1,68 +1,44 @@
 @import '../../scss/colors';
 @import '../../scss/borders';
+@import '../../scss/mixins';
 
-.artifact-metadata {
+.details-metadata {
   padding: 20px;
 
-  &__table {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-
-    &-header {
-      position: sticky;
-      top: 0;
-      z-index: 3;
-      display: flex;
-      padding-bottom: 10px;
-      color: $topaz;
-      font-weight: bold;
-      background-color: $white;
-      border-bottom: $secondaryBorder;
-
-      .header-item {
-        text-transform: capitalize;
-      }
-    }
-
-    &__body {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-    }
-
-    &-item {
-      display: flex;
-      flex: 1;
-      align-items: center;
-      min-width: 70px;
-      padding: 0 5px;
-    }
-
-    &-row {
-      display: flex;
-      flex-direction: row;
-      padding: 10px 0;
-      border-bottom: $secondaryBorder;
-    }
+  @include detailsMetadataStatisticsTable;
 
+  &__table {
     .metadata-cell {
-      &_name {
-        flex: 1.5;
+      &__type {
+        &_chip {
+          flex: 1.5;
+        }
+
+        &_icon {
+          flex: 0.1;
+          min-width: 33px;
+        }
+
+        &_text {
+          flex: 1;
+        }
       }
 
-      &_icon {
-        flex: 0.1;
-        min-width: 33px;
+      &__name {
+        flex: 1.5;
       }
 
-      &_type {
+      &__type {
         flex: 0.5;
       }
 
-      &_validators {
+      &__validators {
         flex: 2;
       }
+
+      &_hidden {
+        display: none;
+      }
     }
   }
 }