Data-navigator: Enabling navigable chart elements with alt text

package.json

@@ -150,6 +150,7 @@
 	},
 	"dependencies": {
 		"d3-format": "^3.1.0",
+		"data-navigator": "^2.1.0",
 		"immer": ">= 9.0.0",
 		"uuid": ">= 9.0.0",
 		"vega-embed": ">= 6.27.0",

src/Chart.css

@@ -60,3 +60,33 @@ this removes transitions in the vega tooltip
 	width: auto;
 	height: 100%;
 }
+
+/* navigation elements */
+.dn-root {
+    position: relative;
+}
+.dn-wrapper {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+.dn-node {
+    position: absolute;
+    padding: 0px;
+    margin: 0px;
+    overflow: visible;
+}
+.dn-node-svg {
+    position: absolute;
+    pointer-events: none;
+}
+.dn-node-path {
+    fill: none;
+    stroke: #000000;
+    stroke-width: 4px;
+    transform: translateY(2px);
+}
+.dn-entry-button {
+    position: relative;
+    top: -21px;
+}

src/RscChart.tsx

@@ -19,6 +19,7 @@ import {
 	SELECTED_ITEM,
 	SELECTED_SERIES,
 	SERIES_ID,
+	NAVIGATION_ID_KEY
 } from '@constants';
 import useChartImperativeHandle from '@hooks/useChartImperativeHandle';
 import useLegend from '@hooks/useLegend';
@@ -40,20 +41,24 @@ import {
 import { renderToStaticMarkup } from 'react-dom/server';
 import { Item } from 'vega';
 import { Handler, Position, Options as TooltipOptions } from 'vega-tooltip';
+import { addSimpleDataIDs as addNavigationIds } from '../node_modules/data-navigator/dist/structure.js'
 
 import { ActionButton, Dialog, DialogTrigger, View as SpectrumView } from '@adobe/react-spectrum';
 
 import './Chart.css';
 import { VegaChart } from './VegaChart';
+import { Navigator } from 'Navigator';
+
 import {
 	ChartHandle,
 	ColorScheme,
 	Datum,
 	LegendDescription,
 	MarkBounds,
+	NavigationEvent,
 	RscChartProps,
 	TooltipAnchor,
-	TooltipPlacement,
+	TooltipPlacement
 } from './types';
 
 interface ChartDialogProps {
@@ -112,6 +117,18 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 
 		const sanitizedChildren = sanitizeRscChartChildren(props.children);
 
+		/* 
+			chartLayers and addNavigationIds ensure that our Navigator can correctly build and use both data 
+			and vega's view (rendered) properties for each datum, adding NAVIGATION_ID_KEY allows us to link
+			the data in our navigation structure to the rendering data vega creates from the spec
+			Note: chartLayers is mutated/populated by useSpec and addNavigationIds mutates the input data
+		*/
+		const chartLayers = [];
+		addNavigationIds({
+			idKey: NAVIGATION_ID_KEY,
+			data,
+			addIds:true
+		})
 		// THE MAGIC, builds our spec
 		const spec = useSpec({
 			backgroundColor,
@@ -130,9 +147,10 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 			opacities,
 			colorScheme,
 			title,
+			chartLayers,
 			UNSAFE_vegaSpec,
 		});
-
+		// see controlledHoveredIdSignal for pattern to update focus signal
 		const { controlledHoveredIdSignal, controlledHoveredGroupSignal } = useSpecProps(spec);
 		const chartConfig = useMemo(() => getChartConfig(config, colorScheme), [config, colorScheme]);
 
@@ -149,7 +167,7 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 		}, [isPopoverOpen]);
 
 		useChartImperativeHandle(forwardedRef, { chartView, title });
-
+		
 		const {
 			legendHiddenSeries,
 			setLegendHiddenSeries,
@@ -224,12 +242,17 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 			if (legendIsToggleable) {
 				signals.hiddenSeries = legendHiddenSeries;
 			}
+			// see "selected"
 			signals[SELECTED_ITEM] = selectedData?.[idKey] ?? null;
 			signals[SELECTED_SERIES] = selectedData?.[SERIES_ID] ?? null;
 
 			return signals;
 		}, [colorScheme, idKey, legendHiddenSeries, legendIsToggleable]);
 
+		const navigationEventCallback = (navData: NavigationEvent) => {
+			console.log("RSC chart can use this navData to set signals", navData)
+			// set signals here!
+		}
 		return (
 			<>
 				<div
@@ -274,6 +297,7 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 							if (legendIsToggleable) {
 								view.signal('hiddenSeries', legendHiddenSeries);
 							}
+							// this is where the magic happens
 							setSelectedSignals({
 								idKey,
 								selectedData: selectedData.current,
@@ -309,6 +333,12 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 						popover={popover}
 					/>
 				))}
