reactjs - AWS Comprehend Medical からこの種の UI を構築するにはどうすればよいですか?

Question

AWS 機械学習サービス Comprehend Medical を使用して臨床テキストを分析し、データを抽出しています。

いくつかのコンテキスト情報 (おそらくスキップ可能):

入力のタイプは次のとおりです。

Pt is 40yo mother, highschool teacher 
HPI : Sleeping trouble on present dosage of Clonidine. Severe Rash  on face and leg, slightly itchy  
Meds : Vyvanse 50 mgs po at breakfast daily, 
            Clonidine 0.2 mgs -- 1 and 1 / 2 tabs po qhs 
HEENT : Boggy inferior turbinates, No oropharyngeal lesion 
Lungs : clear 
Heart : Regular rhythm 
Skin :  Mild erythematous eruption to hairline 

Follow-up as scheduled

これは、AWS から得られる出力の種類です。

{
    "Entities": [
        {
            "Id": 0,
            "BeginOffset": 6,
            "EndOffset": 10,
            "Score": 0.9984116554260254,
            "Text": "40yo",
            "Category": "PROTECTED_HEALTH_INFORMATION",
            "Type": "AGE",
            "Traits": []
        },
        {
            "Id": 1,
            "BeginOffset": 19,
            "EndOffset": 37,
            "Score": 0.28823626041412354,
            "Text": "highschool teacher",
            "Category": "PROTECTED_HEALTH_INFORMATION",
            "Type": "PROFESSION",
            "Traits": []
        },
         ...

次に、AWS が Comprehend Medical 出力を表現するためにコンソールで行うのと同じ方法で、この種の UI をレンダリングしたいと思います (画像を参照)。 AWS Console Comprehend Medical 出力表現

テキストにタグを付けることができました。しかし、タグ付きの矢印を作成する方法がわかりません。html要素間の依存関係を表します。

私はTaggy （タグ付けのみを行う）のようないくつかの反応ライブラリを試し、Spacey（SSRを必要とし、タグ+タグ付き矢印の同じ出力さえ必要としない）のようないくつかの他のソリューションを調査しました。

これらのHTMLコンポーネント間でこの種のタグ付き矢印を実行する方法を提案できる人はいますか?

ありがとうございます。