@cdc/core 4.25.8 → 4.25.11

package/components/CustomColorsEditor/CustomColorsEditor.tsx

@@ -0,0 +1,209 @@
+import React, { useState } from 'react'
+import { TextField } from '../EditorPanel/Inputs'
+import './CustomColorsEditor.css'
+
+interface CustomColorsEditorProps {
+  colors: string[]
+  onChange: (colors: string[]) => void
+  label?: string
+  minColors?: number
+  maxColors?: number
+}
+
+const CustomColorsEditor: React.FC<CustomColorsEditorProps> = ({
+  colors = [],
+  onChange,
+  label = 'Custom Colors',
+  minColors = 1,
+  maxColors = 20
+}) => {
+  const [draggedIndex, setDraggedIndex] = useState<number | null>(null)
+
+  const handleColorChange = (index: number, newColor: string) => {
+    const newColors = [...colors]
+    newColors[index] = newColor
+    onChange(newColors)
+  }
+
+  const handleAddColor = () => {
+    if (colors.length < maxColors) {
+      // Add a new color (default to the last color or a neutral color)
+      const defaultColor = colors.length > 0 ? colors[colors.length - 1] : '#3366cc'
+      onChange([...colors, defaultColor])
+    }
+  }
+
+  const handleRemoveColor = (index: number) => {
+    if (colors.length > minColors) {
+      const newColors = colors.filter((_, i) => i !== index)
+      onChange(newColors)
+    }
+  }
+
+  const handleMoveUp = (index: number) => {
+    if (index > 0) {
+      const newColors = [...colors]
+      ;[newColors[index - 1], newColors[index]] = [newColors[index], newColors[index - 1]]
+      onChange(newColors)
+    }
+  }
+
+  const handleMoveDown = (index: number) => {
+    if (index < colors.length - 1) {
+      const newColors = [...colors]
+      ;[newColors[index], newColors[index + 1]] = [newColors[index + 1], newColors[index]]
+      onChange(newColors)
+    }
+  }
+
+  const handleDragStart = (index: number) => {
+    setDraggedIndex(index)
+  }
+
+  const handleDragOver = (e: React.DragEvent, index: number) => {
+    e.preventDefault()
+  }
+
+  const handleDrop = (e: React.DragEvent, dropIndex: number) => {
+    e.preventDefault()
+
+    if (draggedIndex === null || draggedIndex === dropIndex) {
+      setDraggedIndex(null)
+      return
+    }
+
+    const newColors = [...colors]
+    const draggedColor = newColors[draggedIndex]
+    newColors.splice(draggedIndex, 1)
+    newColors.splice(dropIndex, 0, draggedColor)
+
+    onChange(newColors)
+    setDraggedIndex(null)
+  }
+
+  return (
+    <div className="custom-colors-editor">
+      <label className="custom-colors-label">{label}</label>
+
+      <div className="custom-colors-notice">
+        <svg className="notice-icon" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+          <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+        </svg>
+        <span>
+          <strong>Accessibility Notice:</strong> When using custom colors, conduct a{' '}
+            Section 508 review to ensure adequate color contrast and accessibility compliance.{' '}
+        </span>
+      </div>
+
+      <div className="custom-colors-preview">
+        {colors.map((color, index) => (
+          <div
+            key={index}
+            className="preview-swatch"
+            style={{ backgroundColor: color }}
+            title={`Color ${index + 1}: ${color}`}
+          />
+        ))}
+      </div>
+
+      <div className="custom-colors-list">
+        {colors.map((color, index) => (
+          <div
+            key={index}
+            className={`custom-color-item ${draggedIndex === index ? 'dragging' : ''}`}
+            draggable
+            onDragStart={() => handleDragStart(index)}
+            onDragOver={(e) => handleDragOver(e, index)}
+            onDrop={(e) => handleDrop(e, index)}
+          >
+            <div className="color-item-controls">
+              <span className="color-item-drag-handle" title="Drag to reorder">
+                ⋮⋮
+              </span>
+              {/* <span className="color-item-number">{index + 1}.</span> */}
+
+              {/* <input
+                type="color"
+                value={color}
+                onChange={(e) => handleColorChange(index, e.target.value)}
+                className="color-picker"
+                title="Click to change color"
+                aria-label={`Color picker for color ${index + 1}`}
+              /> */}
+
+              <div className="color-input-wrapper">
+                <TextField
+                  type="text"
+                  value={color}
+                  label=""
+                  section="colors"
+                  subsection={null}
+                  fieldName={`color-${index}`}
+                  updateField={(section, subsection, fieldName, value) => {
+                    handleColorChange(index, value)
+                  }}
+                  placeholder="#000000"
+                  maxLength={15}
+                  className="color-text-input"
+                />
+              </div>
+
+              <div className="color-item-buttons">
+                <button
+                  type="button"
+                  onClick={() => handleMoveUp(index)}
+                  disabled={index === 0}
+                  className="btn-move"
+                  title="Move up"
+                  aria-label="Move color up"
+                >
+                  ↑
+                </button>
+
+                <button
+                  type="button"
+                  onClick={() => handleMoveDown(index)}
+                  disabled={index === colors.length - 1}
+                  className="btn-move"
+                  title="Move down"
+                  aria-label="Move color down"
+                >
+                  ↓
+                </button>
+
+                <button
+                  type="button"
+                  onClick={() => handleRemoveColor(index)}
+                  disabled={colors.length <= minColors}
+                  className="btn-remove"
+                  title="Remove color"
+                  aria-label="Remove color"
+                >
+                  ×
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <button
+        type="button"
+        onClick={handleAddColor}
+        disabled={colors.length >= maxColors}
+        className="btn-add-color"
+      >
+        + Add Color
+      </button>
+
+      <div className="custom-colors-info">
+        {colors.length} color{colors.length !== 1 ? 's' : ''}
+        {colors.length < minColors && ` (minimum ${minColors} required)`}
+        {colors.length >= maxColors && ` (maximum reached)`}
+      </div>
+    </div>
+  )
+}
+
+export default CustomColorsEditor

package/components/CustomColorsEditor/index.ts

@@ -0,0 +1 @@
+export { default as CustomColorsEditor } from './CustomColorsEditor'

package/components/DataTable/DataTable.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo } from 'react'
+import { useEffect, useState, useMemo, useRef } from 'react'
 import { timeParse } from 'd3-time-format'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
@@ -53,6 +53,10 @@ export type DataTableProps = {
   // determines if columns should be wrapped in the table
   wrapColumns?: boolean
   interactionLabel?: string
+  // Map-specific props (optional)
+  legendMemo?: React.MutableRefObject<Map<any, any>>
+  legendSpecialClassLastMemo?: React.MutableRefObject<Map<any, any>>
+  runtimeLegend?: any
 }
 
 const DataTable = (props: DataTableProps) => {
@@ -95,6 +99,11 @@ const DataTable = (props: DataTableProps) => {
 
   const [accessibilityLabel, setAccessibilityLabel] = useState('')
 
+  // Create default refs for map-specific props when not provided
+  const defaultLegendMemo = useRef(new Map())
+  const defaultLegendSpecialClassLastMemo = useRef(new Map())
+  const defaultRuntimeLegend = null
+
   const isVertical = !(config.type === 'chart' && !config.table?.showVertical)
 
   const rand = Math.random().toString(16).substr(2, 8)
@@ -136,23 +145,23 @@ const DataTable = (props: DataTableProps) => {
   const rows =
     isVertical && sortBy.column
       ? rawRows.sort((a, b) => {
-          let dataA
-          let dataB
-          if (config.type === 'map' && config.columns) {
-            const sortByColName = config.columns[sortBy.column].name
-            dataA = runtimeData[a][sortByColName]
-            dataB = runtimeData[b][sortByColName]
-          }
-          if (['chart', 'dashboard', 'table'].includes(config.type)) {
-            dataA = runtimeData[a][sortBy.column]
-            dataB = runtimeData[b][sortBy.column]
-          }
-          if (!dataA && !dataB && config.type === 'chart' && config.xAxis && config.xAxis.type === 'date-time') {
-            dataA = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[a][config.xAxis.dataKey])
-            dataB = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[b][config.xAxis.dataKey])
-          }
-          return dataA || dataB ? customSort(dataA, dataB, sortBy, config) : 0
-        })
+        let dataA
+        let dataB
+        if (config.type === 'map' && config.columns) {
+          const sortByColName = config.columns[sortBy.column].name
+          dataA = runtimeData[a][sortByColName]
+          dataB = runtimeData[b][sortByColName]
+        }
+        if (['chart', 'dashboard', 'table'].includes(config.type)) {
+          dataA = runtimeData[a][sortBy.column]
+          dataB = runtimeData[b][sortBy.column]
+        }
+        if (!dataA && !dataB && config.type === 'chart' && config.xAxis && config.xAxis.type === 'date-time') {
+          dataA = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[a][config.xAxis.dataKey])
+          dataB = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[b][config.xAxis.dataKey])
+        }
+        return dataA || dataB ? customSort(dataA, dataB, sortBy, config) : 0
+      })
       : rawRows
 
   const limitHeight = {
@@ -231,17 +240,17 @@ const DataTable = (props: DataTableProps) => {
       const visibleData =
         config.type === 'map'
           ? getMapRowData(
-              rows,
-              columns,
-              config,
-              formatLegendLocation,
-              runtimeData as Record<string, Object>,
-              displayGeoName,
-              filterColumns
-            )
+            rows,
+            columns,
+            config,
+            formatLegendLocation,
+            runtimeData as Record<string, Object>,
+            displayGeoName,
+            filterColumns
+          )
           : runtimeData.map(d => {
-              return _.pick(d, [...filterColumns, ...dataSeriesColumns])
-            })
+            return _.pick(d, [...filterColumns, ...dataSeriesColumns])
+          })
       const csvData = config.table?.downloadVisibleDataOnly ? visibleData : rawData
 
       // only use fullGeoName on County maps and no other
