[Feature] Add editable table with PDF file matching for PDF-only uploads by Copilot · Pull Request #174 · Extralit/extralit

Copilot · 2025-12-07T23:21:51Z

Description

This PR adds an editable table interface for PDF-only uploads, allowing users to manually create reference entries and assign PDFs when no bibliography file is provided.

Core Changes:

Automatic table generation: Shows editable table when PDFs uploaded without bibliography, initializes with 3 empty rows
Multi-select PDF assignment: Files column uses Tabulator list editor with multiselect, dynamically populated from uploaded PDFs
Reference validation: Enforces unique + required constraints on reference column, required on files column
Unmapped PDF tracking: Displays count and list of PDFs not assigned to any reference
Real-time analysis sync: Edits to reference/files columns trigger analysis status updates via deep watch on dataframe data hash

Implementation:

// Dynamic columns with PDF multi-select
editableTableColumns: [
  { field: "reference", frozen: true, validator: ["required", "unique"] },
  { field: "files", frozenRight: true, editor: "list", 
    editorParams: { values: pdfFileOptions, multiselect: true } }
]

// Auto-sync table edits to dataframe format
handleTableCellEdit(cell) {
  editableTableData = editableTable.getData()
  syncEditableTableToBibData()  // Converts to TableData with filePaths
}

Data Flow:
PDFs uploaded → shouldShowEditableTable → User edits → syncEditableTableToBibData → Analysis pipeline

Leverages existing BaseSimpleTable/RenderTable components and domain entities (TableData, DataFrameSchema). Backward compatible—bibliography upload hides table and resumes standard flow.

Related Tickets & Documents

Closes #191

What type of PR is this? (check all applicable)

Steps to QA

Upload PDF files without a bibliography file
Verify editable table appears with reference, title, authors, year, journal, doi, files columns
Edit reference column → verify unique validation (duplicate values rejected)
Click files column → verify multi-select dropdown shows all uploaded PDFs
Assign PDFs to references → verify unmapped PDF count updates below table
Upload bibliography file afterward → verify table disappears and standard flow resumes
Check import analysis → verify status reflects manual entries

Added/updated tests?

Yes
8 unit tests in useImportFileUploadViewModel.spec.ts covering table visibility, column configuration, unmapped tracking, and data sync

Added/updated documentations?

No, and this is why: MVP feature, documentation can be added in follow-up based on user feedback
I need help with writing docs

Checklist

