Visual tweaks after DQ update (#2812)

* Update tooltip refs and other minor visual quirks remedied.

* Longer character limit for tooltips

---------

Co-authored-by: phix <peter.hicks@astronomer.io>

Author: phixMe

web/src/components/core/chip/MqChip.tsx

@@ -41,7 +41,7 @@ const MqChip: React.FC<MqChipProps> = ({
       sx={{
         display: 'inline-block',
         borderRadius: theme.spacing(2),
-        padding: '2px 8px',
+        padding: '2px 12px',
         cursor: 'pointer',
         userSelect: 'none',
         boxShadow: selected ? `0 0 2px 3px ${theme.palette.common.white}` : 'initial',
@@ -64,7 +64,9 @@ const MqChip: React.FC<MqChipProps> = ({
       )}
       {text && (
         <Box ml={icon ? 1 : 0} display={'inline'}>
-          <MqText inline>{text}</MqText>{' '}
+          <MqText font={'mono'} inline>
+            {text}
+          </MqText>
         </Box>
       )}
     </Box>

web/src/components/core/tooltip/MQTooltip.tsx

@@ -40,6 +40,7 @@ const MQTooltip: React.FC<MqToolTipProps> = ({ title, onOpen, onClose, children,
           sx: {
             backgroundColor: `${darken(theme.palette.background.paper, 0.1)}`,
             color: theme.palette.common.white,
+            border: `1px solid ${theme.palette.secondary.main}`,
             maxWidth: '600px',
             fontSize: 14,
           },

web/src/components/jobs/RunStatus.tsx

@@ -1,11 +1,12 @@
 // Copyright 2018-2023 contributors to the Marquez project
 // SPDX-License-Identifier: Apache-2.0
 
-import { Box, Tooltip, createTheme } from '@mui/material'
+import { Box, createTheme } from '@mui/material'
 import { Run } from '../../types/api'
 import { runStateColor } from '../../helpers/nodes'
 
 import { useTheme } from '@emotion/react'
+import MQTooltip from '../core/tooltip/MQTooltip'
 import React, { FunctionComponent } from 'react'
 
 interface RunStatusProps {
@@ -17,7 +18,7 @@ const RunStatus: FunctionComponent<RunStatusProps> = (props) => {
   const theme = createTheme(useTheme())
 
   return (
-    <Tooltip title={run.state}>
+    <MQTooltip title={run.state}>
       <Box
         mr={1}
         sx={{
@@ -28,7 +29,7 @@ const RunStatus: FunctionComponent<RunStatusProps> = (props) => {
         }}
         style={{ backgroundColor: runStateColor(run.state) }}
       />
-    </Tooltip>
+    </MQTooltip>
   )
 }
 

web/src/components/search/Search.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as Redux from 'redux'
-import { Box, darken } from '@mui/material'
+import { Box } from '@mui/material'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { GroupedSearch } from '../../types/api'
 import { IState } from '../../store/reducers'
@@ -33,14 +33,14 @@ const INITIAL_SEARCH_FILTER = [
     icon: faCog,
     foregroundColor: theme.palette.common.white,
     backgroundColor: theme.palette.primary.main,
-    text: i18next.t('search.filter.jobs'),
+    text: 'JOBS',
     value: 'JOB',
   },
   {
     icon: faDatabase,
     foregroundColor: theme.palette.common.white,
-    backgroundColor: theme.palette.primary.main,
-    text: i18next.t('search.filter.datasets'),
+    backgroundColor: theme.palette.info.main,
+    text: 'DATASETS',
     value: 'DATASET',
   },
 ]
@@ -254,12 +254,12 @@ const Search: React.FC<SearchProps> = (props: SearchProps) => {
                           return (
                             <Box
                               sx={{
-                                borderTop: `2px solid ${theme.palette.common.white}`,
-                                borderBottom: `2px solid ${theme.palette.common.white}`,
+                                borderTop: `2px dashed ${theme.palette.secondary.main}`,
+                                borderBottom: `2px dashed ${theme.palette.secondary.main}`,
                                 padding: `${theme.spacing(1)} ${theme.spacing(3)} ${theme.spacing(
                                   0.5
                                 )} ${theme.spacing(1)}`,
-                                backgroundColor: darken(theme.palette.background.paper, 0.05),
+                                backgroundColor: theme.palette.background.paper,
                               }}
                               key={result}
                               display={'flex'}

web/src/components/search/SearchListItem.tsx

@@ -23,7 +23,7 @@ interface OwnProps {
 
 const searchResultIcon: { [key in JobOrDataset]: JSX.Element } = {
   JOB: <FontAwesomeIcon icon={faCog} color={theme.palette.primary.main} />,
-  DATASET: <FontAwesomeIcon icon={faDatabase} color={theme.palette.primary.main} />,
+  DATASET: <FontAwesomeIcon icon={faDatabase} color={theme.palette.info.main} />,
 }
 
 type DkSearchListItemProps = OwnProps

web/src/helpers/nodes.ts

@@ -56,7 +56,7 @@ const searchDelimiterMap = {
 type SearchDelimiterMap = typeof searchDelimiterMap
 
 export function parseSearchGroup(nodeId: string, field: keyof SearchDelimiterMap) {
-  return nodeId.split(':')[searchDelimiterMap[field]] || ''
+  return decodeURIComponent(nodeId.split(':')[searchDelimiterMap[field]]) || ''
 }
 
 export function eventTypeColor(state: EventType) {

web/src/routes/column-level/ActionBar.tsx

@@ -1,10 +1,11 @@
 import { ArrowBackIosRounded, Refresh } from '@mui/icons-material'
-import { Divider, TextField, Tooltip } from '@mui/material'
+import { Divider, TextField } from '@mui/material'
 import { fetchColumnLineage } from '../../store/actionCreators'
 import { theme } from '../../helpers/theme'
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import Box from '@mui/material/Box'
 import IconButton from '@mui/material/IconButton'
+import MQTooltip from '../../components/core/tooltip/MQTooltip'
 import MqText from '../../components/core/text/MqText'
 import React from 'react'
 
@@ -35,11 +36,11 @@ export const ActionBar = ({ fetchColumnLineage, depth, setDepth }: ActionBarProp
       borderColor={theme.palette.secondary.main}
     >
       <Box display={'flex'} alignItems={'center'}>
-        <Tooltip title={'Back to datasets'}>
+        <MQTooltip title={'Back to datasets'}>
           <IconButton size={'small'} sx={{ mr: 2 }} onClick={() => navigate('/datasets')}>
             <ArrowBackIosRounded fontSize={'small'} />
           </IconButton>
-        </Tooltip>
+        </MQTooltip>
         <MqText heading>Datasets</MqText>
         <Divider orientation='vertical' flexItem sx={{ mx: 2 }} />
         <Box>
@@ -58,7 +59,7 @@ export const ActionBar = ({ fetchColumnLineage, depth, setDepth }: ActionBarProp
         </Box>
       </Box>
       <Box display={'flex'} alignItems={'center'}>
-        <Tooltip title={'Refresh'}>
+        <MQTooltip title={'Refresh'}>
           <IconButton
             sx={{ mr: 2 }}
             color={'primary'}
@@ -71,7 +72,7 @@ export const ActionBar = ({ fetchColumnLineage, depth, setDepth }: ActionBarProp
           >
             <Refresh fontSize={'small'} />
           </IconButton>
-        </Tooltip>
+        </MQTooltip>
         <TextField
           id='column-level-depth'
           type='number'

web/src/routes/datasets/Datasets.tsx

@@ -11,7 +11,6 @@ import {
   TableCell,
   TableHead,
   TableRow,
-  Tooltip,
   createTheme,
 } from '@mui/material'
 import { ChevronLeftRounded, ChevronRightRounded, Refresh } from '@mui/icons-material'
@@ -114,7 +113,7 @@ const Datasets: React.FC<DatasetsProps> = ({
         </Box>
         <Box display={'flex'} alignItems={'center'}>
           {isDatasetsLoading && <CircularProgress size={16} />}
-          <Tooltip title={'Refresh'}>
+          <MQTooltip title={'Refresh'}>
             <IconButton
               sx={{ ml: 2 }}
               color={'primary'}
@@ -127,7 +126,7 @@ const Datasets: React.FC<DatasetsProps> = ({
             >
               <Refresh fontSize={'small'} />
             </IconButton>
-          </Tooltip>
+          </MQTooltip>
         </Box>
       </Box>
       <MqScreenLoad loading={isDatasetsLoading && !isDatasetsInit}>
@@ -213,9 +212,7 @@ const Datasets: React.FC<DatasetsProps> = ({
                                   <Box>
                                     <MqStatus
                                       label={
-                                        assertions.find((a) => !a.success)
-                                          ? 'UNHEALTHILY'
-                                          : 'HEALTHY'
+                                        assertions.find((a) => !a.success) ? 'UNHEALTHY' : 'HEALTHY'
                                       }
                                       color={datasetFacetsStatus(dataset.facets)}
                                     />
@@ -252,7 +249,7 @@ const Datasets: React.FC<DatasetsProps> = ({
                     {Math.min(PAGE_SIZE * (state.page + 1), totalCount)} of {totalCount}
                   </>
                 </MqText>
-                <Tooltip title={i18next.t('events_route.previous_page')}>
+                <MQTooltip title={i18next.t('events_route.previous_page')}>
                   <span>
                     <IconButton
                       sx={{
@@ -266,8 +263,8 @@ const Datasets: React.FC<DatasetsProps> = ({
                       <ChevronLeftRounded />
                     </IconButton>
                   </span>
-                </Tooltip>
-                <Tooltip title={i18next.t('events_route.next_page')}>
+                </MQTooltip>
+                <MQTooltip title={i18next.t('events_route.next_page')}>
                   <span>
                     <IconButton
                       color='primary'
@@ -278,7 +275,7 @@ const Datasets: React.FC<DatasetsProps> = ({
                       <ChevronRightRounded />
                     </IconButton>
                   </span>
-                </Tooltip>
+                </MQTooltip>
               </Box>
             </>
           )}

web/src/routes/events/Events.tsx

@@ -11,7 +11,6 @@ import {
   TableCell,
   TableHead,
   TableRow,
-  Tooltip,
   createTheme,
 } from '@mui/material'
 import { ChevronLeftRounded, ChevronRightRounded, Refresh } from '@mui/icons-material'
@@ -30,6 +29,7 @@ import { useTheme } from '@emotion/react'
 import Box from '@mui/material/Box'
 import CircularProgress from '@mui/material/CircularProgress/CircularProgress'
 import IconButton from '@mui/material/IconButton'
+import MQTooltip from '../../components/core/tooltip/MQTooltip'
 import MqCopy from '../../components/core/copy/MqCopy'
 import MqDatePicker from '../../components/core/date-picker/MqDatePicker'
 import MqEmpty from '../../components/core/empty/MqEmpty'
@@ -187,7 +187,7 @@ const Events: React.FC<EventsProps> = ({
                 ></Chip>
               </Box>
             </Box>
-            <Tooltip title={'Refresh'}>
+            <MQTooltip title={'Refresh'}>
               <IconButton
                 color={'primary'}
                 size={'small'}
@@ -197,7 +197,7 @@ const Events: React.FC<EventsProps> = ({
               >
                 <Refresh fontSize={'small'} />
               </IconButton>
-            </Tooltip>
+            </MQTooltip>
           </Box>
           <Box
             p={2}
@@ -344,7 +344,7 @@ const Events: React.FC<EventsProps> = ({
                     {Math.min(PAGE_SIZE * (state.page + 1), totalCount)} of {totalCount}
                   </>
                 </MqText>
-                <Tooltip title={i18next.t('events_route.previous_page')}>
+                <MQTooltip title={i18next.t('events_route.previous_page')}>
                   <span>
                     <IconButton
                       sx={{
@@ -358,8 +358,8 @@ const Events: React.FC<EventsProps> = ({
                       <ChevronLeftRounded />
                     </IconButton>
                   </span>
-                </Tooltip>
-                <Tooltip title={i18next.t('events_route.next_page')}>
+                </MQTooltip>
+                <MQTooltip title={i18next.t('events_route.next_page')}>
                   <span>
                     <IconButton
                       color='primary'
@@ -370,7 +370,7 @@ const Events: React.FC<EventsProps> = ({
                       <ChevronRightRounded />
                     </IconButton>
                   </span>
-                </Tooltip>
+                </MQTooltip>
               </Box>
             </>
           )}

web/src/routes/jobs/Jobs.tsx

@@ -11,7 +11,6 @@ import {
   TableCell,
   TableHead,
   TableRow,
-  Tooltip,
   createTheme,
 } from '@mui/material'
 import { ChevronLeftRounded, ChevronRightRounded, Refresh } from '@mui/icons-material'
@@ -29,6 +28,7 @@ import { useTheme } from '@emotion/react'
 import Box from '@mui/material/Box'
 import CircularProgress from '@mui/material/CircularProgress/CircularProgress'
 import IconButton from '@mui/material/IconButton'
+import MQTooltip from '../../components/core/tooltip/MQTooltip'
 import MqEmpty from '../../components/core/empty/MqEmpty'
 import MqStatus from '../../components/core/status/MqStatus'
 import MqText from '../../components/core/text/MqText'
@@ -109,7 +109,7 @@ const Jobs: React.FC<JobsProps> = ({
         </Box>
         <Box display={'flex'} alignItems={'center'}>
           {isJobsLoading && <CircularProgress size={16} />}
-          <Tooltip title={'Refresh'}>
+          <MQTooltip title={'Refresh'}>
             <IconButton
               sx={{ ml: 2 }}
               color={'primary'}
@@ -122,7 +122,7 @@ const Jobs: React.FC<JobsProps> = ({
             >
               <Refresh fontSize={'small'} />
             </IconButton>
-          </Tooltip>
+          </MQTooltip>
         </Box>
       </Box>
       <MqScreenLoad loading={isJobsLoading && !isJobsInit}>
@@ -213,7 +213,7 @@ const Jobs: React.FC<JobsProps> = ({
                     {Math.min(PAGE_SIZE * (state.page + 1), totalCount)} of {totalCount}
                   </>
                 </MqText>
-                <Tooltip title={i18next.t('events_route.previous_page')}>
+                <MQTooltip title={i18next.t('events_route.previous_page')}>
                   <span>
                     <IconButton
                       sx={{
@@ -227,8 +227,8 @@ const Jobs: React.FC<JobsProps> = ({
                       <ChevronLeftRounded />
                     </IconButton>
                   </span>
-                </Tooltip>
-                <Tooltip title={i18next.t('events_route.next_page')}>
+                </MQTooltip>
+                <MQTooltip title={i18next.t('events_route.next_page')}>
                   <span>
                     <IconButton
                       color='primary'
@@ -239,7 +239,7 @@ const Jobs: React.FC<JobsProps> = ({
                       <ChevronRightRounded />
                     </IconButton>
                   </span>
-                </Tooltip>
+                </MQTooltip>
               </Box>
             </>
           )}