+				{chartLayers.length ? <Navigator
+					data={data}
+					chartView={chartView}
+					chartLayers={chartLayers}
+					navigationEventCallback={navigationEventCallback}
+				></Navigator> : <div/>}
 			</>
 		);
 	}

src/constants.ts

@@ -116,3 +116,95 @@ export enum INTERACTION_MODE {
 export const HOVER_SIZE = 3000;
 export const HOVER_SHAPE_COUNT = 3;
 export const HOVER_SHAPE = 'diamond';
+
+// navigation
+export const NAVIGATION_ID_KEY = "dnNodeId"
+export const NAVIGATION_SEMANTICS = {
+	BAR: {
+		CHILD: "Bar",
+		DIVISION: "Division",
+		CHART: "Bar chart"
+	},
+	LINE: {
+		CHILD: "Line",
+		DIVISION: "Division",
+		CHART: "Line chart"
+	},
+	AREA: {
+		CHILD: "Area",
+		DIVISION: "Division",
+		CHART: "Area chart"
+	},
+	PIE: {
+		CHILD: "Slice",
+		DIVISION: "Division",
+		CHART: "Pie chart"
+	},
+	STACK: {
+		CHILD: "Stack",
+		DIVISION: "Division",
+		CHART: "Stacked bar chart"
+	},
+	SCATTER: {
+		CHILD: "Data point",
+		DIVISION: "Division",
+		CHART: "Scatter plot"
+	},
+	DODGE: {
+		CHILD: "Group",
+		DIVISION: "Division",
+		CHART: "Dodged bar chart"
+	},
+	COMBO: {
+		CHILD: "Group",
+		DIVISION: "Division",
+		CHART: "Combo chart"
+	}
+}
+export const NAVIGATION_RULES = {
+	// utility keybinds
+	"exit": {key: 'Escape', direction: 'target'},
+	"help": {key: 'Quote', direction: 'target'},
+	"undo": {key: 'SemiColon', direction: 'target'},
+	// generics
+	"left": {key: 'Period', direction: 'source'},
+	"right": {key: 'Comma', direction: 'target'},
+	"child": {key: 'Enter', direction: 'target'},
+	// dimension
+	"previous-dimension": {direction: 'source', key: 'ArrowLeft'},
+	"next-dimension": {direction: 'target', key: 'ArrowRight'},
+	"parent-dimension": {direction: 'source', key: 'Backspace'},
+	// metric
+	"previous-metric": {direction: 'source', key: 'ArrowUp'},
+	"next-metric": {direction: 'target', key: 'ArrowDown'},
+	"parent-metric": {direction: 'source', key: 'Slash'},
+	// color
+	"previous-color": {direction: 'source', key: 'BracketLeft'},
+	"next-color": {direction: 'target', key: 'BracketRight'},
+	"parent-color": {direction: 'source', key: 'BackSlash'}
+}
+export const NAVIGATION_PAIRS = {
+	DIMENSION: {
+		parent_child: ["parent-dimension","child"],
+		sibling_sibling: ["previous-dimension","next-dimension"],
+	},
+	METRIC: {
+		parent_child: ["parent-metric","child"],
+		sibling_sibling: ["previous-metric","next-metric"],
+	},
+	COLOR: {
+		parent_child: ["parent-color","child"],
+		sibling_sibling: ["previous-color","next-color"],
+	}
+}
+/*
+	child : {key: 'Enter', direction: 'target'}
+	left : {key: 'ArrowLeft', direction: 'source'}
+	next-browser : {direction: 'target', key: 'RightBracket'}
+	next-downloads : {direction: 'target', key: 'Backslash'}
+	parent-browser : {direction: 'source', key: 'KeyW'}
+	parent-downloads : {direction: 'source', key: 'KeyJ'}
+	previous-browser : {direction: 'source', key: 'LeftBracket'}
+	previous-downloads : {direction: 'source', key: 'Slash'}
+	right : {key: 'ArrowRight', direction: 'target'}
+*/

src/hooks/useSpec.tsx

@@ -34,6 +34,7 @@ export default function useSpec({
 	symbolShapes,
 	symbolSizes,
 	title,
+	chartLayers,
 	UNSAFE_vegaSpec,
 }: SanitizedSpecProps): Spec {
 	return useMemo(() => {
@@ -70,6 +71,7 @@ export default function useSpec({
 					opacities,
 					symbolShapes,
 					symbolSizes,
+					chartLayers,
 					title,
 				})
 			)

src/specBuilder/chartSpecBuilder.test.ts

@@ -75,6 +75,7 @@ const defaultSpecProps: SanitizedSpecProps = {
 	symbolShapes: ['rounded-square'],
 	symbolSizes: ['XS', 'XL'],
 	title: '',
+	chartLayers: [],
 	UNSAFE_vegaSpec: undefined,
 };