Enhance column suggestion differentiation

asset/css/search-base.less

@@ -42,6 +42,11 @@
     }
   }
 
+  .relation-path {
+    padding: 0 .2em;
+    background-color: var(--suggestions-relation-path-bg, @suggestions-relation-path-bg);
+  }
+
   [type="button"] {
     .appearance(none);
     border: none;
@@ -52,6 +57,10 @@
     background: var(--suggestions-focus-bg, @suggestions-focus-bg);
     color: var(--suggestions-focus-color, @suggestions-focus-color);
     outline: none;
+
+    .relation-path {
+      background-color: var(--suggestions-relation-path-focus-bg, @suggestions-relation-path-focus-bg);
+    }
   }
 
   [type="button"]:not(:focus):hover {
@@ -96,5 +105,19 @@
     &[data-class="operator"], &[data-class="logical_operator"] {
       text-align: center;
     }
+
+    &.has-details {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+    }
+
+    .relation-path {
+      margin-left: .5em;
+
+      &::first-line {
+        font-size: .8em;
+      }
+    }
   }
 }

asset/css/variables.less

@@ -95,6 +95,8 @@
 @suggestions-border-color: @base-gray-light;
 @suggestions-separation-bg: @base-gray-lighter;
 @suggestions-failure-message-color: @default-text-color-light;
+@suggestions-relation-path-bg: @base-gray-light;
+@suggestions-relation-path-focus-bg: @base-gray;
 
 @card-border-color: @base-gray-light;
 
@@ -156,6 +158,8 @@
     --suggestions-border-color: var(--base-gray-light);
     --suggestions-separation-bg: var(--base-gray-lighter);
     --suggestions-failure-message-color: var(--default-text-color-light);
+    --suggestions-relation-path-bg: var(--base-gray-lighter);
+    --suggestions-relation-path-focus-bg: var(--base-gray);
 
     --card-border-color: var(--base-gray-light);
   }

asset/js/widget/BaseInput.js

@@ -159,6 +159,10 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
                     termData['class'] = label.className;
                 }
 
+                if (label.title) {
+                    termData['title'] = label.title;
+                }
+
                 this.registerTerm(this.decodeTerm(termData), label.dataset.index);
             });
         }
@@ -338,6 +342,12 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
             if (!! termData.search || termData.search === '') {
                 label.dataset.search = termData.search;
             }
+
+            if (!! termData.title) {
+                label.title = termData.title;
+            } else {
+                label.title = '';
+            }
         }
 
         termsToQueryString(terms) {
@@ -475,6 +485,10 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
                 label.classList.add(termData.class);
             }
 
+            if (termData.title) {
+                label.title = termData.title;
+            }
+
             label.dataset.label = termData.label;
             label.dataset.search = termData.search;
             label.dataset.index = termIndex;

asset/js/widget/Completer.js

@@ -272,6 +272,8 @@ define(["../notjQuery"], function ($) {
                         }
 
                         dataElement.value = data[name];
+                    } else if (name === 'title') {
+                        input.title = data[name];
                     }
                 }
             }

src/Control/SearchBar/Suggestions.php

@@ -78,6 +78,18 @@ public function setFailureMessage($message)
         return $this;
     }
 
+    /**
+     * Return whether the relation should be shown for the given column
+     *
+     * @param string $column
+     *
+     * @return bool
+     */
+    protected function shouldShowRelationFor(string $column): bool
+    {
+        return false;
+    }
+
     /**
      * Create a filter to provide as default for column suggestions
      *
@@ -236,7 +248,8 @@ protected function assemble()
             $attributes = [
                 'type'          => 'button',
                 'tabindex'      => -1,
-                'data-search'   => $term
+                'data-search'   => $term,
+                'data-title'    => $term
             ];
             if ($this->type !== null) {
                 $attributes['data-type'] = $this->type;
@@ -245,17 +258,30 @@ protected function assemble()
             if (is_array($meta)) {
                 foreach ($meta as $key => $value) {
                     if ($key === 'label') {
-                        $attributes['value'] = $value;
+                        $label = $value;
                     }
 
                     $attributes['data-' . $key] = $value;
                 }
             } else {
-                $attributes['value'] = $meta;
+                $label = $meta;
                 $attributes['data-label'] = $meta;
             }
 
-            $this->addHtml(new HtmlElement('li', null, new InputElement(null, $attributes)));
+            $button = (new ButtonElement(null, $attributes))
+                ->setAttribute('value', $label)
+                ->addHtml(Text::create($label));
+            if ($this->shouldShowRelationFor($term)) {
+                $relationPath = substr($term, 0, strrpos($term, '.'));
+                $button->getAttributes()->add('class', 'has-details');
+                $button->addHtml(new HtmlElement(
+                    'span',
+                    Attributes::create(['class' => 'relation-path']),
+                    Text::create($relationPath)
+                ));
+            }
+
+            $this->addHtml(new HtmlElement('li', null, $button));
         }
 
         if ($this->hasMore($data, self::DEFAULT_LIMIT)) {
@@ -265,8 +291,8 @@ protected function assemble()
         $showDefault = true;
         if ($this->searchTerm && $this->count() === 1) {
             // The default option is only shown if the user's input does not result in an exact match
-            $input = $this->getFirst('li')->getFirst('input');
-            $showDefault = $input->getValue() != $this->searchTerm
+            $input = $this->getFirst('li')->getFirst('button');
+            $showDefault = $input->getContent() != $this->searchTerm
                 && $input->getAttributes()->get('data-search')->getValue() != $this->searchTerm;
         }
 

src/Control/SearchBar/Terms.php

@@ -164,7 +164,8 @@ protected function assembleCondition(Filter\Condition $filter, BaseHtmlElement $
             'class'  => 'column',
             'type'   => 'column',
             'search' => rawurlencode($column),
-            'label'  => $columnLabel
+            'label'  => $columnLabel,
+            'title'  => $column
         ];
         if ($filter->metaData()->has('invalidColumnPattern')) {
             $columnData['pattern'] = $filter->metaData()->get('invalidColumnPattern');
@@ -235,6 +236,10 @@ protected function assembleTerm(array $data, BaseHtmlElement $where)
             'value' => $data['label']
         ])));
 
+        if (isset($data['title'])) {
+            $term->setAttribute('title', $data['title']);
+        }
+
         if (isset($data['pattern'])) {
             $term->getFirst('input')->setAttribute('pattern', $data['pattern']);
 

src/Control/SearchEditor.php

@@ -457,6 +457,9 @@ protected function createCondition(Filter\Condition $condition, $identifier)
                     ? $condition->getColumn()
                     : null
             ),
+            'title' => $condition->getColumn() !== static::FAKE_COLUMN
+                ? $condition->getColumn()
+                : null,
             'required' => true,
             'autocomplete' => 'off',
             'data-type' => 'column',