fix: Resolve import path errors.

src/handlers/select.js

@@ -1,9 +1,9 @@
 import { path } from 'd3-path';
 import { select, selectAll } from 'd3-selection';
-import { LINK_TYPES } from '../parsers/link-parsers.js';
+import { LINK_TYPES } from '../parsers/linking/link-parser.js';
 // import { parseTransform } from '../parsers/attribute-parsers';
 import {
-    DataAttr, LegendRole, MarkRole, OpacityField, Path, RoleProperty,
+    DataAttr, LegendRole, MarkRole, OpacityField, RoleProperty,
     SelectOpacity, tableIndexField, tableMarkField, UnselectOpacity
 } from '../state/constants.js';
 // import { Transform } from '../util/transform';
@@ -55,7 +55,7 @@ function drawAggregates(id, selected, xAxis) {
             .classed('AGGREGATE_LAYER', true)
             .attr('fill', window.getComputedStyle(marks[i]).fill);
 
-        if (marks[i].tagName === Path) {
+        if (marks[i].tagName === 'path') {
             const x = marks[i].contour[0].x; //, y = marks[i].contour[0].y;
             // if (marks[i].globalPosition.translate.y) {
             // var y = marks[i].globalPosition.translate.y - marks[i].globalPosition.translate.y / 2;

src/hydrate.js

@@ -1,5 +1,5 @@
 import { coordinate } from './orchestration/coordinator.js';
-import { parseDataset } from './parsers/dataset-parser.js';
+import { parseDataset } from './parsers/data/dataset-parser.js';
 
 export async function hydrate(svg, options = {}) {
     if (!svg) return;

src/orchestration/coordinator.js

@@ -4,33 +4,21 @@ import { applySelections, selectPoint } from '../handlers/select.js';
 // import { sort } from '../handlers/sort.js';
 // import { annotate } from '../handlers/annotate.js';
 
-import { deconstructChart } from '../parsers/parser-engine.js';
-import { inferMarkAttributes } from '../parsers/attribute-parsers.js';
-// import { createMenu } from '../toolbar/menu.js';
-import { parseDataFromMarks } from '../parsers/dataset-parser.js';
 import { inspect } from './inspect.js';
-import { getRootNodes, link, walkQueryPath } from '../parsers/link-parsers.js';
+import { getRootNodes, link, walkQueryPath } from '../parsers/linking/link-parser.js';
 import { isMetaKey } from '../util/util.js';
 import { pointer } from 'd3-selection';
 // import { zoom } from '../handlers/zoom.js';
 import { brushEnd, brushMove, brushStart } from '../handlers/brush.js';
 import { generateBrushPredicates } from '../handlers/query.js';
+import { parseChart } from '../parsers/engine/parser-engine.js';
 
 export function coordinate(svg, extState) {
-    const states = svg.map(d => initialize(inspect(d)));
+    const states = svg.map(d => parseChart(inspect(d)));
     link(states, extState);
     // createMenu(states);
     states.forEach(d => coordinateInteractions(d));
 
-    function initialize(state) {
-        // state.svg.style.cursor = 'crosshair';
-        // Infer view information
-        deconstructChart(state);
-        // highlight(state);
-        inferMarkAttributes(state);
-        state.data = parseDataFromMarks(state.svgMarks);
-        return state;
-    }
     // console.log(extState);
     // function highlight(state) {
     //     state.xAxis.ticks.forEach(d => select(d.label).style('color', '#e15759'));

src/orchestration/inspect.js

@@ -5,7 +5,7 @@ import {
 
 import { Transform } from '../util/transform.js';
 import { ViewState } from '../state/view-state.js';
-import { parseTransform } from '../parsers/attribute-parsers.js';
+import { parseTransform } from '../parsers/data/attribute-parser.js';
 import * as parser from 'svg-path-parser';
 import { SVGToScreen, containsLines } from '../util/util.js';
 import { select } from 'd3-selection';

src/parsers/data/attribute-parser.js

@@ -1,7 +1,7 @@
 import { timeFormat, timeParse } from 'd3-time-format';
-import { CategoricalColorLegend, DataAttr, Line, OpacityField, Polyline, Rect, SelectOpacity } from '../state/constants.js';
-import { Transform } from '../util/transform.js';
-import { invertBand } from './legend-parsers.js';
+import { CategoricalColorLegend, DataAttr, OpacityField, SelectOpacity } from '../../state/constants.js';
+import { Transform } from '../../util/transform.js';
+import { invertBand } from '../structures/legend-parser.js';
 
 export function parseTransform(element, transforms = new Transform()) {
     if (!element.transform) return;
@@ -26,14 +26,14 @@ export function inferMarkAttributes(state) {
 
     // }
 
-    state.svgMarks = state.svgMarks.filter(d => d.type !== Line);
+    state.svgMarks = state.svgMarks.filter(d => d.type !== 'line');
     // console.log(state.xAxis.scale.domain(), state.yAxis.scale.domain())
     for (let i = 0; i < state.svgMarks.length; ++i) {
         const mark = state.svgMarks[i]; const svgRect = state.svg._getBBox();
         const markRect = mark._getBBox();
 
-        if (mark.type === Line) continue;
-        if (mark.type === Polyline) {
+        if (mark.type === 'line') continue;
+        if (mark.type === 'polyline') {
             const points = mark.getAttribute('points').split(' ').map(d => d.split(',').map(e => Number(e)));
             mark[DataAttr] = [];
 
@@ -63,7 +63,7 @@ export function inferMarkAttributes(state) {
 
         const markX = state.xAxis.ordinal.length
             ? i
-            : state.yAxis.ordinal.length || mark.type === Rect
+            : state.yAxis.ordinal.length || mark.type === 'rect'
                 ? markRect.right - svgRect.left
                 : markRect.centerX - svgRect.left;
         const markY = state.yAxis.ordinal.length

src/parsers/data/dataset-parser.js

@@ -1,7 +1,7 @@
 import { loadCSV, loadJSON, table } from 'arquero';
 import { map, range } from 'd3-array';
-import { DataAttr, tableIndexField, tableMarkField } from '../state/constants.js';
-import { DataState } from '../state/data-state.js';
+import { DataAttr, tableIndexField, tableMarkField } from '../../state/constants.js';
+import { DataState } from '../../state/data-state.js';
 
 export async function parseDataset(options) {
     if (!options || !Object.keys(options).length) return { };

src/parsers/engine/parser-engine.js

@@ -3,6 +3,8 @@ import { collectCandidateMarkGroups } from './parser-helpers.js';
 import { inferLegends } from '../structures/legend-parser.js';
 import { inferMarks } from '../structures/mark-parser.js';
 import { inferTitles } from '../structures/text-parser.js';
+import { inferMarkAttributes } from '../data/attribute-parser.js';
+import { parseDataFromMarks } from '../data/dataset-parser.js';
 // import { selectAll } from 'd3-selection';
 
 export function parseChart(state) {
@@ -19,4 +21,10 @@ export function parseChart(state) {
     candidateTextMarkGroups = candidateTextMarkGroups.filter(d => !legends.map(l => l.text).includes(d.marks));
     inferMarks(state);
     inferTitles(state, candidateTextMarkGroups.map(d => d.marks).flat());
+
+    // Infer data.
+    inferMarkAttributes(state);
+    state.data = parseDataFromMarks(state.svgMarks);
+
+    return state;
 }

src/parsers/linking/link-parser.js

@@ -1,7 +1,7 @@
 import { escape, op, query, table } from 'arquero';
 import { range } from 'd3-array';
-import { generateQuery } from '../handlers/query.js';
-import { SizeLegend, tableGroupIndexField, tableIndexField, tableMarkField } from '../state/constants.js';
+import { generateQuery } from '../../handlers/query.js';
+import { SizeLegend, tableGroupIndexField, tableIndexField, tableMarkField } from '../../state/constants.js';
 
 const epsilon = 2;
 export const AGGREGATIONS = {

src/parsers/structures/axis-parser.js

@@ -1,7 +1,7 @@
 import { max, min } from 'd3-array';
 import { CenterX, CenterY, OrphanTickRole, RoleProperty, Tick, horizAlign } from '../../state/constants.js';
 import { sortByViewPos } from '../../util/util.js';
-import { getFormatVal } from '../data/attribute-parsers.js';
+import { getFormatVal } from '../data/attribute-parser.js';
 import { pairGroups } from '../engine/parser-helpers.js';
 import { scaleBand, scaleLinear, scaleTime } from 'd3-scale';
 import { axisBottom, axisLeft } from '../../_d3/axis.js';

src/state/data-state.js

@@ -1,4 +1,4 @@
-import { LINK_TYPES } from '../parsers/link-parsers.js';
+import { LINK_TYPES } from '../parsers/linking/link-parser.js';
 
 export class DataState {
     constructor(table) {

src/util/util.js

@@ -1,4 +1,4 @@
-import { Right, Left, Top, CenterX, CenterY } from '../state/constants.js';
+import { CenterX, CenterY } from '../state/constants.js';
 import { sum } from 'd3-array';
 import { path } from 'd3-path';
 
@@ -17,8 +17,8 @@ export function copyElement(element) {
 
 export function computeCenterPos(element, orient) {
     const clientRect = element._getBBox();
-    const offset = orient === Right || orient === Left ? clientRect.width / 2 : clientRect.height / 2;
-    return clientRect[orient] + (orient === Left || orient === Top ? offset : -offset);
+    const offset = orient === 'right' || orient === 'left' ? clientRect.width / 2 : clientRect.height / 2;
+    return clientRect[orient] + (orient === 'left' || orient === 'top' ? offset : -offset);
 }
 
 export function flattenRGB(rgb) {