From 539895fff4e35bec9371aec21b8ea89c63d63472 Mon Sep 17 00:00:00 2001
From: Sagar <sriramkanakam87@gmail.com>
Date: Thu, 16 Jan 2025 16:09:11 +0100
Subject: [PATCH 1/2] fix: implemented the tooltip logic with the new drawyer
 table and handled IUPAC name display with italics.

---
 app/Livewire/MoleculeHistoryTimeline.php      |  15 +-
 .../molecule-history-timeline.blade.php       | 231 +++++++++++-------
 2 files changed, 153 insertions(+), 93 deletions(-)

diff --git a/app/Livewire/MoleculeHistoryTimeline.php b/app/Livewire/MoleculeHistoryTimeline.php
index 5d74e7e1..62696bf7 100644
--- a/app/Livewire/MoleculeHistoryTimeline.php
+++ b/app/Livewire/MoleculeHistoryTimeline.php
@@ -32,9 +32,18 @@ public function getHistory()
                 $audit_data[$index]['affected_columns'][$affected_column]['new_value'] = $audit->new_values ? array_values($audit->new_values)[0] : null;
             } else {
                 foreach ($audit->getModified() as $affected_column => $value) {
-
-                    $audit_data[$index]['affected_columns'][$affected_column]['old_value'] = array_key_exists('old', $value) ? $value['old'] : null;
-                    $audit_data[$index]['affected_columns'][$affected_column]['new_value'] = array_key_exists('new', $value) ? $value['new'] : null;
+                    // Pre-process IUPAC names with italic conversion
+                    if ($affected_column === 'iupac_name') {
+                        $audit_data[$index]['affected_columns'][$affected_column]['old_value'] =
+                            array_key_exists('old', $value) ? convert_italics_notation($value['old']) : null;
+                        $audit_data[$index]['affected_columns'][$affected_column]['new_value'] =
+                            array_key_exists('new', $value) ? convert_italics_notation($value['new']) : null;
+                    } else {
+                        $audit_data[$index]['affected_columns'][$affected_column]['old_value'] =
+                            array_key_exists('old', $value) ? $value['old'] : null;
+                        $audit_data[$index]['affected_columns'][$affected_column]['new_value'] =
+                            array_key_exists('new', $value) ? $value['new'] : null;
+                    }
                 }
             }
         }
diff --git a/resources/views/livewire/molecule-history-timeline.blade.php b/resources/views/livewire/molecule-history-timeline.blade.php
index b7c3bc5c..ab5eead2 100644
--- a/resources/views/livewire/molecule-history-timeline.blade.php
+++ b/resources/views/livewire/molecule-history-timeline.blade.php
@@ -1,3 +1,4 @@
+<!-- molecule-history-timeline.blade.php -->
 <div x-data="{ on: false, event: '', column : '', drawerOpen: false, drawerContent: '' }" x-effect="on && $wire.getHistory()" class="mt-5">
     <button type="button" x-on:click="on = !on" class="text-base font-semibold text-text-dark hover:text-slate-600" wire:transition="fade">
         <span x-show="!on">View complete history →</span>
@@ -40,102 +41,152 @@
                                         @switch(explode('.',$column_name)[0])
                                         @case('comment')
                                             {{$column_values['new_value'][0]['comment'] ?? 'N/A'}}