I have added relevant notes to the CHANGELOG.md file (See https://keepachangelog.com/)

Original prompt

This section details on the original issue you should resolve

<issue_title>Add Editable Table with File Path Matching for PDF-Only Uploads</issue_title>
<issue_description># Add Editable Table with File Path Matching for PDF-Only Uploads

Problem

When users upload PDFs without bibliography files, they currently have no way to create reference entries or match PDFs to file paths for extraction. This limits the usefulness of the PDF-first upload flow.

Solution

Create a MVP editable table interface that allows users to:

Generate reference entries from uploaded PDFs (initially start with an empty editable table)

Manually edit reference metadata (title, authors, etc.)

Match PDFs to file paths for extraction

Add custom reference keys

Requirements

Core Functionality

Automatic Table Generation: When PDFs are uploaded without bibliography files, automatically generate an empty table with reference and files columns

Editable Fields: Allow editing and adding additionally columns (title, authors, year, journal, DOI, etc.) (already implemented in RenderTable)

File Path Matching: Listing uploaded PDFs that have mapped to the metadata table entries or not

UI Components

Table Interface: Data table with inline editing capabilities

File Matching: multi-selection interface to match 1 or more PDFs to each reference

Metadata Extraction: Extract basic metadata from PDF headers/OCR when possible

Integration Points

PDF Processing: Extract metadata from uploaded PDFs on the backend

File Matching Logic: Intelligent matching based on filename patterns, extracted titles, etc.

Fallback Creation: Generate placeholder entries when metadata extraction fails

Files to Modify

extralit-frontend/components/features/import/file-upload/ImportFileUpload.vue :

Integrate new table creation flow with editable table (by default) and validators for unique value in the reference column.

Additionally the files column (frozen right) need to be a multi value list editor where user can multi-select the uploaded pdf file paths to each reference, configured in tableColumns passed to BaseSimpleTable. See https://tabulator.info/docs/6.3/edit#editor-list

Potentially need to create list of PDF files not yet mapped to a reference

extralit-frontend/components/features/import/analysis/useImportAnalysisTableViewModel.ts, trigger update on status on cell edits on reference or files column.

Files for reference

extralit-frontend/v1/domain/services/FileMatchingService.ts - only run when a BIB/CSV file uploaded for the initial pdf file mapping

extralit-frontend/components/features/import/file-upload/CsvColumnSelection.vue - only use for field mapping (column renaming to reference column) with uploaded CSV

Acceptance Criteria

Users can upload PDFs and get an editable table of reference entries

Table allows inline editing of all reference fields

PDF-to-entry matching works multi-select

Uses existing validators for files and reference column

Dependencies

Depends on completion of Issue Reverse File Upload Order: PDF Upload First, Then Table Upload #165 (PDF-first upload order)

Backend PDF metadata extraction API</issue_description>

Comments on the Issue (you are @copilot in this section)

Custom agent used: ddd-architect
Delivers high-quality, production-ready codebases grounded in domain-driven design principles with clear, pragmatic documentation.

Fixes Add Editable Table with File Path Matching for PDF-Only Uploads #166

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: JonnyTran <4750391+JonnyTran@users.noreply.github.com>

- Update `BaseSimpleTable` adapter to pass the full column configuration (including editor params) instead of just name/type. - Update `RenderTable` logic to respect custom column settings (like `editor: "list"`) by prioritizing schema config over defaults. - Add watcher to `columnsConfig` in `RenderTable` to ensure dropdown options update reactively when new files are uploaded.

- Add missing `$emit('cell-edited')` in `RenderTable`'s tabulator handler. - Ensures parent components are notified of changes to trigger state updates like the unmapped files counter.

…option

Copilot

Pull request overview

This PR adds an editable table interface for PDF-only uploads, enabling users to manually create reference entries and assign PDF files when no bibliography file is provided. The feature automatically displays an editable table with reference metadata columns when PDFs are uploaded without a bibliography file, supports multi-select PDF assignment via Tabulator's list editor, enforces validation constraints, and tracks unmapped PDFs in real-time.

Changes:

Implements automatic table generation with 3 empty rows when PDFs are uploaded without bibliography
Adds multi-select PDF file assignment with dynamic dropdown in the "files" column
Integrates real-time analysis updates through deep watching of dataframe data hash
Includes comprehensive unit tests covering table visibility, column configuration, and data synchronization

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
`useImportFileUploadViewModel.ts`	Core view model implementing editable table logic, column configuration with validators, unmapped PDF tracking, data sync, and auto-submit watcher
`useImportFileUploadViewModel.spec.ts`	Unit tests covering table visibility conditions, column configuration, unmapped file tracking, and data synchronization
`ImportFileUpload.vue`	Template integration of BaseSimpleTable component with editable table section and unmapped PDFs display
`useImportAnalysisTableViewModel.ts`	Adds deep watch on dataframe data hash to trigger analysis updates on cell edits
`BaseSimpleTable.vue`	Handles validators prop and spreads column properties to preserve editor config
`RenderTable.vue`	Spreads column properties in config and emits cell-edited event

Comments suppressed due to low confidence (1)

extralit-frontend/components/features/import/file-upload/useImportFileUploadViewModel.ts:448

The reset function should also clear editableTableData to ensure a clean state when resetting the component. Currently, the editable table data persists after reset, which could lead to stale data being displayed if the user resets and then uploads PDFs again.

  const reset = () => {
    // Set flag to prevent recursive updates during reset
    isInitializing.value = true;
    hasAutoSubmitted.value = false;
    // Reset bibliography data
    bibData.value = {
      fileName: "",
      dataframeData: null,
      rawContent: "",
    };


    // Reset PDF data
    pdfData.value = {
      matchedFiles: [],
      unmatchedFiles: [],
      totalFiles: 0,
    };

extralit-frontend/components/features/import/file-upload/useImportFileUploadViewModel.ts

extralit-frontend/components/features/import/file-upload/useImportFileUploadViewModel.spec.ts

extralit-frontend/components/features/import/file-upload/useImportFileUploadViewModel.ts

Copilot · 2026-01-17T17:22:34Z

extralit-frontend/components/features/import/file-upload/useImportFileUploadViewModel.spec.ts

+      expect(viewModel.bibData.value.dataframeData?.data).toHaveLength(1);
+    });
+  });
+});


There's no test coverage for the auto-submit behavior when all PDFs are mapped. Consider adding a test that verifies the watcher triggers syncEditableTableToBibData when unmappedPdfFiles becomes empty and sets hasAutoSubmitted to prevent duplicate submissions.

Copilot · 2026-01-17T17:22:34Z

extralit-frontend/components/features/import/file-upload/useImportFileUploadViewModel.spec.ts

