Worked out a better way to handle the phrases in the words table

app/components/words/phrase-row.hbs

@@ -1,14 +1,7 @@
 {{#each this.phraseWords as |pw|}}
   {{#if pw.rootRow}}
-    <tr class="{{this.selected}}" ...attributes>
+    <Words::WordRow @model={{pw}} @rowspan={{this.rowCount}} />
-      <td rowspan="{{this.rowCount}}">{{pw.ulb}}</td>
-      <td>{{pw.greek}}</td>
-      <td>{{pw.morph}}</td>
-    </tr>
   {{else}}
-    <tr {{on "click" (fn this.select pw)}} class="{{this.selected}}" ...attributes>
+    <Words::WordRow @model={{pw}} @isPartial={{true}} />
-      <td>{{pw.greek}}</td>
-      <td>{{pw.morph}}</td>
-    </tr>
   {{/if}}
 {{/each}}

app/components/words/phrase-row.js

@@ -1,7 +1,8 @@
-import WordsWordRowComponent from "./word-row";
+import Component from '@glimmer/component';
 import { tracked } from "@glimmer/tracking";
 
-export default class WordsPhraseRowComponent extends WordsWordRowComponent {
+
+export default class WordsPhraseRowComponent extends Component {
   @tracked phraseWords = [];
 
   constructor(...args) {

app/components/words/word-row.hbs

@@ -1,5 +1,15 @@
-<tr {{on "click" (fn this.select @model)}} class="{{this.selected}}" ...attributes>
+{{#if @model.rootRow}}
-  <td>{{@model.ulb}}</td>
+  <tr {{on "click" (fn this.select @model)}} ...attributes>
-  <td>{{@model.greek}}</td>
+    <td rowspan="{{@rowspan}}">{{@model.ulb}}</td>
-  <td>{{@model.morph}}</td>
+    <td class="{{this.selected}}">{{@model.greek}}</td>
-</tr>
+    <td class="{{this.selected}}">{{@model.morph}}</td>
+  </tr>
+{{else}}
+  <tr {{on "click" (fn this.select @model)}} class="{{this.selected}}" ...attributes>
+    {{#if this.isNotPhrasePartial}}
+      <td>{{@model.ulb}}</td>
+    {{/if}}
+    <td>{{@model.greek}}</td>
+    <td>{{@model.morph}}</td>
+  </tr>
+{{/if}}

app/components/words/word-row.js

@@ -21,4 +21,13 @@ export default class WordsWordRowComponent extends Component {
       return "";
     }
   }
+
+  get
+  isNotPhrasePartial() {
+    if (this.args.isPartial == true) {
+      return false;
+    } else {
+      return true;
+    }
+  }
 }

app/styles/components/words.scss

@@ -9,7 +9,8 @@ table.word-details td {
   cursor: pointer;
 }
 
-table.word-details tr.selected {
+table.word-details tr.selected,
+table.word-details td.selected {
   background-color: lightblue;
 }