-                                        @break
-                                        @case('active')
-                                            @if ($column_values['new_value'])
-                                            Activated
-                                            @else
-                                            Deactivated
-                                            @endif
-                                        @break
-                                        @case('created')
-                                            Initial creation of the compound on COCONUT
-                                        @break
-                                        @case('organisms')
-                                        @case('sampleLocations')
-                                            @if ($column_values['old_value'])
-                                                <span class="font-bold">Detached from:</span> <br /> {{$column_values['old_value']?:'N/A'}} <br />
-                                            @endif
-                                            @if ($column_values['new_value'])
-                                                <span class="font-bold">Attached to:</span> <br /> {{$column_values['new_value']?:'N/A'}} <br />
-                                            @endif
-                                        @break
-                                        @case('synonyms')
-                                            @if (array_diff($column_values['old_value'], $column_values['new_value']))
-                                                <span class="font-bold">Removed: </span> <br /> {{implode(', ',array_diff($column_values['old_value'], $column_values['new_value']))}} <br />
-                                            @endif
-                                            @if (array_diff($column_values['new_value'], $column_values['old_value']))
-                                                <span class="font-bold">Added: </span> <br /> {{implode(', ',array_diff($column_values['new_value'], $column_values['old_value']))}} <br />
-                                            @endif
-                                        @break
-                                        @case('cas')
-                                            @if (array_diff($column_values['old_value'], $column_values['new_value']))
-                                                <span class="font-bold">Removed: </span> <br /> {{implode(', ',array_diff($column_values['old_value'], $column_values['new_value']))}} <br />
-                                            @endif
-                                            @if (array_diff($column_values['new_value'], $column_values['old_value']))
-                                                <span class="font-bold">Added: </span> <br /> {{implode(', ',array_diff($column_values['new_value'], $column_values['old_value']))}} <br />
-                                            @endif
-                                        @break
-                                        @case('citations')
-                                            @if ($column_values['old_value'])
-                                                <span class="font-bold">Detached from:</span> <br /> {{$column_values['old_value']?:'N/A'}} <br />
-                                            @endif
-                                            @if ($column_values['new_value'])
-                                                <span class="font-bold">Attached to:</span> <br /> {{$column_values['new_value']?:'N/A'}} <br />
-                                            @endif
-                                        @break
-                                        @default
-                                            Old Value: <br /> {{$column_values['old_value']??'N/A'}} <br />
-                                            New Value: <br /> {{$column_values['new_value']??'N/A'}}
-                                        @endswitch
-                                    </span>
-                                </div> --}}
-                            </div>
+                                @break
+                                @case('active')
+                                @if ($column_values['new_value'])
+                                Activated
+                                @else
+                                Deactivated
+                                @endif
+                                @break
+                                @case('created')
+                                Initial creation of the compound on COCONUT
+                                @break
+                                @case('organisms')
+                                @case('sampleLocations')
+                                @if ($column_values['old_value'])
+                                <span class="font-bold">Detached from:</span> <br /> {{$column_values['old_value']?:'N/A'}} <br />
+                                @endif
+                                @if ($column_values['new_value'])
+                                <span class="font-bold">Attached to:</span> <br /> {{$column_values['new_value']?:'N/A'}} <br />
+                                @endif
+                                @break
+                                @case('synonyms')
+                                @if (array_diff($column_values['old_value'], $column_values['new_value']))
+                                <span class="font-bold">Removed: </span> <br /> {{implode(', ',array_diff($column_values['old_value'], $column_values['new_value']))}} <br />
+                                @endif
+                                @if (array_diff($column_values['new_value'], $column_values['old_value']))
+                                <span class="font-bold">Added: </span> <br /> {{implode(', ',array_diff($column_values['new_value'], $column_values['old_value']))}} <br />
+                                @endif
+                                @break
+                                @case('cas')
+                                @if (array_diff($column_values['old_value'], $column_values['new_value']))
+                                <span class="font-bold">Removed: </span> <br /> {{implode(', ',array_diff($column_values['old_value'], $column_values['new_value']))}} <br />
+                                @endif
+                                @if (array_diff($column_values['new_value'], $column_values['old_value']))
+                                <span class="font-bold">Added: </span> <br /> {{implode(', ',array_diff($column_values['new_value'], $column_values['old_value']))}} <br />
+                                @endif
+                                @break
+                                @case('citations')
+                                @if ($column_values['old_value'])
+                                <span class="font-bold">Detached from:</span> <br /> {{$column_values['old_value']?:'N/A'}} <br />
+                                @endif
+                                @if ($column_values['new_value'])
+                                <span class="font-bold">Attached to:</span> <br /> {{$column_values['new_value']?:'N/A'}} <br />
+                                @endif
+                                @break
+                                @default
+                                Old Value: <br /> {{$column_values['old_value']??'N/A'}} <br />
+                                New Value: <br /> {{$column_values['new_value']??'N/A'}}
+                                @endswitch
+                                </span>
+                            </div> --}}
                         </div>
-                        @endforeach
                     </div>
-                </li>
-                @endif
-                @endforeach
-            </ul>
+                    @endforeach
         </div>
+        </li>
+        @endif
+        @endforeach
+        </ul>
     </div>
