Set a unique key on phenogrid cells and use it as key when rendering (#…

…892)

Previously, the key on the element being rendered was the index of the
object in the array of cells. When cells were reordered (or, I imagine,
transposed), they were not being re-rendered because even though the
array was shuffled, the index for each rendered cell stayed constant.

This commit creates a compound identifier for each cell consisting of
the ID of the row and the ID of the column. This uniquely identifies
each cell in the grid.

Fixes #755

Co-authored-by: Patrick Golden <ptgolden@email.unc.com>

frontend/src/components/ThePhenogrid.vue

@@ -155,8 +155,8 @@
         <!-- cells -->
         <g class="cells">
           <tooltip
-            v-for="(cell, index) in cells"
-            :key="index"
+            v-for="cell in cells"
+            :key="cell.id"
             :interactive="true"
             placement="bottom"
             :append-to="appendToBody"
@@ -454,6 +454,7 @@ const cells = computed(() =>
     )
     .flat()
     .map(({ col, row }) => ({
+      id: `${col.id}|${row.id}`,
       col,
       row,
       ...getCell(col, row),