+      expect(viewModel.bibData.value.dataframeData?.data).toHaveLength(1);
+    });
+  });
+});


There's no test coverage for the handleTableCellEdit and handleTableBuilt event handlers. Consider adding tests to verify that these handlers properly sync the table data with editableTableData.

Copilot · 2026-01-17T17:22:35Z

extralit-frontend/components/features/import/file-upload/useImportFileUploadViewModel.spec.ts

+      expect(viewModel.bibData.value.dataframeData?.data).toHaveLength(1);
+    });
+  });
+});


There's no test coverage for the initializeEditableTable function. Consider adding a test to verify that it creates 3 empty rows with the correct structure when PDFs are uploaded without bibliography.

extralit-frontend/components/features/import/file-upload/useImportFileUploadViewModel.spec.ts

extralit-frontend/components/features/import/file-upload/useImportFileUploadViewModel.ts

- Created detailed test report documenting all testing activities - All 72 test suites passing (723 tests) - Auto-fixed 53 linting errors via eslint --fix - Reviewed key UI components (BaseSimpleTable, RenderTable, TableUpload, ImportFileUpload) - Documented remaining linting issues (ESLint parser configuration) - Confirmed PR #174 is ready for merge Test Summary: ✅ Unit Tests: 723/723 passed ✅ Component Review: All components structurally sound ⚠️ Linting: 50 non-blocking errors (ESLint parser issues with TypeScript) ✅ Overall Status: PASSED - READY FOR MERGE

…table-for-pdf-uploads

priyankeshh · 2026-02-12T06:15:01Z

extralit-frontend/components/features/import/file-upload/useImportFileUploadViewModel.ts

