Web: Refine panel feature set

web/src/components/core/code/MqCode.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { THEME_EXTRA } from '../../../helpers/theme'
-import { ocean } from 'react-syntax-highlighter/dist/cjs/styles/hljs'
+import { solarizedDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs'
 import Box from '@mui/material/Box'
 import MqText from '../text/MqText'
 import React from 'react'
@@ -26,7 +26,7 @@ const MqCode: React.FC<OwnProps> = ({ code, description, language }) => {
       )}
       <SyntaxHighlighter
         language={language}
-        style={ocean}
+        style={solarizedDark}
         customStyle={{
           backgroundColor: '#191f26',
           borderLeft: `2px dashed ${THEME_EXTRA.typography.subdued}`,

web/src/components/core/info/MqInfo.tsx

@@ -0,0 +1,28 @@
+// Copyright 2018-2023 contributors to the Marquez project
+// SPDX-License-Identifier: Apache-2.0
+
+import Box from '@mui/material/Box'
+import MqText from '../text/MqText'
+import React, { ReactElement } from 'react'
+
+interface MqInfoProps {
+  icon: ReactElement
+  label: string
+  value: ReactElement | string | number
+}
+
+export const MqInfo: React.FC<MqInfoProps> = ({ icon, label, value }) => {
+  return (
+    <Box>
+      <Box display={'flex'} alignItems={'center'} mb={1}>
+        {icon}
+        <Box ml={1}>
+          <MqText subdued>{label}</MqText>
+        </Box>
+      </Box>
+      <Box display={'flex'} alignItems={'center'}>
+        <MqText bold>{value}</MqText>
+      </Box>
+    </Box>
+  )
+}

web/src/components/core/screen-load/MqScreenLoad.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { HEADER_HEIGHT } from '../../../helpers/theme'
-import Box from '@mui/material/Box/Box'
+import Box from '@mui/material/Box'
 import CircularProgress from '@mui/material/CircularProgress/CircularProgress'
 import React, { ReactElement } from 'react'
 

web/src/components/datasets/DatasetDetailPage.tsx

@@ -2,11 +2,23 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as Redux from 'redux'
-import { Box, Button, Switch, Tab, Tabs, createTheme } from '@mui/material'
+import {
+  Box,
+  Button,
+  Divider,
+  FormControlLabel,
+  Grid,
+  Switch,
+  Tab,
+  Tabs,
+  createTheme,
+} from '@mui/material'
+import { CalendarIcon } from '@mui/x-date-pickers'
 import { CircularProgress } from '@mui/material'
 import { DatasetVersion } from '../../types/api'
 import { IState } from '../../store/reducers'
 import { LineageDataset } from '../lineage/types'
+import { MqInfo } from '../core/info/MqInfo'
 import { alpha } from '@mui/material/styles'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
@@ -19,19 +31,20 @@ import {
   resetDatasetVersions,
   setTabIndex,
 } from '../../store/actionCreators'
+import { formatUpdatedAt } from '../../helpers'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { useTheme } from '@emotion/react'
 import CloseIcon from '@mui/icons-material/Close'
-import DatasetColumnLineage from './DatasetColumnLineage'
 import DatasetInfo from './DatasetInfo'
 import DatasetTags from './DatasetTags'
 import DatasetVersions from './DatasetVersions'
 import Dialog from '../Dialog'
 import IconButton from '@mui/material/IconButton'
-import Io from '../io/Io'
+import ListIcon from '@mui/icons-material/List'
 import MqStatus from '../core/status/MqStatus'
 import MqText from '../core/text/MqText'
 import React, { ChangeEvent, FunctionComponent, useEffect, useState } from 'react'
+import StorageIcon from '@mui/icons-material/Storage'
 
 interface StateProps {
   lineageDataset: LineageDataset
@@ -95,7 +108,7 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
   }, [lineageDataset.name])
 
   useEffect(() => {
-    if (showTags === true) {
+    if (showTags) {
       fetchDatasetVersions(lineageDataset.namespace, lineageDataset.name)
     }
   }, [showTags])
@@ -111,9 +124,9 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
     setTabIndex(newValue)
   }
 
-  if (versionsLoading) {
+  if (versionsLoading && versions.length === 0) {
     return (
-      <Box display={'flex'} justifyContent={'center'}>
+      <Box display={'flex'} justifyContent={'center'} mt={2}>
         <CircularProgress color='primary' />
       </Box>
     )
@@ -145,6 +158,7 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
             <Box mr={1}>
               <Button
                 variant='outlined'
+                size={'small'}
                 sx={{
                   borderColor: theme.palette.error.main,
                   color: theme.palette.error.main,
@@ -174,55 +188,86 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
             </IconButton>
           </Box>
         </Box>
-        <Box display={'flex'} justifyContent={'space-between'} mb={2}>
-          <Box sx={{ borderBottom: 1, borderColor: 'divider', width: '100%' }}>
-            <Tabs
-              value={tabIndex}
-              onChange={handleChange}
-              textColor='primary'
-              indicatorColor='primary'
-            >
-              <Tab
-                label={i18next.t('datasets.latest_tab')}
-                {...a11yProps(0)}
-                disableRipple={true}
-              />
-              <Tab label={'I/O'} {...a11yProps(1)} disableRipple={true} />
-              <Tab
-                label={i18next.t('datasets.history_tab')}
-                {...a11yProps(2)}
-                disableRipple={true}
-              />
-              <Tab
-                label={i18next.t('datasets.column_lineage_tab')}
-                {...a11yProps(3)}
-                disableRipple={true}
-              />
-            </Tabs>
-          </Box>
-        </Box>
-        <Box display={'flex'} alignItems={'center'} justifyContent={'space-between'}>
+        <Box display={'flex'} alignItems={'center'} justifyContent={'space-between'} my={2}>
           {facetsStatus && (
             <Box mr={1}>
               <MqStatus label={'Quality'} color={facetsStatus} />
             </Box>
           )}
-          <MqText heading font={'mono'}>
-            {name}
-          </MqText>
-          <Box ml={1} display={'flex'} alignItems={'center'}>
-            <MqText subheading>{i18next.t('datasets.show_field_tags')}</MqText>
-            <Switch
-              checked={showTags}
-              onChange={() => setShowTags(!showTags)}
-              inputProps={{ 'aria-label': 'toggle show tags' }}
-            />
+          <Box display={'flex'} alignItems={'center'}>
+            <MqText heading font={'mono'}>
+              {name}
+            </MqText>
+            <Box ml={1}>
+              <MqText
+                small
+                link
+                linkTo={`/datasets/column-level/${encodeURIComponent(
+                  encodeURIComponent(firstVersion.id.namespace)
+                )}/${encodeURIComponent(firstVersion.id.name)}`}
+              >
+                COLUMN LEVEL
+              </MqText>
+            </Box>
           </Box>
+          {tabIndex === 0 && (
+            <Box ml={1} display={'flex'} alignItems={'center'}>
+              <FormControlLabel
+                control={
+                  <Switch
+                    size={'small'}
+                    checked={showTags}
+                    onChange={() => setShowTags(!showTags)}
+                    inputProps={{ 'aria-label': 'toggle show tags' }}
+                  />
+                }
+                label={i18next.t('datasets.show_field_tags')}
+              />
+            </Box>
+          )}
         </Box>
-        <Box mb={2}>
+        <Box>
           <MqText subdued>{description}</MqText>
         </Box>
       </Box>
+      <Divider sx={{ my: 1 }} />
+      <Grid container spacing={2}>
+        <Grid item xs={4}>
+          <MqInfo
+            icon={<CalendarIcon color={'disabled'} />}
+            label={'Updated at'}
+            value={formatUpdatedAt(firstVersion.createdAt)}
+          />
+        </Grid>
+        <Grid item xs={4}>
+          <MqInfo
+            icon={<StorageIcon color={'disabled'} />}
+            label={'Dataset Type'}
+            value={firstVersion.type}
+          />
+        </Grid>
+        <Grid item xs={4}>
+          <MqInfo
+            icon={<ListIcon color={'disabled'} />}
+            label={'Fields'}
+            value={`${firstVersion.fields.length} columns`}
+          />
+        </Grid>
+      </Grid>
+      <Divider sx={{ mt: 1 }} />
+      <Box display={'flex'} justifyContent={'space-between'} mb={2}>
+        <Box sx={{ borderBottom: 1, borderColor: 'divider', width: '100%' }}>
+          <Tabs
+            value={tabIndex}
+            onChange={handleChange}
+            textColor='primary'
+            indicatorColor='primary'
+          >
+            <Tab label={i18next.t('datasets.latest_tab')} {...a11yProps(0)} disableRipple={true} />
+            <Tab label={i18next.t('datasets.history_tab')} {...a11yProps(2)} disableRipple={true} />
+          </Tabs>
+        </Box>
+      </Box>
       {tabIndex === 0 && (
         <DatasetInfo
           datasetFields={firstVersion.fields}
@@ -231,9 +276,7 @@ const DatasetDetailPage: FunctionComponent<IProps> = (props) => {
           showTags={showTags}
         />
       )}
-      {tabIndex === 1 && <Io />}
-      {tabIndex === 2 && <DatasetVersions versions={props.versions} />}
-      {tabIndex === 3 && <DatasetColumnLineage lineageDataset={props.lineageDataset} />}
+      {tabIndex === 1 && <DatasetVersions versions={props.versions} />}
     </Box>
   )
 }

web/src/components/datasets/DatasetInfo.tsx

@@ -1,7 +1,7 @@
 // Copyright 2018-2024 contributors to the Marquez project
 // SPDX-License-Identifier: Apache-2.0
 import * as Redux from 'redux'
-import { Box, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
+import { Box, Chip, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
 import { Field, Run } from '../../types/api'
 import { IState } from '../../store/reducers'
 import { connect, useSelector } from 'react-redux'
@@ -101,9 +101,13 @@ const DatasetInfo: FunctionComponent<DatasetInfoProps> = (props) => {
               {datasetFields.map((field) => {
                 return (
                   <React.Fragment key={field.name}>
-                    <TableRow sx={{ cursor: 'pointer' }}>
+                    <TableRow>
                       <TableCell align='left'>{field.name}</TableCell>
-                      {!showTags && <TableCell align='left'>{field.type}</TableCell>}
+                      {!showTags && (
+                        <TableCell align='left'>
+                          <Chip size={'small'} label={field.type} variant={'outlined'} />
+                        </TableCell>
+                      )}
                       {!showTags && (
                         <TableCell align='left'>{field.description || 'no description'}</TableCell>
                       )}

web/src/components/datasets/DatasetTags.tsx

@@ -103,12 +103,17 @@ const DatasetTags: React.FC<IProps> = (props) => {
     _reason: AutocompleteChangeReason,
     details?: AutocompleteChangeDetails<string> | undefined
   ) => {
-
-    if (details) {
+    if (details && _reason === 'removeOption') {
+      const newTag = details.option
+      const newSelectedTags = selectedTags.filter((tag) => newTag !== tag)
+      setSelectedTags(newSelectedTags)
+      datasetField
+        ? deleteDatasetFieldTag(namespace, datasetName, newTag, datasetField)
+        : deleteDatasetTag(namespace, datasetName, newTag)
+    } else if (details && !selectedTags.includes(details.option)) {
       const newTag = details.option
       const newSelectedTags = [...selectedTags, newTag]
       setSelectedTags(newSelectedTags)
-
       datasetField
         ? addDatasetFieldTag(namespace, datasetName, newTag, datasetField)
         : addDatasetTag(namespace, datasetName, newTag)
@@ -117,7 +122,7 @@ const DatasetTags: React.FC<IProps> = (props) => {
 
   const handleDelete = (deletedTag: string) => {
     const newSelectedTags = selectedTags.filter((tag) => deletedTag !== tag)
-    
+
     setSelectedTags(newSelectedTags)
 
     datasetField
@@ -172,8 +177,8 @@ const DatasetTags: React.FC<IProps> = (props) => {
               variant='outlined'
               onClick={handleButtonClick}
               color='primary'
-              size='medium'
               sx={{ marginRight: '8px' }}
+              style={{ paddingTop: '6.75px', paddingBottom: '6.75px' }}
               startIcon={<LocalOfferIcon />}
             >
               Edit Tag
@@ -214,7 +219,7 @@ const DatasetTags: React.FC<IProps> = (props) => {
             <TextField
               variant={!datasetField ? 'outlined' : 'standard'}
               {...params}
-              placeholder={selectedTags.length > 0 ? '' : 'Add some Tags.'}
+              placeholder={selectedTags.length > 0 ? '' : 'Search Tags'}
               InputProps={{
                 ...params.InputProps,
                 ...(datasetField ? { disableUnderline: true } : {}),
@@ -228,6 +233,9 @@ const DatasetTags: React.FC<IProps> = (props) => {
         />
       </Box>
       <Dialog
+        PaperProps={{
+          sx: { backgroundColor: theme.palette.background.default, backgroundImage: 'none' },
+        }}
         open={openTagDesc}
         fullWidth
         maxWidth='sm'