Performans Sorunları ve Çözüm Arayışı

Uzun zamandır LIF editor üzerinde refactoring yapmak istiyordum çünkü ilk geliştirmeye başladığımdan beri çok fazla şeyi değiştirdim. Aynı zamanda aslında projenin en önemli komponenti olan graph visualizer belirli bir node sayısından sonra yeterli performansı veremiyordu, bu da normal çünkü vue graph-network adında bir kütüphaneyi kullanıyordum. Küçük mapler için güzel animasyonlu edgeler oluştursa da 1000 node ve üzerinde problemler çok fazlalaşıyordu, örneğin bir telefon ile lif dosyası açmak istediğinizde performans problemi direkt başlıyordu ve sayfa kendini yeniliyordu. Ben de bunun üzerine biraz araştırma yapmaya başladım.

Teknoloji Seçimi: OpenLayers

Daha önce leaflet ile fazlasıyla deneyimim vardı, direkt olarak leaflet kullanabilirdim ancak leaflet uzun süredir çok fazla destek görmüyor (bunun açık bir nedeni Rusya-Ukrayna savaşı, maalesef leaflet Ukraynalı geliştiricilerin çok fazla desteklediği bir projeydi), ve webgl ve webgpu ile leaflet nasıl çalışıyor tam bilmiyorum. Sonrasında 2 seçenek kalıyordu: OpenLayers veya open-libre-gl.

OpenLayers daha eski olduğu için çok daha fazla eklenti ve örnek var, tüketilmesi daha kolay, open-libre-gl ise webgpu destekliyor. Ben de burada biraz daha komünitenin olduğu tarafta yani safe tarafta kalmak istedim ve sorunumun sadece webgl ile çözülebileceğini + webgpu özellikle linux cihazlarda desteklenmemesi de bu kararı vermemde etkili oldu.

OpenLayers Entegrasyonu ve Optimizasyonlar

Sonrasında ise hammalı bir değişim süreci içerisine girdim çünkü OpenLayers’ı direkt kullanmak performans açısından bütün sorunlarımı direkt çözmedi.

WebGL VectorLayer Geçişi

İlk olarak node ve edgeleri göstermek için VectorLayer kullandım ve sonuç hüsrandı. LIF dosyasının loading time azalsa da view içerisinde yer alan edge ve node sayısı arttıkça performansta gözle görülür problemler devam ediyordu. Bunun üzerine WebGLVectorLayer ile tekrar denediğimde performansta gözle görülür bir artış vardı. Maalesef bu yazıyı sonradan ekran kaydı almamıştım ancak 10 fps’e kadar gerileyebiliyordu ancak WebGLVectorLayer ile bu sorun tamamen çözüldü. Sadece WebGL’e geçerken edgeleri direkt olarak webgl layer’a geçiremedim çünkü sadece bir line değil aynı zamanda bir arrow’a ihtiyaç duyuyordum, bunun için de 2 farklı layer oluşturmak zorunda kaldım ancak problem şuan için çözüldü.

Performans Karşılaştırması

Aşağıdaki görseller, eski ve yeni versiyonlar arasındaki performans farkını açıkça göstermektedir:

Zoom ve Drag Optimizasyonları

Bir başka tricky nokta ise zoom ve drag processleri esnasında olan işlemlerdi. Bu esnada node ve edge labelları problem oluşturuyordu çünkü textler hala webgl olmayan layerlardaydı. Bunun üzerine bir clustering yapmak zorunda kaldım ancak zoom işlemi bittikten sonra 100 ms bekleyip bu işlemi başlattım böyle zoom yapılırken clustering her bir saniyede çalışmadı.

Aynı şeyler grid linelar için de geçerli, zoom işlemi bitene kadar debounce time ile işlemin sonlanmasını bekledim.

State Yönetimi: Pinia’ya Geçiş

Bir başka değişiklik ise Pinia’ya geçiş yaptım böylece props drilling’den kurtulmuş oldum. Başlangıçta çok küçük bir proje olduğu için aslında çok da gerekli olacağını düşünmüyordum, ancak günün sonunda bir çok state’e toolbardan hem sidebarlara hem de map view içerisine erişmem gereken bir durum ortaya çıktı. Bence Pinia ile daha rahat debug edilebilecek bir yapı ortaya çıkarttım. Tabi sadece toolbar için değil visualization settings ve diğer gerekli yerler için de store oluşturdum ve Pinia kullanmaya başladım.

Ayrıca refactoring sırasında composables oluşturarak kodun vue tek bir dev vue componenti içinde kalmamasını sağladım.

Mobil Uyumluluk

Bu değişikliklerden sonra büyük dosyaların daha önceden telefon ile çalışmadığını bildiğim için hemen onu denedim ve evet artık büyük boyutlu dosyalarda gayet rahat bir şekilde telefonda da açılıyor :D tabi kim telefonundan bir LIF dosyası hazırlayacak kadar acelecidir bilmiyorum.

Ek İyileştirmeler

Map Element List Optimizasyonu

Sol map element list, çok fazla item olduğunda yeteri kadar performanslı çalışmıyordu bunun yerine pagination kullandım ve sadece 50 tane item göstermeyi sağladım. Initialization time konusunda bana yardımcı oldu.

Map element list’e ayrıca filtreleme özelliği getirdim böylece sadece istasyonları ya da aksiyonları listeyebilir ve sonra arayabilirsiniz.

JSON Visualization İyileştirmesi

Bir başka büyük değişiklik ise json visualization konusunda oldu. Bunu en başta yapmam gerekiyordu aslında ancak unutulmuştu, kullandığım vue-json-pretty zaten virtualization destekliyordu ancak bunu ben ayarlamamıştım. Bu yüzden çok büyük bir json oluşturmaya çalışıyor ve dom çok uzun süre alıyordu. Küçük bir değişiklik ile büyük dosyalar için devasa bir performans kazandım.

Yeni Özellikler

• OpenLayers ile beraber measure seçeneğini bir example olarak gördüm ve bunun da kullanışlı bir özellik olacağını düşündüm.
• Help bölümü için bir dialog oluşturdum ve basit bir tutorial bölümü ekledim.

Sonuç

Bu değişikliklerle beraber bir şeye daha karar verdim, proje eski haliyle open-source kalmaya devam edecek ancak yeni haliyle sadece free-to-use olarak desteklemeye devam edeceğim.