-    <div x-show="drawerOpen" class="fixed inset-0 z-50 flex">
-        <!-- Overlay -->
-        <div class="fixed inset-0 bg-gray-600 bg-opacity-75" x-on:click="drawerOpen = false"></div>
-        <!-- Drawer panel -->
-        <div class="relative bg-white w-full max-w-md ml-auto shadow-xl transform transition-all">
-            <div class="flex justify-between items-center p-4 border-b">
-                <h2 class="text-lg font-medium text-gray-900 capitalize" x-text='event'></h2>
-                <button x-on:click="drawerOpen = false" class="text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none">
-                    <span class="sr-only">Close panel</span>
-                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
-                    </svg>
-                </button>
-            </div>
-            <div>
-                <template x-if="drawerContent">
-                    <table class="min-w-full divide-y divide-gray-200">
-                        <thead class="bg-gray-50">
+</div>
+<div x-show="drawerOpen" class="fixed inset-0 z-50 flex">
+    <!-- Overlay -->
+    <div class="fixed inset-0 bg-gray-600 bg-opacity-75" x-on:click="drawerOpen = false"></div>
+    <!-- Drawer panel -->
+    <div class="relative bg-white w-full max-w-md ml-auto shadow-xl transform transition-all">
+        <div class="flex justify-between items-center p-4 border-b">
+            <h2 class="text-lg font-medium text-gray-900 capitalize" x-text='event'></h2>
+            <button x-on:click="drawerOpen = false" class="text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none">
+                <span class="sr-only">Close panel</span>
+                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
+                </svg>
+            </button>
+        </div>
+        <div>
+            <template x-if="drawerContent">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Column Name</th>
+                            <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Old Value</th>
+                            <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">New Value</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        <template x-for="(value, key) in [JSON.parse(drawerContent)]">
                             <tr>
-                                <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Column Name</th>
-                                <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Old Value</th>
-                                <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">New Value</th>
+                                <td class="px-4 py-2 text-sm text-gray-900" x-text="column"></td>
+                                <td class="px-4 py-2 text-sm text-gray-500 ">
+                                    <template x-if="column.startsWith('comment')">
+                                        <span x-text="value.old_value?.[0]?.comment || 'N/A'"></span>
+                                    </template>
+                                    <template x-if="column.startsWith('active')">
+                                        <span x-text="value.old_value ? 'Activated' : 'Deactivated'"></span>
+                                    </template>
+                                    <template x-if="column === 'iupac_name'">
+                                        <span x-html="value.old_value || 'N/A'"></span>
+                                    </template>
+                                    <template x-if="column.startsWith('created')">
+                                        <span>N/A</span>
+                                    </template>
+                                    <template x-if="['organisms', 'sampleLocations', 'citations'].includes(column.split('.')[0])">
+                                        <span x-text="value.old_value ? `Detached from: ${value.old_value}` : 'N/A'"></span>
+                                    </template>
+                                    <template x-if="['synonyms', 'cas'].includes(column.split('.')[0])">
+                                        <span x-text="value.old_value && value.new_value ? 
+                                    `Removed: ${Array.from(new Set(value.old_value.filter(x => !value.new_value.includes(x)))).join(', ')}` : 'N/A'">
+                                        </span>
+                                    </template>
+                                    <template x-if="!['comment', 'active', 'created', 'organisms', 'sampleLocations', 'citations', 'synonyms', 'cas']
+                                .includes(column.split('.')[0])">
+                                        <span x-text="value.old_value || 'N/A'"></span>
+                                    </template>
+                                </td>
+                                <td class="px-4 py-2 text-sm text-gray-500">
+                                    <template x-if="column.startsWith('comment')">
+                                        <span x-text="value.new_value?.[0]?.comment || 'N/A'"></span>
+                                    </template>
+                                    <template x-if="column.startsWith('active')">
+                                        <span x-text="value.new_value ? 'Activated' : 'Deactivated'"></span>
+                                    </template>
+                                    <template x-if="column === 'iupac_name'">
+                                        <span x-html="value.new_value || 'N/A'"></span>
+                                    </template>
+                                    <template x-if="column.startsWith('created')">
+                                        <span>Initial creation of the compound on COCONUT</span>
+                                    </template>
+                                    <template x-if="['organisms', 'sampleLocations', 'citations'].includes(column.split('.')[0])">
+                                        <span x-text="value.new_value ? `Attached to: ${value.new_value}` : 'N/A'"></span>
+                                    </template>
+                                    <template x-if="['synonyms', 'cas'].includes(column.split('.')[0])">
+                                        <span x-text="value.old_value && value.new_value ? 
+                                    `Added: ${Array.from(new Set(value.new_value.filter(x => !value.old_value.includes(x)))).join(', ')}` : 'N/A'">
+                                        </span>
+                                    </template>
+                                    <template x-if="!['comment', 'active', 'created', 'organisms', 'sampleLocations', 'citations', 'synonyms', 'cas', 'iupac_name']
+                                .includes(column.split('.')[0])">
+                                        <span x-text="value.new_value || 'N/A'"></span>
+                                    </template>
+                                </td>
                             </tr>
