fix: filtering properties related to a space (#74)

by indexing the correct related trait type

Author: jamesdabbs

packages/viewer/cypress/e2e/space.spec.ts

@@ -19,3 +19,14 @@ it('links to traits', () => {
 
   cy.location('pathname').should('eq', '/spaces/S000004/properties/P000010')
 })
+
+it('filters traits', () => {
+  cy.visit('spaces/S000004/properties')
+  deduce()
+
+  cy.get('[placeholder=Filter]').type('comp')
+
+  cy.get('.related-traits > tbody > tr')
+    .first()
+    .should('have.text', '16 Compact   ')
+})

packages/viewer/public/refs/heads/main.json

@@ -0,0 +1 @@
+../../../cypress/fixtures/main.min.json

packages/viewer/src/components/Properties/Spaces.svelte

@@ -10,9 +10,7 @@
   }
 </script>
 
-<Related {related}>
-  <span slot="title">Space</span>
-
+<Related mode="spaces" {related}>
   <Link.Space slot="id" let:space {space}>{space.id}</Link.Space>
 
   <Link.Space slot="name" let:space {space} />

packages/viewer/src/components/Spaces/Properties.svelte

@@ -10,9 +10,7 @@
   }
 </script>
 
-<Related {related}>
-  <span slot="title">Property</span>
-
+<Related mode="properties" {related}>
   <Link.Property slot="id" let:property {property}>{property.id}</Link.Property>
 
   <Link.Property slot="name" let:property {property} />

packages/viewer/src/components/Traits/Related.svelte

@@ -4,8 +4,10 @@
   import { Value } from '../Traits'
   import context from '@/context'
   import type { Property, Space, Trait, Traits } from '@/models'
+  import { capitalize } from '@/util'
 
   export let related: (traits: Traits) => [Space, Property, Trait][]
+  export let mode: 'spaces' | 'properties'
 
   const { traits } = context()
 
@@ -17,7 +19,10 @@
   }
 
   $: all = related($traits)
-  $: index = new Fuse(all, { keys: ['0.name'] })
+  // all has type [Space, Property, Trait][]
+  // we need to index names in different positions depending on which kind we
+  // are displaying
+  $: index = new Fuse(all, { keys: [`${mode === 'spaces' ? 0 : 1}.name`] })
   $: searched = filter ? index.search(filter).map(r => r.item) : all
   $: filtered = searched.filter(
     ([_space, _property, t]) => showDeduced || t.asserted,
@@ -46,11 +51,11 @@
   </div>
 </div>
 
-<table class="table">
+<table class="table related-traits">
   <thead>
     <tr>
       <th>Id</th>
-      <th><slot name="title" /></th>
+      <th>{capitalize(mode)}</th>
       <th>Value</th>
       <th>Source</th>
     </tr>