Merge pull request #1428 from liberu-genealogy/copilot/improve-tree-rendering-features

Fix chart rendering: Livewire v3 compatibility and FanChart component inheritance

Author: delicatacurtis

app/Filament/App/Widgets/PedigreeChartWidget.php

@@ -26,22 +26,22 @@ public function render(): View
 
     public function initializeChart(): void
     {
-        $this->dispatchBrowserEvent('initializeChart', ['people' => $this->getData()['people']->toJson()]);
+        $this->dispatch('initializeChart', people: $this->getData()['people']->toJson());
     }
 
     public function zoomIn(): void
     {
-        $this->dispatchBrowserEvent('zoomIn');
+        $this->dispatch('zoomIn');
     }
 
     public function zoomOut(): void
     {
-        $this->dispatchBrowserEvent('zoomOut');
+        $this->dispatch('zoomOut');
     }
 
     public function pan($direction): void
     {
-        $this->dispatchBrowserEvent('pan', ['direction' => $direction]);
+        $this->dispatch('pan', direction: $direction);
     }
 
     protected function getListeners()

app/Livewire/DescendantChartComponent.php

@@ -88,7 +88,7 @@ public function setRootPerson(int $personId): void
             $rootPerson = Person::find($this->rootPersonId);
             $this->descendantsData = $this->buildDescendantTree($rootPerson, $this->generations);
         }
-        $this->emit('descendant-chart-updated');
+        $this->dispatch('refreshDescendantChart');
     }
 
     public function setGenerations(int $generations): void
@@ -100,11 +100,16 @@ public function setGenerations(int $generations): void
             $rootPerson = Person::find($this->rootPersonId);
             $this->descendantsData = $this->buildDescendantTree($rootPerson, $this->generations);
         }
-        $this->emit('descendant-chart-updated');
+        $this->dispatch('refreshDescendantChart');
     }
 
     public function render()
     {
         return view('livewire.descendant-chart-component');
     }
+
+    public function getPeopleListProperty(): array
+    {
+        return Person::getListOptimized();
+    }
 }

app/Livewire/FanChart.php

@@ -4,11 +4,11 @@
 
 use Illuminate\Contracts\View\View;
 use App\Models\Person;
-use Filament\Widgets\Widget;
+use Livewire\Component;
 
-class FanChart extends Widget
+class FanChart extends Component
 {
-    protected string $view = 'filament.widgets.fan-chart-widget';
+    protected string $view = 'livewire.fan-chart';
 
     public ?int $rootPersonId = null;
     public int $generations = 5;
@@ -82,35 +82,40 @@ private function buildFanData($person, $maxGenerations, $generation = 0): array
     public function setRootPerson($personId): void
     {
         $this->rootPersonId = $personId;
-        $this->emit('refreshFanChart');
+        $this->dispatch('refreshFanChart');
     }
 
     public function setGenerations($generations): void
     {
         $this->generations = max(2, min(8, $generations));
-        $this->emit('refreshFanChart');
+        $this->dispatch('refreshFanChart');
     }
 
     public function toggleNames(): void
     {
         $this->showNames = !$this->showNames;
-        $this->emit('refreshFanChart');
+        $this->dispatch('refreshFanChart');
     }
 
     public function toggleDates(): void
     {
         $this->showDates = !$this->showDates;
-        $this->emit('refreshFanChart');
+        $this->dispatch('refreshFanChart');
     }
 
     public function setColorScheme($scheme): void
     {
         $this->colorScheme = $scheme;
-        $this->emit('refreshFanChart');
+        $this->dispatch('refreshFanChart');
     }
 
     public function render(): View
     {
         return view($this->view, $this->getData());
     }
+
+    public function getPeopleListProperty(): array
+    {
+        return Person::getListOptimized();
+    }
 }

app/Livewire/PedigreeChart.php

@@ -39,20 +39,20 @@ public function setRootPerson(int $personId): void
     {
         $this->rootPersonId = $personId;
         $this->hydrateTree();
-        $this->emit('refreshChart');
+        $this->dispatch('refreshChart');
     }
 
     public function setGenerations(int $generations): void
     {
         $this->generations = max(3, min(8, $generations));
         $this->hydrateTree();
-        $this->emit('refreshChart');
+        $this->dispatch('refreshChart');
     }
 
     public function toggleDates(): void
     {
         $this->showDates = ! $this->showDates;
-        $this->emit('refreshChart');
+        $this->dispatch('refreshChart');
     }
 
     public function expandPerson(int $personId): void

resources/views/livewire/descendant-chart-component.blade.php

@@ -1,4 +1,13 @@
 <div class="descendant-chart-container">
+    <div class="flex items-center gap-3 mb-4">
+        <label class="text-sm text-gray-700">Root person:</label>
+        <select class="fi-input block rounded-md border-gray-300 text-sm"
+                wire:change="setRootPerson($event.target.value)">
+            @foreach($this->peopleList as $id => $label)
+                <option value="{{ $id }}" @selected($rootPersonId === (int) $id)>{{ $label }}</option>
+            @endforeach
+        </select>
+    </div>
     <div class="chart-header mb-4">
         <h3 class="text-xl font-semibold text-gray-800">Descendant Chart</h3>
         <div class="chart-controls flex gap-2 mt-2">

resources/views/livewire/fan-chart.blade.php

@@ -1,4 +1,13 @@
 <div class="fan-chart-container">
+    <div class="flex items-center gap-3 mb-4">
+        <label class="text-sm text-gray-700">Root person:</label>
+        <select class="fi-input block rounded-md border-gray-300 text-sm"
+                wire:change="setRootPerson($event.target.value)">
+            @foreach($this->peopleList as $id => $label)
+                <option value="{{ $id }}" @selected($rootPersonId === (int) $id)>{{ $label }}</option>
+            @endforeach
+        </select>
+    </div>
     <div class="chart-header mb-4">
         <h3 class="text-xl font-semibold text-gray-800">Fan Chart</h3>
         <div class="chart-controls flex gap-2 mt-2">