From 37261625839f71babe6a22340dba96ed2763c95a Mon Sep 17 00:00:00 2001
From: JamieScottC <scott.jams@gmail.com>
Date: Wed, 13 Sep 2023 12:17:08 -0400
Subject: [PATCH 1/2] fix: add unique key values to for loop

---
 templates/sources.html | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/templates/sources.html b/templates/sources.html
index 21532c5f8..716ca661d 100644
--- a/templates/sources.html
+++ b/templates/sources.html
@@ -159,11 +159,11 @@ <h2>Fact Sources</h2>
                             </div>
                         </template>
                         <template x-for="(fact, index) in filteredFacts" :key="fact.trait">
-                            <div class="box sources mb-2 mr-2 p-3 is-flex is-justify-content-center is-align-items-center is-flex-direction-column"
-                                 @click="($event) => editCard = ($event.target.id !== 'cancel-edit-fact') ? fact.trait : null"
+                          <div class="box sources mb-2 mr-2 p-3 is-flex is-justify-content-center is-align-items-center is-flex-direction-column">
+                            <div @click="($event) => editCard = ($event.target.id !== 'cancel-edit-fact') ? fact.trait : null"
                                  x-data="{editedValues: {}, editedScores: {}, newTags: [], editedNames: {}}">
                                 <div>
-                                    <p x-show="editCard !== fact.trait" x-bind:class="{'has-background-warning has-text-black': editCard === fact.trait}" class="p-1" x-text="fact.trait"></p>
+                                    <p x-show="editCard !== fact.trait" x-bind:class="{'has-background-warning has-text-black': editCard === fact.trait}" class="p-1 has-text-centered" x-text="fact.trait"></p>
                                     <input class="input is-small" x-show="editCard === fact.trait" x-model="editedNames[fact.trait]" x-init="editedNames[fact.trait] = fact.trait">
                                     <template x-if="editCard === fact.trait">
                                         <button class="button is-danger is-outlined is-small delete-card-button" @click="deleteFact(fact.trait)"><span class="icon"><em class="fas fa-trash"></em></span></button>
@@ -179,22 +179,22 @@ <h2>Fact Sources</h2>
                                                       x-init="$watch('filteredFacts', updated => {if (updated && updated[index]) fact.scores = updated[index].scores;})">
                                                 <div>
                                                     <div class="is-flex is-justify-content-center is-align-items-center is-flex-direction-row is-flex-wrap-wrap">
-                                                        <span x-show-="editCard !== fact.trait"
+                                                        <span x-show="editCard !== fact.trait"
                                                               class="tag break-spaces is-info"
                                                               x-text="score.score + (score.score > 1 ? ' pts:' :' pt:')"></span>
-                                                        <template x-for="(val, index) in score.values" :key="val+index">
+                                                        <template x-for="(val, index) in score.values" :key="val.id">
                                                             <div>
                                                                 <template x-if="editCard !== fact.trait">
                                                                     <span class="tag is-light break-spaces editable-tag"
-                                                                          x-text="(val ? val : '--')"></span>
+                                                                          x-text="(val.value ? val.value : '--')"></span>
                                                                 </template>
                                                                 <template x-if="editCard === fact.trait">
                                                                     <div>
                                                                         <div class="tags has-addons mb-0">
                                                                             <span class="is-italic tag is-light break-spaces">
                                                                               <input type="text" class="tag-input"
-                                                                                     x-bind:value="val"
-                                                                                     x-on:change="val = editedValues[score.unique] = $event.target.value;">
+                                                                                     x-bind:value="val.value"
+                                                                                     x-on:change="val.value = editedValues[score.unique] = $event.target.value;">
                                                                             </span>
                                                                             <span class="tag is-white break-spaces">
                                                                                 <input class="tag-number-input"
@@ -203,7 +203,7 @@ <h2>Fact Sources</h2>
                                                                                        pattern="[0-9]*"
                                                                                        placeholder="1"
                                                                                        x-bind:value="score.score">
-                                                                                <button @click="score.values.splice(index, 1) && deleteFactValue(fact.trait, score.unique, val)"
+                                                                                <button @click="score.values.splice(index, 1) && deleteFactValue(fact.trait, score.unique, val.value)"
                                                                                     class="delete is-small"></button>
                                                                             </span>
                                                                         </div>
@@ -259,6 +259,7 @@ <h2>Fact Sources</h2>
                                     </div>
                                 </div>
                             </div>
+                          </div>
                         </template>
                     </div>
                 </template>
@@ -959,6 +960,15 @@ <h2>Fact Sources</h2>
                 this.filteredFacts = Object.keys(facts).map(key => {
                     const fact = facts[key];
                     fact.scores = Object.keys(fact.scores).map(s => facts[key].scores[s]);
+                    // Give each fact score value a unique id for easy deletion
+                    fact.scores.forEach((score) => {
+                        score.values.forEach((value, index) => {
+                            score.values[index] = {
+                                id: `${fact.trait}-${score.score}-${index}`,
+                                value: value
+                            };
+                        });
+                    });
                     return fact;
                 });
                 this.filteredRules = Object.keys(rules).map(key => rules[key]);

From ced0ca6d52583700ba9680b84516d88201f6fb98 Mon Sep 17 00:00:00 2001
From: JamieScottC <scott.jams@gmail.com>
Date: Wed, 13 Sep 2023 12:35:33 -0400
Subject: [PATCH 2/2] fix width

---
 templates/sources.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/sources.html b/templates/sources.html
index 716ca661d..c2436556f 100644
--- a/templates/sources.html
+++ b/templates/sources.html
@@ -160,7 +160,7 @@ <h2>Fact Sources</h2>
                         </template>
                         <template x-for="(fact, index) in filteredFacts" :key="fact.trait">
                           <div class="box sources mb-2 mr-2 p-3 is-flex is-justify-content-center is-align-items-center is-flex-direction-column">
-                            <div @click="($event) => editCard = ($event.target.id !== 'cancel-edit-fact') ? fact.trait : null"
+                            <div class="w-100" @click="($event) => editCard = ($event.target.id !== 'cancel-edit-fact') ? fact.trait : null"
                                  x-data="{editedValues: {}, editedScores: {}, newTags: [], editedNames: {}}">
                                 <div>
                                     <p x-show="editCard !== fact.trait" x-bind:class="{'has-background-warning has-text-black': editCard === fact.trait}" class="p-1 has-text-centered" x-text="fact.trait"></p>