emphasize important properties in theorem list (need to tweak color)

Author: StevenClontz

packages/viewer/src/components/Search/Results/Disprovable.svelte

@@ -2,6 +2,7 @@
   import { Formula } from '@/components/Shared'
   import { Table as Theorems } from '@/components/Theorems'
   import type { Formula as F, Property, Theorem } from '@/models'
+  import { formula as coreFormula } from '@pi-base/core'
 
   export let formula: F<Property>
   export let proof: Theorem[] | 'tautology'
@@ -14,5 +15,8 @@
   <Formula value={formula} />
   is impossible by
 
-  <Theorems theorems={proof} />
+  <Theorems
+    theorems={proof}
+    emphasizedProperties={coreFormula.properties(formula)}
+  />
 {/if}

packages/viewer/src/components/Shared/Formula.svelte

@@ -7,10 +7,16 @@
   export let value: Formula<Property>
   export let link = true
   export let subformula = false
+  export let emphasizedProperties: Set<Property> = new Set()
 </script>
 
-{#if value.kind === 'atom'}<Atom {value} {link} />{:else}<Compound
+{#if value.kind === 'atom'}<Atom
+    {value}
+    {link}
+    {emphasizedProperties}
+  />{:else}<Compound
     {value}
     {link}
     grouped={subformula}
+    {emphasizedProperties}
   />{/if}

packages/viewer/src/components/Shared/Formula/Atom.svelte

@@ -6,8 +6,11 @@
 
   export let value: Atom<Property>
   export let link: boolean = true
+  export let emphasizedProperties: Set<Property> = new Set()
+  let emphasized = emphasizedProperties.has(value.property)
 </script>
 
 {value.value === null ? '?' : value.value ? '' : '¬'}{#if link}<Link.Property
     property={value.property}
+    {emphasized}
   />{:else}<Typeset body={value.property.name} />{/if}

packages/viewer/src/components/Shared/Formula/Compound.svelte

@@ -8,6 +8,7 @@
   export let value: And<Property> | Or<Property>
   export let link = true
   export let grouped = true
+  export let emphasizedProperties: Set<Property> = new Set()
 
   $: connector = value.kind === 'and' ? '∧' : '∨'
 </script>
@@ -16,6 +17,7 @@
     value={f}
     {link}
     subformula
+    {emphasizedProperties}
   />{i === value.subs.length - 1
     ? ''
     : ` ${connector} `}{/each}{#if grouped}){/if}

packages/viewer/src/components/Shared/Link/Property.svelte

@@ -4,9 +4,10 @@
 
   export let property: { id: number; name: string }
   export let content: 'id' | 'idLong' | 'name' = 'name'
+  export let emphasized: boolean = false
 </script>
 
-<a href="/properties/{Id.format('P', property.id)}">
+<a href="/properties/{Id.format('P', property.id)}" class:emphasized>
   <slot>
     {#if content === 'name'}
       <Typeset body={property.name} />
@@ -17,3 +18,10 @@
     {/if}
   </slot>
 </a>
+
+<style>
+  .emphasized {
+    font-weight: bold;
+    color: #b032ff;
+  }
+</style>

packages/viewer/src/components/Theorems/Table.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import type { Theorem } from '@/models'
+  import type { Theorem, Property } from '@/models'
   import { Formula, Link } from '../Shared'
 
   export let theorems: Theorem[] = []
+  export let emphasizedProperties: Set<Property> = new Set()
 </script>
 
 <table class="table">
@@ -20,10 +21,10 @@
           <Link.Theorem {theorem} />
         </td>
         <td>
-          <Formula value={theorem.when} />
+          <Formula value={theorem.when} {emphasizedProperties} />
         </td>
         <td>
-          <Formula value={theorem.then} />
+          <Formula value={theorem.then} {emphasizedProperties} />
         </td>
       </tr>
     {/each}