Merge pull request #699 from JonanOribe/Font-color-not-changed-in-graph-contextual-popups-when-in-dark-mode

Font-color not changed in graph contextual popups when in dark mode #621

Author: alfredorubin96

src/chart/graph/GraphChart.tsx

@@ -89,6 +89,7 @@ const NeoGraphChart = (props: ChartProps) => {
 
   let icons = parseNodeIconConfig(settings.iconStyle);
   const colorScheme = categoricalColorSchemes[settings.nodeColorScheme];
+  const {theme} = props;
 
   const generateVisualizationDataGraph = (records, _) => {
     let nodes: Record<string, any>[] = [];
@@ -159,6 +160,7 @@ const NeoGraphChart = (props: ChartProps) => {
       defaultRelWidth: settings.defaultRelWidth,
       relColorProp: settings.relColorProp,
       defaultRelColor: settings.defaultRelColor,
+      theme: theme,
     },
     engine: {
       layout: layouts[settings.layout],

src/chart/graph/GraphChartVisualization.ts

@@ -88,6 +88,7 @@ export interface GraphChartVisualizationProps {
     defaultRelWidth: number;
     relColorProp: string;
     defaultRelColor: string;
+    theme?: string;
   };
   /**
    * The keys in 'engine' are related to the graph rendering engine (force-directed layout) or the NeoDash query engine.

src/chart/graph/component/GraphChartInspectModal.tsx

@@ -22,7 +22,7 @@ export const NeoGraphChartInspectModal = (props: GraphChartVisualizationProps) =
             : ''}
         </Dialog.Header>
         <Dialog.Content>
-          <GraphEntityInspectionTable entity={props.interactivity.selectedEntity}></GraphEntityInspectionTable>
+          <GraphEntityInspectionTable entity={props.interactivity.selectedEntity} theme={props.style.theme}></GraphEntityInspectionTable>
         </Dialog.Content>
       </Dialog>
     </div>

src/chart/graph/component/GraphEntityInspectionTable.tsx

@@ -19,6 +19,7 @@ export const formatProperty = (property) => {
  */
 export const GraphEntityInspectionTable = ({
   entity,
+  theme,
   setSelectedParameters = (_value) => {
     console.log('undefined function in GraphEntityInspectionTable');
   },
@@ -51,14 +52,16 @@ export const GraphEntityInspectionTable = ({
     }
   }
 
+  const tableTextColor = theme === 'dark' ? 'var(--palette-dark-neutral-border-strong)' : 'rgba(0, 0, 0, 0.6)';
+
   return (
     <TableContainer>
       <Table size='small'>
         {hasPropertyToShow ? (
           <TableHead>
             <TableRow>
-              <TableCell align='left'>Property</TableCell>
-              <TableCell align='left'>Value</TableCell>
+              <TableCell align='left' style={{color:tableTextColor}}>Property</TableCell>
+              <TableCell align='left' style={{color:tableTextColor}}>Value</TableCell>
               {checklistEnabled ? <TableCell align='center'>Select Property</TableCell> : <></>}
             </TableRow>
           </TableHead>
@@ -77,10 +80,10 @@ export const GraphEntityInspectionTable = ({
               .sort()
               .map((key) => (
                 <TableRow key={key}>
-                  <TableCell component='th' scope='row'>
+                  <TableCell component='th' scope='row' style={{color:tableTextColor}}>
                     {key}
                   </TableCell>
-                  <TableCell align={'left'}>
+                  <TableCell align={'left'} style={{color:tableTextColor}}>
                     <ShowMoreText lines={2}>{formatProperty(entity && entity.properties[key].toString())}</ShowMoreText>
                   </TableCell>
                   {checklistEnabled ? (