Skip to content

spec(wikibase-schema-editor): extend spec with schema listing #111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DaxServer merged 1 commit into from
Aug 4, 2025
Merged

spec(wikibase-schema-editor): extend spec with schema listing #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 60 additions & 19 deletions .kiro/specs/wikibase-schema-editor/design.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,17 @@ The schema editor follows a hierarchical component structure:

```mermaid
graph TD
A[WikibaseSchemaEditor] --> B[SchemaToolbar]
A --> C[ColumnPalette]
C --> C1[ColumnItem]
A --> D[SchemaCanvas]
D --> E[ItemEditor]
E --> F[TermsEditor]
E --> G[StatementsEditor]
G --> H[StatementEditor]
H --> I[QualifiersEditor]
H --> J[ReferencesEditor]
A[WikibaseSchemaEditor] --> B[SchemaSelector]
A --> C[SchemaToolbar]
A --> D[ColumnPalette]
D --> D1[ColumnItem]
A --> E[SchemaCanvas]
E --> F[ItemEditor]
F --> G[TermsEditor]
F --> H[StatementsEditor]
H --> I[StatementEditor]
I --> J[QualifiersEditor]
I --> K[ReferencesEditor]
```

## Components and Interfaces
Expand All @@ -49,8 +50,18 @@ graph TD
- Coordinates drag-and-drop operations
- Handles schema persistence
- Provides validation feedback
- Manages schema selection and creation workflow

#### 2. ColumnPalette
#### 2. SchemaSelector
- **Purpose**: Manages schema selection workflow as the initial interface
- **Responsibilities**:
- Fetches existing schemas linked to the current project using existing API
- Displays list of available schemas with metadata (name, dates, completion status)
- Provides "Create New Schema" button that triggers existing initialization code
- Handles schema selection and transitions to main editor
- Shows empty state when no schemas exist

Comment on lines +53 to +63
Copy link

@coderabbitai coderabbitai bot Aug 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Specify error & loading management in SchemaSelector responsibilities

Responsibilities list covers data fetching and transitions but omits UX for slow or failed requests. Add:

• Manages `isLoading`, `errorMessage` states and exposes retry capability

This ties directly to SchemaSelectionState.isLoading and aligns with learned guideline: “Handle errors and loading states reactively when making API calls.”

🤖 Prompt for AI Agents 
In .kiro/specs/wikibase-schema-editor/design.md around lines 53 to 63, the
responsibilities of SchemaSelector lack mention of handling loading and error
states during API calls. Add a responsibility stating that SchemaSelector
manages isLoading and errorMessage states and provides a retry capability. This
ensures the component handles slow or failed requests reactively, aligning with
the guideline to manage errors and loading states during data fetching.

#### 3. ColumnPalette
- **Purpose**: Displays available data columns as draggable elements with optional sample data
- **Responsibilities**:
- Fetches column information from project data
Expand All @@ -60,53 +71,53 @@ graph TD
- Manages sample data visibility toggle state
- Provides toggle button interface for showing/hiding sample data

#### 3. SchemaCanvas
#### 4. SchemaCanvas
- **Purpose**: Main editing area where schema structure is built
- **Responsibilities**:
- Renders the item configuration interface
- Manages drop zones for column mappings
- Displays hierarchical schema structure
- Handles visual feedback for valid/invalid mappings

#### 4. ItemEditor
#### 5. ItemEditor
- **Purpose**: Manages the configuration of a single Wikibase item
- **Responsibilities**:
- Provides interface for item metadata
- Coordinates Terms and Statements editors
- Manages item-level validation
- Handles item creation/deletion

#### 5. TermsEditor
#### 6. TermsEditor
- **Purpose**: Manages Labels, Descriptions, and Aliases configuration
- **Responsibilities**:
- Provides drop zones for each term type
- Manages multilingual configurations
- Handles language code selection
- Validates term mappings

#### 6. StatementsEditor
#### 7. StatementsEditor
- **Purpose**: Container for managing multiple statements
- **Responsibilities**:
- Provides interface to add/remove statements
- Manages statement ordering
- Coordinates individual statement editors

#### 7. StatementEditor
#### 8. StatementEditor
- **Purpose**: Configures individual property-value statements
- **Responsibilities**:
- Property selection interface (P-ID autocomplete)
- Value mapping configuration
- Rank selection (preferred/normal/deprecated)
- Data type validation

#### 8. QualifiersEditor & ReferencesEditor
#### 9. QualifiersEditor & ReferencesEditor
- **Purpose**: Manages qualifiers and references for statements
- **Responsibilities**:
- Provides interfaces to add/remove qualifiers/references
- Property selection for qualifier/reference properties
- Value mapping for qualifier/reference values

