## Configuration
Set up a new instance with `config` parameters and `set`/`get` methods:
```javascript
const insightsLogs = appmixer.ui.InsightsLogs(config)
insightsLogs.set(key, value)
insightsLogs.get(key)
```
#### **`config.el`** **`...`**
{% hint style="info" %}
Learn about `widget` `config` [here](/appmixer-ui-sdk/ui-and-widgets.md#configuration).
{% endhint %}
#### **`config.flowId`**
ID of a flow to filter the logs by.
#### **`config.options.showHistogram`**
Hides the histogram section of the UI when set to `false`.
```javascript
// Initialize with histogram hidden
const insightsLogs = appmixer.ui.InsightsLogs({
options: { showHistogram: false }
});
// Later: show histogram dynamically
insightsLogs.set('options', {
...insightsLogs.get('options'), // keep other options unchanged
showHistogram: true
});
```
## Instance
{% hint style="info" %}
Learn about `widget` instance [here](/appmixer-ui-sdk/ui-and-widgets.md#instance).
{% endhint %}
### State
```javascript
insightsLogs.state(name, value)
```
#### **`loader`**
Type: `Boolean` | Default: `null`
Toggle a custom loading state.
#### **`error`**
Type: `String` | Default: `null`
Toggle a custom error message.\
\
\&#xNAN;**`filterLayout`**
Type: `String` | Default: `'expanded'`
Controls whether the left filter panel is shown. Options: `'collapsed'` or `'expanded'`.\
\
Example: Set the initial state and toggle it programmatically at runtime.
```javascript
const insightsLogs = appmixer.ui.InsightsLogs({
state: { filterLayout: 'collapsed' }
});
insightsLogs.state('filterLayout', 'expanded');
```
**`query`**
Type: `Object` | Default: `{}`
The current query of the widget. Changing it reloads both the histogram data and the logs table.\
\
Example: Retrieving the current query from the widget's state.
#### Basic Usage
Set an initial query in the widget's state:
```javascript
// Initial query: last 30 days
const insightsLogs = appmixer.ui.InsightsLogs({
state: {
query: {
query: {
range: {
from: {
endOf: null,
startOf: 'day',
subtract: [30, 'day']
}
}
}
}
}
});
```
#### Reading and Updating the Query with Nested Filters
When modifying the query, always merge it with the current query object.
```javascript
// Get the current query
const currentQuery = insightsLogs.state('query');
// Merge in new filter values
insightsLogs.state('query', {
...currentQuery, // keep existing top-level query state
query: {
...currentQuery.query, // keep existing nested filters
targets: {
// Keys are Flow IDs
// Values are optional arrays of component IDs
// (empty array = all components in that flow)
'8a47ab76-b90c...': ['component-1', 'component-2'],
'f0e1d2c3-b90c...': [] // no component filter
}
}
});
```
#### Tracking Query Changes
Listen for changes triggered by UI interactions:
```javascript
insightsLogs.on('change:query', queryAfterUserInput => {
console.log(queryAfterUserInput);
});
```
#### Working with Nested Query Keys
You can directly read or set nested query properties using a /-separated path.
```javascript
const currentFlowType = widget.state('query/flowType');
// flowType filter
widget.state('query/flowType', 'automation'); // single value
widget.state('query/flowType', [
'integration-test',
'integration-instance',
'automation'
]); // multiple values
// userId filter
widget.state('query/userId', 'A'); // single value
widget.state('query/userId', ['A', 'B']); // multiple values
```
## Example
```javascript
const insightsLogs = appmixer.ui.InsightsLogs({
el: '#insights-logs'
})
insightsLogs.open()
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.appmixer.com/appmixer-ui-sdk/ui-and-widgets/insights-logs.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.