+      if (
+        editableTable.value &&
+        newUnmapped.length === 0 &&
+        !hasAutoSubmitted.value
+      ) {


Suggested change

if (

editableTable.value &&

newUnmapped.length === 0 &&

!hasAutoSubmitted.value

) {

if (

editableTable.value &&

editableTableData.value.length > 0 &&

newUnmapped.length === 0 &&

!hasAutoSubmitted.value

) {

We’re currently checking only editableTable.value to determine readiness, but the table instance may exist before it has actual row data.

Consider also checking editableTableData.value.length > 0 to ensure the table is fully initialized before triggering auto-submit. This prevents premature submission when PDFs are first uploaded.

priyankeshh · 2026-02-12T06:21:04Z

extralit-frontend/components/features/import/file-upload/useImportFileUploadViewModel.ts

    emitPdfUpdate();
  };

+  const handleTableCellEdit = (cell: any) => {


Suggested change

const handleTableCellEdit = (cell: any) => {

const handleTableCellEdit = (_cell: any) => {

priyankeshh · 2026-02-12T06:22:20Z

extralit-frontend/components/features/import/file-upload/useImportFileUploadViewModel.ts

+  // Initialize editable table with empty rows
+  const initializeEditableTable = () => {
+    // Start with a few empty rows
+    const initialRows = Array.from({ length: 3 }, (_, i) => ({


Suggested change

const initialRows = Array.from({ length: 3 }, (_, i) => ({

const initialRows = Array.from({ length: 3 }, () => ({

priyankeshh · 2026-02-12T06:27:41Z

extralit-frontend/components/features/import/file-upload/useImportFileUploadViewModel.ts

    emitPdfUpdate();
  };

+  const handleTableCellEdit = (cell: any) => {


Suggested change

const handleTableCellEdit = (cell: any) => {

const handleTableCellEdit = (_cell: any) => {

priyankeshh · 2026-02-12T06:28:05Z

extralit-frontend/components/features/import/file-upload/useImportFileUploadViewModel.ts

+  // Initialize editable table with empty rows
+  const initializeEditableTable = () => {
+    // Start with a few empty rows
+    const initialRows = Array.from({ length: 3 }, (_, i) => ({


Suggested change

const initialRows = Array.from({ length: 3 }, (_, i) => ({

const initialRows = Array.from({ length: 3 }, () => ({

…leting unused dependencies. Update unit test for dynamic editor parameters in useImportFileUploadViewModel to ensure proper functionality.

…eaner code - Removed unnecessary mapping for PDF file options in editable table columns. - Simplified reference validators by consolidating into an array format. - Updated handleTableCellEdit function parameter for clarity. - Adjusted initialRows creation to eliminate unused index variable.

…sTable) - ImportAnalysisTable: add editable table branch shown when no bibliography data exists but PDFs are uploaded (shouldShowEditableTable computed) - ImportAnalysisTable: add allPdfFileNames, unmappedPdfFiles, editableTableColumns computeds; handleTableCellEdit, handleTableBuilt, initializeEditableTable methods - ImportAnalysisTable: extend pdfData prop to include unmatchedFiles - ImportAnalysisTable: emitUpdate() first branch builds confirmedDocuments from editable table rows when in PDF-only mode - ImportFileUpload: remove editable table template, BaseSimpleTable import, and CSS - useImportFileUploadViewModel: remove all editable table logic (refs, computeds, methods, watcher); simplifies to pure bib+pdf coordination only - useImportFileUploadViewModel.spec.ts: delete (tested wrong location) - useImportAnalysisTableViewModel: extend pdfData type to include unmatchedFiles Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- RenderTable.vue: Added styles for frozen column headers and body cells to ensure consistent light backgrounds. - BaseSimpleTable.vue: Introduced light-mode color variables for better theme control and updated frozen column styles. - ImportAnalysisTable.vue: Renamed "Reference Metadata" to "Document Metadata" and refined editable table initialization logic for PDF files, improving user experience and data handling.

- Added a reference to the ImportFlow component in index.vue. - Implemented beforeRouteLeave navigation guard to prompt users about unsaved import data. - Introduced handleBeforeUnload method to warn users when attempting to close the window with unsaved changes. - Updated hasDataToLose method in ImportFlow.vue to include editable table data in the loss check.

Initial plan

523e12f

Copilot AI assigned Copilot and JonnyTran Dec 7, 2025

Copilot started work on behalf of JonnyTran December 7, 2025 23:23 View session

Copilot AI and others added 2 commits December 7, 2025 23:32

Add editable table with PDF file matching for PDF-only uploads

9aceae4

Co-authored-by: JonnyTran <4750391+JonnyTran@users.noreply.github.com>

Add tests for editable table functionality

ae0b342

Co-authored-by: JonnyTran <4750391+JonnyTran@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add editable table for PDF-only uploads with path matching~~ [Feature] Add editable table with PDF file matching for PDF-only uploads Dec 7, 2025

Copilot AI requested a review from JonnyTran December 7, 2025 23:39

Copilot finished work on behalf of JonnyTran December 7, 2025 23:39

Sparshr04 added 4 commits December 23, 2025 21:04

fix(table): emit cell-edited event for parent state synchronization

72edcec

- Add missing `$emit('cell-edited')` in `RenderTable`'s tabulator handler. - Ensures parent components are notified of changes to trigger state updates like the unmapped files counter.

fix: Exclusive Multiselect Property for List Dropdown

c1c1c06

fix: Infinite loop condidion in RenderTable watcher and Freeze Table …

a7b9526

…option

JonnyTran requested a review from Copilot January 17, 2026 17:17

Copilot started reviewing on behalf of JonnyTran January 17, 2026 17:18 View session

Copilot AI reviewed Jan 17, 2026

View reviewed changes

claude and others added 2 commits January 24, 2026 17:15

Merge branch 'claude/test-pr-174-ui-Ap63f' into copilot/add-editable-…

d11bb2b

…table-for-pdf-uploads

JonnyTran marked this pull request as ready for review February 10, 2026 06:07

JonnyTran requested a review from a team as a code owner February 10, 2026 06:07

priyankeshh requested changes Feb 12, 2026

View reviewed changes

JonnyTran force-pushed the copilot/add-editable-table-for-pdf-uploads branch from 7bea48c to d11bb2b Compare February 21, 2026 17:54

JonnyTran and others added 6 commits February 21, 2026 09:58

Remove PR #174 UI Testing Report and clean up package-lock.json by de…

9d939e6

…leting unused dependencies. Update unit test for dynamic editor parameters in useImportFileUploadViewModel to ensure proper functionality.

latest

7a29e2e

JonnyTran merged commit 637e8e3 into develop Feb 21, 2026
1 check passed

	const handleTableCellEdit = (cell: any) => {
	const handleTableCellEdit = (_cell: any) => {

	const initialRows = Array.from({ length: 3 }, (_, i) => ({
	const initialRows = Array.from({ length: 3 }, () => ({

Uh oh!

Comments

Conversation

Copilot AI commented Dec 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Tickets & Documents

What type of PR is this? (check all applicable)

Steps to QA

Added/updated tests?

Added/updated documentations?

Checklist

Problem

Solution

Requirements

Core Functionality

UI Components

Integration Points

Files to Modify

Files for reference

Acceptance Criteria

Dependencies

Comments on the Issue (you are @copilot in this section)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

priyankeshh Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

priyankeshh Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

priyankeshh Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

priyankeshh Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

priyankeshh Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Copilot AI commented Dec 7, 2025 •

edited

Loading