# Modul 8: Interactive Article Experience

## 1. User Flow Reader
1. User mengunjungi halaman detail artikel (dari Modul 7).
2. Terdapat tombol "View Interactive Reader" atau "Read HTML".
3. Di dalam Interactive Reader:
   - User membaca teks artikel dalam format HTML.
   - Saat melihat sitasi (contoh: "[1]" atau "(Smith, 2020)"), user bisa melakukan *hover* atau *click*. Sebuah popup (tooltip/modal) akan muncul menampilkan detail referensi tanpa harus scroll ke bawah.
   - Di sidebar atau tab terpisah, terdapat Visual Research Map yang menggambarkan hubungan antar variabel/teori dalam artikel tersebut menggunakan D3.js atau Chart.js.
   - Di panel bawah atau samping, terdapat Discussion Layer (Q&A) di mana user bisa memberikan komentar pada paragraf tertentu atau bertanya langsung yang bisa dijawab oleh author.
   - Di bagian atas, user bisa melihat "AI Summary" yang merupakan ringkasan eksekutif poin per poin hasil generate Gemini AI (cron job).

## 3. Cara Mengubah Artikel Menjadi HTML
Dalam skenario PHP Native tanpa build tools Node.js, mengubah PDF menjadi HTML secara on-the-fly tidaklah reliabel. Oleh karena itu pendekatannya adalah:
1. Saat author/editor melakukan submit atau mem-publish *article galley*, sistem meminta file berupa **XML (JATS) atau HTML**. 
2. Jika yang disubmit berupa Word (DOCX), bisa menggunakan layanan third-party conversion API atau secara editorial tim menyediakannya dalam HTML/XML.
3. Untuk modul ini, kita akan menyimpan raw HTML di database (`article_html_content`) atau mem-parsing dari file HTML yang diunggah ke tabel tertentu.

## 4. Cara Menyimpan References
Referensi diekstrak dan disimpan dalam tabel terpisah (`article_references`). Setiap baris referensi memiliki `citation_key` yang akan di-mapping dengan tag HTML sitasinya (contoh: `<a href="#ref-smith2020" class="citation" data-key="smith2020">Smith, 2020</a>`).

## 5. Cara Membuat Citation Preview
1. Di sisi Client (JavaScript/Alpine.js), kita akan menambahkan event listener `mouseenter` dan `mouseleave` pada elemen dengan class `citation`.
2. Saat di-hover, JS akan mengambil isi referensi dari atribut `data-preview` (jika di-load semuanya di awal) atau melakukan fetching AJAX (Fetch API) ke `InteractiveArticleController::get_reference`.
3. Menampilkan tooltip container absolut di dekat kursor.

## 10. Testing Scenario
- **Test 1:** Baca artikel web, pastikan teks HTML terender.
- **Test 2:** Hover sitasi, pastikan modal preview referensi muncul.
- **Test 3:** Kirim diskusi baru, pastikan muncul secara asinkron (AJAX reload atau alpine state update).
- **Test 4:** Buka sidebar "Research Map", pastikan chart muncul.
- **Test 5:** Jalankan cron job AI summary, periksa database apakah summary sudah terisi pada artikel tersebut.