Store Mindmaps using Globals（InterSystems Global コンテスト優勝作品紹介）

開発者の皆さん、こんにちは！

この記事では、InterSystems Global コンテストで見事優勝🏆された @Yuri Marx さんの作品をご紹介します！（ご本人が投稿された記事を使ってご紹介します）

InterSystems IRIS の「Global」はデータベースに格納される変数で、キーバリュー形式でアクセスできます。キーが複数ある場合は、配列の添え字を利用して階層のようなイメージで格納することもできます。

ここでご紹介する優勝作品は、配列をうまく利用した作品で、MindMapで書いた情報そのまま（見たまま）をグローバルに登録しています。

MindMapの表示部分については、オープンソースの Mind-elixir を使用されているようです。

ソースコードは OpenExchange で公開中で、git clone 後、 docker-compose up -d --build したらすぐ動きます！（docker 🐳ほんとに便利ですね！）

また、ご本人の解説ビデオも YouTube で絶賛公開中です！お手元で動かさなくてもどんな感じで Global が使われているか、どんな感じで Web アプリを作成されているのかを確認できますので、ぜひご覧ください！

Global の登録内容は 2:26秒辺りから、フロントエンドの解説は 3:11 辺りから

以下、Yuri さんが投稿された記事の内容です。

Global は、データを永続化する InterSystems IRIS のコアとなるものです。柔軟性があり、JSON ドキュメント、リレーショナル・データ、オブジェクト指向データ、OLAP キューブ、および Mindmaps のようなカスタム・データ・モデルを保存できます。

グローバルを使用してMindMp データを保存、削除、取得する方法については、以下の手順をご参照ください。

docker/docker-compose/git がインストールされている環境でお試しください。

1. サンプルコードをローカルに clone/pull する手順は以下の通りです。

$ git clone https://github.com/yurimarx/global-mindmap.git

2. clone後、作成されたディレクトリに移動し、ターミナルで以下実行し、イメージをビルドします。

$ docker-compose build

3. 以下のコマンドを実行し、コンテナを開始します。

$ docker-compose up -d

4. Mindmap フロントエンドを開き、👆に貼っているGIFアニメのように動かす場合は http://localhost:3000 にアクセスします（または、http://localhost:52773/mindmap/index.html を開きます）。

ソースコードについての解説

保存するデータの構造は以下の通りです (詳細はこちらをご覧ください: https://www.npmjs.com/package/mind-elixir):

{
  topic: 'node topic',
  id: 'bd1c24420cd2c2f5',
  style: { fontSize: '32', color: '#3298db', background: '#ecf0f1' },
  parent: null,
  tags: ['Tag'],
  icons: ['😀'],
  hyperLink: 'https://github.com/ssshooter/mind-elixir-core',
}

parent プロパティは、MindMap のノード間に親子関係を構築するために使用されます。

^mindmap グローバルに登録する部分のソースコード

^mindmap グローバルを作成しています。mindmap のプロパティについては、Global の添え字に設定しています。添え字のキーは mindmap の id プロパティの値を設定しています。 

^mindmap ノードを削除するサンプルコード： Global の kill （削除）

このサンプルでは、minamap.id  を ^mindmap グローバルのキーとして利用しているので削除は簡単です。以下実行するだけです。

kill ^mindmap(<mindmap id>)

全格納情報を取得するコード例 - $ORDER()関数を使用してGlobal をループする

^mindmap グローバルの第1番目の添え字にある最初の情報（ルートノード）を取得するために、$Order(^mindmap("")) を実行しています（取得した内容は変数 Key に設定しています）。

^mindmap(Key, <property name>) を使用して、各プロパティ値を取得しています。次に登録されている Key を取得するため、While文の最後に  $Order(^mindmap(Key) を実行しています。

フロントエンド

MindMap のレンダリングと編集には Mind-elixir と React が使われ、IRIS で構築された API バックエンドを呼び出しています。詳細は、MindMap の react コンポーネントを参照してください。

もし、このサンプルコードが気に入りましたら、InterSystems Global コンテストで私の作品に投票してください！

ありがとうございました。