web-dev-qa-db-ja.com

複雑なAND / ORクエリ/基準を視覚化する良い方法は？

「ルールフォーム」と呼ばれる機能を備えたウェブアプリを維持しています。これは基本的に、AND/ORブロックにグループ化できる基準を持つ「ルール」を構築するためにユーザーが使用する複雑なHTMLフォームです。すべての基準が真である場合、ユーザーが望むことは起こります。静的クエリと考えてください。何かのようなもの：

Animal
    Fur Color:
        IS Black
        - OR -
        IS NOT Brown
        - OR -
        IS White
    - AND -
    Weight:
        >= 25 lbs
    - AND -
    Lives:
        INSIDE Houses
        - OR -
        OUTSIDE Caves
    - AND -
    Species:
        IS NOT Cat
        - AND -
        IS NOT Dog
        - AND -
        IS NOT Llama
End Animal

重要な注意：このツールでは、根の基準（ファーの色、重量など）は常にANDです。 1つのルート基準内のサブ基準は、すべてORまたはANDのいずれかであり、混合されません。

ユーザーがルールを作成したら、そのルールの概要をユーザーに表示できるようにしたいと思います。つまり、上記の複雑な基準を視覚化するためのエレガントな方法を考え出します。それへの提案やリンクがうまくできていれば大歓迎です。ありがとう！

[〜＃〜]更新[〜＃〜]

私が管理しているwebappは別のネットワーク上にあるため、現在のHTMLフォームのスクリーンショットを提供することはできませんが、@ kerrが提供する回答に非常に似ています。 viewing機能のみに関心があることに注意してください。ルールを表示するときにフォームをロードできるようにしたいのですが、その特定のモジュールが使用できない場合があるため、新しい「ビューア」を開発する必要があります。ありがとう。

info-visualisationvisual-design
40
MegaMatt

ルールビルダーをレイアウトするiTunesの方法が本当に好きです。理解するのはとても簡単です。

このことを念頭に置いて、次はそのパラダイムを使用した例です。

mockup

download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム

ファーのカラーと種のオプションに追加のアクセラレータがあることがわかります。同じタイプの複数の値を選択すると、必要なUIを削減するタグとして表示できます。ただし、これがうまくいくかどうかを確認する必要があります。

言語をできるだけ自然にして、左から右に読むようにすると、理解しやすくなります。したがって、数学記号を使用する代わりに、テキストを（またはその代わりに）追加します。クエリ自体で十分に自然に読み取れる場合は、ルールの「概要」を追加する必要はありません。

50
kerr

フローチャートを作成するのはどうですか？

ORは、フロー内の分岐で表すことができます。ANDは、同じ流路内の2つの基準を結合することで表すことができます。

例えば、 ( A ∧ B ) ∨ ( C ∧ D )は次のように表現できます：

( START )
    │
 ┌──┴──┐
 │     │
[A]   [C]
 │     │
[B]   [D]
 │     │
 └──┬──┘
    │
 ( END )

もちろん、そのようなフローチャートの作成を可能にするWebインターフェースの構築には少し時間がかかりますが、視覚化としてグラフィカルに理解することができます（IMHO）。

38
Locoluis

すべての情報を使用して、次のようなものを提示します。

mockup

download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム

OR=基準は並列に配置され（一致する動物は任意の基準を通過できるため）、AND基準は直列に配置されます（一方が他方の隣にあります）。 、したがって、一致する動物はそれらのすべてを通過する必要があります）。

ここでグラフィックを操作して、（動物の足跡を含む）ある種のパスを描画して、図をさらに視覚的にすることができます。

11
Mike

here のように、同じレベルのルールがgroupsに配置されているネストされたボックスはどうですか？

Demo of querybuilder library showing some rules arranged in a nested order

別のバージョン ：

Demo of querybuilder library showing some rules arranged in a nested order

6
Anmol Singh Jaggi

以前、「ルールフォーム」で同様の問題に遭遇しました。さまざまな解決策を探すと、これは問題に対する有効な解決策のようでした。

ご覧のとおり、ANDまたはORステップを挟んでいるIf-Thenステートメントです。すべてのIf-ThenステートメントはAND条件で接続されています。

Rule form

4
Dimitra Miha

そのようなUIが Drupal CMSのViewsモジュールでどのように見えるかを簡単に説明しましょう。

Drupal Views and/or UI

「ビュー」に適用されるフィルターが表示されます。動的に生成されたコンテンツアイテムのリスト。 （この例では、フィルターの組み合わせは意味がありません。ランダムに選択しただけです。）UIには、フィルターを選択および構成するための別の部分があります。

最上位には、1つ以上のフィルターを含む「フィルターグループ」があります。グループ内およびグループ間にセレクターが存在します。必要に応じて、グループを追加できます。

このUIで気に入っている点の1つは、グループ間でフィルターを簡単にドラッグアンドドロップできることです。

3
marcvangend

Salesforce Marketing Cloudがこの問題を解決する方法が本当に気に入っています。

enter image description here

どのブロックが互いに相互作用し、フィルターの背後にあるロジックが実際にどれほど深いかを明確に見ることができます。

1
Rufenstein