Apache ZeppelinとAngularJS(Selectタグ,tags-input)の試行錯誤

全然、理解できていないけど、たまたま動いたので試行錯誤した内容を記載。
この記事は読んでも何も解決しないし余計混乱するだけの可能性が高いので要注意。

やりたかったことは、Apache Zeppelin上で条件を変更しながらデータを参照したかった。
なので、AngularJSを使ってHTMLを生成し、検索条件を選べるようにしたかった。
理想はこんなの

参考
AngularJS で select タグを思い通りに作る
spark2.0.0 API(Dataset)
Back-end Angular API in Apache Zeppelin

前提知識
AngularJSはFramework。Client側で動くものではなくて、Server側でも動きます。

とりあえず、お試しでいろんなサイトのごちゃまぜ版

import org.apache.zeppelin.display.angular.paragraphscope._
import AngularElem._

val pj_list = Map[Int,String](
    (1, "プロジェクトA")
    ,(2, "プロジェクトB")
    ,(3, "プロジェクトC")
)

val pj_list2 = List("プロジェクトA", "プロジェクトB", "プロジェクトC")

z.angularBind("pj_list", pj_list)
z.angularBind("pj_list2", pj_list2)

println("""%angular {{pj_list}}""")
// {"key1":1,"value1":"プロジェクトA","key2":2,"value2":"プロジェクトB","key3":3,"value3":"プロジェクトC"}
// mapではない。。。オブジェクトのままで良いのに、なぜか変なListに置換される。これはバグじゃないかと思ってる。

println("""%angular 
<select ng-model="select" ng-options="data for (num, data)  in {{pj_list}}" multiple="multiple">

""")

println(“””%angular {{pj_list}}”””)の結果を見てもらえばわかるが、
key1というkeyに1、value1というkeyにプロジェクトAが割り当てられている。
なので、表示は「プロジェクトA」「プロジェクトB」「プロジェクトC」にはならず、「1」「プロジェクトA」「2」「プロジェクトB」「3」「プロジェクトC」となる。

ここまでも結構時間がかかったので、これがバグだったらちょっと殺意が湧くレベル。

でも、思ったよりもやりたいことはできそうだったので、思い切ってこの状態からBindするデータをDBから取得するように変更。
なんとなくダメだろうと思いつつ、上記のソースを書き換えてみた。

// scala
import org.apache.zeppelin.display.angular.paragraphscope._
import AngularElem._

// user Tableについては、別でDBから抽出済み。
val location = sqlContext.sql("SELECT location from user GROUP BY location")
val a = location.collectAsList()

z.angularBind("a", a)

println("""%angular 
<select ng-model="select" ng-options="b.values for b  in {{a}}" multiple="multiple">

""")

あれ?なぜかObjectでBindできてるし。。
Map[Int,String]がわるいのかと思いつつも、StringはObject型じゃないん?とか考えつつも、key,valueにこだわりは今のところ無いので深追いせずに終了。
ちなみに、aの型はjava.util.List[org.apache.spark.sql.Row]。
もしかして、Mapを直接Bindするんじゃなくて、ListのMapをBindすればよかったのか。

<select ng-model=”select” ng-options=”data for (num, data) in {{pj_list}}” multiple=”multiple”>
ここも後で見直すと分からなくなりそうなので補足。
ng-modelにある値が同じ場合、そのタグは別のタグの操作を反映して連動する。
ng-optionはSelectタグのoption。最初のdataが最終的にvalueに入る変数。(num, data)は{{pj_list}}配列の1データ。key,value形式なので(key, value)のように書いている。
どこかのサイトを見る限り、keyの値は勝手に振られるらしい。

zeppelin7.0から手順からなくなっているけど、npmインストールしたらtags-inputも使えるようになるのかな。

Leave a Reply

Your email address will not be published. Required fields are marked *