toggleLabelsInLogsUI: enable by default (#74342)

* GA toggleable labels

* Logs integration: update readme with new features

* Build a logs data source: update docs with the new interface

* Plugin docs: update example function signatures and arguments

* Plugin docs: update modifyQuery function names

* Formatting

* Remove character

* Remove `expr` from docs

* Plugin docs: improve code

* Plugin docs: further code improvements

docs/sources/developers/plugins/create-a-grafana-plugin/develop-a-plugin/build-a-logs-data-source-plugin.md

@@ -273,14 +273,14 @@ export class ExampleDatasource extends DataSourceApi<ExampleQuery, ExampleOption
       case 'ADD_FILTER':
         if (action.options?.key && action.options?.value) {
           // Be sure to adjust this example code based on your data source logic.
-          queryText = addLabelToQuery(queryText, action.options.key, '=', action.options.value);
+          queryText = addPositiveFilterToQuery(queryText, action.options.key, action.options.value);
         }
         break;
       case 'ADD_FILTER_OUT':
         {
           if (action.options?.key && action.options?.value) {
             // Be sure to adjust this example code based on your data source logic.
-            queryText = addLabelToQuery(queryText, action.options.key, '!=', action.options.value);
+            queryText = addNegativeFilterToQuery(queryText, action.options.key, action.options.value);
           }
         }
         break;
@@ -402,7 +402,7 @@ With [full range logs volume]({{< relref "../../../../explore/logs-integration/#
 
 **How to implement `DataSourceWithSupplementaryQueriesSupport` API in data source:**
 
-{{% admonition type="note" %}} This API must be implemented in data source in typescript code. {{%
+{{% admonition type="note" %}} This API must be implemented in the data source in typescript code. {{%
 /admonition %}}
 
 ```ts
@@ -487,7 +487,7 @@ export class ExampleDatasource
 
 ### Logs sample
 
-{{% admonition type="note" %}} This feature is currently not supported for external plugins outside of the Grafana repo. Implement this API in a data source by implementing the `DataSourceWithXXXSupport` interface. {{%
+{{% admonition type="note" %}} This feature is currently not supported for external plugins outside of the Grafana repo. Add support for this API in a data source by implementing the `DataSourceWith<Feature>Support` interface. {{%
 /admonition %}}
 
 The [logs sample]({{< relref "../../../../explore/logs-integration/#logs-sample" >}}) feature is a valuable addition when your data source supports both logs and metrics. It enables users to view samples of log lines that contributed to the visualized metrics, providing deeper insights into the data.
@@ -612,3 +612,76 @@ const result = createDataFrame({
 /admonition %}}
 
 It allows plugin developers to display a custom UI in the context view by implementing the `getLogRowContextUi?(row: LogRowModel, runContextQuery?: () => void, origQuery?: TQuery): React.ReactNode;` method.
+
+### Toggleable filters in Log Details
+
+{{% admonition type="note" %}} This feature is currently not supported for external plugins outside of the Grafana repo. Add support for this API in a data source by implementing the `DataSourceWith<Feature>Support` interface. {{%
+/admonition %}}
+
+The [logs details]({{< relref "../../../../explore/logs-integration/#log-details-view" >}}) component offers the possibility of adding and removing filters from the query that generated a given log line by clicking the corresponding button next to each field associated with the log line. When this interface is implemented in your data source, you get access to the following functionalities:
+
+- If a positive filter for the field and field value is present in the query, the "plus" icon is displayed as active.
+- If a positive filter is active, it can be toggled off (removed) from the source query.
+- If a positive filter is active, it can be changed to a negative equivalent by clicking on the "minus" icon.
+- A negative filter for a field and field value can be added to the source query by clicking on the corresponding icon.
+
+To implement toggleable filters support in your data source plugin, you can use the `DataSourceWithToggleableQueryFiltersSupport` API.
+
+```ts
+import {
+  queryHasPositiveFilter,
+  removePositiveFilterFromQuery,
+  addPositiveFilterToQuery,
+  addNegativeFilterToQuery,
+} from '../your/own/package/functions';
+import { DataSourceWithToggleableQueryFiltersSupport, QueryFilterOptions } from '@grafana/data';
+
+export class ExampleDatasource
+  extends DataSourceApi<ExampleQuery, ExampleOptions>
+  implements DataSourceWithToggleableQueryFiltersSupport<ExampleQuery>
+{
+  /**
+   * Given a query, determine if it has a filter that matches the options.
+   */
+  queryHasFilter(query: ExampleQuery, filter: QueryFilterOptions): boolean {
+    /**
+     * Pass the query and the key => value pair to your query-analyzing function.
+     * We only care about equality/positive filters as only those fields will be
+     * present in the log lines.
+     */
+    return queryHasPositiveFilter(query.query, filter.key, filter.value);
+  }
+
+  /**
+   * Toggle filters on and off from query.
+   * If the filter is already present, it should be removed.
+   * If the opposite filter is present, it should be replaced.
+   */
+  toggleQueryFilter(query: ExampleQuery, filter: ToggleFilterAction): LokiQuery {
+    const queryText = query.query; // The current query.
+    const { key, value } = filter.options;
+    // We currently support 2 types of filter: FILTER_FOR (positive) and FILTER_OUT (negative).
+    switch (filter.type) {
+      case 'FILTER_FOR': {
+        // This gives the user the ability to toggle a filter on and off.
+        queryText = queryHasPositiveFilter(queryText, key, value)
+          ? removePositiveFilterFromQuery(queryText, key, value)
+          : addPositiveFilterToQuery(queryText, key, value);
+        break;
+      }
+      case 'FILTER_OUT': {
+        // If there is a positive filter with the same key and value, remove it.
+        if (queryHasPositiveFilter(queryText, key, value)) {
+          queryText = removePositiveLabelFromQuery(queryText, key, value);
+        }
+        // Add the inequality filter to the query.
+        queryText = addNegativeFilterToQuery(queryText, key, value);
+        break;
+      }
+      default:
+        break;
+    }
+    return { ...query, query: queryText };
+  }
+}
+```