#### 9. ColumnItem
#### 10. ColumnItem
- **Purpose**: Individual draggable column element within the ColumnPalette
- **Responsibilities**:
- Renders individual column as draggable chip
Expand Down Expand Up @@ -138,6 +149,23 @@ interface WikibaseSchemaMapping {
updatedAt: string
}

interface SchemaListItem {
id: string
name: string
createdAt: string
updatedAt: string
itemCount: number
statementCount: number
isComplete: boolean
}

interface SchemaSelectionState {
schemas: SchemaListItem[]
isLoading: boolean
selectedSchemaId: string | null
showMainEditor: boolean
}

interface ItemSchemaMapping {
id?: ItemId
terms: TermsSchemaMapping
Expand Down Expand Up @@ -379,13 +407,25 @@ const ValidationErrors = {
- Add comprehensive error handling
- Implement accessibility features

### Phase 5: Schema Selection Enhancement
- Build SchemaSelector component for initial schema selection
- Integrate schema selection with existing WikibaseSchemaEditor
- Add schema metadata display and empty state handling
- Ensure seamless transition between selection and main editor

## Technical Decisions

### State Management
- Use Vue 3 Composition API with Pinia stores for state management
- Implement reactive schema state with automatic persistence
- Use computed properties for derived state (validation status, completion percentage)

### Schema Selection Integration
- SchemaSelector will be the initial view within WikibaseSchemaEditor
- Use existing `useSchemaApi().loadAllSchemas()` to fetch available schemas
- Transition to main editor by setting a reactive state flag
- Leverage existing schema initialization code for new schema creation

### Drag and Drop Implementation
- Use VueUse `useDraggable` for making column elements draggable with position tracking and visual feedback
- Use native HTML5 drag and drop events with `DataTransfer` API for custom data transfer between elements
Expand All @@ -394,7 +434,8 @@ const ValidationErrors = {
- Provide visual feedback using CSS transitions and VueUse's reactive state

### API Integration
- Extend existing Elysia backend routes for schema operations
- Leverage existing Elysia backend routes for schema operations
- Use existing `loadAllSchemas`, `loadSchema`, and `createSchema` functions
- Implement optimistic updates with rollback capability
- Use Elysia Eden Treaty for type-safe API calls

Expand Down
13 changes: 13 additions & 0 deletions .kiro/specs/wikibase-schema-editor/requirements.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,3 +103,16 @@ The Wikibase Schema Editor is a visual interface that allows users to create and
2. WHEN the schema is incomplete THEN the system SHALL highlight required fields that need attention
3. WHEN the user maps columns THEN the system SHALL provide autocomplete suggestions for property names
4. IF there are data type mismatches THEN the system SHALL warn the user and suggest corrections

### Requirement 9

**User Story:** As a data curator, I want to select from existing schemas or create new ones when I open the schema editor, so that I can reuse previous work and maintain consistency across similar datasets.

#### Acceptance Criteria

1. WHEN the schema editor loads THEN the system SHALL display a schema selection interface before showing the main editor
2. WHEN existing schemas are found THEN the system SHALL display a list of available schemas with their names, creation dates, and completion status
3. WHEN the user views the schema list THEN the system SHALL provide a prominent "Create New Schema" button alongside the existing schemas
4. WHEN the user selects an existing schema THEN the system SHALL load that schema configuration into the main editor interface
5. WHEN the user clicks "Create New Schema" THEN the system SHALL initialize an empty schema editor using the existing initialization code
6. WHEN no existing schemas are found THEN the system SHALL show an empty state with only the "Create New Schema" option
31 changes: 31 additions & 0 deletions .kiro/specs/wikibase-schema-editor/tasks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,3 +168,34 @@
- Write tests for optimistic updates and rollback
- Implement schema persistence integration
- _Requirements: 1.3_

- [ ] 29. Build SchemaSelector component
- Write tests for displaying existing schemas list with metadata
- Write tests for empty state when no schemas exist
- Write tests for "Create New Schema" button functionality
- Implement SchemaSelector component with schema list display
- _Requirements: 9.2, 9.3, 9.6_

- [ ] 30. Add schema metadata display
- Write tests for schema creation date and modification time display
- Write tests for schema completion status indicators
- Implement schema metadata display functionality in schema list items
- _Requirements: 9.2_

- [ ] 31. Implement schema selection workflow
- Write tests for loading selected schema into editor
- Write tests for transitioning from selector to main editor
- Implement schema selection and loading functionality
- _Requirements: 9.4_

- [ ] 32. Create new schema initialization
- Write tests for "Create New Schema" button triggering existing init code
- Write tests for transitioning to empty schema editor
- Implement new schema creation using existing initialization functionality
- _Requirements: 9.5_

- [ ] 33. Integrate schema selector with WikibaseSchemaEditor
- Write tests for initial schema selection flow
- Write tests for state management between selector and editor
- Integrate SchemaSelector as the initial view in WikibaseSchemaEditor
- _Requirements: 9.1_