feat(wikibase-schema-editor): add column palette component #79
Conversation
📝 WalkthroughSummary by CodeRabbit
WalkthroughThis change introduces a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ColumnPalette
participant DragDropStore
participant ProjectStore
User->>ColumnPalette: Drag column chip (dragstart)
ColumnPalette->>DragDropStore: setDraggedColumn(column)
ColumnPalette->>User: Set drag data (column info)
User->>ColumnPalette: Drop column chip (dragend)
ColumnPalette->>DragDropStore: clearDraggedColumn()
sequenceDiagram
participant Component
participant useColumnConversion
participant useDataTypeCompatibility
Component->>useColumnConversion: convertProjectColumnsToColumnInfo(columns, sampleData)
useColumnConversion->>Component: returns ColumnInfo[]
Component->>useDataTypeCompatibility: getCompatibleWikibaseTypes(columnType)
useDataTypeCompatibility->>Component: returns WikibaseDataType[]
Component->>useDataTypeCompatibility: isDataTypeCompatible(columnType, acceptedTypes)
useDataTypeCompatibility->>Component: returns boolean
Possibly related PRs
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
frontend/src/components/WikibaseSchemaEditor.vue (1)
4-8: Consider responsive design for the column palette.The fixed width (
w-80) for the column palette might not work well on smaller screens. Consider making it responsive or collapsible.Consider a responsive approach:
- <div class="w-80 flex-shrink-0"> + <div class="w-80 lg:w-80 md:w-64 sm:w-full flex-shrink-0"> <ColumnPalette /> </div>Or add a toggle mechanism for mobile devices.
frontend/src/components/__tests__/ColumnPalette.test.ts (1)
6-49: Consider refactoring to reduce code duplicationThe formatSampleValues logic is duplicated across multiple tests. Consider extracting the logic into a helper function for testing, or ensure this matches the actual implementation in the component.
Extract the common logic:
+const formatSampleValues = (sampleValues: string[]) => { + if (!sampleValues || sampleValues.length === 0) return '' + const displayValues = sampleValues.slice(0, 2).join(', ') + const hasMore = sampleValues.length > 2 + return `Sample: ${displayValues}${hasMore ? '...' : ''}` +} + describe('formatSampleValues function logic', () => { test('should format sample values correctly with two values', () => { const sampleValues = ['Fiction', 'Non-fiction'] const expected = 'Sample: Fiction, Non-fiction' - - // Test the logic that would be in formatSampleValues - const displayValues = sampleValues.slice(0, 2).join(', ') - const hasMore = sampleValues.length > 2 - const result = `Sample: ${displayValues}${hasMore ? '...' : ''}` - + const result = formatSampleValues(sampleValues) expect(result).toBe(expected) })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (15)
.kiro/specs/wikibase-schema-editor/tasks.md(1 hunks)frontend/.eslintrc-auto-import.json(2 hunks)frontend/auto-imports.d.ts(5 hunks)frontend/components.d.ts(1 hunks)frontend/src/components/ColumnPalette.vue(1 hunks)frontend/src/components/WikibaseSchemaEditor.vue(1 hunks)frontend/src/components/__tests__/ColumnPalette.test.ts(1 hunks)frontend/src/composables/__tests__/useColumnConversion.test.ts(1 hunks)frontend/src/composables/__tests__/useDataTypeCompatibility.test.ts(1 hunks)frontend/src/composables/useColumnConversion.ts(1 hunks)frontend/src/composables/useDataTypeCompatibility.ts(1 hunks)frontend/src/composables/useDragDropContext.ts(3 hunks)frontend/src/stores/drag-drop.store.ts(1 hunks)frontend/src/types/__tests__/drop-target-validation.test.ts(1 hunks)frontend/src/utils/data-type-compatibility.ts(0 hunks)
💤 Files with no reviewable changes (1)
- frontend/src/utils/data-type-compatibility.ts
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx,js,jsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc
**/*.{html,ts,tsx,css}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc
**/*.test.{ts,tsx,js,jsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc
🧠 Learnings (12)
frontend/src/stores/drag-drop.store.ts (7)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/composables/**/*.ts : Do not proxy or export Pinia store state/actions from composables
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/composables/**/*.ts : Do not export store state from composables
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{vue,ts} : Use Pinia stores for global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Use auto-imports for Vue, Pinia, composables, and utilities
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Use storeToRefs for state in components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.690Z
Learning: Applies to src/**/*.vue : Use Pinia for state management in all Vue components
frontend/.eslintrc-auto-import.json (1)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Use auto-imports for Vue, Pinia, composables, and utilities
frontend/src/types/__tests__/drop-target-validation.test.ts (7)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/composables/**/*.ts : Do not export store state from composables
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.125Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use `bun test` instead of `jest` for running tests
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Props and emits must use explicit TypeScript interfaces
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use `bun:sqlite` for SQLite instead of `better-sqlite3`
frontend/src/components/WikibaseSchemaEditor.vue (1)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Build reusable, well-structured components
frontend/src/composables/useDataTypeCompatibility.ts (1)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
frontend/components.d.ts (11)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.690Z
Learning: Applies to src/**/*.vue : Use PrimeVue as the UI library in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.690Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Use auto-imports for Vue, Pinia, composables, and utilities
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Build reusable, well-structured components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Props and emits must use explicit TypeScript interfaces
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{vue,ts} : Use Pinia stores for global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Prefer composables over methods in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{vue,ts} : Always use backend-inferred types for API data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Use <script setup lang="ts"> at the top, template second, style last (rarely used) in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.690Z
Learning: Applies to src/**/*.vue : Use Pinia for state management in all Vue components
frontend/src/composables/__tests__/useColumnConversion.test.ts (2)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.125Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use `bun test` instead of `jest` for running tests
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use `Bun.sql` for Postgres instead of `pg` or `postgres.js`
frontend/src/components/__tests__/ColumnPalette.test.ts (2)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.125Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use `bun test` instead of `jest` for running tests
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.126Z
Learning: For more information, read the official Bun documentation at https://bun.sh/docs or check `node_modules/bun-types/docs/**.md` if available locally
frontend/src/composables/__tests__/useDataTypeCompatibility.test.ts (4)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.125Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Use `bun test` instead of `jest` for running tests
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.126Z
Learning: For more information, read the official Bun documentation at https://bun.sh/docs or check `node_modules/bun-types/docs/**.md` if available locally
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.125Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use `bun:sqlite` for SQLite instead of `better-sqlite3`
frontend/src/components/ColumnPalette.vue (7)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.690Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Use <script setup lang="ts"> at the top, template second, style last (rarely used) in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{vue,ts} : Use Pinia stores for global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Build reusable, well-structured components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{vue,ts} : Use readonly and shallowReactive for large or expensive data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Use storeToRefs for state in components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
frontend/auto-imports.d.ts (18)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Use auto-imports for Vue, Pinia, composables, and utilities
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{vue,ts} : Always use backend-inferred types for API data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.690Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.125Z
Learning: Applies to **/*.{html,tsx,jsx,js,css} : Use HTML imports with `Bun.serve()` instead of `vite` for frontend development
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Props and emits must use explicit TypeScript interfaces
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{vue,ts} : Use readonly and shallowReactive for large or expensive data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Prefer composables over methods in Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Prefer reactivity over computed unless necessary
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Use v-memo, shallowRef, markRaw, and Suspense for performance optimization
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Use storeToRefs for state in components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.690Z
Learning: Applies to src/**/*.vue : Use PrimeVue as the UI library in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{vue,ts} : Use Pinia stores for global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.690Z
Learning: Applies to src/**/*.vue : Use Pinia for state management in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/composables/**/*.ts : Do not proxy or export Pinia store state/actions from composables
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/composables/**/*.ts : Do not export store state from composables
frontend/src/composables/useDragDropContext.ts (11)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/composables/**/*.ts : Do not export store state from composables
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Use storeToRefs for state in components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{vue,ts} : Use Pinia stores for global state
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Use v-memo, shallowRef, markRaw, and Suspense for performance optimization
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.690Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.vue : Use reactive objects for form state and errors
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{vue,ts} : Use readonly and shallowReactive for large or expensive data
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.691Z
Learning: Applies to src/**/*.{vue,ts} : Always use backend-inferred types for API data
🧬 Code Graph Analysis (7)
frontend/src/stores/drag-drop.store.ts (1)
frontend/src/composables/useDataTypeCompatibility.ts (1)
useDataTypeCompatibility(6-53)
frontend/src/types/__tests__/drop-target-validation.test.ts (1)
frontend/src/composables/useDataTypeCompatibility.ts (1)
useDataTypeCompatibility(6-53)
frontend/src/composables/useDataTypeCompatibility.ts (1)
frontend/auto-imports.d.ts (1)
WikibaseDataType(366-366)
frontend/src/composables/__tests__/useColumnConversion.test.ts (2)
frontend/src/composables/useColumnConversion.ts (1)
useColumnConversion(7-39)frontend/auto-imports.d.ts (1)
ProjectColumn(354-354)
frontend/src/composables/__tests__/useDataTypeCompatibility.test.ts (2)
frontend/src/composables/useDataTypeCompatibility.ts (1)
useDataTypeCompatibility(6-53)frontend/auto-imports.d.ts (1)
WikibaseDataType(366-366)
frontend/auto-imports.d.ts (2)
frontend/src/composables/useColumnConversion.ts (1)
useColumnConversion(7-39)frontend/src/composables/useDataTypeCompatibility.ts (1)
useDataTypeCompatibility(6-53)
frontend/src/composables/useDragDropContext.ts (1)
frontend/src/composables/useDataTypeCompatibility.ts (1)
useDataTypeCompatibility(6-53)
🔇 Additional comments (43)
.kiro/specs/wikibase-schema-editor/tasks.md (1)
39-39: LGTM! Task completion tracking is accurate.The task completion for "Build ColumnPalette component with TDD" correctly reflects the implementation work done in this PR.
frontend/src/stores/drag-drop.store.ts (2)
5-5: LGTM! Proper migration to composable pattern.The import change from direct utility to composable follows the project's architectural guidelines.
11-11: LGTM! Correct composable usage within store.Properly destructuring the compatibility function from the composable within the store setup, following the learned pattern of not exporting store state from composables.
frontend/src/types/__tests__/drop-target-validation.test.ts (2)
2-2: LGTM! Test updated for composable migration.Correctly updated the import to use the new composable pattern while maintaining test functionality.
7-7: LGTM! Proper composable usage in tests.Correctly destructuring the compatibility function from the composable within the test suite.
frontend/.eslintrc-auto-import.json (2)
216-216: LGTM! Auto-import added for new composable.Adding
useColumnConversionto auto-imports supports the new composable architecture and improves developer experience.
229-229: LGTM! Auto-import added for data type composable.Adding
useDataTypeCompatibilityto auto-imports aligns with the migration from utility imports to composable pattern.frontend/components.d.ts (3)
12-12: LGTM! PrimeVue Card component added.Properly declares the Card component for global use in Vue templates.
14-14: LGTM! ColumnPalette component declaration added.Correctly adds the new ColumnPalette component to global component declarations, enabling its use throughout the application without explicit imports.
21-21: LGTM! PrimeVue FileUpload component added.Properly declares the FileUpload component for global use in Vue templates.
frontend/src/composables/useDragDropContext.ts (2)
3-3: LGTM! Successful refactoring to composable pattern.The import has been correctly updated to use the new
useDataTypeCompatibilitycomposable instead of the utility function.
49-49: LGTM! Proper composable usage at top level.The destructuring of
isDataTypeCompatiblefrom the composable at the top level is correct and efficient.frontend/src/components/WikibaseSchemaEditor.vue (2)
1-1: LGTM! Clean script setup.The simplified empty script setup is appropriate for a layout component that doesn't need local state or logic.
10-114: LGTM! Well-structured layout refactoring.The two-column layout successfully integrates the new ColumnPalette while preserving all existing schema editor functionality. The styling and structure are clean and semantic.
frontend/src/composables/__tests__/useColumnConversion.test.ts (8)
1-3: LGTM! Proper test setup with correct imports.The test correctly uses
bun:testas required by the coding guidelines and imports the necessary types and composable.
8-51: LGTM! Comprehensive basic conversion test.The test thoroughly validates the core functionality with proper assertions for all returned properties including data types, sample values, nullability, and unique counts.
53-77: LGTM! Excellent nullable column handling test.This test properly covers the edge case of null and undefined values, ensuring the nullable flag is correctly set and non-null values are properly extracted.
79-96: LGTM! Good edge case coverage for empty data.The test correctly handles the scenario where no sample data is provided, ensuring appropriate defaults are set.
98-118: LGTM! Proper testing of sample value limits.This test ensures the function correctly limits sample values to the first 5 unique entries as documented.
120-144: LGTM! Duplicate removal test is thorough.The test validates that duplicate values are properly removed and unique counts are calculated correctly.
146-169: LGTM! Type conversion test covers important edge case.This test ensures all sample values are converted to strings regardless of their original type, which is crucial for UI display consistency.
171-191: LGTM! Missing field test covers important edge case.The test properly handles columns that don't exist in the sample data, correctly marking them as nullable and providing appropriate defaults.
frontend/src/composables/useColumnConversion.ts (3)
1-6: LGTM! Clean imports and documentation.The imports are properly typed and the JSDoc documentation clearly explains the composable's purpose.
7-34: LGTM! Well-implemented conversion logic.The
convertProjectColumnsToColumnInfofunction is cleanly implemented with:
- Proper null/undefined filtering
- Correct unique value calculation using Set
- Appropriate sample value limiting (first 5)
- String conversion for UI consistency
- Accurate nullable detection
The logic matches the comprehensive test coverage and follows good practices.
36-39: LGTM! Proper composable return pattern.The composable correctly returns an object with the conversion function, following Vue 3 composition API patterns.
frontend/src/composables/useDataTypeCompatibility.ts (5)
1-5: LGTM! Clean imports and documentation.The import and JSDoc documentation are appropriate and clearly explain the composable's purpose.
11-26: LGTM! Comprehensive data type compatibility mapping.The mapping covers all major database types with logical Wikibase type associations. The case-insensitive approach using
toUpperCase()in the getter function is user-friendly.Note: BOOLEAN maps to an empty array - verify this is intentional if Wikibase doesn't support boolean data types.
33-35: LGTM! Robust helper function with proper fallback.The
getCompatibleWikibaseTypesfunction correctly handles case-insensitivity and provides a safe fallback for unknown types.
43-46: LGTM! Efficient compatibility checking logic.The
isDataTypeCompatiblefunction efficiently usessome()to check if any accepted types match the compatible types, providing good performance.
48-53: LGTM! Proper composable return pattern.The composable correctly returns all functionality including the mapping constant and both helper functions, following Vue 3 composition API patterns.
frontend/src/components/__tests__/ColumnPalette.test.ts (5)
1-3: LGTM: Proper test framework usageCorrectly uses
bun:testinstead of jest as per coding guidelines.
51-79: LGTM: Comprehensive validation testingGood coverage of both required and optional properties in the ColumnInfo interface, including proper type checking.
81-125: LGTM: Thorough drag-and-drop testingExcellent coverage of data transfer serialization and state management for drag-and-drop functionality.
127-148: LGTM: Essential empty state coverageCovers the necessary scenarios for empty state detection in the UI.
150-195: LGTM: Comprehensive props validationExcellent coverage of various data types and edge cases, including proper handling of nullable columns and null values in sample data.
frontend/src/composables/__tests__/useDataTypeCompatibility.test.ts (4)
1-8: LGTM: Clean test setupProper use of bun:test framework and clean destructuring of composable functions for testing.
9-45: LGTM: Comprehensive mapping validationExcellent coverage of all data type mappings with logical grouping by type categories.
47-77: LGTM: Thorough function testingGood coverage of the getCompatibleWikibaseTypes function including edge cases and case insensitivity.
79-125: LGTM: Complete compatibility testingExcellent coverage of all compatibility scenarios including edge cases, case insensitivity, and boundary conditions.
frontend/src/components/ColumnPalette.vue (2)
1-38: LGTM: Well-structured Vue Composition APIGood use of stores, composables, and proper drag-and-drop implementation. The code follows Vue 3 best practices and coding guidelines.
40-116: LGTM: Excellent template structureWell-designed template with:
- Clear empty state with proper messaging
- Good use of PrimeVue components
- Proper accessibility attributes and testing IDs
- Smooth transitions and visual feedback for drag states
- Clean conditional rendering
frontend/auto-imports.d.ts (2)
526-526: LGTM: Consistent component property declarationsProperly adds the new composables to component properties for Vue template usage.
Also applies to: 539-539
11-25: No remaining references to old data-type-compatibilityThe
data-type-compatibilityutility file has been removed and there are no lingering imports. The new composables and utility functions are correctly added to the auto-imports.
| validateDrop: (data: string) => { | ||
| try { | ||
| const column = JSON.parse(data) as ColumnInfo | ||
| const { isDataTypeCompatible } = useDataTypeCompatibility() |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Optimize composable usage for better performance.
The useDataTypeCompatibility() is being called inside the validateDrop function, which means it's executed on every validation call. This is inefficient compared to the top-level usage in the main composable.
Consider extracting the composable at the function level:
export const createDropZoneConfig = (
targetPath: string,
acceptedTypes: WikibaseDataType[],
onDropCallback: (column: ColumnInfo, target: DropTarget) => Promise<void> | void,
): DropZoneConfig => {
+ const { isDataTypeCompatible } = useDataTypeCompatibility()
+
return {
acceptedDataTypes: ['application/x-column-data'],
// ... other properties
validateDrop: (data: string) => {
try {
const column = JSON.parse(data) as ColumnInfo
- const { isDataTypeCompatible } = useDataTypeCompatibility()
return isDataTypeCompatible(column.dataType, acceptedTypes)
} catch {
return false
}
},
}
}🤖 Prompt for AI Agents
In frontend/src/composables/useDragDropContext.ts at line 311, the
useDataTypeCompatibility() composable is called inside the validateDrop function
causing it to run on every validation call, which is inefficient. Move the call
to useDataTypeCompatibility() outside of validateDrop and assign it once at the
top level of the main composable, then use the destructured isDataTypeCompatible
inside validateDrop to improve performance.
1 participant
Addresses Task 7 of #66