@@ -277,7 +286,16 @@ const DataTable = (props: DataTableProps) => {
 
     const childrenMatrix =
       config.type === 'map'
-        ? mapCellMatrix({ ...props, rows, wrapColumns, runtimeData, viewport })
+        ? mapCellMatrix({
+          ...props,
+          rows,
+          wrapColumns,
+          runtimeData,
+          viewport,
+          legendMemo: props.legendMemo || defaultLegendMemo,
+          legendSpecialClassLastMemo: props.legendSpecialClassLastMemo || defaultLegendSpecialClassLastMemo,
+          runtimeLegend: props.runtimeLegend || defaultRuntimeLegend
+        })
         : chartCellMatrix({ rows, ...props, runtimeData, isVertical, sortBy, hasRowType, viewport })
 
     const useBottomExpandCollapse = config.table.showBottomCollapse && expanded && Array.isArray(childrenMatrix)
@@ -285,12 +303,12 @@ const DataTable = (props: DataTableProps) => {
     // If every value in a column is a number, record the column index so the header and cells can be right-aligned
     const rightAlignedCols = childrenMatrix.length
       ? Object.fromEntries(
-          Object.keys(childrenMatrix[0])
-            .filter(
-              i => childrenMatrix.filter(row => isRightAlignedTableValue(row[i])).length === childrenMatrix.length
-            )
-            .map(x => [x, true])
-        )
+        Object.keys(childrenMatrix[0])
+          .filter(
+            i => childrenMatrix.filter(row => isRightAlignedTableValue(row[i])).length === childrenMatrix.length
+          )
+          .map(x => [x, true])
+      )
       : {}
 
     const showCollapseButton = config.table.collapsible !== false && useBottomExpandCollapse
@@ -305,6 +323,7 @@ const DataTable = (props: DataTableProps) => {
               fileName={`${vizTitle || 'data-table'}.csv`}
               headerColor={headerColor}
               interactionLabel={interactionLabel}
+              config={config}
             />
           )}
         </MediaControls.Section>
