refactor: move re-used functions into lib/ utilities

Author: dbirman

web/package-lock.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@uwdata/vgplot": "^0.11.0",
+    "papaparse": "^5.5.3",
     "three": "^0.184.0"
   },
   "devDependencies": {

web/package.json

@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest';
+import {
+  hashStr,
+  normalizeRole,
+  getInitials,
+  getLastName,
+  getFirstName,
+  authorColor,
+  CREDIT_ROLES,
+  ROLE_GROUP,
+} from '../contributions/credit-helpers.js';
+
+describe('hashStr', () => {
+  it('returns a non-negative integer', () => expect(hashStr('test')).toBeGreaterThanOrEqual(0));
+  it('is deterministic', () => expect(hashStr('abc')).toBe(hashStr('abc')));
+  it('differs for different strings', () => expect(hashStr('a')).not.toBe(hashStr('b')));
+});
+
+describe('normalizeRole', () => {
+  it('lowercases and collapses whitespace', () => expect(normalizeRole('Formal  analysis')).toBe('formal analysis'));
+  it('converts em-dash to en-dash', () =>
+    expect(normalizeRole('Writing \u2014 original draft')).toBe('writing \u2013 original draft'));
+});
+
+describe('getInitials', () => {
+  it('returns two-letter initials for full name', () => expect(getInitials('Alice Smith')).toBe('AS'));
+  it('returns single letter for mononym', () => expect(getInitials('Mononym')).toBe('M'));
+  it('uses first and last for three-part names', () => expect(getInitials('Alice B Smith')).toBe('AS'));
+});
+
+describe('getLastName', () => {
+  it('returns last word', () => expect(getLastName('Alice Smith')).toBe('Smith'));
+  it('handles single name', () => expect(getLastName('Mononym')).toBe('Mononym'));
+});
+
+describe('getFirstName', () => {
+  it('returns first word', () => expect(getFirstName('Alice Smith')).toBe('Alice'));
+});
+
+describe('authorColor', () => {
+  it('returns an hsl string', () => {
+    const color = authorColor({ name: 'Alice Smith', credit_levels: [{ role: 'Conceptualization', level: 'Lead' }] });
+    expect(color).toMatch(/^hsl\(/);
+  });
+  it('is deterministic for the same name', () => {
+    const a = { name: 'Test Author', credit_levels: [{ role: 'Software', level: 'Equal' }] };
+    expect(authorColor(a)).toBe(authorColor(a));
+  });
+  it('handles author with no credit_levels', () => {
+    expect(authorColor({ name: 'No Roles' })).toMatch(/^hsl\(/);
+  });
+});
+
+describe('CREDIT_ROLES', () => {
+  it('has 14 entries', () => expect(CREDIT_ROLES).toHaveLength(14));
+  it('contains expected roles', () => {
+    expect(CREDIT_ROLES).toContain('Conceptualization');
+    expect(CREDIT_ROLES).toContain('Software');
+    expect(CREDIT_ROLES).toContain('Visualization');
+  });
+});
+
+describe('ROLE_GROUP', () => {
+  it('maps normalized conceptualization to leadership', () =>
+    expect(ROLE_GROUP[normalizeRole('Conceptualization')]).toBe('leadership'));
+  it('maps normalized software to analysis', () => expect(ROLE_GROUP[normalizeRole('Software')]).toBe('analysis'));
+  it('maps normalized methodology to methods', () => expect(ROLE_GROUP[normalizeRole('Methodology')]).toBe('methods'));
+  it('maps normalized validation to data', () => expect(ROLE_GROUP[normalizeRole('Validation')]).toBe('data'));
+});

web/src/__tests__/credit-helpers.test.js

@@ -0,0 +1,124 @@
+import { describe, it, expect } from 'vitest';
+import { buildTableHead, buildFilterInput, buildPagingBar } from '../lib/paginated-table.js';
+
+describe('buildTableHead', () => {
+  it('generates header with sort arrows', () => {
+    const html = buildTableHead(
+      ['name', 'email'],
+      { name: 'Name', email: 'Email' },
+      'name',
+      'asc',
+      { name: '', email: '' },
+      [],
+      {},
+      40,
+      [],
+    );
+    expect(html).toContain('Name ▲');
+    expect(html).toContain('Email');
+    expect(html).toContain('data-col="name"');
+    expect(html).toContain('data-col="email"');
+  });
+
+  it('skips filter inputs for specified columns', () => {
+    const html = buildTableHead(
+      ['name', 'email'],
+      { name: 'Name', email: 'Email' },
+      'name',
+      'asc',
+      { name: '', email: '' },
+      [],
+      {},
+      40,
+      ['email'],
+    );
+    expect(html).toContain('col-filter');
+    expect(html.match(/col-filter/g).length).toBe(1);
+  });
+
+  it('shows sort direction toggle', () => {
+    const htmlAsc = buildTableHead(
+      ['name'],
+      { name: 'Name' },
+      'name',
+      'asc',
+      { name: '' },
+      [],
+    );
+    const htmlDesc = buildTableHead(
+      ['name'],
+      { name: 'Name' },
+      'name',
+      'desc',
+      { name: '' },
+      [],
+    );
+    expect(htmlAsc).toContain('▲');
+    expect(htmlDesc).toContain('▼');
+  });
+});
+
+describe('buildFilterInput', () => {
+  it('generates text input by default', () => {
+    const html = buildFilterInput('name', 'test', []);
+    expect(html).toContain('class="col-filter"');
+    expect(html).toContain('data-col="name"');
+    expect(html).toContain('value="test"');
+    expect(html).toContain('type=');
+    expect(html).toContain('text');
+  });
+
+  it('forces select type when forceType is "select"', () => {
+    const rows = [{ color: 'red' }, { color: 'blue' }];
+    const html = buildFilterInput('color', 'red', rows, 'select');
+    expect(html).toContain('<select');
+    expect(html).toContain('selected');
+  });
+
+  it('generates select when unique count below threshold', () => {
+    const rows = Array.from({ length: 10 }, (_, i) => ({ status: i < 5 ? 'active' : 'inactive' }));
+    const html = buildFilterInput('status', '', rows, undefined, 40);
+    expect(html).toContain('<select');
+  });
+
+  it('escapes HTML in column names', () => {
+    const html = buildTableHead(
+      ['<script>'],
+      { '<script>': 'Label' },
+      '',
+      'asc',
+      { '<script>': '' },
+      [],
+    );
+    expect(html).not.toContain('<script>');
+    expect(html).toContain('&lt;script&gt;');
+  });
+});
+
+describe('buildPagingBar', () => {
+  it('generates prev and next buttons', () => {
+    const html = buildPagingBar(0, 100, 250);
+    expect(html).toContain('id="prev-page"');
+    expect(html).toContain('id="next-page"');
+  });
+
+  it('disables prev button on first page', () => {
+    const html = buildPagingBar(0, 100, 250);
+    expect(html).toContain('id="prev-page" disabled');
+  });
+
+  it('disables next button on last page', () => {
+    const html = buildPagingBar(2, 100, 250);
+    expect(html).toContain('id="next-page" disabled');
+  });
+
+  it('displays correct info text', () => {
+    const html = buildPagingBar(1, 100, 250);
+    expect(html).toContain('101–200 of 250');
+  });
+
+  it('handles empty results', () => {
+    const html = buildPagingBar(0, 100, 0);
+    expect(html).toContain('0–0 of 0');
+  });
+});

web/src/__tests__/paginated-table.test.js

@@ -0,0 +1,109 @@
+import { describe, it, expect } from 'vitest';
+import { escHtml, formatDatetime, formatDate, sortRows, uniqueValues, filterRows, PAGE_SIZE, SELECT_THRESHOLD } from '../lib/utils.js';
+
+describe('escHtml', () => {
+  it('escapes ampersands', () => expect(escHtml('a&b')).toBe('a&b'));
+  it('escapes less-than', () => expect(escHtml('a<b')).toBe('a&lt;b'));
+  it('escapes greater-than', () => expect(escHtml('a>b')).toBe('a&gt;b'));
+  it('escapes double quotes', () => expect(escHtml('a"b')).toBe('a&quot;b'));
+  it('handles null', () => expect(escHtml(null)).toBe(''));
+  it('handles undefined', () => expect(escHtml(undefined)).toBe(''));
+  it('coerces numbers to string', () => expect(escHtml(42)).toBe('42'));
+});
+
+describe('formatDatetime', () => {
+  it('formats ISO UTC to YYYY-MM-DD HH:MM', () => expect(formatDatetime('2024-03-15T09:05:00Z')).toBe('2024-03-15 09:05'));
+  it('returns empty for null', () => expect(formatDatetime(null)).toBe(''));
+  it('returns raw string for invalid date', () => expect(formatDatetime('not-a-date')).toBe('not-a-date'));
+  it('handles empty string', () => expect(formatDatetime('')).toBe(''));
+});
+
+describe('formatDate', () => {
+  it('formats ISO UTC to YYYY-MM-DD', () => expect(formatDate('2024-03-15T09:05:00Z')).toBe('2024-03-15'));
+  it('returns empty for null', () => expect(formatDate(null)).toBe(''));
+  it('returns raw string for invalid date', () => expect(formatDate('not-a-date')).toBe('not-a-date'));
+  it('handles empty string', () => expect(formatDate('')).toBe(''));
+});
+
+describe('sortRows', () => {
+  it('sorts rows ascending by column', () => {
+    const rows = [{ name: 'Bob', age: 30 }, { name: 'Alice', age: 25 }];
+    sortRows(rows, 'name', 'asc');
+    expect(rows[0].name).toBe('Alice');
+    expect(rows[1].name).toBe('Bob');
+  });
+
+  it('sorts rows descending by column', () => {
+    const rows = [{ name: 'Bob', age: 30 }, { name: 'Alice', age: 25 }];
+    sortRows(rows, 'name', 'desc');
+    expect(rows[0].name).toBe('Bob');
+    expect(rows[1].name).toBe('Alice');
+  });
+
+  it('handles missing values as empty strings (sort to start in ascending)', () => {
+    const rows = [{ name: 'Bob' }, { name: 'Alice' }, { age: 25 }];
+    sortRows(rows, 'name', 'asc');
+    // Missing 'name' property coerces to '', which sorts first
+    expect(rows[0].age).toBe(25);
+    expect(rows[0].name).toBeUndefined();
+    expect(rows[1].name).toBe('Alice');
+    expect(rows[2].name).toBe('Bob');
+  });
+});
+
+describe('uniqueValues', () => {
+  it('returns unique values from a column', () => {
+    const rows = [{ type: 'A' }, { type: 'B' }, { type: 'A' }, { type: 'C' }];
+    const values = uniqueValues(rows, 'type');
+    expect(values).toEqual(['A', 'B', 'C']);
+  });
+
+  it('filters out null and empty values', () => {
+    const rows = [{ type: 'A' }, { type: null }, { type: '' }, { type: 'B' }];
+    const values = uniqueValues(rows, 'type');
+    expect(values).toEqual(['A', 'B']);
+  });
+
+  it('returns sorted values', () => {
+    const rows = [{ type: 'Z' }, { type: 'A' }, { type: 'M' }];
+    const values = uniqueValues(rows, 'type');
+    expect(values).toEqual(['A', 'M', 'Z']);
+  });
+});
+
+describe('filterRows', () => {
+  it('returns all rows when no filters are applied', () => {
+    const rows = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }];
+    const result = filterRows(rows, {});
+    expect(result).toEqual(rows);
+  });
+
+  it('filters rows by a single column', () => {
+    const rows = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }];
+    const result = filterRows(rows, { name: 'Alice' });
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe('Alice');
+  });
+
+  it('uses case-insensitive substring matching', () => {
+    const rows = [{ name: 'Alice' }, { name: 'Alison' }, { name: 'Bob' }];
+    const result = filterRows(rows, { name: 'ALI' });
+    expect(result).toHaveLength(2);
+  });
+
+  it('filters by multiple columns (AND condition)', () => {
+    const rows = [
+      { name: 'Alice', age: 25 },
+      { name: 'Alice', age: 30 },
+      { name: 'Bob', age: 25 },
+    ];
+    const result = filterRows(rows, { name: 'Alice', age: '25' });
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe('Alice');
+  });
+});
+
+describe('Constants', () => {
+  it('PAGE_SIZE is 100', () => expect(PAGE_SIZE).toBe(100));
+  it('SELECT_THRESHOLD is 40', () => expect(SELECT_THRESHOLD).toBe(40));
+});