Common Code Snippets and Explanations

In the context of the webpage app, the code snippets' syntax can vary based on the source and usage of variables.

Depending on where the code is placed, different contexts are utilized to access variables from various sources. Here's an overview of how to adapt the code snippets according to the variable context:

Context	Variable Source	Explanation
`{{result.value}}`	Query Response	The `result.` context is used to access variables obtained from query responses. For instance, `result["EmailConnector"]` references an array from the `EmailConnector` key in the query response.
`{{item.value}}`	Response Array	The `item.` context is employed when working with individual objects within an array response. For example, `item.dateMs` corresponds to the `dateMs` property of an object within an array.
`{{app.value}}`	Side Panel Context	The `app.` context is applied to context variables relevant to the side panel. It allows access to variables related to the side panel's specific context.
`{{widget['id'].value}}`	Widget Value	Sometimes, you can directly utilize the value of a widget without any context. This is useful for obtaining values directly from widgets on the webpage.
`{{self.value}}`	KPI Widget Value	`self.value` is used to retrieve the value of a Key Performance Indicator (KPI) widget. This value can then be used in various calculations or displays.
`{{ self.<value_name> }}`	Widget's Own Context	`self.<value_name>` is utilized to refer to variables specific to the widget itself. For example,`{{ moment(self.min).format('lll') }}` accesses the `min` variable within the same widget's context using the `moment library` to give an specific date format.
`[[ widget.id.value ]]`	Widget Array Values	Sometimes, you can directly utilize the selected values of a widget without any context. This is useful for obtaining an array values directly from widgets on the webpage.

Keep in mind that these contexts are crucial for correctly referencing and accessing variables from different parts of the webpage.

This table provides an overview of various code snippets along with their explanations. These snippets are frequently encountered in different contexts, such as formatting data, calculating averages, working with timestamps, and more. Each snippet is followed by a clear explanation to help you understand its purpose and functionality. Whether you're a developer looking to understand these snippets or someone seeking to document their usage, this table offers concise explanations to aid your understanding.

Code Snippet	Explanation
`{{result["EmailConnector"] ? result["EmailConnector"].reduce((acc, connector) => acc + connector.count, 0) : 0}}`	Calculates the total count of emails by summing the `count` property of each object in the `EmailConnector` array within the `result` object. If the array is missing, the count defaults to 0.
`{{formatNumber(self.value, {optionalMantissa: true}).toUpperCase()}}`	Formats the numeric value `self.value` using the `formatNumber` function with an optional mantissa and converts the result to uppercase.
`{{formatNumber(self.value \|\| 0, {optionalMantissa: true}).toUpperCase()}}`	Formats the numeric value `self.value` (or 0 if not available) using the `formatNumber` function, allowing an optional mantissa, and converts the result to uppercase.
`{{formatBytes(self.value \|\| 0,{base:'binary' ,optionalMantissa:true}).replace('i','')}}`	Formats the given byte size (`self.value` or 0) using binary-based units with an optional mantissa, then removes the 'i' character for clarity.
`{{result.total.totalProcessingTime_ms / 1000 / result.total.count}}`	Computes the average processing time per item by dividing the total processing time (in milliseconds) by the total count of items. This snippet can change depending on the API structure.
`{{formatNumber(self.value)}} s`	Formats the numeric value `self.value` and appends 's' to indicate seconds.
`{{moment(item.dateMs).tz(timezone).format('lll')}}`	Formats the timestamp, in this case the variable `item.dateMs`, into a human-readable localized date and time format using the `moment` library.
`{{moment(app.startDate, 'YYYY-MM-DD').add(1, 'day').format('YYYY-MM-DD')}}`	Calculates a new date by adding one day, in this case to the variable `app.startDate`, then formats it as 'YYYY-MM-DD' using the `moment` library.
`{{moment(result.sanitizedItem.details.processStartTime) .tz(timezone).format('lll')}}`	Formats the variable `processStartTime` timestamp from `sanitizedItem.details` into a readable localized date and time format using the `moment` library.
`{{value === 'undefined' \|\| value === 'null' ? '-' : value}}\`	Checks if `value\` is 'undefined' or 'null', displaying a hyphen ('-') if true, otherwise showing the actual value.
`{{item.severity === 2 ? '#22c55e' : '#fbbf24'}}`	Checks if `item.severity` is 2. If true, displays color '#22c55e', otherwise, displays '#fbbf24'.
`{{item.threats.length \|\| 0}} Suspicious Objects Detected\`	Displays the count of detected threats in `item`. If no threats are detected, it shows '0 Suspicious Objects Detected'.
`{{numbro(moment.duration(moment(item.processEndTime) .diff(item.processStartTime)).asSeconds()).format({trimMantissa: true, mantissa: 1 })}} sec Sanitization Time`	Calculates the duration between `item.processStartTime` and `item.processEndTime`, converts it to seconds, and formats it with a single decimal digit using the `numbro` library. Adds 'sec Sanitization Time'.
`{{item.status !== 'OK' ? 'Blocked' : ''}}`	Displays 'Blocked' if `item.status` is not 'OK', otherwise displays an empty string.
`{{item.hasThreats ? 'Suspicious' : ''}}`	Displays 'Suspicious' if `item.hasThreats` is true, otherwise shows an empty string.
`/url?{{ widget['id']?.value.map(e => 'ArrayMap='+e).join('&') }}`	Maps the widget selected values as an array for the url query.