@@ -365,9 +384,8 @@ const DataTable = (props: DataTableProps) => {
                 )
               }
               tableOptions={{
-                className: `table table-striped table-width-unset ${
-                  expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'
-                }${isVertical ? '' : ' horizontal'}`,
+                className: `table table-striped table-width-unset ${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'
+                  }${isVertical ? '' : ' horizontal'}`,
                 'aria-live': 'assertive',
                 'aria-rowcount': config?.data?.length ? config.data.length : -1,
                 hidden: !expanded,

package/components/DataTable/DataTableStandAlone.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react'
 import { ViewPort } from '../../types/ViewPort'
-import Footnotes from '../../types/Footnotes'
-import EditorWrapper from '../EditorWrapper/EditorWrapper'
+import EditorWrapper from '../EditorWrapper'
 import DataTable from './DataTable'
 import DataTableEditorPanel from './components/DataTableEditorPanel'
 import Filters from '../Filters'
@@ -73,7 +72,13 @@ const DataTableStandAlone: React.FC<StandAloneProps> = ({
         viewport={viewport || 'lg'}
         interactionLabel={interactionLabel}
       />
-      <FootnotesStandAlone config={config.footnotes} filters={config.filters?.filter(f => f.filterFootnotes)} />
+      <FootnotesStandAlone
+        config={config.footnotes}
+        filters={config.filters?.filter(f => f.filterFootnotes)}
+        markupVariables={config['markupVariables']}
+        enableMarkupVariables={config['enableMarkupVariables']}
+        data={config.data}
+      />
     </>
   )
 }

package/components/DataTable/components/ChartHeader.tsx

@@ -7,6 +7,7 @@ import { getNewSortBy } from '../helpers/getNewSortBy'
 import parse from 'html-react-parser'
 import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
 import { publishAnalyticsEvent } from '../../../helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 type ChartHeaderProps = {
   data
@@ -61,9 +62,8 @@ const ChartHeader = ({
     if (columnHeaderText === notApplicableText) return
 
     return (
-      <span className='cdcdataviz-sr-only'>{`Press command, modifier, or enter key to sort by ${columnHeaderText} in ${
-        sortBy.column !== columnHeaderText ? 'ascending' : sortBy.column === 'desc' ? 'descending' : 'ascending'
-      }  order`}</span>
+      <span className='cdcdataviz-sr-only'>{`Press command, modifier, or enter key to sort by ${columnHeaderText} in ${sortBy.column !== columnHeaderText ? 'ascending' : sortBy.column === 'desc' ? 'descending' : 'ascending'
+        }  order`}</span>
     )
   }
 
@@ -116,18 +116,29 @@ const ChartHeader = ({
               scope='col'
               onClick={() => {
                 if (hasRowType) return
-                publishAnalyticsEvent(
-                  `data_table_sort_by|${newSortBy.column}|${
-                    newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'undefined'
-                  }`,
-                  'click',
-                  interactionLabel
-                )
+                publishAnalyticsEvent({
+                  vizType: config.type,
+                  vizSubType: getVizSubType(config),
+                  eventType: `data_table_sort`,
+                  eventAction: 'click',
+                  eventLabel: interactionLabel,
+                  vizTitle: getVizTitle(config),
+                  specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                })
                 setSortBy(newSortBy)
               }}
               onKeyDown={e => {
                 if (hasRowType) return
-                if (e.keyCode === 13) {
+                if (e.key === 'Enter') {
+                  publishAnalyticsEvent({
+                    vizType: config.type,
+                    vizSubType: getVizSubType(config),
+                    eventType: `data_table_sort`,
+                    eventAction: 'keyboard',
+                    eventLabel: interactionLabel,
+                    vizTitle: getVizTitle(config),
+                    specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                  })
                   setSortBy(newSortBy)
                 }
               }}
@@ -137,7 +148,7 @@ const ChartHeader = ({
                   : { 'aria-sort': 'descending' }
                 : null)}
             >
-              <ColumnHeadingText text={text} column={column} config={config} />
+              <ColumnHeadingText text={text} config={config} />
               {isSortedCol && <SortIcon ascending={sortByAsc} />}
               <ScreenReaderSortByText sortBy={sortBy} config={config} text={text} />
             </th>
@@ -171,10 +182,29 @@ const ChartHeader = ({
               role='columnheader'
               scope='col'
               onClick={() => {
+                if (hasRowType) return
+                publishAnalyticsEvent({
+                  vizType: config.type,
+                  vizSubType: getVizSubType(config),
+                  eventType: `data_table_sort`,
+                  eventAction: 'click',
+                  eventLabel: interactionLabel,
+                  vizTitle: getVizTitle(config),
+                  specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                })
                 setSortBy(newSortBy)
               }}
               onKeyDown={e => {
-                if (e.keyCode === 13) {
+                if (e.key === 'Enter') {
+                  publishAnalyticsEvent({
+                    vizType: config.type,
+                    vizSubType: getVizSubType(config),
+                    eventType: `data_table_sort`,
+                    eventAction: 'keyboard',
+                    eventLabel: interactionLabel,
+                    vizTitle: getVizTitle(config),
+                    specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                  })
                   setSortBy(newSortBy)
                 }
               }}
@@ -184,7 +214,7 @@ const ChartHeader = ({
                   : { 'aria-sort': 'descending' }
                 : null)}
             >
-              <ColumnHeadingText text={text} column={column} config={config} />
+              <ColumnHeadingText text={text} config={config} />
               {isSortedCol && <SortIcon ascending={sortByAsc} />}
 
               <ScreenReaderSortByText text={text} config={config} sortBy={sortBy} />

package/components/DataTable/components/DataTableEditorPanel.tsx

@@ -34,7 +34,17 @@ const DataTableEditorPanel: React.FC<DataTableEditorProps> = ({ config, updateCo
     })
   }
 
-  const columns = Object.keys(config.originalFormattedData?.[0] || {})
+  const columns = Object.keys(
+    config.originalFormattedData?.[0] || config.formattedData?.[0] || config.data?.[0] || {}
+  )
+  // If no data is available, fallback to column names from config.columns
+  const columnsFromConfig = config.columns
+    ? Object.values(config.columns)
+        .map(col => col.name)
+        .filter(Boolean)
+    : []
+  const finalColumns = columns.length > 0 ? columns : columnsFromConfig
+
   return (
     <Accordion allowZeroExpanded={true}>
       <AccordionItem>
@@ -63,7 +73,7 @@ const DataTableEditorPanel: React.FC<DataTableEditorProps> = ({ config, updateCo
           <AccordionItemButton>Data Table</AccordionItemButton>
         </AccordionItemHeading>
         <AccordionItemPanel>
-          <DataTableEditor config={config} columns={columns} updateField={updateField} isDashboard={true} />
+          <DataTableEditor config={config} columns={finalColumns} updateField={updateField} isDashboard={true} />
         </AccordionItemPanel>
       </AccordionItem>
       <AccordionItem>

package/components/DataTable/components/ExpandCollapse.tsx

@@ -1,3 +1,4 @@
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 import { publishAnalyticsEvent } from '../../../helpers/metrics/helpers'
 import { Visualization } from '../../../types/Visualization'
 import Icon from '../../ui/Icon'
@@ -17,7 +18,15 @@ const ExpandCollapse = ({ expanded, setExpanded, tableTitle, config, interaction
       role='button'
       className={expanded ? 'data-table-heading p-3' : 'collapsed data-table-heading p-3'}
       onClick={() => {
-        publishAnalyticsEvent('data_table_toggled', 'click', interactionLabel, config.type || 'unknown')
+        publishAnalyticsEvent({
+          vizType: config?.type,
+          vizSubType: getVizSubType(config),
+          eventType: 'expand_collapse_toggled',
+          eventAction: 'click',
+          eventLabel: interactionLabel,
+          vizTitle: getVizTitle(config),
+          specifics: expanded ? 'collapsed' : 'expanded'
+        })
         setExpanded(!expanded)
       }}
       tabIndex={0}

package/components/DataTable/components/MapHeader.tsx

@@ -3,6 +3,7 @@ import ScreenReaderText from '../../elements/ScreenReaderText'
 import { SortIcon } from './SortIcon'
 import { getNewSortBy } from '../helpers/getNewSortBy'
 import { publishAnalyticsEvent } from '../../../helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 type MapHeaderProps = DataTableProps & {
   sortBy: { column; asc }
@@ -56,17 +57,28 @@ const MapHeader = ({
               role='columnheader'
               scope='col'
               onClick={() => {
-                publishAnalyticsEvent(
-                  `data_table_sort_by|${newSortBy.column}|${
-                    newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'undefined'
-                  }`,
-                  'click',
-                  interactionLabel
-                )
+                publishAnalyticsEvent({
+                  vizType: config.type,
+                  vizSubType: getVizSubType(config),
+                  eventType: `data_table_sort`,
+                  eventAction: 'click',
+                  eventLabel: interactionLabel,
+                  vizTitle: getVizTitle(config),
+                  specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                })
                 setSortBy(newSortBy)
               }}
               onKeyDown={e => {
-                if (e.keyCode === 13) {
+                if (e.key === 'Enter') {
+                  publishAnalyticsEvent({
+                    vizType: config.type,
+                    vizSubType: getVizSubType(config),
+                    eventType: `data_table_sort`,
+                    eventAction: 'keyboard',
+                    eventLabel: interactionLabel,
+                    vizTitle: getVizTitle(config),
+                    specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                  })
                   setSortBy(newSortBy)
                 }
               }}
@@ -77,15 +89,14 @@ const MapHeader = ({
                   : { 'aria-sort': 'descending' }
                 : null)}
             >
-              <ColumnHeadingText text={text} config={config} column={column} />
+              <ColumnHeadingText text={text} config={config} />
               <SortIcon ascending={sortByAsc} />
-              <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${
-                sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'
-              } order`}</span>
+              <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'
+                } order`}</span>
             </th>
           )
         })}
-    </tr>
+    </tr >
   )
 }
 

package/components/DataTable/data-table.css

@@ -145,7 +145,13 @@ table.data-table {
 
     svg {
       margin-left: 1rem;
+
+      &.legend-shape-svg {
+        display: flex;
+        margin-left: 0 !important;
+      }
     }
+
   }
 
   td a {
@@ -160,6 +166,12 @@ table.data-table {
     text-decoration: none;
   }
 
+  td div a {
+    position: relative;
+    padding: 0;
+    display: inline;
+  }
+
   td span.table-link {
     text-decoration: underline;
     cursor: pointer;