Dataikuのサンプルヒストグラムwebapp(bokeh)をさくっとプラグイン化する

Dataikuでweb plugin作成してみます。とても簡単。
以下のサイトを参考にしましたが、散布図作るところが無いので、そこはDataikuにデフォルトで内蔵されているbokehのヒストグラムを使います。
参考URL：https://academy.dataiku.com/plugin-development/513345

## 前準備
まず、前準備として以下が必要です。

 - Develop pluginsの権限があること。これないとできないのでとても注意です。無料版の場合は、全員Admin状態なので問題ないです。
  - DSS settingsのAuthorization Matrixで確認できる
 - Dev pluginを準備していること 
  - [Apps]->[Plugins]->[Development]->[+WRITE YOUR FIRST PLUGIN]をクリックしてPlugin idを設定。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106215/4bc83a29-caa2-cd9e-6031-83bdaa193c24.png)


##Dataiku上で適当なWeb Appを準備
以下の要領で作ります。今回は、web appはなんでもよいので元から入っているサンプルを拝借します。
 - plugin作成用のプロジェクトを作成
 - [</>]->[webapps]をクリック
 - [+CREATE YOUR FIRST WEBAPP]をクリック
 - [Code Webapp]をクリック
 - とりあえずBokehでつくりますが、別になんでもいいです。Shinyもあるよ！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106215/8ff700fd-0a3a-7dab-f975-b1f18d32e415.png)

 - [A simple histogram that can e created from a DSS dataset]を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106215/493cc8fb-d921-ac1f-3b1c-0a68194d8cb0.png)

 - Webapp nameを入力して[CREATE]クリック
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106215/35c949da-aa7f-1a82-2f8a-e72fe5379046.png)

これで適当なBokeh web appが作成できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106215/ccafda6f-7723-f103-b664-693d634e58a9.png)



## plugin化

 - pluginアイコンをクリック
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106215/fe31f725-f215-1ab7-fdf8-90ccddeac541.png)
 - Plugin idを選択し、New plugin webapp idを入力し、[CONVERT]をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106215/8c020dcd-e227-6852-67d5-4fc922c9caac.png)


ちなみに、idに"_"は使えません。"-"とかにしないとCONVERTが押せないことに注意。

これで、pluginができています。ただし、入出力部分は修正が必要なので、webapp.jsonとbackend.pyを修正していきます。
[Apps]>[Plugins]>[Development]>[Test plugin]>[Custom histgram]

pluginの構造は以下のようになっています。
webapp.jsonがUI側の設定を記載したjsonファイルであり、backend.pyはbokehのプログラムとなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106215/9e37dd94-3124-5883-b1da-8f5905a93847.png)



 webapp.jsonのparamのところを以下のように差し替えます。ここはDataiku側のUIとのパラメータやりとりのとこなので、作ったアプリに合わせて適切に設定します。

```json
    "params": [
        {
        "name": "input_dataset",
        "type": "DATASET",
        "label": "Dataset",
        "description": "The dataset used to populate the web app",
        "mandatory": true,
        "canSelectForeign": true
        },
        {
        "name": "input_column",
        "type": "DATASET_COLUMN",
        "datasetParamName": "input_dataset",
        "label": "Column",
        "description": "",
        "mandatory": true
        }
    ],
```
 webapp.jsonの"roles"のところのコメントアウトもはずします。これをやらないとプロジェクト側で呼び出せません。

```json
    "roles": [
         {"type": "DATASET", "targetParamsKey": "input_dataset"} 
    ]
```


backend.py側も、パラメータ設定のところを変更します。

```python
import dataiku
from bokeh.io import curdoc
from bokeh.plotting import figure
from dataiku.customwebapp import *

# Access the parameters that end-users filled in using webapp config
# For example, for a parameter called "input_dataset"
# ここで、入力パラメタを受け取る。ここの"input_dataset"などは、
# webapp.jsonの"params"記載事項に対応している。
input_dataset = get_webapp_config()["input_dataset"]
input_column = get_webapp_config()["input_column"]

# This loads sample dataset of cars data into a dataframe
# Let's disply a simple histogram of horsepower (the column is called hp)
#from bokeh.sampledata.autompg import autompg
#df = autompg
#column = 'hp'

# Uncomment the following to read your own dataset
# データセットをdataframeに変換。
dataset = dataiku.Dataset(input_dataset)
df = dataset.get_dataframe()
column = input_column

value_counts = df[column].value_counts(bins=8, sort=False)
values = value_counts.index.map(str).values

hist = figure(x_range=values, plot_height=250)
hist.vbar(x=values, top=value_counts, width=0.8)

# For more details about Bokeh's histograms and other charts,
# check Bokeh's documentation:
# https://bokeh.pydata.org

curdoc().add_root(hist)
```

[SAVEALL]>[ACTIONS]>[Reload thist plugin]をクリック。
任意のプロジェクトのフローに戻って、ブラウザのリロードをすると、Custom histgramというWebappsが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106215/037a50be-450d-4b2e-2245-5f61e39d4604.png)

試しに使ってみたいと思います。ネット用のデモデータを、プロジェクトに取り込みます。
[+DATASET]>[NetWork]>[HTTP]

https://downloads.dataiku.com/public/website-additional-assets/data/Orders_enriched_prepared.csv

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106215/34047a9f-4fbe-7a65-bf53-9456dd27a5db.png)

testdataデータセットを選択した状態で、Custom histgramアイコンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106215/f269e9c6-bb65-9854-eb2f-c5ee1795d41d.png)

任意のwebapp nameを入力して[CREATE]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106215/51a5fdda-1373-fc6f-352b-08929fbebf6b.png)

[Settings]でヒストグラム化する項目を選択して、[SAVE AND VIEW WEBAPP]をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106215/6a33dc7e-8af0-e004-dd38-0b01d6355e3d.png)

若干表示に時間かかりますが、ヒストグラムが生成されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106215/29e28fc8-9a45-e82a-772f-8f994c834ebe.png)

基本的に、入力部分を書き換えればよいだけなので、webappのプラグイン化は非常に簡単です。自分が作ったwebappを他の方に共有するには便利だと思います。
ただ、プラグイン化したものを、ダッシュボードに載せたり、フローに反映させたりはできないようなので、プラグイン化する必要があるかどうかはよく考えたほうがよさそうです。