give users the ability to specify font color in treeview

Signed-off-by: pogi7 <aaronlevitt7@gmail.com>

view/src/components/Table/Table.tsx

@@ -552,7 +552,6 @@ function Table({
               <tr
                 className={`select-none border-0
                   ${
-                    row.original.maturity &&
                     layout.rowMapping.fontStyle &&
                     setFontStyle(
                       layout.rowMapping.fontStyle.styles,

view/src/components/Table/tableUtils.ts

@@ -5,19 +5,24 @@ import { Row } from "@tanstack/table-core";
 
 // Process the json data into content
 // that React-Table can render.
-export const mapValueData = (layout: TableLayout, data: {[key: string]: ITableData[]}) => {
-
+export const mapValueData = (
+  layout: TableLayout,
+  data: { [key: string]: ITableData[] }
+) => {
   const processEntry = (entry: ITableData, rowMapping: IRowMapping) => {
     let processedEntry: { [key: string]: any } = {};
-    processedEntry["_"] = rowMapping.labelFormat.replace(/{([^}]+)}/g, (match, placeholder) => {
-      const entry_placeholder = entry[placeholder];
-      // Remove double quotes from string literal
-      const format_entry_placeholder =
-        typeof entry_placeholder === "string"
-          ? entry[placeholder].replace(/['"]+/g, "")
-          : entry[placeholder];
-      return format_entry_placeholder || "";
-    });
+    processedEntry["_"] = rowMapping.labelFormat.replace(
+      /{([^}]+)}/g,
+      (match, placeholder) => {
+        const entry_placeholder = entry[placeholder];
+        // Remove double quotes from string literal
+        const format_entry_placeholder =
+          typeof entry_placeholder === "string"
+            ? entry[placeholder].replace(/['"]+/g, "")
+            : entry[placeholder];
+        return format_entry_placeholder || "";
+      }
+    );
 
     // EVERY row should have an IRI, but just in case
     // default it to an empty string
@@ -47,18 +52,18 @@ export const mapValueData = (layout: TableLayout, data: {[key: string]: ITableDa
   ): ITableData[] => {
     if (!data[rowMapping.id]) return [];
     return data[rowMapping.id]
-      .filter(row => {
+      .filter((row) => {
         // If there's no parentIri specified, we're looking for root nodes
         // If there is a parentIri, we're looking for children of a specific parent
         if (parentIri) {
           return row[`${parentId}Iri`] === parentIri;
         } else {
-          return !row['parentIri'];
+          return !row["parentIri"];
         }
       })
       .map((row: ITableData) => {
         let processedRow = processEntry(row, rowMapping);
-        
+
         // Save the rowType for row-specific actions in the Table
         // such as right click context menus, etc.
         processedRow["rowType"] = rowMapping.id;
@@ -68,24 +73,27 @@ export const mapValueData = (layout: TableLayout, data: {[key: string]: ITableDa
         // If the row is recursive, get its children and add to allChildren
         // Otherwise, check for subRowMappings
         if (rowMapping.isRecursive) {
-          children = recursiveMapper(rowMapping, 'parent', row.iri);
+          children = recursiveMapper(rowMapping, "parent", row.iri);
         } else if (rowMapping.subRowMappings) {
-          children = rowMapping.subRowMappings.flatMap((subMapping: IRowMapping) => recursiveMapper(subMapping, rowMapping.id, row.iri));
+          children = rowMapping.subRowMappings.flatMap(
+            (subMapping: IRowMapping) =>
+              recursiveMapper(subMapping, rowMapping.id, row.iri)
+          );
         }
 
         if (children.length > 0) {
           processedRow["children"] = children;
         }
-        
+
         return processedRow;
       });
-  }
+  };
 
   return recursiveMapper(layout.rowMapping);
-}
+};
 
 /**
- * Styles the font color as a tailwind class.  Each returned string is a concatenation of Tailwind CSS classes 
+ * Styles the font color as a tailwind class.  Each returned string is a concatenation of Tailwind CSS classes
  *
  * @deprecated
  * This function is not generic for all OML models.  Remove after v1.0.0.
@@ -94,21 +102,21 @@ export const mapValueData = (layout: TableLayout, data: {[key: string]: ITableDa
 export const getLifecycleStateStyles = (state: CMState) => {
   switch (state) {
     case CMState.Proposed:
-      return 'text-[color:var(--vscode-debugIcon-stepOverForeground)]'; // blue for proposed
+      return "text-[color:var(--vscode-debugIcon-stepOverForeground)]"; // blue for proposed
     case CMState.Preliminary:
-      return 'text-[color:var(--vscode-gitDecoration-untrackedResourceForeground)]'; // green for preliminary
+      return "text-[color:var(--vscode-gitDecoration-untrackedResourceForeground)]"; // green for preliminary
     case CMState.Threat:
-      return 'text-[color:var(--vscode-charts-purple)]'; // purple for threat
+      return "text-[color:var(--vscode-charts-purple)]"; // purple for threat
     case CMState.Baseline:
-      return ''; // default for baseline
+      return ""; // default for baseline
     case CMState.Deprecated:
-      return 'line-through'; // default + strike through for deprecated
+      return "line-through"; // default + strike through for deprecated
     case CMState.Retracted:
-      return 'text-[color:var(--vscode-charts-red)] line-through'; // red + strike through for retracted
+      return "text-[color:var(--vscode-charts-red)] line-through"; // red + strike through for retracted
     default:
-      return '';
+      return "";
   }
-}
+};
 
 /**
  * Sets the font style based on a conditional for a given row.
@@ -127,12 +135,16 @@ export const setFontStyle = (
   row: Row<ITableData>
 ) => {
   // Remove redundant double quotes from string
-  const formattedConditional = row.original[conditional].slice(1, -1)
+  const formattedConditional = row.original[conditional].slice(1, -1);
   return styles[formattedConditional];
 };
 
 // Helper to get row range on Shift + Click to select multiple rows
-export function getRowRange<ITableData>(rows: Array<Row<ITableData>>, idA: string, idB: string) {
+export function getRowRange<ITableData>(
+  rows: Array<Row<ITableData>>,
+  idA: string,
+  idB: string
+) {
   const range: Array<Row<ITableData>> = [];
   // Don't do anything if we Shift + Clicked the same as previous row
   if (idA === idB) return range;
@@ -160,4 +172,4 @@ export function getRowRange<ITableData>(rows: Array<Row<ITableData>>, idA: strin
   }
 
   return range;
-}
+}