Fix noor bayan rendering (#733)

* Fix treebank rendering issue

* fix phrase arc line

* Support multiple locales for Irab and treebank

* refactor ayah navigation

Author: naveed-ahmad

app/admin/morphology/derived_word.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+ActiveAdmin.register Morphology::DerivedWord do
+  menu parent: 'Morphology'
+  actions :index, :show
+  includes :verse
+
+  filter :verse_id, as: :numeric
+  filter :word_id, as: :numeric
+  filter :derived_word_id, as: :numeric
+  filter :form_name
+  filter :en_translation
+  filter :en_transliteration
+
+  index do
+    id_column
+    column :verse do |resource|
+      resource.verse && link_to(resource.verse.verse_key, [:cms, resource.verse])
+    end
+    column :word_id
+    column :derived_word_id
+    column :form_name
+    column :en_transliteration
+    column :en_translation
+    actions
+  end
+
+  show do
+    attributes_table do
+      row :id
+      row :verse do |resource|
+        resource.verse && link_to(resource.verse.verse_key, [:cms, resource.verse])
+      end
+      row :word_id
+      row :derived_word do |resource|
+        resource.derived_word && link_to(resource.derived_word.location, [:cms, resource.derived_word])
+      end
+      row :word_verb_from
+      row :form_name
+      row :en_transliteration
+      row :en_translation
+      row :created_at
+      row :updated_at
+    end
+  end
+end

app/admin/morphology/grammar_concept.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+ActiveAdmin.register Morphology::GrammarConcept do
+  menu parent: 'Morphology'
+  actions :index, :show
+
+  filter :arabic
+  filter :english
+
+  index do
+    id_column
+    column :arabic
+    column :english
+    column('Words') { |c| c.word_segments.size }
+    actions
+  end
+
+  show do
+    attributes_table do
+      row :id
+      row :arabic
+      row :english
+      row :created_at
+      row :updated_at
+    end
+  end
+end

app/admin/morphology/grammar_pattern.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+ActiveAdmin.register Morphology::GrammarPattern do
+  menu parent: 'Morphology'
+  actions :index, :show
+
+  filter :arabic
+  filter :english
+
+  index do
+    id_column
+    column :arabic
+    column :english
+    actions
+  end
+
+  show do
+    attributes_table do
+      row :id
+      row :arabic
+      row :english
+      row :created_at
+      row :updated_at
+    end
+  end
+end

app/admin/morphology/word_grammar_concept.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+ActiveAdmin.register Morphology::WordGrammarConcept do
+  menu parent: 'Morphology'
+  actions :index, :show
+  includes :word, :grammar_concept
+
+  filter :word_id, as: :numeric
+  filter :grammar_concept_id, as: :numeric
+
+  index do
+    id_column
+    column :word do |resource|
+      resource.word && link_to(resource.word.location, [:cms, resource.word])
+    end
+    column :grammar_concept do |resource|
+      resource.grammar_concept && link_to(resource.grammar_concept.english.presence || resource.grammar_concept.arabic, [:cms, resource.grammar_concept])
+    end
+    actions
+  end
+
+  show do
+    attributes_table do
+      row :id
+      row :word do |resource|
+        resource.word && link_to(resource.word.location, [:cms, resource.word])
+      end
+      row :grammar_concept
+      row :created_at
+      row :updated_at
+    end
+  end
+end

app/admin/morphology/word_verb_form.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+ActiveAdmin.register Morphology::WordVerbForm do
+  menu parent: 'Morphology'
+  actions :index, :show
+  includes :word
+
+  filter :word_id, as: :numeric
+  filter :name
+  filter :value
+
+  index do
+    id_column
+    column :word do |resource|
+      resource.word && link_to(resource.word.location, [:cms, resource.word])
+    end
+    column :name
+    column :value
+    actions
+  end
+
+  show do
+    attributes_table do
+      row :id
+      row :word do |resource|
+        resource.word && link_to(resource.word.location, [:cms, resource.word])
+      end
+      row :name
+      row :value
+      row :created_at
+      row :updated_at
+    end
+  end
+end

app/assets/stylesheets/components/_treebank.scss

@@ -32,14 +32,15 @@
 
   svg {
     display: inline-block;
-    max-width: 100%;
     background: #fff;
   }
 }
 
 .treebank-banner-text {
   fill: #1a5c38;
   font-weight: bold;
+  direction: rtl;
+  unicode-bidi: bidi-override;
 }
 
 .treebank-banner-ref {
@@ -298,7 +299,6 @@
 
   svg {
     display: inline-block;
-    max-width: 100%;
     background: #fff;
   }
 
@@ -398,6 +398,10 @@
     &:last-child {
       margin-bottom: 0;
     }
+
+    .qpc-hafs {
+      direction: inherit;
+    }
   }
 
   span {

app/controllers/community_controller.rb

@@ -1,7 +1,7 @@
 class CommunityController < ApplicationController
   before_action :init_presenter
 
-  DEFAULT_LANGUAGE = 174 # We're focusing on Urdu atm
+  DEFAULT_LANGUAGE = 174
   helper_method :current_language
   before_action :load_resource_access
 

app/controllers/morphology/treebank_controller.rb

@@ -133,7 +133,7 @@ def index
     def show
       @chapter_number = params[:chapter].to_i
       @verse_number   = params[:verse].to_i
-      @locale = %w[en ar].include?(params[:locale].to_s) ? params[:locale].to_s : 'ar'
+      @locale = %w[en ar ur].include?(params[:locale].to_s) ? params[:locale].to_s : 'en'
 
       @verse = Verse.find_by(chapter_id: @chapter_number, verse_number: @verse_number)
       return head :not_found unless @verse
@@ -142,7 +142,7 @@ def show
         .where(chapter_id: @chapter_number)
         .where('first_verse_id <= ? AND last_verse_id >= ?', @verse.id, @verse.id)
         .order(:sentence_number)
-        .includes(:word_tokens)
+        .includes(word_tokens: %i[root lemma])
 
       @irab_tokens = @sentences.flat_map(&:word_tokens)
 
@@ -158,7 +158,7 @@ def show
     def data
       chapter_number = params[:chapter].to_i
       verse_number   = params[:verse].to_i
-      locale = %w[en ar].include?(params[:locale].to_s) ? params[:locale].to_s : 'ar'
+      locale = %w[en ar ur].include?(params[:locale].to_s) ? params[:locale].to_s : 'en'
 
       verse = Verse.find_by(chapter_id: chapter_number, verse_number: verse_number)
       return head :not_found unless verse

app/javascript/controllers/treebank_controller.js

@@ -299,6 +299,17 @@ export default class extends Controller {
     }
 
     this.applyZoom();
+    if (this.hasCanvasTarget) this.centerScroll(this.canvasTarget);
+  }
+
+  // Center the horizontal scroll so a wide treebank opens on its middle rather
+  // than one edge. rAF lets layout settle after the SVG width is applied.
+  centerScroll(scroller) {
+    if (!scroller) return;
+    requestAnimationFrame(() => {
+      const overflow = scroller.scrollWidth - scroller.clientWidth;
+      if (overflow > 0) scroller.scrollLeft = overflow / 2;
+    });
   }
 
   sentenceMaxLevel(sentence) {
@@ -435,6 +446,7 @@ export default class extends Controller {
     svgContainer.innerHTML = "";
     svgContainer.appendChild(svg);
     this.applyZoom();
+    this.centerScroll(svgContainer);
   }
 
   async toggleCard(event) {
@@ -551,6 +563,7 @@ class TreebankRenderer {
     this.phraseLevelHeight = 0;     // total height of the phrase-level rows (set in render)
     this.PHRASE_LEVEL_STEP = 70;    // vertical distance between consecutive phrase levels
     this.PHRASE_EDGE_ARC_HEIGHT = 50; // how high a phrase (constituency) edge arcs above its band
+    this.PHRASE_EDGE_FOOT_LIFT = 28;  // float phrase-edge arcs above the phrase nodes so they clear the phrase surface text drawn above each dot
     this.phraseTopGap = 0;          // extra headroom so phrase-edge arcs clear the banner (set in render)
     this.tokenRowHeight = 90;       // bottom row: location + arabic + POS label
     this.arcBandHeight = 0;
@@ -576,7 +589,7 @@ class TreebankRenderer {
     // Only reserve top headroom when phrase edges exist — otherwise their arcs
     // (which rise PHRASE_EDGE_ARC_HEIGHT above the top phrase row) collide with
     // the banner and overlap the text.
-    this.phraseTopGap = phraseEdges.length > 0 ? (this.PHRASE_EDGE_ARC_HEIGHT + 24) : 0;
+    this.phraseTopGap = phraseEdges.length > 0 ? (this.PHRASE_EDGE_ARC_HEIGHT + this.PHRASE_EDGE_FOOT_LIFT + 24) : 0;
 
     const tempSvg = document.createElementNS(this.SVG_NS, "svg");
     tempSvg.style.position = "absolute";
@@ -616,7 +629,6 @@ class TreebankRenderer {
     svg.setAttribute("xmlns", this.SVG_NS);
     svg.setAttribute("data-base-width", svgW);
     svg.setAttribute("data-base-height", svgH);
-    svg.style.maxWidth = "100%";
     svg.style.display = "block";
 
     this.drawBanner(svg, svgW, bannerTextW);
@@ -1081,11 +1093,16 @@ class TreebankRenderer {
 
       if (fromX === null || toX === null || fromY === null || toY === null) continue;
 
-      const bandY = Math.min(fromY, toY);
+      // Float the drawn arc a fixed amount above the two node feet so it clears
+      // the phrase surface text. The nodes/blocks themselves stay on their band
+      // (kept inline) — only the arc path lifts.
+      const fromFootY = fromY - this.PHRASE_EDGE_FOOT_LIFT;
+      const toFootY = toY - this.PHRASE_EDGE_FOOT_LIFT;
+      const bandY = Math.min(fromFootY, toFootY);
       const apexAbsY = bandY - ARC_HEIGHT;
 
       const path = document.createElementNS(this.SVG_NS, "path");
-      const d = `M ${fromX},${fromY} C ${fromX},${apexAbsY} ${toX},${apexAbsY} ${toX},${toY}`;
+      const d = `M ${fromX},${fromFootY} C ${fromX},${apexAbsY} ${toX},${apexAbsY} ${toX},${toFootY}`;
       path.setAttribute("d", d);
       path.setAttribute("fill", "none");
       path.setAttribute("stroke-width", "1.5");