feat: add color names from hex codes, add track.title to desc

Author: thomcsmits

package.json

@@ -18,6 +18,7 @@
     "@mui/material": "^5.15.1",
     "@mui/x-tree-view": "6.0.0-beta.0",
     "gosling.js": "^0.13.2",
+    "hex-color-to-color-name": "^1.0.2",
     "pixi.js": "^6.5.10",
     "react": "^18.2.0",
     "react-aria-components": "1.0.0-beta.2",

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 import type { AltGoslingSpec, AltTrackSingle } from '@alt-gosling/schema/alt-gosling-schema';
-
 import { arrayToString, markToText, channelToText, capDesc } from '../util';
 
+import { GetColorName } from 'hex-color-to-color-name';
 
 export function addTreeDescriptions(altGoslingSpec: AltGoslingSpec) {
     addTrackPositionDescriptions(altGoslingSpec);
@@ -186,11 +186,15 @@ function addTrackAppearanceDescriptions(altGoslingSpec: AltGoslingSpec) {
                 desc = desc.concat(capDesc(track.charttype) + '.');
             } else {
                 if (markToText.get(track.appearance.details.mark)) {
-                    desc = desc.concat('Chart with ' + markToText.get(track.appearance.details.mark) + '.');
+                    desc = desc.concat(`Chart with ${markToText.get(track.appearance.details.mark)}.`);
                 } else {
-                    desc = desc.concat('Unknown chart.')
+                    desc = desc.concat(`Unknown chart.`)
                 }
             }
+
+            if (track.title) {
+                desc = desc.concat(` Chart is titled '${track.title}'.`)
+            }
 
             const encodingDescriptions = addEncodingDescriptions(track);
             // console.log('encdesc', encodingDescriptions);
@@ -328,6 +332,12 @@ function addEncodingDescriptions(track: AltTrackSingle) {
     for (let i = 0; i < track.appearance.details.encodings.encodingValue.length; i++) {
         const e = track.appearance.details.encodings.encodingValue[i];
         if (e.name === 'color') {
+            // if the color is denoted as a hex code, get the name of the color value
+            if (typeof e.details.value === 'string') {
+                if (e.details.value[0] === '#') {
+                    e.details.value = GetColorName(e.details.value.slice(0)).toLowerCase();
+                }
+            }
             descValue = descValue.concat('The color of the ' + markToText.get(mark) + ' is ' + e.details.value + '.');
             descList.push(['color', 'The color of the ' + markToText.get(mark) + ' is ' + e.details.value + '.']);
         }