-                        </thead>
-                        <tbody class="bg-white divide-y divide-gray-200">
-                            <template x-for="(value, key) in [JSON.parse(drawerContent)]">
-                                <tr>
-                                    <td class="px-4 py-2 text-sm text-gray-900" x-text="column"></td>
-                                    <td class="px-4 py-2 text-sm text-gray-500" x-text="value.old_value !== null ? value.old_value : 'N/A'"></td>
-                                    <td class="px-4 py-2 text-sm text-gray-500" x-text="value.new_value !== null ? value.new_value : 'N/A'"></td>
-                                </tr>
-                            </template>
-                        </tbody>
-                    </table>
-                </template>
-            </div>
+                        </template>
+                    </tbody>
+                </table>
+            </template>
         </div>
     </div>
 </div>
+</div>
\ No newline at end of file

From 323efd99b452fda0f57a3f2363d04520d30ec9ce Mon Sep 17 00:00:00 2001
From: Sagar <sriramkanakam87@gmail.com>
Date: Sun, 19 Jan 2025 13:54:45 +0100
Subject: [PATCH 2/2] fix: better handling of cas and synonymns

---
 .../molecule-history-timeline.blade.php       | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/resources/views/livewire/molecule-history-timeline.blade.php b/resources/views/livewire/molecule-history-timeline.blade.php
index ab5eead2..9e4efae5 100644
--- a/resources/views/livewire/molecule-history-timeline.blade.php
+++ b/resources/views/livewire/molecule-history-timeline.blade.php
@@ -146,11 +146,9 @@
                                         <span x-text="value.old_value ? `Detached from: ${value.old_value}` : 'N/A'"></span>
                                     </template>
                                     <template x-if="['synonyms', 'cas'].includes(column.split('.')[0])">
-                                        <span x-text="value.old_value && value.new_value ? 
-                                    `Removed: ${Array.from(new Set(value.old_value.filter(x => !value.new_value.includes(x)))).join(', ')}` : 'N/A'">
-                                        </span>
+                                        <span x-text="value.old_value ? value.old_value.join(', ') : 'N/A'"></span>
                                     </template>
-                                    <template x-if="!['comment', 'active', 'created', 'organisms', 'sampleLocations', 'citations', 'synonyms', 'cas']
+                                    <template x-if="!['comment', 'active', 'created', 'organisms', 'sampleLocations', 'citations', 'synonyms', 'cas', 'iupac_name]
                                 .includes(column.split('.')[0])">
                                         <span x-text="value.old_value || 'N/A'"></span>
                                     </template>
@@ -172,9 +170,20 @@
                                         <span x-text="value.new_value ? `Attached to: ${value.new_value}` : 'N/A'"></span>
                                     </template>
                                     <template x-if="['synonyms', 'cas'].includes(column.split('.')[0])">
-                                        <span x-text="value.old_value && value.new_value ? 
-                                    `Added: ${Array.from(new Set(value.new_value.filter(x => !value.old_value.includes(x)))).join(', ')}` : 'N/A'">
-                                        </span>
+                                        <div>
+                                            <template x-if="Array.from(new Set((value.old_value || []).filter(x => !(value.new_value || []).includes(x)))).length > 0">
+                                                <div>
+                                                    <span class="font-bold">Removed: </span><br />
+                                                    <span x-text="Array.from(new Set((value.old_value || []).filter(x => !(value.new_value || []).includes(x)))).join(', ')"></span><br />
+                                                </div>
+                                            </template>
+                                            <template x-if="Array.from(new Set((value.new_value || []).filter(x => !(value.old_value || []).includes(x)))).length > 0">
+                                                <div>
+                                                    <span class="font-bold">Added: </span><br />
+                                                    <span x-text="Array.from(new Set((value.new_value || []).filter(x => !(value.old_value || []).includes(x)))).join(', ')"></span><br />
+                                                </div>
+                                            </template>
+                                        </div>
                                     </template>
                                     <template x-if="!['comment', 'active', 'created', 'organisms', 'sampleLocations', 'citations', 'synonyms', 'cas', 'iupac_name']
                                 .includes(column.split('.')[0])">