From 678a14e2b875e76c587ed3db8928588b9180f022 Mon Sep 17 00:00:00 2001
From: AlexeyOplachko <45398541+AlexeyOplachko@users.noreply.github.com>
Date: Tue, 23 Apr 2024 21:29:50 +0300
Subject: [PATCH] Feat/ux improvements (#66)

* feat: added copying from all fields in modal

feat: added copying from all fields in modal

* feat: Filter / Export visibility improvements

* feat: added disabling/enabling whole category of filters

* feat: fixed Simple mode

feat: fixed Simple mode

* feat: improved naming scheme and descriptions for settings

* chore: new version

* fix: conditions for export button

* feat: added filter tooltips, callid filtering and checking if any filters exist before showing menu

* feat: added tooltip to "simple mode" switch

* fix: added missing line

* fix: removed part of tooltip that got added by mistake

* fix: updated tooltip to be consistent with other ones

* feat: redo eth/ip/tcp/udp packet encoders in .ts

* fix: checkbox styling in filter

* fix: aligned checkboxes inside "collapse" with checkbox in "collapse" title

* feat: extraction of exporter functions from SimplePanel.tsx to separate files and proper typing for them

* feat: extraction of formatting, sorting and filtering functions from simple to separate files with proper types

* feat: revised filter tooltip visuals

* fix: ipv6 with middle segments missing

* fix: incorrect payload length + removal of accidentally setting flow label

* chore: cleanup
---
 .../ngx-flow/src/lib/ngx-flow.component.ts    |    9 +-
 .../ngx-flow/src/models/flow.model.ts         |    4 +-
 .../flow-item/flow-item.component.html        |   11 +-
 ngx-flow/src/app/app.component.ts             |    2 +-
 package.json                                  |    2 +-
 src/components/CopyText/CopyText.tsx          |   33 +
 src/components/FilterPanel/FilterPanel.tsx    |  127 +-
 src/components/SimplePanel.tsx                |  328 +--
 src/helpers/dataProcessors/filterFlowItems.ts |   60 +
 .../dataProcessors/formatAndSortFlowItems.ts  |   79 +
 src/helpers/dataProcessors/index.ts           |    1 +
 src/helpers/exporters/index.ts                |    3 +
 src/helpers/exporters/pcapExporter.ts         |   87 +
 src/helpers/exporters/textExporter.ts         |   36 +
 src/helpers/labelFormatter.ts                 |   13 +
 src/helpers/packets/ethernetPacket.ts         |   22 +
 src/helpers/packets/ipPacket.ts               |   90 +
 src/helpers/packets/tcpPacket.ts              |   29 +
 src/helpers/packets/udpPacket.ts              |   50 +
 src/libs/packets.js                           | 2328 -----------------
 src/module.ts                                 |   41 +-
 21 files changed, 717 insertions(+), 2638 deletions(-)
 create mode 100644 src/components/CopyText/CopyText.tsx
 create mode 100644 src/helpers/dataProcessors/filterFlowItems.ts
 create mode 100644 src/helpers/dataProcessors/formatAndSortFlowItems.ts
 create mode 100644 src/helpers/dataProcessors/index.ts
 create mode 100644 src/helpers/exporters/index.ts
 create mode 100644 src/helpers/exporters/pcapExporter.ts
 create mode 100644 src/helpers/exporters/textExporter.ts
 create mode 100644 src/helpers/labelFormatter.ts
 create mode 100644 src/helpers/packets/ethernetPacket.ts
 create mode 100644 src/helpers/packets/ipPacket.ts
 create mode 100644 src/helpers/packets/tcpPacket.ts
 create mode 100644 src/helpers/packets/udpPacket.ts
 delete mode 100644 src/libs/packets.js

diff --git a/ngx-flow/projects/ngx-flow/src/lib/ngx-flow.component.ts b/ngx-flow/projects/ngx-flow/src/lib/ngx-flow.component.ts
index c42e7d1..38d1b8c 100644
--- a/ngx-flow/projects/ngx-flow/src/lib/ngx-flow.component.ts
+++ b/ngx-flow/projects/ngx-flow/src/lib/ngx-flow.component.ts
@@ -87,14 +87,13 @@ export class NgxFlowComponent implements OnInit {
             description: i.aboveArrow || '',
             destination_ip: dist.ip,
             destination_port: dist.port,
-            diff: ' ',
-            diff_absolute: i.subTitle || '',
-            diff_num: ' ',
+            details: i.details,
             dstAlias: DIST,
             id: 0,
             info_date: i.belowArrow || '... ',
-            info_date_absolute: i.subTitle || '... ',
+            info_date_absolute: i.details || '... ',
             ipDirection: SRC + ' > ' + DIST,
+            line: i.line,
             messageData: null,
             method: ' ',
             method_text: i.title || i.messageID,
@@ -110,7 +109,7 @@ export class NgxFlowComponent implements OnInit {
             srcAlias: SRC,
 
             typeItem: "SIP",
-            hash: i.hash
+            hash: i.hash,
         }
     }
 
diff --git a/ngx-flow/projects/ngx-flow/src/models/flow.model.ts b/ngx-flow/projects/ngx-flow/src/models/flow.model.ts
index caf8c14..28de49e 100644
--- a/ngx-flow/projects/ngx-flow/src/models/flow.model.ts
+++ b/ngx-flow/projects/ngx-flow/src/models/flow.model.ts
@@ -8,7 +8,7 @@ export interface FlowItem {
     destination: string;
 
     title?: string;
-    subTitle?: string;
+    details?: string;
 
     // hidden in Simplified mode
     aboveArrow?: string;
@@ -27,7 +27,7 @@ export interface ArrowStyling {
 }
 export interface TextColors {
     title?: string;
-    subTitle?: string;
+    details?: string;
 
     // hidden in Simplified mode
     aboveArrow?: string;
diff --git a/ngx-flow/projects/ngx-flow/src/tab-flow/flow-item/flow-item.component.html b/ngx-flow/projects/ngx-flow/src/tab-flow/flow-item/flow-item.component.html
index 77ac933..1cb58f6 100644
--- a/ngx-flow/projects/ngx-flow/src/tab-flow/flow-item/flow-item.component.html
+++ b/ngx-flow/projects/ngx-flow/src/tab-flow/flow-item/flow-item.component.html
@@ -100,11 +100,12 @@
         </div>
         <div class="call-text-date">
             {{
-                isAbsolute
-                    ? item.diff_absolute
-                    : item.diff
-                    ? item.diff
-                    : "+0.00ms"
+                item.details
+                }}
+                </div>
+                <div class="call-text-date">
+                    {{
+                    item.line
             }}
         </div>
     </div>
diff --git a/ngx-flow/src/app/app.component.ts b/ngx-flow/src/app/app.component.ts
index 9f72ba7..4b10ed5 100644
--- a/ngx-flow/src/app/app.component.ts
+++ b/ngx-flow/src/app/app.component.ts
@@ -53,7 +53,7 @@ export class AppComponent {
         {
             messageID: 'some unique Id as string 1',
             title: 'Title',
-            subTitle: 'subTitle',
+            details: 'details',
             aboveArrow: 'aboveArrow',
             belowArrow: 'belowArrow',
             source: 'B',
diff --git a/package.json b/package.json
index 877401d..d6a68cb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "qxip-flow-panel",
-    "version": "10.1.0",
+    "version": "10.1.1",
     "description": "Plugin providing Flow diagram for Grafana",
     "scripts": {
         "build:component": "cd ./ngx-flow && npm run build:component",
diff --git a/src/components/CopyText/CopyText.tsx b/src/components/CopyText/CopyText.tsx
new file mode 100644
index 0000000..2982930
--- /dev/null
+++ b/src/components/CopyText/CopyText.tsx
@@ -0,0 +1,33 @@
+import React, { FC, useRef, useState } from 'react';
+import { IconButton } from '@grafana/ui';
+
+
+export const CopyText: FC<{ text: string }> = ({ text }) => {
+    const [copied, setCopied] = useState(false);
+    const textAreaRef: any = useRef(null);
+    const copy = () => {
+        if (navigator && navigator.clipboard) {
+            navigator.clipboard.writeText(text);
+            setCopied(true);
+        } else {
+            if (textAreaRef && textAreaRef.current) {
+                textAreaRef.current.focus();
+                textAreaRef.current.select();
+                document.execCommand('copy');
+            }
+            setCopied(false);
+        }
+    };
+    return (
+        <>
+            <textarea
+                ref={textAreaRef} value={text} style={{ pointerEvents: 'none', opacity: 0, position: 'fixed', left: 0, top: 0, border: 0, padding: 0 }} />
+
+            <IconButton
+                name="copy"
+                tooltip={copied ? 'Copied!' : 'Copy'}
+                onClick={copy}
+            />
+        </>
+    )
+}
diff --git a/src/components/FilterPanel/FilterPanel.tsx b/src/components/FilterPanel/FilterPanel.tsx
index 02ab3d7..b1e3503 100644
--- a/src/components/FilterPanel/FilterPanel.tsx
+++ b/src/components/FilterPanel/FilterPanel.tsx
@@ -1,12 +1,13 @@
 import { css, cx } from "@emotion/css";
 import { PanelData } from "@grafana/data";
-import { Button, Checkbox, Collapse, HorizontalGroup, InlineSwitch, Toggletip, useTheme2 } from "@grafana/ui";
+import { Button, Checkbox, Collapse, HorizontalGroup, InlineSwitch, Toggletip, useTheme2, Tooltip, Icon } from "@grafana/ui";
 import React, { useEffect, useState } from "react";
 
 export interface FilterProps {
     data: PanelData
     onFilter: Function
     onSimplify: Function
+    options: any
 }
 export interface Filters {
     ip: {
@@ -23,19 +24,33 @@ export interface Filters {
     },
     type: {
         [key: string]: boolean
+    },
+    callid: {
+        [key: string]: boolean
     }
 }
 export interface Filter {
     name: string
     value: boolean
 }
-export const FilterPanel = ({ data, onFilter, onSimplify }: FilterProps) => {
+const getStyles = () => {
+    return {
+        collapseChildrenWrapper: css`
+      padding-left: 18px;
+      width: 100%;
+      height: 100%;
+    `
+
+    };
+};
+export const FilterPanel = ({ data, onFilter, onSimplify, options }: FilterProps) => {
     const [ipsArray, setIpsArray] = useState<string[]>([]);
     // const [portsArray, setPortsArray] = useState<string[]>([]);
     // const [ipPortsArray, setIpPortsArray] = useState<string[]>([]);
     const [methodsArray, setMethodsArray] = useState<string[]>([]);
     const [payloadTypesArray, setPayloadTypesArray] = useState<string[]>([]);
-    const [filters, setFilters] = useState<Filters>({ ip: {}, port: {}, ipPort: {}, method: {}, type: {} })
+    const [callidsArray, setCallidsArray] = useState<string[]>([]);
+    const [filters, setFilters] = useState<Filters>({ ip: {}, port: {}, ipPort: {}, method: {}, type: {}, callid: {} });
     const [isSimplify, setIsSimplify] = useState(false);
     useEffect(() => {
         const [serie] = data.series || [];
@@ -47,7 +62,8 @@ export const FilterPanel = ({ data, onFilter, onSimplify }: FilterProps) => {
         const ipPorts = new Set<string>()
         const methods = new Set<string>()
         const payloadType = new Set<string>()
-        labelValues.forEach((label) => {
+        const callid = new Set<string>()
+        labelValues?.forEach((label) => {
             ips.add(label.dst_ip)
             ips.add(label.src_ip)
             ports.add(label.dst_port)
@@ -58,18 +74,23 @@ export const FilterPanel = ({ data, onFilter, onSimplify }: FilterProps) => {
                 methods.add(label.response)
             }
             payloadType.add(label.type)
+            if (label.callid !== undefined) {
+                callid.add(label.callid)
+            }
         })
         setIpsArray(Array.from(ips))
         // setPortsArray(Array.from(ports))
         // setIpPortsArray(Array.from(ipPorts))
         setMethodsArray(Array.from(methods))
         setPayloadTypesArray(Array.from(payloadType))
+        setCallidsArray(Array.from(callid))
         setFilters({
             ip: Object.fromEntries([...ips].map(ip => [ip, true])),
             port: Object.fromEntries([...ports].map(port => [port, true])),
             ipPort: Object.fromEntries([...ipPorts].map(ipPort => [ipPort, true])),
             method: Object.fromEntries([...methods].map(method => [method, true])),
             type: Object.fromEntries([...payloadType].map(type => [type, true])),
+            callid: Object.fromEntries([...callid].map(callid => [callid, true])),
         })
     }, [data])
     useEffect(() => {
@@ -86,9 +107,20 @@ export const FilterPanel = ({ data, onFilter, onSimplify }: FilterProps) => {
                 `
             )}
         >
-            <InlineSwitch showLabel={true} defaultChecked={false} value={isSimplify} onChange={() => { setIsSimplify(!isSimplify); }} label="Simple format" />
+            <Tooltip
+                content={`Changes display to simple format, which is more compact and doesn't have "${options?.aboveArrow}" ${options?.belowArrow && options?.aboveArrow ? 'and' : ''} "${options?.belowArrow}" labels`} placement="top">
+                <span style={{ display: 'flex', flexDirection: 'column' }}>
+                    <InlineSwitch
+                        showLabel={true}
+                        defaultChecked={false}
+                        value={isSimplify}
+                        onChange={() => { setIsSimplify(!isSimplify); }}
+                        label="Simple format" />
+                </span>
+            </Tooltip>
             <hr />
-            <MyCollapse label="Payload type">
+            {payloadTypesArray.length > 0 &&
+                <MyCollapse label="Payload type" filterState={filters} filterProperty={'type'} setFilters={setFilters} filterLabel={"type"}>
                 <HorizontalGroup spacing="md" >
                     {payloadTypesArray.map((payloadType) => (
                         <Checkbox value={filters?.type?.[payloadType]} key={payloadType} defaultChecked={true} label={payloadType} onChange={(v) => {
@@ -97,8 +129,10 @@ export const FilterPanel = ({ data, onFilter, onSimplify }: FilterProps) => {
                     ))}
                 </HorizontalGroup>
             </MyCollapse>
-            <MyCollapse label="Method">
-                <HorizontalGroup spacing="md" wrap={true}>
+            }
+            {methodsArray.length > 0 &&
+                <MyCollapse label="Method" filterState={filters} filterProperty={'method'} setFilters={setFilters} filterLabel={"response"}>
+                    <HorizontalGroup spacing="md" wrap={true}>
                     {methodsArray.map((method) => (
                         <Checkbox value={filters?.method?.[method]} key={method} defaultChecked={true} label={method} onChange={(v) => {
                             setFilters({ ...filters, method: { ...filters.method, [method]: (v.target as HTMLInputElement).checked } })
@@ -106,14 +140,27 @@ export const FilterPanel = ({ data, onFilter, onSimplify }: FilterProps) => {
                     ))}
                 </HorizontalGroup>
             </MyCollapse>
-
-            <MyCollapse label="IP">
-                <HorizontalGroup spacing="md" wrap={true}>
+            }
+            {ipsArray.length > 0 &&
+                <MyCollapse label="IP" filterState={filters} filterProperty={'ip'} setFilters={setFilters} filterLabel={`src_ip" or "dst_ip`}>
+                    <HorizontalGroup spacing="md" wrap={true}>
                     {ipsArray.map((ip) => (
                         <Checkbox value={filters?.ip?.[ip]} key={ip} defaultChecked={true} label={ip} onChange={(v) => setFilters({ ...filters, ip: { ...filters.ip, [ip]: (v.target as HTMLInputElement).checked } })} />
                     ))}
                 </HorizontalGroup>
             </MyCollapse>
+            }
+            {callidsArray.length > 0 &&
+                <MyCollapse label="Call ID" filterState={filters} filterProperty={'callid'} setFilters={setFilters} filterLabel={`callid`}>
+                    <HorizontalGroup spacing="md" wrap={true}>
+                        {callidsArray.map((callid) => (
+                            <Checkbox value={filters?.callid?.[callid]} key={callid} defaultChecked={true} label={callid} onChange={(v) => setFilters({ ...filters, callid: { ...filters.callid, [callid]: (v.target as HTMLInputElement).checked } })} />
+
+                        ))}
+
+                    </HorizontalGroup>
+                </MyCollapse>
+            }
         </span>
     );
     const themeName: string = useTheme2().name;
@@ -125,23 +172,65 @@ export const FilterPanel = ({ data, onFilter, onSimplify }: FilterProps) => {
             onClose={() => { onFilter(filters); onSimplify(isSimplify) }}
         >
             <Button className={cx(css`
-                  position: absolute;
-                  top: 15px;
-                  right: 40px;
                   border: 1px solid ${themeName === 'Dark' ? 'hsla(240, 18.6%, 83.1%, 0.12)' : 'hsla(210, 12.2%, 16.1%, 0.12)'};
                   border-radius: 2px;
-                  background-color: ${themeName === 'Dark' ? 'hsla(0, 0%, 0%, 0.5)' : 'hsla(0, 0%, 100%, 0.5)'};
-                  z-index: 2;
+                  background-color: ${themeName === 'Dark' ? 'hsla(0, 0%, 0%, 0.3)' : 'hsla(0, 0%, 100%, 0.3)'};
                 `)} id="filter" icon="filter" fill="text" variant="secondary" />
         </Toggletip>
 
     )
 }
-const MyCollapse = ({ label, children }: any) => {
+interface MyCollapseProps {
+    label: string;
+    children: React.ReactNode;
+    filterState: any;
+    filterProperty: string;
+    setFilters: React.Dispatch<React.SetStateAction<any>>;
+    filterLabel: string;
+}
+const MyCollapse = ({ label, children, filterState, filterProperty, setFilters, filterLabel }: MyCollapseProps) => {
     const [isOpen, setIsOpen] = useState(false)
+    const [indeterminate, setIndeterminate] = useState(false)
+    const [checked, setChecked] = useState(false)
+    useEffect(() => {
+        let count = 0
+        const keys = Object.values(filterState[filterProperty])
+        keys.forEach(item => {
+            if (item) {
+                count += 1
+            }
+        })
+        console.log(count, keys.length, filterState[filterProperty])
+        setIndeterminate(count > 0 && count < keys.length)
+        setChecked(count === keys.length)
+    }, [filterState, filterProperty])
+    const setFilterState = () => {
+
+        setFilters(() => ({
+            ...filterState,
+            [filterProperty]: Object.fromEntries(
+                Object.entries(filterState[filterProperty]).map(([key]) => [key, !checked])
+            ),
+        }));
+
+    } 
     return (
-        <Collapse collapsible={true} isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} label={label}>
-            {children}
+
+        <span style={{ position: 'relative', width: '100%' }}>
+            <span style={{ position: 'absolute', left: '28px', right: 0, top: '10px', display: 'flex', alignItems: 'center' }}>
+                <Checkbox indeterminate={indeterminate} checked={checked} onChange={setFilterState} />
+                <span style={{ zIndex: 1, marginLeft: '8px', pointerEvents: 'none' }}>{label}</span>
+
+                <Tooltip content={`Filters by "${filterLabel}" label`}>
+                    <Icon name="question-circle" style={{ zIndex: 1, position: 'absolute', right: '10px' }} size="xl"></Icon>
+                </Tooltip>
+            </span>
+            <Collapse collapsible={true} isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} label={''}>
+                    <div className={getStyles().collapseChildrenWrapper}>
+
+                        {children}
+                    </div>
         </Collapse>
+        </span>
     )
 }
diff --git a/src/components/SimplePanel.tsx b/src/components/SimplePanel.tsx
index 27e6f2a..aa01635 100644
--- a/src/components/SimplePanel.tsx
+++ b/src/components/SimplePanel.tsx
@@ -1,19 +1,8 @@
 import { css, cx } from '@emotion/css';
-import { PanelProps, StandardEditorProps } from '@grafana/data';
-import { DateTime } from "luxon";
+import { GrafanaTheme2, PanelProps, StandardEditorProps } from '@grafana/data';
 import React, { useEffect, useRef, useState } from 'react';
 import ReactJson from 'react-json-view';
 import './../../ngx-flow/widget/ngx-flow.js';
-// @ts-ignore
-import packets from '../libs/packets.js';
-// @ts-ignore
-import { configure } from 'pcap-generator';
-import { Buffer } from 'buffer';
-const ip = packets.ipPacket
-const udp = packets.udpPacket
-const tcp = packets.tcpPacket
-const ethernet = packets.ethernetPacket
-
 
 import {
     Button,
@@ -25,8 +14,9 @@ import {
     useStyles2,
     useTheme2
 } from '@grafana/ui';
-import { convertDateToFileName } from 'helpers/convertDateToFileName';
-import { hash } from 'helpers/hash';
+import { filterFlowItems } from 'helpers/dataProcessors/filterFlowItems';
+import { pcapExporter, textExporter } from 'helpers/exporters';
+import { CopyText } from './CopyText/CopyText';
 import { FilterPanel, Filters } from './FilterPanel/FilterPanel';
 
 
@@ -45,8 +35,6 @@ declare global {
         }
     }
 }
-export let valueLabelsName: string[] = [];
-let bufferCheck = '';
 
 export const TemplateEditor = ({ value, onChange }: StandardEditorProps<string>) => {
     const [isOpen, setIsOpen] = React.useState(false);
@@ -56,7 +44,7 @@ export const TemplateEditor = ({ value, onChange }: StandardEditorProps<string>)
     const templateData = JSON.stringify({
         actors: [], data: [{
             messageID: 'messageID',
-            subTitle: 'subTitle',
+            details: 'details',
             source: 'source',
             destination: 'destination',
             title: 'title',
@@ -75,20 +63,23 @@ export const TemplateEditor = ({ value, onChange }: StandardEditorProps<string>)
         </div>
     </Collapse>;
 }
-export const SimpleEditor = ({ value, onChange }: StandardEditorProps<string[]>) => {
+export const SimpleEditor = ({ value, onChange, context: { data } }: StandardEditorProps<string[]>) => {
     const [selectValue, setSelectValue] = React.useState<any>();
-    const [forRerender, setForRerender] = React.useState<any>(0);
-
-    if (bufferCheck !== JSON.stringify(valueLabelsName) || valueLabelsName?.length === 0) {
-        setTimeout(() => {
-            bufferCheck = JSON.stringify(valueLabelsName)
-            setSelectValue(value);
-            setForRerender(forRerender + 1);
-        }, 200)
-    }
+    const [labels, setLabels] = useState<string[]>([])
 
+    useEffect(() => {
+        const dataEntry = data?.[0];
+        if (dataEntry && dataEntry.fields) {
+            const labelField = dataEntry.fields[0];
+            const labels = Object.keys(labelField.values[0])
+            setLabels(labels)
+        }
+    }, [data])
+    useEffect(() => {
+        setSelectValue(value)
+    }, [value])
     return <MultiSelect
-        options={valueLabelsName.map((i: any) => ({ label: i, value: i }))}
+        options={labels.map((i: any) => ({ label: i, value: i }))}
         value={selectValue}
         onChange={(v: any[]) => {
             setSelectValue(v);
@@ -97,7 +88,7 @@ export const SimpleEditor = ({ value, onChange }: StandardEditorProps<string[]>)
     />;
 };
 
-const getStyles = () => {
+const getStyles = ({ name: themeName }: GrafanaTheme2) => {
     return {
         wrapper: css`
       font-family: Open Sans;
@@ -114,11 +105,30 @@ const getStyles = () => {
     `,
         pre: css`
       white-space: pre-wrap;
+    `,
+        buttonWrapper: css`
+       position: absolute;
+       right: 20px; 
+       top: -15px; 
+       display: flex; 
+       z-index: 3;
+       border: 1px solid ${themeName === 'Dark' ? 'hsla(240, 18.6%, 83.1%, 0.12)' : 'hsla(210, 12.2%, 16.1%, 0.12)'};
+       border-radius: 2px;
+        padding: 0.2em;
+       > * {
+         margin: 0 5px;
+         
+       }
+       &:hover {
+           background-color: ${themeName === 'Dark' ? 'hsla(0, 0%, 0%, 0.8)' : 'hsla(0, 0%, 100%, 0.8)'};
+       }
+
     `
+
     };
 };
 
-export const DetaiItem: React.FC<any> = ({ item, theme }: any): JSX.Element | null => {
+export const DetailItem: React.FC<any> = ({ item, theme }: any): JSX.Element | null => {
     let [key, value]: any = item;
     const themeName: any = theme === 'Dark' ? 'railscasts' : 'rjv-default'
     let isJSON = false;
@@ -171,7 +181,15 @@ export const DetaiItem: React.FC<any> = ({ item, theme }: any): JSX.Element | nu
 
                     />
                 </pre> :
-                <pre className={styles.pre}>{value}</pre>
+                <span style={{ position: 'relative' }}>
+                    <pre className={styles.pre}>
+                        {value}
+                    </pre>
+                    <span style={{ position: 'absolute', right: 15, top: 32 }}>
+
+                        <CopyText text={value} />
+                    </span>
+                </span>
             }
         </> : <>
         </>}
@@ -183,50 +201,6 @@ let ngxFlowClickHandler: Function = function () { };
 document.addEventListener('ngx-flow-click-item', function (e: any) {
     ngxFlowClickHandler(e)
 });
-
-function formattingDataAndSortIt(data: any, sortType = 'none') {
-
-    let [firstField] = data || [];
-
-    const unSortData = firstField?.values?.map((i: any, k: number) => {
-        const outData: any = {};
-        data.forEach((item: any) => {
-            outData[item.name] = item?.values?.[k];
-        });
-        if (outData?.Time && typeof outData?.labels === 'object') {
-            outData['labels'].timestamp = outData.Time;
-        }
-        return outData;
-    }) || [];
-    if (sortType === 'none') {
-        return unSortData;
-    }
-    const sortData = unSortData.sort((itemA: any, itemB: any) => {
-        if (itemA.tsNs && itemB.tsNs) {
-            const a = itemA.tsNs;
-            const b = itemB.tsNs;
-            return a < b ? -1 : a > b ? 1 : 0;
-        } else {
-            const a = itemA.Time;
-            const b = itemB.Time;
-            return a < b ? -1 : a > b ? 1 : 0;
-        }
-    });
-    if (sortType === 'time_old') {
-        return sortData;
-    }
-
-    if (sortType === 'time_new') {
-        return sortData.reverse();
-    }
-
-}
-
-interface Labels {
-    [key: string]: string
-}
-
-
 export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {
     const [flowData, setFlowData] = React.useState({ actors: [], data: [] });
     const [modalIsOpen, setModalIsOpen] = React.useState(false);
@@ -239,37 +213,7 @@ export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) =
     // Export .txt
     useEffect(() => {
         const handler = (e: any) => {
-
-            const [serie]: any = (data as any)?.series || [];
-            const fields = serie?.fields || [];
-            const lineField = fields.find((i: any) => i.name === 'Line') ?? [];
-            const exportText = lineField?.values.map((i: string, index: number) => {
-                let dt = DateTime.fromMillis(fields[0]?.values[index]?.timestamp).toISO()
-                dt = dt?.replace('+', '000+') ?? '';
-                if (fields[0]?.values[index]?.type !== 'sip') {
-                    i = '';
-                }
-                let proto = 'proto:'
-                if (i.includes('UDP')) {
-                    proto += "UDP"
-                } else if (i.includes('TCP')) {
-                    proto += "TCP"
-                }
-                return `${proto} ${dt} ${fields[0]?.values[index]?.src_ip} ---> ${fields[0]?.values[index]?.dst_ip} \n\n${i}`
-            }).join('\n');
-            // Create element with <a> tag
-            const link = document.createElement("a");
-
-            // Create a blog object with the file content which you want to add to the file
-            const file = new Blob([exportText], { type: 'text/plain' });
-
-            // Add file content in the object URL
-            link.href = URL.createObjectURL(file);
-
-            // Add file name
-            const date = new Date();
-            link.download = `${convertDateToFileName(date)}.txt`;
-            link.click();
+            textExporter(data);
         }
         document.addEventListener('export-flow-as-text', handler);
         return () => {
@@ -279,154 +223,20 @@ export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) =
     // Export .pcap
     useEffect(() => {
         const handler = (e: any) => {
-
-            const [serie]: any = (data as any)?.series || [];
-            const fields = serie?.fields || [];
-            const lineField = fields.find((i: any) => i.name === 'Line') ?? [];
-            const values = fields[0]?.values.map((item: any, index: number) => {
-                item.line = lineField?.values[index];
-                return item
-            }).filter((packet: any) => packet.type === 'sip')
-            const sequenceMap = new Map<string, number>();
-            const ipv4_regex = /(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)){3}/;
-            const packets2 = values.sort((a: any, b: any) => {
-                return a.timestamp - b.timestamp
-            }).map((labels: Labels, index: number) => {
-                let line = labels.line
-                let proto = ''
-                line = line?.replace('UDP', 'TCP')
-                if (line.includes('UDP')) {
-                    proto += "UDP"
-                } else if (line.includes('TCP')) {
-                    proto += "TCP"
-                }
-                const fieldObj = {
-                    data: line,
-                    srcIp: labels.src_ip,
-                    dstIp: labels.dst_ip,
-                    srcPort: labels.src_port,
-                    dstPort: labels.dst_port,
-                    ts: fields[0]?.values[index]?.timestamp,
-                    proto: proto === 'UDP' ? 17 : 6,
-                    type: fields[0]?.values[index]?.type,
-                    trafficClass: 0,
-                    flowLabel: 0,
-                    nextHeader: proto === 'UDP' ? 17 : 6
-                }
-                const hash = `${fieldObj.srcIp}:${fieldObj.srcPort}->${fieldObj.dstIp}:${fieldObj.dstPort}`
-                const sequence = sequenceMap.get(hash) ?? 1
-                const packet_data = proto === 'UDP' ? udp.encode({
-                    sourcePort: fieldObj.srcPort,
-                    destinationPort: fieldObj.dstPort,
-                    data: Buffer.from(line)
-                }) : tcp.encode({
-                    sourcePort: fieldObj.srcPort,
-                    destinationPort: fieldObj.dstPort,
-                    data: Buffer.from(line),
-                    sequenceNumber: sequence,
-                    acknowledgmentNumber: 0,
-                    ack: true,
-                    psh: true,
-                    syn: false,
-                })
-
-                let ip_packet = ip.encode({
-                    version: ipv4_regex.test(fieldObj.dstIp) ? 4 : 6,
-                    protocol: fieldObj.proto,
-                    sourceIp: fieldObj.srcIp,
-                    destinationIp: fieldObj.dstIp,
-                    data: packet_data,
-                    ttl: 112,
-                    nextHeader: fieldObj.nextHeader,
-                    trafficClass: fieldObj.trafficClass,
-                    flowLabel: fieldObj.flowLabel
-                })
-                let ethernetPacket = ethernet.encode({
-                    data: ip_packet,
-                    type: ipv4_regex.test(fieldObj.dstIp) ? '0800' : '86dd'
-                })
-                if (proto === 'TCP') {
-                    sequenceMap.set(hash, (sequenceMap.get(hash) ?? 1) + Buffer.from(line).length)
-                }
-                return {
-                    timestamp: fieldObj.ts,
-                    buffer: ethernetPacket,
-                    type: fields[0]?.values[index]?.type
-                }
-            })
-            const generator = configure({ Buffer: Buffer, snapshotLength: 102400, linkLayerType: 1 })
-            const pcapFile = generator(packets2)
-            const blob = new Blob([pcapFile], { type: 'application/vnd.tcpdump.pcap' });
-            // // Create element with <a> tag
-            const link = document.createElement("a");
-
-            // Add file content in the object URL
-            link.href = URL.createObjectURL(blob);
-
-            // Add file name
-            const date = new Date();
-            link.download = `${convertDateToFileName(date)}.pcap`;
-            link.click();
-
+            pcapExporter(data);
         }
         document.addEventListener('export-flow-as-pcap', handler);
         return () => {
             document.removeEventListener('export-flow-as-pcap', handler)
         }
     }, [data])
+    const themeName: string = useTheme2().name;
     const styles = useStyles2(getStyles);
-    const [filters, setFilters] = useState<Filters>({ ip: {}, port: {}, ipPort: {}, method: {}, type: {} })
+    const [filters, setFilters] = useState<Filters>({ ip: {}, port: {}, ipPort: {}, method: {}, type: {}, callid: {} });
     // Set flow data and sort
     useEffect(() => {
-        console.log(filters)
-        const [serie]: any = (data as any)?.series || [];
-        const fields = serie?.fields || [];
-        if (fields) {
-            const [firsField]: any = fields;
-            const sortData = formattingDataAndSortIt(fields, options.sortoption);
-            const outData = firsField?.values;
-            const map = new Map();
-            if (outData) {
-                valueLabelsName = Object.keys(outData?.[0] || {});
-                setFlowData({
-                    actors: [], data: sortData.map((item: any) => {
-                        const message: string = item.Line || '';
-                        const labelItem: any = item.labels || {};
-                        const _ = (optionArr: string[] | string) => {
-                            if (optionArr instanceof Array) {
-                                return optionArr.map((option: string) => labelItem[option]).filter((a: any) => !!a).join(':');
-                            }
-                            return labelItem[optionArr] || '';
-                        };
-                        const itemHash = hash(JSON.stringify(item))
-                        map.set(itemHash, item);
-
-                        const isSrcIPDisabled = !(filters?.['ip']?.[labelItem.src_ip] ?? true)
-                        const isDstIPDisabled = !(filters?.['ip']?.[labelItem.dst_ip] ?? true)
-                        const isSrcPortDisabled = !(filters?.['port']?.[labelItem.src_port] ?? true)
-                        const isDstPortDisabled = !(filters?.['port']?.[labelItem.dst_port] ?? true)
-                        const isSrcIpPortDisabled = !(filters?.['ipPort']?.[labelItem.src_ip + ':' + labelItem.src_port] ?? true)
-                        const isDstIpPortDisabled = !(filters?.['ipPort']?.[labelItem.dst_ip + ':' + labelItem.dst_port] ?? true)
-                        const isMethodDisabled = !(filters?.['method']?.[labelItem.response] ?? true)
-                        const isTypeDisabled = !(filters?.['type']?.[labelItem.type] ?? true)
-                        const hidden = isSrcIPDisabled || isDstIPDisabled || isSrcPortDisabled || isDstPortDisabled || isSrcIpPortDisabled || isDstIpPortDisabled || isMethodDisabled || isTypeDisabled
-                        return {
-                            messageID: _(options.colorGenerator) || 'Title',
-                            subTitle: options.showbody && message,
-                            source: _(options.source) || '...',
-                            destination: _(options.destination) || '...',
-                            title: _(options.title) || '',
-                            aboveArrow: _(options.aboveArrow) || '',
-                            belowArrow: _(options.belowArrow) || '',
-                            sourceLabel: _(options.sourceLabel) || '',
-                            destinationLabel: _(options.destinationLabel) || '',
-                            hidden,
-                            hash: itemHash
-                        }
-                    }).filter((item: any) => !item.hidden)
-                })
-                setModalDataFields(map);
-            }
+        if (data && options) {
+            filterFlowItems(data, options, setFlowData, setModalDataFields, filters);
         }
     }, [data, options, filters]);
     console.log(flowData)
@@ -438,7 +248,6 @@ export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) =
         setModalData(details);
         setModalIsOpen(true);
     };
-    const themeName: string = useTheme2().name;
     const flowDataJSON = JSON.stringify(flowData);
     const menu = (
         <Menu>
@@ -473,24 +282,23 @@ export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) =
         `
             )}
         >
-            <FilterPanel data={data} onFilter={setFilters} onSimplify={setIsSimplify} />
-            {data?.request?.app === 'dashboard' && (
-                // <span >
-                <Dropdown overlay={menu}>
+            <div id="buttons" className={styles.buttonWrapper}>
 
-                    <Button className={cx(
-                        css`
-              position: absolute;
-              top: 15px;
-              right: 80px;
+                <FilterPanel data={data} onFilter={setFilters} onSimplify={setIsSimplify} options={options} />
+                {(data?.request?.app !== 'app') && (
+                    // <span >
+                    <Dropdown overlay={menu}>
+
+                        <Button className={cx(
+                            css`
               border: 1px solid ${themeName === 'Dark' ? 'hsla(240, 18.6%, 83.1%, 0.12)' : 'hsla(210, 12.2%, 16.1%, 0.12)'};
               border-radius: 2px;
               background-color: ${themeName === 'Dark' ? 'hsla(0, 0%, 0%, 0.5)' : 'hsla(0, 0%, 100%, 0.5)'};
-              z-index: 2;
             `)} icon="bars" fill="text" variant="secondary" />
-                </Dropdown>
-                // </span>/
-            )}
+                    </Dropdown>
+                    // </span>/
+                )}
+            </div>
             {/* <pre>{JSON.stringify(flowData)}</pre> */}
             {/* <FlowMemo flowData={flowData} themeName={themeName} /> */}
             <ngx-flow-out data-flow={flowDataJSON} is-simplify={isSimplify} theme={themeName} />
@@ -498,7 +306,7 @@ export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) =
             <Modal title="Message Details" isOpen={modalIsOpen} onDismiss={onModalClose}>
                 {modalData && Object.entries(modalData).map((item: any, key: number) => (
                     // <p>{item} | {key}</p>
-                    <DetaiItem item={item} key={key} theme={themeName} />
+                    <DetailItem item={item} key={key} theme={themeName} />
                 ))}
                 <Button variant="primary" onClick={onModalClose}>
                     Close
diff --git a/src/helpers/dataProcessors/filterFlowItems.ts b/src/helpers/dataProcessors/filterFlowItems.ts
new file mode 100644
index 0000000..9c12543
--- /dev/null
+++ b/src/helpers/dataProcessors/filterFlowItems.ts
@@ -0,0 +1,60 @@
+import { PanelData } from "@grafana/data";
+import { Filters } from "components/FilterPanel/FilterPanel";
+import { hash } from "helpers/hash";
+import { labelFormatter } from "helpers/labelFormatter";
+import { formatAndSortFlowItems } from "./formatAndSortFlowItems";
+
+export const filterFlowItems = (data: PanelData, options: any, setFlowData: Function, setModalDataFields: Function, filters: Filters) => {
+    console.log(filters)
+    const [serie] = (data)?.series || [];
+    const fields = serie?.fields || [];
+    if (fields) {
+        const [firstField] = fields;
+        const sortData = formatAndSortFlowItems(data, options.sortoption);
+        const outData = firstField?.values;
+        const map = new Map();
+        if (outData) {
+            setFlowData({
+                actors: [], data: sortData.map((item: any) => {
+                    const message: string = item.Line || '';
+                    const labelItem: any = item.labels || {};
+                    const getOptionValue = (optionArr: string[] | string) => {
+                        if (optionArr instanceof Array) {
+                            return optionArr.map((option: string) => labelFormatter(labelItem[option], option)).filter((a: any) => !!a).join(':');
+                        }
+                        return labelItem[optionArr] || '';
+                    };
+                    const itemHash = hash(JSON.stringify(item))
+                    map.set(itemHash, item);
+
+                    const isSrcIPDisabled = !(filters?.['ip']?.[labelItem.src_ip] ?? true)
+                    const isDstIPDisabled = !(filters?.['ip']?.[labelItem.dst_ip] ?? true)
+                    const isSrcPortDisabled = !(filters?.['port']?.[labelItem.src_port] ?? true)
+                    const isDstPortDisabled = !(filters?.['port']?.[labelItem.dst_port] ?? true)
+                    const isSrcIpPortDisabled = !(filters?.['ipPort']?.[labelItem.src_ip + ':' + labelItem.src_port] ?? true)
+                    const isDstIpPortDisabled = !(filters?.['ipPort']?.[labelItem.dst_ip + ':' + labelItem.dst_port] ?? true)
+                    const isMethodDisabled = !(filters?.['method']?.[labelItem.response] ?? true)
+                    const isTypeDisabled = !(filters?.['type']?.[labelItem.type] ?? true)
+                    const isCallidDisabled = !(filters?.['callid']?.[labelItem.callid] ?? true)
+                    const hidden = isSrcIPDisabled || isDstIPDisabled || isSrcPortDisabled || isDstPortDisabled || isSrcIpPortDisabled || isDstIpPortDisabled || isMethodDisabled || isTypeDisabled || isCallidDisabled
+
+                    return {
+                        messageID: getOptionValue(options.colorGenerator) || 'Title',
+                        details: getOptionValue(options.details) || '',
+                        line: options.showbody && message || '',
+                        source: getOptionValue(options.source) || '...',
+                        destination: getOptionValue(options.destination) || '...',
+                        title: getOptionValue(options.title) || '',
+                        aboveArrow: getOptionValue(options.aboveArrow) || '',
+                        belowArrow: getOptionValue(options.belowArrow) || '',
+                        sourceLabel: getOptionValue(options.sourceLabel) || '',
+                        destinationLabel: getOptionValue(options.destinationLabel) || '',
+                        hidden,
+                        hash: itemHash
+                    }
+                }).filter((item: any) => !item.hidden)
+            })
+            setModalDataFields(map);
+        }
+    }
+}
diff --git a/src/helpers/dataProcessors/formatAndSortFlowItems.ts b/src/helpers/dataProcessors/formatAndSortFlowItems.ts
new file mode 100644
index 0000000..10ac070
--- /dev/null
+++ b/src/helpers/dataProcessors/formatAndSortFlowItems.ts
@@ -0,0 +1,79 @@
+import { PanelData } from "@grafana/data";
+export interface FlowItem {
+    labels: Labels;
+    Time: number;
+    Line: string;
+    tsNs: string;
+    id: string;
+    callid: string;
+    correlationId: string | null;
+    traceId: string | null;
+    traceID: string | null;
+}
+
+
+export interface Labels {
+    callid?: string;
+    dst_ip: string;
+    dst_port: string;
+    hostname: string;
+    job: string;
+    method?: string;
+    node: string;
+    response?: string;
+    src_ip: string;
+    src_port: string;
+    type: Type;
+    timestamp: number;
+    protocol?: string;
+}
+
+
+export enum Type {
+    Log = "log",
+    Rtcp = "rtcp",
+    SIP = "sip",
+}
+
+export const formatAndSortFlowItems = (data: PanelData, sortType: "none" | "time_old" | "time_new" = 'none'): FlowItem[] => {
+
+    const [serie] = data?.series || [];
+    const fields = serie?.fields || [];
+    if (fields) {
+        const [firstField] = fields;
+
+        const unSortData = firstField?.values?.map((i: any, k: number) => {
+            const outData: any = {};
+            fields.forEach((item: any) => {
+                outData[item.name] = item?.values?.[k];
+            });
+            if (outData?.Time && typeof outData?.labels === 'object') {
+                outData['labels'].timestamp = outData.Time;
+            }
+            return outData;
+        }) || [];
+        if (sortType === 'none') {
+            return unSortData;
+        }
+        const sortData = unSortData.sort((itemA: any, itemB: any) => {
+            if (itemA.tsNs && itemB.tsNs) {
+                const a = itemA.tsNs;
+                const b = itemB.tsNs;
+                return a < b ? -1 : a > b ? 1 : 0;
+            } else {
+                const a = itemA.Time;
+                const b = itemB.Time;
+                return a < b ? -1 : a > b ? 1 : 0;
+            }
+        });
+        if (sortType === 'time_old') {
+            return sortData;
+        }
+
+        if (sortType === 'time_new') {
+            return sortData.reverse();
+        }
+
+    }
+    return []
+}
diff --git a/src/helpers/dataProcessors/index.ts b/src/helpers/dataProcessors/index.ts
new file mode 100644
index 0000000..e9f11f5
--- /dev/null
+++ b/src/helpers/dataProcessors/index.ts
@@ -0,0 +1 @@
+export * from './filterFlowItems'
diff --git a/src/helpers/exporters/index.ts b/src/helpers/exporters/index.ts
new file mode 100644
index 0000000..e291562
--- /dev/null
+++ b/src/helpers/exporters/index.ts
@@ -0,0 +1,3 @@
+
+export * from "./pcapExporter"
+export * from "./textExporter"
diff --git a/src/helpers/exporters/pcapExporter.ts b/src/helpers/exporters/pcapExporter.ts
new file mode 100644
index 0000000..3a392d4
--- /dev/null
+++ b/src/helpers/exporters/pcapExporter.ts
@@ -0,0 +1,87 @@
+import { Labels, PanelData } from "@grafana/data";
+import { convertDateToFileName } from "helpers/convertDateToFileName";
+import { encodeEthernetFrame } from "helpers/packets/ethernetPacket";
+import { encodeIPV4Packet, encodeIPV6Packet } from "helpers/packets/ipPacket";
+import { encodeTCPFrame } from "helpers/packets/tcpPacket";
+import { encodeUDPFrame } from "helpers/packets/udpPacket";
+import { Buffer } from 'buffer';
+// @ts-ignore
+import { configure } from 'pcap-generator';
+
+export const pcapExporter = (data: PanelData) => {
+    const [serie]: any = (data as any)?.series || [];
+    const fields = serie?.fields || [];
+    const lineField = fields.find((i: any) => i.name === 'Line') ?? [];
+    // Adds SIP message body to each packet and then filters out non-sip packets
+    const values = fields[0]?.values.map((item: any, index: number) => {
+        item.line = lineField?.values[index];
+        return item
+    }).filter((packet: any) => packet.type === 'sip')
+    const sequenceMap = new Map<string, number>();
+    const ipv4_regex = /(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)){3}/;
+    const packets2 = values.sort((a: any, b: any) => {
+        return a.timestamp - b.timestamp
+    }).map((labels: Labels, index: number) => {
+        let line = labels.line
+        let proto = ''
+        if (line.includes('UDP')) {
+            proto += "UDP"
+        } else if (line.includes('TCP')) {
+            proto += "TCP"
+        }
+        const fieldObj = {
+            data: line,
+            srcIp: labels.src_ip,
+            dstIp: labels.dst_ip,
+            srcPort: labels.src_port,
+            dstPort: labels.dst_port,
+            ts: fields[0]?.values[index]?.timestamp,
+            proto: proto === 'UDP' ? 17 : 6 as 6 | 17,
+            type: fields[0]?.values[index]?.type
+        }
+        const hash = `${fieldObj.srcIp}:${fieldObj.srcPort}->${fieldObj.dstIp}:${fieldObj.dstPort}`
+        const sequence = sequenceMap.get(hash) ?? 1
+        const packet_data = proto === 'UDP' ? encodeUDPFrame({
+            sourcePort: fieldObj.srcPort,
+            destinationPort: fieldObj.dstPort,
+            data: Buffer.from(line)
+        }) : encodeTCPFrame({
+            sourcePort: fieldObj.srcPort,
+            destinationPort: fieldObj.dstPort,
+            sequenceNumber: sequence,
+            data: Buffer.from(line)
+        })
+        let ip_packet = ipv4_regex.test(fieldObj.dstIp) ? encodeIPV4Packet({
+            protocol: fieldObj.proto,
+            sourceIp: fieldObj.srcIp,
+            destinationIp: fieldObj.dstIp,
+            data: packet_data,
+        }) : encodeIPV6Packet({
+            protocol: fieldObj.proto,
+            sourceIp: fieldObj.srcIp,
+            destinationIp: fieldObj.dstIp,
+            data: packet_data,
+        })
+        let ethernetPacket = encodeEthernetFrame({
+            data: ip_packet,
+            type: ipv4_regex.test(fieldObj.dstIp) ? '0800' : '86dd'
+        })
+        if (proto === 'TCP') {
+            sequenceMap.set(hash, (sequenceMap.get(hash) ?? 1) + Buffer.from(line).length)
+        }
+        return {
+            timestamp: fieldObj.ts,
+            buffer: ethernetPacket,
+            type: fields[0]?.values[index]?.type
+        }
+    })
+    const generator = configure({ Buffer: Buffer, snapshotLength: 102400, linkLayerType: 1 })
+    const pcapFile = generator(packets2)
+    const blob = new Blob([pcapFile], { type: 'application/vnd.tcpdump.pcap' });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    const date = new Date();
+    link.download = `${convertDateToFileName(date)}.pcap`;
+    link.click();
+    return data;
+}
diff --git a/src/helpers/exporters/textExporter.ts b/src/helpers/exporters/textExporter.ts
new file mode 100644
index 0000000..22f4c65
--- /dev/null
+++ b/src/helpers/exporters/textExporter.ts
@@ -0,0 +1,36 @@
+import { PanelData } from "@grafana/data";
+import { convertDateToFileName } from "helpers/convertDateToFileName";
+import { DateTime } from "luxon";
+
+export const textExporter = (data: PanelData) => {
+    const [serie]: any = (data as any)?.series || [];
+    const fields = serie?.fields || [];
+    const lineField = fields.find((i: any) => i.name === 'Line') ?? [];
+    const exportText = lineField?.values.map((i: string, index: number) => {
+        let dt = DateTime.fromMillis(fields[0]?.values[index]?.timestamp).toISO()
+        dt = dt?.replace('+', '000+') ?? '';
+        if (fields[0]?.values[index]?.type !== 'sip') {
+            i = '';
+        }
+        let proto = 'proto:'
+        if (i.includes('UDP')) {
+            proto += "UDP"
+        } else if (i.includes('TCP')) {
+            proto += "TCP"
+        }
+        return `${proto} ${dt} ${fields[0]?.values[index]?.src_ip} ---> ${fields[0]?.values[index]?.dst_ip} \n\n${i}`
+    }).join('\n');
+    // Create element with <a> tag
+    const link = document.createElement("a");
+
+    // Create a blog object with the file content which you want to add to the file
+    const file = new Blob([exportText], { type: 'text/plain' });
+
+    // Add file content in the object URL
+    link.href = URL.createObjectURL(file);
+
+    // Add file name
+    const date = new Date();
+    link.download = `${convertDateToFileName(date)}.txt`;
+    link.click();
+}
diff --git a/src/helpers/labelFormatter.ts b/src/helpers/labelFormatter.ts
new file mode 100644
index 0000000..a58647c
--- /dev/null
+++ b/src/helpers/labelFormatter.ts
@@ -0,0 +1,13 @@
+import { DateTime } from "luxon"
+
+export const labelFormatter = (labelData: string, label: string) => {
+    if (label === 'timestamp') {
+        return timestampFormatter(labelData)
+    }
+    return labelData
+}
+
+const timestampFormatter = (timestamp: string) => {
+    let dt = DateTime.fromMillis(parseInt(timestamp, 10))
+    return dt.invalidReason ? timestamp : dt.toFormat('HH:mm:ss.SSS')
+}
diff --git a/src/helpers/packets/ethernetPacket.ts b/src/helpers/packets/ethernetPacket.ts
new file mode 100644
index 0000000..32c5e95
--- /dev/null
+++ b/src/helpers/packets/ethernetPacket.ts
@@ -0,0 +1,22 @@
+
+import { Buffer } from 'buffer';
+
+interface EthernetData {
+    destinationMac?: string;
+    sourceMac?: string;
+    type: '0800' | '86dd';
+    data: Buffer;
+}
+
+export const encodeEthernetFrame = ({ destinationMac = '11:22:33:44:55:66', sourceMac = 'aa:bb:cc:dd:ee:ff', type, data }: EthernetData): Buffer => {
+    const ethernetFrameLength = 14; // Length of Ethernet frame header
+    const totalLength = ethernetFrameLength + data.length;
+    const frame = Buffer.alloc(totalLength);
+
+    destinationMac.split(':').forEach((byte, index) => frame.writeUInt8(parseInt(byte, 16), index));
+    sourceMac.split(':').forEach((byte, index) => frame.writeUInt8(parseInt(byte, 16), index + 6));
+    frame.writeUInt16BE(parseInt(type, 16), 12); // EtherType
+    data.copy(frame, ethernetFrameLength); // Copy payload to frame
+
+    return frame;
+}
diff --git a/src/helpers/packets/ipPacket.ts b/src/helpers/packets/ipPacket.ts
new file mode 100644
index 0000000..2c64e9c
--- /dev/null
+++ b/src/helpers/packets/ipPacket.ts
@@ -0,0 +1,90 @@
+
+import { Buffer } from 'buffer';
+
+interface IpData {
+    protocol: 6 | 17
+    sourceIp: string
+    destinationIp: string
+    data: Buffer
+}
+export const encodeIPV4Packet = ({ protocol = 6, sourceIp, destinationIp, data }: IpData): Buffer => {
+    const offset = 0
+    const buffer = Buffer.alloc(encodingLength(data, 20))
+    // Setting IP type to 4 and header length to 5
+    buffer[offset] = 4 << 4 | 5
+    // Setting DSCP and ECN to 0 as they are unused in our code
+    buffer[offset + 1] = 0 << 2 | 0
+    // Packet length (header + data)
+    buffer.writeUInt16BE(20 + data.length, offset + 2)
+    // Packet identification field, unused in our code, set to 0 
+    buffer.writeUInt16BE(0, offset + 4)
+    // Packet flags and fragment offset, unused in our code, both set to 0
+    buffer.writeUInt16BE(0 << 13 | 0, offset + 6)
+    // Setting TTL to 54
+    buffer[offset + 8] = 54
+    // Setting protocol, in our case only TCP or UDP
+    buffer[offset + 9] = protocol
+    // Writing checksum as 0 to overwrite it later with the correct value after setting IPs
+    buffer.writeUInt16BE(0, offset + 10)
+    // Writing source and destination IPs
+    encodeIPV4Address(sourceIp, buffer, offset + 12)
+    encodeIPV4Address(destinationIp, buffer, offset + 16)
+    // Writing correct checksum
+    buffer.writeUInt16BE(checksum(buffer, offset, offset + 20), offset + 10)
+    data.copy(buffer, offset + 20)
+    return buffer
+}
+const encodeIPV4Address = (ip: string, data: Buffer, offset: number) => {
+    const octets = ip.split('.')
+    for (let i = 0; i < 4; i++) {
+        data[offset++] = parseInt(octets[i], 10)
+    }
+}
+export const encodeIPV6Packet = ({ protocol = 6, sourceIp, destinationIp, data }: IpData): Buffer => {
+    const offset = 0
+    const buffer = Buffer.alloc(encodingLength(data, 40))
+    // Setting IP type to 6
+    buffer.writeUInt32BE(6 << 28, offset);
+    // Packet length (data)
+    buffer.writeUInt16BE(data.length, offset + 4);
+    // Setting protocol, in our case only TCP or UDP
+    buffer[offset + 6] = protocol;
+    // Packet hop limit not provided in our code, set to 64 as default
+    buffer[offset + 7] = 64;
+    // Source and destination IPs    
+    encodeIPV6Address(sourceIp, buffer, offset + 8)
+    encodeIPV6Address(destinationIp, buffer, offset + 24)
+    data.copy(buffer, offset + 40);
+    return buffer
+}
+export const encodeIPV6Address = (ip: string, data: Buffer, offset: number) => {
+    const groups = ip.split(':')
+    if (groups.length < 8) {
+        if (groups.includes('')) {
+            const fillCount = 8 - (groups.length - 1) // -1 to account for the empty string
+            const fillItems = Array(fillCount).fill('0000');
+            const startIndex = groups.indexOf('');
+            groups.splice(startIndex, 1, ...fillItems);
+        }
+    }
+    let currentOffset = offset
+    for (let i = 0; i < groups.length; i++) {
+        const hex = parseInt(groups[i], 16)
+        data.writeUInt16BE(hex, currentOffset)
+        currentOffset += 2
+
+    }
+}
+const checksum = (data: Buffer, offset: number, offsetEnd: number) => {
+    let sum = 0
+    for (; offset < offsetEnd; offset += 2) { sum += data.readUInt16BE(offset) }
+    while (true) {
+        let carry = sum >> 16
+        if (!carry) { break }
+        sum = (sum & 0xffff) + carry
+    }
+    return ~sum & 0xffff
+}
+const encodingLength = (data: Buffer, ipPacketSize: number) => {
+    return ipPacketSize + data.length
+}
diff --git a/src/helpers/packets/tcpPacket.ts b/src/helpers/packets/tcpPacket.ts
new file mode 100644
index 0000000..e990242
--- /dev/null
+++ b/src/helpers/packets/tcpPacket.ts
@@ -0,0 +1,29 @@
+import { Buffer } from 'buffer';
+import { transportChecksum } from './udpPacket';
+
+interface TcpData {
+    data: Buffer;
+    sourcePort: string;
+    destinationPort: string;
+    sequenceNumber?: number;
+    acknowledgmentNumber?: number;
+}
+export const encodeTCPFrame = ({ data, sourcePort, destinationPort, sequenceNumber = 0, acknowledgmentNumber = 0 }: TcpData) => {
+    const dataLength = data ? data.length : 0
+    const packet = Buffer.alloc(dataLength + 20)
+    packet.writeUInt16BE(parseInt(sourcePort, 10), 0)
+    packet.writeUInt16BE(parseInt(destinationPort, 10), 2)
+    packet.writeUInt32BE(sequenceNumber, 4)
+    packet.writeUInt32BE(acknowledgmentNumber, 8)
+    packet.writeUInt16BE(((20 / 4) << 12), 12);
+    const setAck = (1 << 4)
+    const setPsh = (1 << 3)
+    const flags = setPsh | setAck
+    packet.writeUInt8(flags, 13);
+    packet.writeUInt16BE(8235, 14);
+    packet.writeUInt16BE(0, 16);
+    if (data) { data.copy(packet, 20) }
+    const checksum = transportChecksum(data);
+    packet.writeUInt16BE(checksum, 16)
+    return packet
+}
diff --git a/src/helpers/packets/udpPacket.ts b/src/helpers/packets/udpPacket.ts
new file mode 100644
index 0000000..58ba232
--- /dev/null
+++ b/src/helpers/packets/udpPacket.ts
@@ -0,0 +1,50 @@
+import { Buffer } from 'buffer';
+
+interface UdpData {
+    sourcePort: string
+    destinationPort: string
+    data: Buffer
+}
+export const encodeUDPFrame = ({
+    sourcePort,
+    destinationPort,
+    data
+}: UdpData) => {
+    const len = data.length
+    let buf = Buffer.alloc(len + 8)
+    buf.writeUInt16BE(parseInt(sourcePort, 10), 0)
+    buf.writeUInt16BE(parseInt(destinationPort, 10), 2)
+    buf.writeUInt16BE(buf.length, 4)
+    data.copy(buf, 8)
+    buf.writeUInt16BE(transportChecksum(buf), 6)
+    return buf
+}
+export const transportChecksum = (buffer: Buffer) => {
+    // pseudo header: srcip (16), dstip (16), 0 (8), proto (8), udp len (16)
+    let len = buffer.length
+    let srcip = Buffer.from("127.0.0.1")
+    let dstip = Buffer.from("127.0.0.2")
+    let protocol = 0x11
+    let sum = 0xffff
+    // pseudo header: srcip (16), dstip (16), 0 (8), proto (8), udp len (16)
+    if (srcip && dstip) {
+        sum = 0
+        let pad = len % 2
+        for (let i = 0; i < len + pad; i += 2) {
+            if (i === 6) { continue } // ignore the currently written checksum
+            sum += ((buffer[i] << 8) & 0xff00) + ((buffer[i + 1]) & 0xff)
+        }
+        for (let i = 0; i < 4; i += 2) {
+            sum += ((srcip[i] << 8) & 0xff00) + (srcip[i + 1] & 0xff)
+        }
+        for (let i = 0; i < 4; i += 2) {
+            sum += ((dstip[i] << 8) & 0xff00) + (dstip[i + 1] & 0xff)
+        }
+        sum += protocol + len
+        while (sum >> 16) {
+            sum = (sum & 0xffff) + (sum >> 16)
+        }
+        sum = 0xffff ^ sum
+    }
+    return sum
+}
diff --git a/src/libs/packets.js b/src/libs/packets.js
deleted file mode 100644
index 6da70b1..0000000
--- a/src/libs/packets.js
+++ /dev/null
@@ -1,2328 +0,0 @@
-(function (f) { if (typeof exports === "object" && typeof module !== "undefined") { module.exports = f() } else if (typeof define === "function" && define.amd) { define([], f) } else { let g; if (typeof window !== "undefined") { g = window } else if (typeof global !== "undefined") { g = global } else if (typeof self !== "undefined") { g = self } else { g = this } g.packets = f() } })(function () {
-    let define, module, exports; return (function () { function r(e, n, t) { function o(i, f) { if (!n[i]) { if (!e[i]) { let c = "function" === typeof require && require; if (!f && c) { return c(i, !0); } if (u) { return u(i, !0); } let a = new Error("Cannot find module '" + i + "'"); throw a.code = "MODULE_NOT_FOUND", a } let p = n[i] = { exports: {} }; e[i][0].call(p.exports, function (r) { let n = e[i][1][r]; return o(n || r) }, p, p.exports, r, e, n, t) } return n[i].exports } for (let u = "function" === typeof require && require, i = 0; i < t.length; i++) { o(t[i]); } return o } return r })()({
-        1: [function (require, module, exports) {
-            'use strict'
-
-            exports.byteLength = byteLength
-            exports.toByteArray = toByteArray
-            exports.fromByteArray = fromByteArray
-
-            let lookup = []
-            let revLookup = []
-            let Arr = typeof Uint8Array !== 'undefined' ? Uint8Array : Array
-
-            let code = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
-            for (let i = 0, len = code.length; i < len; ++i) {
-                lookup[i] = code[i]
-                revLookup[code.charCodeAt(i)] = i
-            }
-
-            // Support decoding URL-safe base64 strings, as Node.js does.
-            // See: https://en.wikipedia.org/wiki/Base64#URL_applications
-            revLookup['-'.charCodeAt(0)] = 62
-            revLookup['_'.charCodeAt(0)] = 63
-
-            function getLens(b64) {
-                let len = b64.length
-
-                if (len % 4 > 0) {
-                    throw new Error('Invalid string. Length must be a multiple of 4')
-                }
-
-                // Trim off extra bytes after placeholder bytes are found
-                // See: https://github.com/beatgammit/base64-js/issues/42
-                let validLen = b64.indexOf('=')
-                if (validLen === -1) { validLen = len }
-
-                let placeHoldersLen = validLen === len
-                    ? 0
-                    : 4 - (validLen % 4)
-
-                return [validLen, placeHoldersLen]
-            }
-
-            // base64 is 4/3 + up to two characters of the original data
-            function byteLength(b64) {
-                let lens = getLens(b64)
-                let validLen = lens[0]
-                let placeHoldersLen = lens[1]
-                return ((validLen + placeHoldersLen) * 3 / 4) - placeHoldersLen
-            }
-
-            function _byteLength(b64, validLen, placeHoldersLen) {
-                return ((validLen + placeHoldersLen) * 3 / 4) - placeHoldersLen
-            }
-
-            function toByteArray(b64) {
-                let tmp
-                let lens = getLens(b64)
-                let validLen = lens[0]
-                let placeHoldersLen = lens[1]
-
-                let arr = new Arr(_byteLength(b64, validLen, placeHoldersLen))
-
-                let curByte = 0
-
-                // if there are placeholders, only get up to the last complete 4 chars
-                let len = placeHoldersLen > 0
-                    ? validLen - 4
-                    : validLen
-
-                let i
-                for (i = 0; i < len; i += 4) {
-                    tmp =
-                        (revLookup[b64.charCodeAt(i)] << 18) |
-                        (revLookup[b64.charCodeAt(i + 1)] << 12) |
-                        (revLookup[b64.charCodeAt(i + 2)] << 6) |
-                        revLookup[b64.charCodeAt(i + 3)]
-                    arr[curByte++] = (tmp >> 16) & 0xFF
-                    arr[curByte++] = (tmp >> 8) & 0xFF
-                    arr[curByte++] = tmp & 0xFF
-                }
-
-                if (placeHoldersLen === 2) {
-                    tmp =
-                        (revLookup[b64.charCodeAt(i)] << 2) |
-                        (revLookup[b64.charCodeAt(i + 1)] >> 4)
-                    arr[curByte++] = tmp & 0xFF
-                }
-
-                if (placeHoldersLen === 1) {
-                    tmp =
-                        (revLookup[b64.charCodeAt(i)] << 10) |
-                        (revLookup[b64.charCodeAt(i + 1)] << 4) |
-                        (revLookup[b64.charCodeAt(i + 2)] >> 2)
-                    arr[curByte++] = (tmp >> 8) & 0xFF
-                    arr[curByte++] = tmp & 0xFF
-                }
-
-                return arr
-            }
-
-            function tripletToBase64(num) {
-                return lookup[num >> 18 & 0x3F] +
-                    lookup[num >> 12 & 0x3F] +
-                    lookup[num >> 6 & 0x3F] +
-                    lookup[num & 0x3F]
-            }
-
-            function encodeChunk(uint8, start, end) {
-                let tmp
-                let output = []
-                for (let i = start; i < end; i += 3) {
-                    tmp =
-                        ((uint8[i] << 16) & 0xFF0000) +
-                        ((uint8[i + 1] << 8) & 0xFF00) +
-                        (uint8[i + 2] & 0xFF)
-                    output.push(tripletToBase64(tmp))
-                }
-                return output.join('')
-            }
-
-            function fromByteArray(uint8) {
-                let tmp
-                let len = uint8.length
-                let extraBytes = len % 3 // if we have 1 byte left, pad 2 bytes
-                let parts = []
-                let maxChunkLength = 16383 // must be multiple of 3
-
-                // go through the array every three bytes, we'll deal with trailing stuff later
-                for (let i = 0, len2 = len - extraBytes; i < len2; i += maxChunkLength) {
-                    parts.push(encodeChunk(uint8, i, (i + maxChunkLength) > len2 ? len2 : (i + maxChunkLength)))
-                }
-
-                // pad the end with zeros, but make sure to not forget the extra bytes
-                if (extraBytes === 1) {
-                    tmp = uint8[len - 1]
-                    parts.push(
-                        lookup[tmp >> 2] +
-                        lookup[(tmp << 4) & 0x3F] +
-                        '=='
-                    )
-                } else if (extraBytes === 2) {
-                    tmp = (uint8[len - 2] << 8) + uint8[len - 1]
-                    parts.push(
-                        lookup[tmp >> 10] +
-                        lookup[(tmp >> 4) & 0x3F] +
-                        lookup[(tmp << 2) & 0x3F] +
-                        '='
-                    )
-                }
-
-                return parts.join('')
-            }
-
-        }, {}], 2: [function (require, module, exports) {
-            (function (Buffer) {
-                (function () {
-                    /*!
-                     * The buffer module from node.js, for the browser.
-                     *
-                     * @author   Feross Aboukhadijeh <https://feross.org>
-                     * @license  MIT
-                     */
-                    /* eslint-disable no-proto */
-
-                    'use strict'
-
-                    let base64 = require('base64-js')
-                    let ieee754 = require('ieee754')
-
-                    exports.Buffer = Buffer
-                    exports.SlowBuffer = SlowBuffer
-                    exports.INSPECT_MAX_BYTES = 50
-
-                    let K_MAX_LENGTH = 0x7fffffff
-                    exports.kMaxLength = K_MAX_LENGTH
-
-                    /**
-                     * If `Buffer.TYPED_ARRAY_SUPPORT`:
-                     *   === true    Use Uint8Array implementation (fastest)
-                     *   === false   Print warning and recommend using `buffer` v4.x which has an Object
-                     *               implementation (most compatible, even IE6)
-                     *
-                     * Browsers that support typed arrays are IE 10+, Firefox 4+, Chrome 7+, Safari 5.1+,
-                     * Opera 11.6+, iOS 4.2+.
-                     *
-                     * We report that the browser does not support typed arrays if the are not subclassable
-                     * using __proto__. Firefox 4-29 lacks support for adding new properties to `Uint8Array`
-                     * (See: https://bugzilla.mozilla.org/show_bug.cgi?id=695438). IE 10 lacks support
-                     * for __proto__ and has a buggy typed array implementation.
-                     */
-                    Buffer.TYPED_ARRAY_SUPPORT = typedArraySupport()
-
-                    if (!Buffer.TYPED_ARRAY_SUPPORT && typeof console !== 'undefined' &&
-                        typeof console.error === 'function') {
-                        console.error(
-                            'This browser lacks typed array (Uint8Array) support which is required by ' +
-                            '`buffer` v5.x. Use `buffer` v4.x if you require old browser support.'
-                        )
-                    }
-
-                    function typedArraySupport() {
-                        // Can typed array instances can be augmented?
-                        try {
-                            let arr = new Uint8Array(1)
-                            arr.__proto__ = { __proto__: Uint8Array.prototype, foo: function () { return 42 } }
-                            return arr.foo() === 42
-                        } catch (e) {
-                            return false
-                        }
-                    }
-
-                    Object.defineProperty(Buffer.prototype, 'parent', {
-                        enumerable: true,
-                        get: function () {
-                            if (!Buffer.isBuffer(this)) { return undefined }
-                            return this.buffer
-                        }
-                    })
-
-                    Object.defineProperty(Buffer.prototype, 'offset', {
-                        enumerable: true,
-                        get: function () {
-                            if (!Buffer.isBuffer(this)) { return undefined }
-                            return this.byteOffset
-                        }
-                    })
-
-                    function createBuffer(length) {
-                        if (length > K_MAX_LENGTH) {
-                            throw new RangeError('The value "' + length + '" is invalid for option "size"')
-                        }
-                        // Return an augmented `Uint8Array` instance
-                        let buf = new Uint8Array(length)
-                        buf.__proto__ = Buffer.prototype
-                        return buf
-                    }
-
-                    /**
-                     * The Buffer constructor returns instances of `Uint8Array` that have their
-                     * prototype changed to `Buffer.prototype`. Furthermore, `Buffer` is a subclass of
-                     * `Uint8Array`, so the returned instances will have all the node `Buffer` methods
-                     * and the `Uint8Array` methods. Square bracket notation works as expected -- it
-                     * returns a single octet.
-                     *
-                     * The `Uint8Array` prototype remains unmodified.
-                     */
-
-                    function Buffer(arg, encodingOrOffset, length) {
-                        // Common case.
-                        if (typeof arg === 'number') {
-                            if (typeof encodingOrOffset === 'string') {
-                                throw new TypeError(
-                                    'The "string" argument must be of type string. Received type number'
-                                )
-                            }
-                            return allocUnsafe(arg)
-                        }
-                        return from(arg, encodingOrOffset, length)
-                    }
-
-                    // Fix subarray() in ES2016. See: https://github.com/feross/buffer/pull/97
-                    if (typeof Symbol !== 'undefined' && Symbol.species != null &&
-                        Buffer[Symbol.species] === Buffer) {
-                        Object.defineProperty(Buffer, Symbol.species, {
-                            value: null,
-                            configurable: true,
-                            enumerable: false,
-                            writable: false
-                        })
-                    }
-
-                    Buffer.poolSize = 8192 // not used by this implementation
-
-                    function from(value, encodingOrOffset, length) {
-                        if (typeof value === 'string') {
-                            return fromString(value, encodingOrOffset)
-                        }
-
-                        if (ArrayBuffer.isView(value)) {
-                            return fromArrayLike(value)
-                        }
-
-                        if (value == null) {
-                            throw TypeError(
-                                'The first argument must be one of type string, Buffer, ArrayBuffer, Array, ' +
-                                'or Array-like Object. Received type ' + (typeof value)
-                            )
-                        }
-
-                        if (isInstance(value, ArrayBuffer) ||
-                            (value && isInstance(value.buffer, ArrayBuffer))) {
-                            return fromArrayBuffer(value, encodingOrOffset, length)
-                        }
-
-                        if (typeof value === 'number') {
-                            throw new TypeError(
-                                'The "value" argument must not be of type number. Received type number'
-                            )
-                        }
-
-                        let valueOf = value.valueOf && value.valueOf()
-                        if (valueOf != null && valueOf !== value) {
-                            return Buffer.from(valueOf, encodingOrOffset, length)
-                        }
-
-                        let b = fromObject(value)
-                        if (b) { return b }
-
-                        if (typeof Symbol !== 'undefined' && Symbol.toPrimitive != null &&
-                            typeof value[Symbol.toPrimitive] === 'function') {
-                            return Buffer.from(
-                                value[Symbol.toPrimitive]('string'), encodingOrOffset, length
-                            )
-                        }
-
-                        throw new TypeError(
-                            'The first argument must be one of type string, Buffer, ArrayBuffer, Array, ' +
-                            'or Array-like Object. Received type ' + (typeof value)
-                        )
-                    }
-
-                    /**
-                     * Functionally equivalent to Buffer(arg, encoding) but throws a TypeError
-                     * if value is a number.
-                     * Buffer.from(str[, encoding])
-                     * Buffer.from(array)
-                     * Buffer.from(buffer)
-                     * Buffer.from(arrayBuffer[, byteOffset[, length]])
-                     **/
-                    Buffer.from = function (value, encodingOrOffset, length) {
-                        return from(value, encodingOrOffset, length)
-                    }
-
-                    // Note: Change prototype *after* Buffer.from is defined to workaround Chrome bug:
-                    // https://github.com/feross/buffer/pull/148
-                    Buffer.prototype.__proto__ = Uint8Array.prototype
-                    Buffer.__proto__ = Uint8Array
-
-                    function assertSize(size) {
-                        if (typeof size !== 'number') {
-                            throw new TypeError('"size" argument must be of type number')
-                        } else if (size < 0) {
-                            throw new RangeError('The value "' + size + '" is invalid for option "size"')
-                        }
-                    }
-
-                    function alloc(size, fill, encoding) {
-                        assertSize(size)
-                        if (size <= 0) {
-                            return createBuffer(size)
-                        }
-                        if (fill !== undefined) {
-                            // Only pay attention to encoding if it's a string. This
-                            // prevents accidentally sending in a number that would
-                            // be interpretted as a start offset.
-                            return typeof encoding === 'string'
-                                ? createBuffer(size).fill(fill, encoding)
-                                : createBuffer(size).fill(fill)
-                        }
-                        return createBuffer(size)
-                    }
-
-                    /**
-                     * Creates a new filled Buffer instance.
-                     * alloc(size[, fill[, encoding]])
-                     **/
-                    Buffer.alloc = function (size, fill, encoding) {
-                        return alloc(size, fill, encoding)
-                    }
-
-                    function allocUnsafe(size) {
-                        assertSize(size)
-                        return createBuffer(size < 0 ? 0 : checked(size) | 0)
-                    }
-
-                    /**
-                     * Equivalent to Buffer(num), by default creates a non-zero-filled Buffer instance.
-                     * */
-                    Buffer.allocUnsafe = function (size) {
-                        return allocUnsafe(size)
-                    }
-                    /**
-                     * Equivalent to SlowBuffer(num), by default creates a non-zero-filled Buffer instance.
-                     */
-                    Buffer.allocUnsafeSlow = function (size) {
-                        return allocUnsafe(size)
-                    }
-
-                    function fromString(string, encoding) {
-                        if (typeof encoding !== 'string' || encoding === '') {
-                            encoding = 'utf8'
-                        }
-
-                        if (!Buffer.isEncoding(encoding)) {
-                            throw new TypeError('Unknown encoding: ' + encoding)
-                        }
-
-                        let length = byteLength(string, encoding) | 0
-                        let buf = createBuffer(length)
-
-                        let actual = buf.write(string, encoding)
-
-                        if (actual !== length) {
-                            // Writing a hex string, for example, that contains invalid characters will
-                            // cause everything after the first invalid character to be ignored. (e.g.
-                            // 'abxxcd' will be treated as 'ab')
-                            buf = buf.slice(0, actual)
-                        }
-
-                        return buf
-                    }
-
-                    function fromArrayLike(array) {
-                        let length = array.length < 0 ? 0 : checked(array.length) | 0
-                        let buf = createBuffer(length)
-                        for (let i = 0; i < length; i += 1) {
-                            buf[i] = array[i] & 255
-                        }
-                        return buf
-                    }
-
-                    function fromArrayBuffer(array, byteOffset, length) {
-                        if (byteOffset < 0 || array.byteLength < byteOffset) {
-                            throw new RangeError('"offset" is outside of buffer bounds')
-                        }
-
-                        if (array.byteLength < byteOffset + (length || 0)) {
-                            throw new RangeError('"length" is outside of buffer bounds')
-                        }
-
-                        let buf
-                        if (byteOffset === undefined && length === undefined) {
-                            buf = new Uint8Array(array)
-                        } else if (length === undefined) {
-                            buf = new Uint8Array(array, byteOffset)
-                        } else {
-                            buf = new Uint8Array(array, byteOffset, length)
-                        }
-
-                        // Return an augmented `Uint8Array` instance
-                        buf.__proto__ = Buffer.prototype
-                        return buf
-                    }
-
-                    function fromObject(obj) {
-                        if (Buffer.isBuffer(obj)) {
-                            let len = checked(obj.length) | 0
-                            let buf = createBuffer(len)
-
-                            if (buf.length === 0) {
-                                return buf
-                            }
-
-                            obj.copy(buf, 0, 0, len)
-                            return buf
-                        }
-
-                        if (obj.length !== undefined) {
-                            if (typeof obj.length !== 'number' || numberIsNaN(obj.length)) {
-                                return createBuffer(0)
-                            }
-                            return fromArrayLike(obj)
-                        }
-
-                        if (obj.type === 'Buffer' && Array.isArray(obj.data)) {
-                            return fromArrayLike(obj.data)
-                        }
-                    }
-
-                    function checked(length) {
-                        // Note: cannot use `length < K_MAX_LENGTH` here because that fails when
-                        // length is NaN (which is otherwise coerced to zero.)
-                        if (length >= K_MAX_LENGTH) {
-                            throw new RangeError('Attempt to allocate Buffer larger than maximum ' +
-                                'size: 0x' + K_MAX_LENGTH.toString(16) + ' bytes')
-                        }
-                        return length | 0
-                    }
-
-                    function SlowBuffer(length) {
-                        if (+length != length) { // eslint-disable-line eqeqeq
-                            length = 0
-                        }
-                        return Buffer.alloc(+length)
-                    }
-
-                    Buffer.isBuffer = function isBuffer(b) {
-                        return b != null && b._isBuffer === true &&
-                            b !== Buffer.prototype // so Buffer.isBuffer(Buffer.prototype) will be false
-                    }
-
-                    Buffer.compare = function compare(a, b) {
-                        if (isInstance(a, Uint8Array)) { a = Buffer.from(a, a.offset, a.byteLength) }
-                        if (isInstance(b, Uint8Array)) { b = Buffer.from(b, b.offset, b.byteLength) }
-                        if (!Buffer.isBuffer(a) || !Buffer.isBuffer(b)) {
-                            throw new TypeError(
-                                'The "buf1", "buf2" arguments must be one of type Buffer or Uint8Array'
-                            )
-                        }
-
-                        if (a === b) { return 0 }
-
-                        let x = a.length
-                        let y = b.length
-
-                        for (let i = 0, len = Math.min(x, y); i < len; ++i) {
-                            if (a[i] !== b[i]) {
-                                x = a[i]
-                                y = b[i]
-                                break
-                            }
-                        }
-
-                        if (x < y) { return -1 }
-                        if (y < x) { return 1 }
-                        return 0
-                    }
-
-                    Buffer.isEncoding = function isEncoding(encoding) {
-                        switch (String(encoding).toLowerCase()) {
-                            case 'hex':
-                            case 'utf8':
-                            case 'utf-8':
-                            case 'ascii':
-                            case 'latin1':
-                            case 'binary':
-                            case 'base64':
-                            case 'ucs2':
-                            case 'ucs-2':
-                            case 'utf16le':
-                            case 'utf-16le':
-                                return true
-                            default:
-                                return false
-                        }
-                    }
-
-                    Buffer.concat = function concat(list, length) {
-                        if (!Array.isArray(list)) {
-                            throw new TypeError('"list" argument must be an Array of Buffers')
-                        }
-
-                        if (list.length === 0) {
-                            return Buffer.alloc(0)
-                        }
-
-                        let i
-                        if (length === undefined) {
-                            length = 0
-                            for (i = 0; i < list.length; ++i) {
-                                length += list[i].length
-                            }
-                        }
-
-                        let buffer = Buffer.allocUnsafe(length)
-                        let pos = 0
-                        for (i = 0; i < list.length; ++i) {
-                            let buf = list[i]
-                            if (isInstance(buf, Uint8Array)) {
-                                buf = Buffer.from(buf)
-                            }
-                            if (!Buffer.isBuffer(buf)) {
-                                throw new TypeError('"list" argument must be an Array of Buffers')
-                            }
-                            buf.copy(buffer, pos)
-                            pos += buf.length
-                        }
-                        return buffer
-                    }
-
-                    function byteLength(string, encoding) {
-                        if (Buffer.isBuffer(string)) {
-                            return string.length
-                        }
-                        if (ArrayBuffer.isView(string) || isInstance(string, ArrayBuffer)) {
-                            return string.byteLength
-                        }
-                        if (typeof string !== 'string') {
-                            throw new TypeError(
-                                'The "string" argument must be one of type string, Buffer, or ArrayBuffer. ' +
-                                'Received type ' + typeof string
-                            )
-                        }
-
-                        let len = string.length
-                        let mustMatch = (arguments.length > 2 && arguments[2] === true)
-                        if (!mustMatch && len === 0) { return 0 }
-
-                        // Use a for loop to avoid recursion
-                        let loweredCase = false
-                        for (; ;) {
-                            switch (encoding) {
-                                case 'ascii':
-                                case 'latin1':
-                                case 'binary':
-                                    return len
-                                case 'utf8':
-                                case 'utf-8':
-                                    return utf8ToBytes(string).length
-                                case 'ucs2':
-                                case 'ucs-2':
-                                case 'utf16le':
-                                case 'utf-16le':
-                                    return len * 2
-                                case 'hex':
-                                    return len >>> 1
-                                case 'base64':
-                                    return base64ToBytes(string).length
-                                default:
-                                    if (loweredCase) {
-                                        return mustMatch ? -1 : utf8ToBytes(string).length // assume utf8
-                                    }
-                                    encoding = ('' + encoding).toLowerCase()
-                                    loweredCase = true
-                            }
-                        }
-                    }
-                    Buffer.byteLength = byteLength
-
-                    function slowToString(encoding, start, end) {
-                        let loweredCase = false
-
-                        // No need to verify that "this.length <= MAX_UINT32" since it's a read-only
-                        // property of a typed array.
-
-                        // This behaves neither like String nor Uint8Array in that we set start/end
-                        // to their upper/lower bounds if the value passed is out of range.
-                        // undefined is handled specially as per ECMA-262 6th Edition,
-                        // Section 13.3.3.7 Runtime Semantics: KeyedBindingInitialization.
-                        if (start === undefined || start < 0) {
-                            start = 0
-                        }
-                        // Return early if start > this.length. Done here to prevent potential uint32
-                        // coercion fail below.
-                        if (start > this.length) {
-                            return ''
-                        }
-
-                        if (end === undefined || end > this.length) {
-                            end = this.length
-                        }
-
-                        if (end <= 0) {
-                            return ''
-                        }
-
-                        // Force coersion to uint32. This will also coerce falsey/NaN values to 0.
-                        end >>>= 0
-                        start >>>= 0
-
-                        if (end <= start) {
-                            return ''
-                        }
-
-                        if (!encoding) { encoding = 'utf8' }
-
-                        while (true) {
-                            switch (encoding) {
-                                case 'hex':
-                                    return hexSlice(this, start, end)
-
-                                case 'utf8':
-                                case 'utf-8':
-                                    return utf8Slice(this, start, end)
-
-                                case 'ascii':
-                                    return asciiSlice(this, start, end)
-
-                                case 'latin1':
-                                case 'binary':
-                                    return latin1Slice(this, start, end)
-
-                                case 'base64':
-                                    return base64Slice(this, start, end)
-
-                                case 'ucs2':
-                                case 'ucs-2':
-                                case 'utf16le':
-                                case 'utf-16le':
-                                    return utf16leSlice(this, start, end)
-
-                                default:
-                                    if (loweredCase) { throw new TypeError('Unknown encoding: ' + encoding) }
-                                    encoding = (encoding + '').toLowerCase()
-                                    loweredCase = true
-                            }
-                        }
-                    }
-
-                    // This property is used by `Buffer.isBuffer` (and the `is-buffer` npm package)
-                    // to detect a Buffer instance. It's not possible to use `instanceof Buffer`
-                    // reliably in a browserify context because there could be multiple different
-                    // copies of the 'buffer' package in use. This method works even for Buffer
-                    // instances that were created from another copy of the `buffer` package.
-                    // See: https://github.com/feross/buffer/issues/154
-                    Buffer.prototype._isBuffer = true
-
-                    function swap(b, n, m) {
-                        let i = b[n]
-                        b[n] = b[m]
-                        b[m] = i
-                    }
-
-                    Buffer.prototype.swap16 = function swap16() {
-                        let len = this.length
-                        if (len % 2 !== 0) {
-                            throw new RangeError('Buffer size must be a multiple of 16-bits')
-                        }
-                        for (let i = 0; i < len; i += 2) {
-                            swap(this, i, i + 1)
-                        }
-                        return this
-                    }
-
-                    Buffer.prototype.swap32 = function swap32() {
-                        let len = this.length
-                        if (len % 4 !== 0) {
-                            throw new RangeError('Buffer size must be a multiple of 32-bits')
-                        }
-                        for (let i = 0; i < len; i += 4) {
-                            swap(this, i, i + 3)
-                            swap(this, i + 1, i + 2)
-                        }
-                        return this
-                    }
-
-                    Buffer.prototype.swap64 = function swap64() {
-                        let len = this.length
-                        if (len % 8 !== 0) {
-                            throw new RangeError('Buffer size must be a multiple of 64-bits')
-                        }
-                        for (let i = 0; i < len; i += 8) {
-                            swap(this, i, i + 7)
-                            swap(this, i + 1, i + 6)
-                            swap(this, i + 2, i + 5)
-                            swap(this, i + 3, i + 4)
-                        }
-                        return this
-                    }
-
-                    Buffer.prototype.toString = function toString() {
-                        let length = this.length
-                        if (length === 0) { return '' }
-                        if (arguments.length === 0) { return utf8Slice(this, 0, length) }
-                        return slowToString.apply(this, arguments)
-                    }
-
-                    Buffer.prototype.toLocaleString = Buffer.prototype.toString
-
-                    Buffer.prototype.equals = function equals(b) {
-                        if (!Buffer.isBuffer(b)) { throw new TypeError('Argument must be a Buffer') }
-                        if (this === b) { return true }
-                        return Buffer.compare(this, b) === 0
-                    }
-
-                    Buffer.prototype.inspect = function inspect() {
-                        let str = ''
-                        let max = exports.INSPECT_MAX_BYTES
-                        str = this.toString('hex', 0, max).replace(/(.{2})/g, '$1 ').trim()
-                        if (this.length > max) { str += ' ... ' }
-                        return '<Buffer ' + str + '>'
-                    }
-
-                    Buffer.prototype.compare = function compare(target, start, end, thisStart, thisEnd) {
-                        if (isInstance(target, Uint8Array)) {
-                            target = Buffer.from(target, target.offset, target.byteLength)
-                        }
-                        if (!Buffer.isBuffer(target)) {
-                            throw new TypeError(
-                                'The "target" argument must be one of type Buffer or Uint8Array. ' +
-                                'Received type ' + (typeof target)
-                            )
-                        }
-
-                        if (start === undefined) {
-                            start = 0
-                        }
-                        if (end === undefined) {
-                            end = target ? target.length : 0
-                        }
-                        if (thisStart === undefined) {
-                            thisStart = 0
-                        }
-                        if (thisEnd === undefined) {
-                            thisEnd = this.length
-                        }
-
-                        if (start < 0 || end > target.length || thisStart < 0 || thisEnd > this.length) {
-                            throw new RangeError('out of range index')
-                        }
-
-                        if (thisStart >= thisEnd && start >= end) {
-                            return 0
-                        }
-                        if (thisStart >= thisEnd) {
-                            return -1
-                        }
-                        if (start >= end) {
-                            return 1
-                        }
-
-                        start >>>= 0
-                        end >>>= 0
-                        thisStart >>>= 0
-                        thisEnd >>>= 0
-
-                        if (this === target) { return 0 }
-
-                        let x = thisEnd - thisStart
-                        let y = end - start
-                        let len = Math.min(x, y)
-
-                        let thisCopy = this.slice(thisStart, thisEnd)
-                        let targetCopy = target.slice(start, end)
-
-                        for (let i = 0; i < len; ++i) {
-                            if (thisCopy[i] !== targetCopy[i]) {
-                                x = thisCopy[i]
-                                y = targetCopy[i]
-                                break
-                            }
-                        }
-
-                        if (x < y) { return -1 }
-                        if (y < x) { return 1 }
-                        return 0
-                    }
-
-                    // Finds either the first index of `val` in `buffer` at offset >= `byteOffset`,
-                    // OR the last index of `val` in `buffer` at offset <= `byteOffset`.
-                    //
-                    // Arguments:
-                    // - buffer - a Buffer to search
-                    // - val - a string, Buffer, or number
-                    // - byteOffset - an index into `buffer`; will be clamped to an int32
-                    // - encoding - an optional encoding, relevant is val is a string
-                    // - dir - true for indexOf, false for lastIndexOf
-                    function bidirectionalIndexOf(buffer, val, byteOffset, encoding, dir) {
-                        // Empty buffer means no match
-                        if (buffer.length === 0) { return -1 }
-
-                        // Normalize byteOffset
-                        if (typeof byteOffset === 'string') {
-                            encoding = byteOffset
-                            byteOffset = 0
-                        } else if (byteOffset > 0x7fffffff) {
-                            byteOffset = 0x7fffffff
-                        } else if (byteOffset < -0x80000000) {
-                            byteOffset = -0x80000000
-                        }
-                        byteOffset = +byteOffset // Coerce to Number.
-                        if (numberIsNaN(byteOffset)) {
-                            // byteOffset: it it's undefined, null, NaN, "foo", etc, search whole buffer
-                            byteOffset = dir ? 0 : (buffer.length - 1)
-                        }
-
-                        // Normalize byteOffset: negative offsets start from the end of the buffer
-                        if (byteOffset < 0) { byteOffset = buffer.length + byteOffset }
-                        if (byteOffset >= buffer.length) {
-                            if (dir) { return -1 }
-                            else { byteOffset = buffer.length - 1 }
-                        } else if (byteOffset < 0) {
-                            if (dir) { byteOffset = 0 }
-                            else { return -1 }
-                        }
-
-                        // Normalize val
-                        if (typeof val === 'string') {
-                            val = Buffer.from(val, encoding)
-                        }
-
-                        // Finally, search either indexOf (if dir is true) or lastIndexOf
-                        if (Buffer.isBuffer(val)) {
-                            // Special case: looking for empty string/buffer always fails
-                            if (val.length === 0) {
-                                return -1
-                            }
-                            return arrayIndexOf(buffer, val, byteOffset, encoding, dir)
-                        } else if (typeof val === 'number') {
-                            val = val & 0xFF // Search for a byte value [0-255]
-                            if (typeof Uint8Array.prototype.indexOf === 'function') {
-                                if (dir) {
-                                    return Uint8Array.prototype.indexOf.call(buffer, val, byteOffset)
-                                } else {
-                                    return Uint8Array.prototype.lastIndexOf.call(buffer, val, byteOffset)
-                                }
-                            }
-                            return arrayIndexOf(buffer, [val], byteOffset, encoding, dir)
-                        }
-
-                        throw new TypeError('val must be string, number or Buffer')
-                    }
-
-                    function arrayIndexOf(arr, val, byteOffset, encoding, dir) {
-                        let indexSize = 1
-                        let arrLength = arr.length
-                        let valLength = val.length
-
-                        if (encoding !== undefined) {
-                            encoding = String(encoding).toLowerCase()
-                            if (encoding === 'ucs2' || encoding === 'ucs-2' ||
-                                encoding === 'utf16le' || encoding === 'utf-16le') {
-                                if (arr.length < 2 || val.length < 2) {
-                                    return -1
-                                }
-                                indexSize = 2
-                                arrLength /= 2
-                                valLength /= 2
-                                byteOffset /= 2
-                            }
-                        }
-
-                        function read(buf, i) {
-                            if (indexSize === 1) {
-                                return buf[i]
-                            } else {
-                                return buf.readUInt16BE(i * indexSize)
-                            }
-                        }
-
-                        let i
-                        if (dir) {
-                            let foundIndex = -1
-                            for (i = byteOffset; i < arrLength; i++) {
-                                if (read(arr, i) === read(val, foundIndex === -1 ? 0 : i - foundIndex)) {
-                                    if (foundIndex === -1) { foundIndex = i }
-                                    if (i - foundIndex + 1 === valLength) { return foundIndex * indexSize }
-                                } else {
-                                    if (foundIndex !== -1) { i -= i - foundIndex }
-                                    foundIndex = -1
-                                }
-                            }
-                        } else {
-                            if (byteOffset + valLength > arrLength) { byteOffset = arrLength - valLength }
-                            for (i = byteOffset; i >= 0; i--) {
-                                let found = true
-                                for (let j = 0; j < valLength; j++) {
-                                    if (read(arr, i + j) !== read(val, j)) {
-                                        found = false
-                                        break
-                                    }
-                                }
-                                if (found) { return i }
-                            }
-                        }
-
-                        return -1
-                    }
-
-                    Buffer.prototype.includes = function includes(val, byteOffset, encoding) {
-                        return this.indexOf(val, byteOffset, encoding) !== -1
-                    }
-
-                    Buffer.prototype.indexOf = function indexOf(val, byteOffset, encoding) {
-                        return bidirectionalIndexOf(this, val, byteOffset, encoding, true)
-                    }
-
-                    Buffer.prototype.lastIndexOf = function lastIndexOf(val, byteOffset, encoding) {
-                        return bidirectionalIndexOf(this, val, byteOffset, encoding, false)
-                    }
-
-                    function hexWrite(buf, string, offset, length) {
-                        offset = Number(offset) || 0
-                        let remaining = buf.length - offset
-                        if (!length) {
-                            length = remaining
-                        } else {
-                            length = Number(length)
-                            if (length > remaining) {
-                                length = remaining
-                            }
-                        }
-
-                        let strLen = string.length
-
-                        if (length > strLen / 2) {
-                            length = strLen / 2
-                        }
-                        let i = 0
-                        for (; i < length; ++i) {
-                            let parsed = parseInt(string.substr(i * 2, 2), 16)
-                            if (numberIsNaN(parsed)) { return i }
-                            buf[offset + i] = parsed
-                        }
-                        return i
-                    }
-
-                    function utf8Write(buf, string, offset, length) {
-                        return blitBuffer(utf8ToBytes(string, buf.length - offset), buf, offset, length)
-                    }
-
-                    function asciiWrite(buf, string, offset, length) {
-                        return blitBuffer(asciiToBytes(string), buf, offset, length)
-                    }
-
-                    function latin1Write(buf, string, offset, length) {
-                        return asciiWrite(buf, string, offset, length)
-                    }
-
-                    function base64Write(buf, string, offset, length) {
-                        return blitBuffer(base64ToBytes(string), buf, offset, length)
-                    }
-
-                    function ucs2Write(buf, string, offset, length) {
-                        return blitBuffer(utf16leToBytes(string, buf.length - offset), buf, offset, length)
-                    }
-
-                    Buffer.prototype.write = function write(string, offset, length, encoding) {
-                        // Buffer#write(string)
-                        if (offset === undefined) {
-                            encoding = 'utf8'
-                            length = this.length
-                            offset = 0
-                            // Buffer#write(string, encoding)
-                        } else if (length === undefined && typeof offset === 'string') {
-                            encoding = offset
-                            length = this.length
-                            offset = 0
-                            // Buffer#write(string, offset[, length][, encoding])
-                        } else if (isFinite(offset)) {
-                            offset = offset >>> 0
-                            if (isFinite(length)) {
-                                length = length >>> 0
-                                if (encoding === undefined) { encoding = 'utf8' }
-                            } else {
-                                encoding = length
-                                length = undefined
-                            }
-                        } else {
-                            throw new Error(
-                                'Buffer.write(string, encoding, offset[, length]) is no longer supported'
-                            )
-                        }
-
-                        let remaining = this.length - offset
-                        if (length === undefined || length > remaining) { length = remaining }
-
-                        if ((string.length > 0 && (length < 0 || offset < 0)) || offset > this.length) {
-                            throw new RangeError('Attempt to write outside buffer bounds')
-                        }
-
-                        if (!encoding) { encoding = 'utf8' }
-
-                        let loweredCase = false
-                        for (; ;) {
-                            switch (encoding) {
-                                case 'hex':
-                                    return hexWrite(this, string, offset, length)
-
-                                case 'utf8':
-                                case 'utf-8':
-                                    return utf8Write(this, string, offset, length)
-
-                                case 'ascii':
-                                    return asciiWrite(this, string, offset, length)
-
-                                case 'latin1':
-                                case 'binary':
-                                    return latin1Write(this, string, offset, length)
-
-                                case 'base64':
-                                    // Warning: maxLength not taken into account in base64Write
-                                    return base64Write(this, string, offset, length)
-
-                                case 'ucs2':
-                                case 'ucs-2':
-                                case 'utf16le':
-                                case 'utf-16le':
-                                    return ucs2Write(this, string, offset, length)
-
-                                default:
-                                    if (loweredCase) { throw new TypeError('Unknown encoding: ' + encoding) }
-                                    encoding = ('' + encoding).toLowerCase()
-                                    loweredCase = true
-                            }
-                        }
-                    }
-
-                    Buffer.prototype.toJSON = function toJSON() {
-                        return {
-                            type: 'Buffer',
-                            data: Array.prototype.slice.call(this._arr || this, 0)
-                        }
-                    }
-
-                    function base64Slice(buf, start, end) {
-                        if (start === 0 && end === buf.length) {
-                            return base64.fromByteArray(buf)
-                        } else {
-                            return base64.fromByteArray(buf.slice(start, end))
-                        }
-                    }
-
-                    function utf8Slice(buf, start, end) {
-                        end = Math.min(buf.length, end)
-                        let res = []
-
-                        let i = start
-                        while (i < end) {
-                            let firstByte = buf[i]
-                            let codePoint = null
-                            let bytesPerSequence = (firstByte > 0xEF) ? 4
-                                : (firstByte > 0xDF) ? 3
-                                    : (firstByte > 0xBF) ? 2
-                                        : 1
-
-                            if (i + bytesPerSequence <= end) {
-                                let secondByte, thirdByte, fourthByte, tempCodePoint
-
-                                switch (bytesPerSequence) {
-                                    case 1:
-                                        if (firstByte < 0x80) {
-                                            codePoint = firstByte
-                                        }
-                                        break
-                                    case 2:
-                                        secondByte = buf[i + 1]
-                                        if ((secondByte & 0xC0) === 0x80) {
-                                            tempCodePoint = (firstByte & 0x1F) << 0x6 | (secondByte & 0x3F)
-                                            if (tempCodePoint > 0x7F) {
-                                                codePoint = tempCodePoint
-                                            }
-                                        }
-                                        break
-                                    case 3:
-                                        secondByte = buf[i + 1]
-                                        thirdByte = buf[i + 2]
-                                        if ((secondByte & 0xC0) === 0x80 && (thirdByte & 0xC0) === 0x80) {
-                                            tempCodePoint = (firstByte & 0xF) << 0xC | (secondByte & 0x3F) << 0x6 | (thirdByte & 0x3F)
-                                            if (tempCodePoint > 0x7FF && (tempCodePoint < 0xD800 || tempCodePoint > 0xDFFF)) {
-                                                codePoint = tempCodePoint
-                                            }
-                                        }
-                                        break
-                                    case 4:
-                                        secondByte = buf[i + 1]
-                                        thirdByte = buf[i + 2]
-                                        fourthByte = buf[i + 3]
-                                        if ((secondByte & 0xC0) === 0x80 && (thirdByte & 0xC0) === 0x80 && (fourthByte & 0xC0) === 0x80) {
-                                            tempCodePoint = (firstByte & 0xF) << 0x12 | (secondByte & 0x3F) << 0xC | (thirdByte & 0x3F) << 0x6 | (fourthByte & 0x3F)
-                                            if (tempCodePoint > 0xFFFF && tempCodePoint < 0x110000) {
-                                                codePoint = tempCodePoint
-                                            }
-                                        }
-                                }
-                            }
-
-                            if (codePoint === null) {
-                                // we did not generate a valid codePoint so insert a
-                                // replacement char (U+FFFD) and advance only 1 byte
-                                codePoint = 0xFFFD
-                                bytesPerSequence = 1
-                            } else if (codePoint > 0xFFFF) {
-                                // encode to utf16 (surrogate pair dance)
-                                codePoint -= 0x10000
-                                res.push(codePoint >>> 10 & 0x3FF | 0xD800)
-                                codePoint = 0xDC00 | codePoint & 0x3FF
-                            }
-
-                            res.push(codePoint)
-                            i += bytesPerSequence
-                        }
-
-                        return decodeCodePointsArray(res)
-                    }
-
-                    // Based on http://stackoverflow.com/a/22747272/680742, the browser with
-                    // the lowest limit is Chrome, with 0x10000 args.
-                    // We go 1 magnitude less, for safety
-                    let MAX_ARGUMENTS_LENGTH = 0x1000
-
-                    function decodeCodePointsArray(codePoints) {
-                        let len = codePoints.length
-                        if (len <= MAX_ARGUMENTS_LENGTH) {
-                            return String.fromCharCode.apply(String, codePoints) // avoid extra slice()
-                        }
-
-                        // Decode in chunks to avoid "call stack size exceeded".
-                        let res = ''
-                        let i = 0
-                        while (i < len) {
-                            res += String.fromCharCode.apply(
-                                String,
-                                codePoints.slice(i, i += MAX_ARGUMENTS_LENGTH)
-                            )
-                        }
-                        return res
-                    }
-
-                    function asciiSlice(buf, start, end) {
-                        let ret = ''
-                        end = Math.min(buf.length, end)
-
-                        for (let i = start; i < end; ++i) {
-                            ret += String.fromCharCode(buf[i] & 0x7F)
-                        }
-                        return ret
-                    }
-
-                    function latin1Slice(buf, start, end) {
-                        let ret = ''
-                        end = Math.min(buf.length, end)
-
-                        for (let i = start; i < end; ++i) {
-                            ret += String.fromCharCode(buf[i])
-                        }
-                        return ret
-                    }
-
-                    function hexSlice(buf, start, end) {
-                        let len = buf.length
-
-                        if (!start || start < 0) { start = 0 }
-                        if (!end || end < 0 || end > len) { end = len }
-
-                        let out = ''
-                        for (let i = start; i < end; ++i) {
-                            out += toHex(buf[i])
-                        }
-                        return out
-                    }
-
-                    function utf16leSlice(buf, start, end) {
-                        let bytes = buf.slice(start, end)
-                        let res = ''
-                        for (let i = 0; i < bytes.length; i += 2) {
-                            res += String.fromCharCode(bytes[i] + (bytes[i + 1] * 256))
-                        }
-                        return res
-                    }
-
-                    Buffer.prototype.slice = function slice(start, end) {
-                        let len = this.length
-                        start = ~~start
-                        end = end === undefined ? len : ~~end
-
-                        if (start < 0) {
-                            start += len
-                            if (start < 0) { start = 0 }
-                        } else if (start > len) {
-                            start = len
-                        }
-
-                        if (end < 0) {
-                            end += len
-                            if (end < 0) { end = 0 }
-                        } else if (end > len) {
-                            end = len
-                        }
-
-                        if (end < start) { end = start }
-
-                        let newBuf = this.subarray(start, end)
-                        // Return an augmented `Uint8Array` instance
-                        newBuf.__proto__ = Buffer.prototype
-                        return newBuf
-                    }
-
-                    /*
-                     * Need to make sure that buffer isn't trying to write out of bounds.
-                     */
-                    function checkOffset(offset, ext, length) {
-                        if ((offset % 1) !== 0 || offset < 0) { throw new RangeError('offset is not uint') }
-                        if (offset + ext > length) { throw new RangeError('Trying to access beyond buffer length') }
-                    }
-
-                    Buffer.prototype.readUIntLE = function readUIntLE(offset, byteLength, noAssert) {
-                        offset = offset >>> 0
-                        byteLength = byteLength >>> 0
-                        if (!noAssert) { checkOffset(offset, byteLength, this.length) }
-
-                        let val = this[offset]
-                        let mul = 1
-                        let i = 0
-                        while (++i < byteLength && (mul *= 0x100)) {
-                            val += this[offset + i] * mul
-                        }
-
-                        return val
-                    }
-
-                    Buffer.prototype.readUIntBE = function readUIntBE(offset, byteLength, noAssert) {
-                        offset = offset >>> 0
-                        byteLength = byteLength >>> 0
-                        if (!noAssert) {
-                            checkOffset(offset, byteLength, this.length)
-                        }
-
-                        let val = this[offset + --byteLength]
-                        let mul = 1
-                        while (byteLength > 0 && (mul *= 0x100)) {
-                            val += this[offset + --byteLength] * mul
-                        }
-
-                        return val
-                    }
-
-                    Buffer.prototype.readUInt8 = function readUInt8(offset, noAssert) {
-                        offset = offset >>> 0
-                        if (!noAssert) { checkOffset(offset, 1, this.length) }
-                        return this[offset]
-                    }
-
-                    Buffer.prototype.readUInt16LE = function readUInt16LE(offset, noAssert) {
-                        offset = offset >>> 0
-                        if (!noAssert) { checkOffset(offset, 2, this.length) }
-                        return this[offset] | (this[offset + 1] << 8)
-                    }
-
-                    Buffer.prototype.readUInt16BE = function readUInt16BE(offset, noAssert) {
-                        offset = offset >>> 0
-                        if (!noAssert) { checkOffset(offset, 2, this.length) }
-                        return (this[offset] << 8) | this[offset + 1]
-                    }
-
-                    Buffer.prototype.readUInt32LE = function readUInt32LE(offset, noAssert) {
-                        offset = offset >>> 0
-                        if (!noAssert) { checkOffset(offset, 4, this.length) }
-
-                        return ((this[offset]) |
-                            (this[offset + 1] << 8) |
-                            (this[offset + 2] << 16)) +
-                            (this[offset + 3] * 0x1000000)
-                    }
-
-                    Buffer.prototype.readUInt32BE = function readUInt32BE(offset, noAssert) {
-                        offset = offset >>> 0
-                        if (!noAssert) { checkOffset(offset, 4, this.length) }
-
-                        return (this[offset] * 0x1000000) +
-                            ((this[offset + 1] << 16) |
-                                (this[offset + 2] << 8) |
-                                this[offset + 3])
-                    }
-
-                    Buffer.prototype.readIntLE = function readIntLE(offset, byteLength, noAssert) {
-                        offset = offset >>> 0
-                        byteLength = byteLength >>> 0
-                        if (!noAssert) { checkOffset(offset, byteLength, this.length) }
-
-                        let val = this[offset]
-                        let mul = 1
-                        let i = 0
-                        while (++i < byteLength && (mul *= 0x100)) {
-                            val += this[offset + i] * mul
-                        }
-                        mul *= 0x80
-
-                        if (val >= mul) { val -= Math.pow(2, 8 * byteLength) }
-
-                        return val
-                    }
-
-                    Buffer.prototype.readIntBE = function readIntBE(offset, byteLength, noAssert) {
-                        offset = offset >>> 0
-                        byteLength = byteLength >>> 0
-                        if (!noAssert) { checkOffset(offset, byteLength, this.length) }
-
-                        let i = byteLength
-                        let mul = 1
-                        let val = this[offset + --i]
-                        while (i > 0 && (mul *= 0x100)) {
-                            val += this[offset + --i] * mul
-                        }
-                        mul *= 0x80
-
-                        if (val >= mul) { val -= Math.pow(2, 8 * byteLength) }
-
-                        return val
-                    }
-
-                    Buffer.prototype.readInt8 = function readInt8(offset, noAssert) {
-                        offset = offset >>> 0
-                        if (!noAssert) { checkOffset(offset, 1, this.length) }
-                        if (!(this[offset] & 0x80)) { return (this[offset]) }
-                        return ((0xff - this[offset] + 1) * -1)
-                    }
-
-                    Buffer.prototype.readInt16LE = function readInt16LE(offset, noAssert) {
-                        offset = offset >>> 0
-                        if (!noAssert) { checkOffset(offset, 2, this.length) }
-                        let val = this[offset] | (this[offset + 1] << 8)
-                        return (val & 0x8000) ? val | 0xFFFF0000 : val
-                    }
-
-                    Buffer.prototype.readInt16BE = function readInt16BE(offset, noAssert) {
-                        offset = offset >>> 0
-                        if (!noAssert) { checkOffset(offset, 2, this.length) }
-                        let val = this[offset + 1] | (this[offset] << 8)
-                        return (val & 0x8000) ? val | 0xFFFF0000 : val
-                    }
-
-                    Buffer.prototype.readInt32LE = function readInt32LE(offset, noAssert) {
-                        offset = offset >>> 0
-                        if (!noAssert) { checkOffset(offset, 4, this.length) }
-
-                        return (this[offset]) |
-                            (this[offset + 1] << 8) |
-                            (this[offset + 2] << 16) |
-                            (this[offset + 3] << 24)
-                    }
-
-                    Buffer.prototype.readInt32BE = function readInt32BE(offset, noAssert) {
-                        offset = offset >>> 0
-                        if (!noAssert) { checkOffset(offset, 4, this.length) }
-
-                        return (this[offset] << 24) |
-                            (this[offset + 1] << 16) |
-                            (this[offset + 2] << 8) |
-                            (this[offset + 3])
-                    }
-
-                    Buffer.prototype.readFloatLE = function readFloatLE(offset, noAssert) {
-                        offset = offset >>> 0
-                        if (!noAssert) { checkOffset(offset, 4, this.length) }
-                        return ieee754.read(this, offset, true, 23, 4)
-                    }
-
-                    Buffer.prototype.readFloatBE = function readFloatBE(offset, noAssert) {
-                        offset = offset >>> 0
-                        if (!noAssert) { checkOffset(offset, 4, this.length) }
-                        return ieee754.read(this, offset, false, 23, 4)
-                    }
-
-                    Buffer.prototype.readDoubleLE = function readDoubleLE(offset, noAssert) {
-                        offset = offset >>> 0
-                        if (!noAssert) { checkOffset(offset, 8, this.length) }
-                        return ieee754.read(this, offset, true, 52, 8)
-                    }
-
-                    Buffer.prototype.readDoubleBE = function readDoubleBE(offset, noAssert) {
-                        offset = offset >>> 0
-                        if (!noAssert) { checkOffset(offset, 8, this.length) }
-                        return ieee754.read(this, offset, false, 52, 8)
-                    }
-
-                    function checkInt(buf, value, offset, ext, max, min) {
-                        if (!Buffer.isBuffer(buf)) { throw new TypeError('"buffer" argument must be a Buffer instance') }
-                        if (value > max || value < min) { throw new RangeError('"value" argument is out of bounds') }
-                        if (offset + ext > buf.length) { throw new RangeError('Index out of range') }
-                    }
-
-                    Buffer.prototype.writeUIntLE = function writeUIntLE(value, offset, byteLength, noAssert) {
-                        value = +value
-                        offset = offset >>> 0
-                        byteLength = byteLength >>> 0
-                        if (!noAssert) {
-                            let maxBytes = Math.pow(2, 8 * byteLength) - 1
-                            checkInt(this, value, offset, byteLength, maxBytes, 0)
-                        }
-
-                        let mul = 1
-                        let i = 0
-                        this[offset] = value & 0xFF
-                        while (++i < byteLength && (mul *= 0x100)) {
-                            this[offset + i] = (value / mul) & 0xFF
-                        }
-
-                        return offset + byteLength
-                    }
-
-                    Buffer.prototype.writeUIntBE = function writeUIntBE(value, offset, byteLength, noAssert) {
-                        value = +value
-                        offset = offset >>> 0
-                        byteLength = byteLength >>> 0
-                        if (!noAssert) {
-                            let maxBytes = Math.pow(2, 8 * byteLength) - 1
-                            checkInt(this, value, offset, byteLength, maxBytes, 0)
-                        }
-
-                        let i = byteLength - 1
-                        let mul = 1
-                        this[offset + i] = value & 0xFF
-                        while (--i >= 0 && (mul *= 0x100)) {
-                            this[offset + i] = (value / mul) & 0xFF
-                        }
-
-                        return offset + byteLength
-                    }
-
-                    Buffer.prototype.writeUInt8 = function writeUInt8(value, offset, noAssert) {
-                        value = +value
-                        offset = offset >>> 0
-                        if (!noAssert) { checkInt(this, value, offset, 1, 0xff, 0) }
-                        this[offset] = (value & 0xff)
-                        return offset + 1
-                    }
-
-                    Buffer.prototype.writeUInt16LE = function writeUInt16LE(value, offset, noAssert) {
-                        value = +value
-                        offset = offset >>> 0
-                        if (!noAssert) { checkInt(this, value, offset, 2, 0xffff, 0) }
-                        this[offset] = (value & 0xff)
-                        this[offset + 1] = (value >>> 8)
-                        return offset + 2
-                    }
-
-                    Buffer.prototype.writeUInt16BE = function writeUInt16BE(value, offset, noAssert) {
-                        value = +value
-                        offset = offset >>> 0
-                        if (!noAssert) { checkInt(this, value, offset, 2, 0xffff, 0) }
-                        this[offset] = (value >>> 8)
-                        this[offset + 1] = (value & 0xff)
-                        return offset + 2
-                    }
-
-                    Buffer.prototype.writeUInt32LE = function writeUInt32LE(value, offset, noAssert) {
-                        value = +value
-                        offset = offset >>> 0
-                        if (!noAssert) { checkInt(this, value, offset, 4, 0xffffffff, 0) }
-                        this[offset + 3] = (value >>> 24)
-                        this[offset + 2] = (value >>> 16)
-                        this[offset + 1] = (value >>> 8)
-                        this[offset] = (value & 0xff)
-                        return offset + 4
-                    }
-
-                    Buffer.prototype.writeUInt32BE = function writeUInt32BE(value, offset, noAssert) {
-                        value = +value
-                        offset = offset >>> 0
-                        if (!noAssert) { checkInt(this, value, offset, 4, 0xffffffff, 0) }
-                        this[offset] = (value >>> 24)
-                        this[offset + 1] = (value >>> 16)
-                        this[offset + 2] = (value >>> 8)
-                        this[offset + 3] = (value & 0xff)
-                        return offset + 4
-                    }
-
-                    Buffer.prototype.writeIntLE = function writeIntLE(value, offset, byteLength, noAssert) {
-                        value = +value
-                        offset = offset >>> 0
-                        if (!noAssert) {
-                            let limit = Math.pow(2, (8 * byteLength) - 1)
-
-                            checkInt(this, value, offset, byteLength, limit - 1, -limit)
-                        }
-
-                        let i = 0
-                        let mul = 1
-                        let sub = 0
-                        this[offset] = value & 0xFF
-                        while (++i < byteLength && (mul *= 0x100)) {
-                            if (value < 0 && sub === 0 && this[offset + i - 1] !== 0) {
-                                sub = 1
-                            }
-                            this[offset + i] = ((value / mul) >> 0) - sub & 0xFF
-                        }
-
-                        return offset + byteLength
-                    }
-
-                    Buffer.prototype.writeIntBE = function writeIntBE(value, offset, byteLength, noAssert) {
-                        value = +value
-                        offset = offset >>> 0
-                        if (!noAssert) {
-                            let limit = Math.pow(2, (8 * byteLength) - 1)
-
-                            checkInt(this, value, offset, byteLength, limit - 1, -limit)
-                        }
-
-                        let i = byteLength - 1
-                        let mul = 1
-                        let sub = 0
-                        this[offset + i] = value & 0xFF
-                        while (--i >= 0 && (mul *= 0x100)) {
-                            if (value < 0 && sub === 0 && this[offset + i + 1] !== 0) {
-                                sub = 1
-                            }
-                            this[offset + i] = ((value / mul) >> 0) - sub & 0xFF
-                        }
-
-                        return offset + byteLength
-                    }
-
-                    Buffer.prototype.writeInt8 = function writeInt8(value, offset, noAssert) {
-                        value = +value
-                        offset = offset >>> 0
-                        if (!noAssert) { checkInt(this, value, offset, 1, 0x7f, -0x80) }
-                        if (value < 0) { value = 0xff + value + 1 }
-                        this[offset] = (value & 0xff)
-                        return offset + 1
-                    }
-
-                    Buffer.prototype.writeInt16LE = function writeInt16LE(value, offset, noAssert) {
-                        value = +value
-                        offset = offset >>> 0
-                        if (!noAssert) { checkInt(this, value, offset, 2, 0x7fff, -0x8000) }
-                        this[offset] = (value & 0xff)
-                        this[offset + 1] = (value >>> 8)
-                        return offset + 2
-                    }
-
-                    Buffer.prototype.writeInt16BE = function writeInt16BE(value, offset, noAssert) {
-                        value = +value
-                        offset = offset >>> 0
-                        if (!noAssert) { checkInt(this, value, offset, 2, 0x7fff, -0x8000) }
-                        this[offset] = (value >>> 8)
-                        this[offset + 1] = (value & 0xff)
-                        return offset + 2
-                    }
-
-                    Buffer.prototype.writeInt32LE = function writeInt32LE(value, offset, noAssert) {
-                        value = +value
-                        offset = offset >>> 0
-                        if (!noAssert) { checkInt(this, value, offset, 4, 0x7fffffff, -0x80000000) }
-                        this[offset] = (value & 0xff)
-                        this[offset + 1] = (value >>> 8)
-                        this[offset + 2] = (value >>> 16)
-                        this[offset + 3] = (value >>> 24)
-                        return offset + 4
-                    }
-
-                    Buffer.prototype.writeInt32BE = function writeInt32BE(value, offset, noAssert) {
-                        value = +value
-                        offset = offset >>> 0
-                        if (!noAssert) { checkInt(this, value, offset, 4, 0x7fffffff, -0x80000000) }
-                        if (value < 0) { value = 0xffffffff + value + 1 }
-                        this[offset] = (value >>> 24)
-                        this[offset + 1] = (value >>> 16)
-                        this[offset + 2] = (value >>> 8)
-                        this[offset + 3] = (value & 0xff)
-                        return offset + 4
-                    }
-
-                    function checkIEEE754(buf, value, offset, ext, max, min) {
-                        if (offset + ext > buf.length) { throw new RangeError('Index out of range') }
-                        if (offset < 0) { throw new RangeError('Index out of range') }
-                    }
-
-                    function writeFloat(buf, value, offset, littleEndian, noAssert) {
-                        value = +value
-                        offset = offset >>> 0
-                        if (!noAssert) {
-                            checkIEEE754(buf, value, offset, 4, 3.4028234663852886e+38, -3.4028234663852886e+38)
-                        }
-                        ieee754.write(buf, value, offset, littleEndian, 23, 4)
-                        return offset + 4
-                    }
-
-                    Buffer.prototype.writeFloatLE = function writeFloatLE(value, offset, noAssert) {
-                        return writeFloat(this, value, offset, true, noAssert)
-                    }
-
-                    Buffer.prototype.writeFloatBE = function writeFloatBE(value, offset, noAssert) {
-                        return writeFloat(this, value, offset, false, noAssert)
-                    }
-
-                    function writeDouble(buf, value, offset, littleEndian, noAssert) {
-                        value = +value
-                        offset = offset >>> 0
-                        if (!noAssert) {
-                            checkIEEE754(buf, value, offset, 8, 1.7976931348623157E+308, -1.7976931348623157E+308)
-                        }
-                        ieee754.write(buf, value, offset, littleEndian, 52, 8)
-                        return offset + 8
-                    }
-
-                    Buffer.prototype.writeDoubleLE = function writeDoubleLE(value, offset, noAssert) {
-                        return writeDouble(this, value, offset, true, noAssert)
-                    }
-
-                    Buffer.prototype.writeDoubleBE = function writeDoubleBE(value, offset, noAssert) {
-                        return writeDouble(this, value, offset, false, noAssert)
-                    }
-
-                    // copy(targetBuffer, targetStart=0, sourceStart=0, sourceEnd=buffer.length)
-                    Buffer.prototype.copy = function copy(target, targetStart, start, end) {
-                        if (!Buffer.isBuffer(target)) { throw new TypeError('argument should be a Buffer') }
-                        if (!start) { start = 0 }
-                        if (!end && end !== 0) { end = this.length }
-                        if (targetStart >= target.length) { targetStart = target.length }
-                        if (!targetStart) { targetStart = 0 }
-                        if (end > 0 && end < start) { end = start }
-
-                        // Copy 0 bytes; we're done
-                        if (end === start) { return 0 }
-                        if (target.length === 0 || this.length === 0) { return 0 }
-
-                        // Fatal error conditions
-                        if (targetStart < 0) {
-                            throw new RangeError('targetStart out of bounds')
-                        }
-                        if (start < 0 || start >= this.length) { throw new RangeError('Index out of range') }
-                        if (end < 0) { throw new RangeError('sourceEnd out of bounds') }
-
-                        // Are we oob?
-                        if (end > this.length) { end = this.length }
-                        if (target.length - targetStart < end - start) {
-                            end = target.length - targetStart + start
-                        }
-
-                        let len = end - start
-
-                        if (this === target && typeof Uint8Array.prototype.copyWithin === 'function') {
-                            // Use built-in when available, missing from IE11
-                            this.copyWithin(targetStart, start, end)
-                        } else if (this === target && start < targetStart && targetStart < end) {
-                            // descending copy from end
-                            for (let i = len - 1; i >= 0; --i) {
-                                target[i + targetStart] = this[i + start]
-                            }
-                        } else {
-                            Uint8Array.prototype.set.call(
-                                target,
-                                this.subarray(start, end),
-                                targetStart
-                            )
-                        }
-
-                        return len
-                    }
-
-                    // Usage:
-                    //    buffer.fill(number[, offset[, end]])
-                    //    buffer.fill(buffer[, offset[, end]])
-                    //    buffer.fill(string[, offset[, end]][, encoding])
-                    Buffer.prototype.fill = function fill(val, start, end, encoding) {
-                        // Handle string cases:
-                        if (typeof val === 'string') {
-                            if (typeof start === 'string') {
-                                encoding = start
-                                start = 0
-                                end = this.length
-                            } else if (typeof end === 'string') {
-                                encoding = end
-                                end = this.length
-                            }
-                            if (encoding !== undefined && typeof encoding !== 'string') {
-                                throw new TypeError('encoding must be a string')
-                            }
-                            if (typeof encoding === 'string' && !Buffer.isEncoding(encoding)) {
-                                throw new TypeError('Unknown encoding: ' + encoding)
-                            }
-                            if (val.length === 1) {
-                                let code = val.charCodeAt(0)
-                                if ((encoding === 'utf8' && code < 128) ||
-                                    encoding === 'latin1') {
-                                    // Fast path: If `val` fits into a single byte, use that numeric value.
-                                    val = code
-                                }
-                            }
-                        } else if (typeof val === 'number') {
-                            val = val & 255
-                        }
-
-                        // Invalid ranges are not set to a default, so can range check early.
-                        if (start < 0 || this.length < start || this.length < end) {
-                            throw new RangeError('Out of range index')
-                        }
-
-                        if (end <= start) {
-                            return this
-                        }
-
-                        start = start >>> 0
-                        end = end === undefined ? this.length : end >>> 0
-
-                        if (!val) { val = 0 }
-
-                        let i
-                        if (typeof val === 'number') {
-                            for (i = start; i < end; ++i) {
-                                this[i] = val
-                            }
-                        } else {
-                            let bytes = Buffer.isBuffer(val)
-                                ? val
-                                : Buffer.from(val, encoding)
-                            let len = bytes.length
-                            if (len === 0) {
-                                throw new TypeError('The value "' + val +
-                                    '" is invalid for argument "value"')
-                            }
-                            for (i = 0; i < end - start; ++i) {
-                                this[i + start] = bytes[i % len]
-                            }
-                        }
-
-                        return this
-                    }
-
-                    // HELPER FUNCTIONS
-                    // ================
-
-                    let INVALID_BASE64_RE = /[^+/0-9A-Za-z-_]/g
-
-                    function base64clean(str) {
-                        // Node takes equal signs as end of the Base64 encoding
-                        str = str.split('=')[0]
-                        // Node strips out invalid characters like \n and \t from the string, base64-js does not
-                        str = str.trim().replace(INVALID_BASE64_RE, '')
-                        // Node converts strings with length < 2 to ''
-                        if (str.length < 2) { return '' }
-                        // Node allows for non-padded base64 strings (missing trailing ===), base64-js does not
-                        while (str.length % 4 !== 0) {
-                            str = str + '='
-                        }
-                        return str
-                    }
-
-                    function toHex(n) {
-                        if (n < 16) { return '0' + n.toString(16) }
-                        return n.toString(16)
-                    }
-
-                    function utf8ToBytes(string, units) {
-                        units = units || Infinity
-                        let codePoint
-                        let length = string.length
-                        let leadSurrogate = null
-                        let bytes = []
-
-                        for (let i = 0; i < length; ++i) {
-                            codePoint = string.charCodeAt(i)
-
-                            // is surrogate component
-                            if (codePoint > 0xD7FF && codePoint < 0xE000) {
-                                // last char was a lead
-                                if (!leadSurrogate) {
-                                    // no lead yet
-                                    if (codePoint > 0xDBFF) {
-                                        // unexpected trail
-                                        if ((units -= 3) > -1) { bytes.push(0xEF, 0xBF, 0xBD) }
-                                        continue
-                                    } else if (i + 1 === length) {
-                                        // unpaired lead
-                                        if ((units -= 3) > -1) { bytes.push(0xEF, 0xBF, 0xBD) }
-                                        continue
-                                    }
-
-                                    // valid lead
-                                    leadSurrogate = codePoint
-
-                                    continue
-                                }
-
-                                // 2 leads in a row
-                                if (codePoint < 0xDC00) {
-                                    if ((units -= 3) > -1) { bytes.push(0xEF, 0xBF, 0xBD) }
-                                    leadSurrogate = codePoint
-                                    continue
-                                }
-
-                                // valid surrogate pair
-                                codePoint = (leadSurrogate - 0xD800 << 10 | codePoint - 0xDC00) + 0x10000
-                            } else if (leadSurrogate) {
-                                // valid bmp char, but last char was a lead
-                                if ((units -= 3) > -1) { bytes.push(0xEF, 0xBF, 0xBD) }
-                            }
-
-                            leadSurrogate = null
-
-                            // encode utf8
-                            if (codePoint < 0x80) {
-                                if ((units -= 1) < 0) { break }
-                                bytes.push(codePoint)
-                            } else if (codePoint < 0x800) {
-                                if ((units -= 2) < 0) { break }
-                                bytes.push(
-                                    codePoint >> 0x6 | 0xC0,
-                                    codePoint & 0x3F | 0x80
-                                )
-                            } else if (codePoint < 0x10000) {
-                                if ((units -= 3) < 0) { break }
-                                bytes.push(
-                                    codePoint >> 0xC | 0xE0,
-                                    codePoint >> 0x6 & 0x3F | 0x80,
-                                    codePoint & 0x3F | 0x80
-                                )
-                            } else if (codePoint < 0x110000) {
-                                if ((units -= 4) < 0) { break }
-                                bytes.push(
-                                    codePoint >> 0x12 | 0xF0,
-                                    codePoint >> 0xC & 0x3F | 0x80,
-                                    codePoint >> 0x6 & 0x3F | 0x80,
-                                    codePoint & 0x3F | 0x80
-                                )
-                            } else {
-                                throw new Error('Invalid code point')
-                            }
-                        }
-
-                        return bytes
-                    }
-
-                    function asciiToBytes(str) {
-                        let byteArray = []
-                        for (let i = 0; i < str.length; ++i) {
-                            // Node's code seems to be doing this and not & 0x7F..
-                            byteArray.push(str.charCodeAt(i) & 0xFF)
-                        }
-                        return byteArray
-                    }
-
-                    function utf16leToBytes(str, units) {
-                        let c, hi, lo
-                        let byteArray = []
-                        for (let i = 0; i < str.length; ++i) {
-                            if ((units -= 2) < 0) { break }
-
-                            c = str.charCodeAt(i)
-                            hi = c >> 8
-                            lo = c % 256
-                            byteArray.push(lo)
-                            byteArray.push(hi)
-                        }
-
-                        return byteArray
-                    }
-
-                    function base64ToBytes(str) {
-                        return base64.toByteArray(base64clean(str))
-                    }
-
-                    function blitBuffer(src, dst, offset, length) {
-                        let i = 0
-                        for (; i < length; ++i) {
-                            if ((i + offset >= dst.length) || (i >= src.length)) { break }
-                            dst[i + offset] = src[i]
-                        }
-                        return i
-                    }
-
-                    // ArrayBuffer or Uint8Array objects from other contexts (i.e. iframes) do not pass
-                    // the `instanceof` check but they should be treated as of that type.
-                    // See: https://github.com/feross/buffer/issues/166
-                    function isInstance(obj, type) {
-                        return obj instanceof type ||
-                            (obj != null && obj.constructor != null && obj.constructor.name != null &&
-                                obj.constructor.name === type.name)
-                    }
-                    function numberIsNaN(obj) {
-                        // For IE11 support
-                        return obj !== obj // eslint-disable-line no-self-compare
-                    }
-
-                }).call(this)
-            }).call(this, require("buffer").Buffer)
-        }, { "base64-js": 1, "buffer": 2, "ieee754": 3 }], 3: [function (require, module, exports) {
-            /*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
-            exports.read = function (buffer, offset, isLE, mLen, nBytes) {
-                let e, m
-                let eLen = (nBytes * 8) - mLen - 1
-                let eMax = (1 << eLen) - 1
-                let eBias = eMax >> 1
-                let nBits = -7
-                let i = isLE ? (nBytes - 1) : 0
-                let d = isLE ? -1 : 1
-                let s = buffer[offset + i]
-
-                i += d
-
-                e = s & ((1 << (-nBits)) - 1)
-                s >>= (-nBits)
-                nBits += eLen
-                for (; nBits > 0; e = (e * 256) + buffer[offset + i], i += d, nBits -= 8) { }
-
-                m = e & ((1 << (-nBits)) - 1)
-                e >>= (-nBits)
-                nBits += mLen
-                for (; nBits > 0; m = (m * 256) + buffer[offset + i], i += d, nBits -= 8) { }
-
-                if (e === 0) {
-                    e = 1 - eBias
-                } else if (e === eMax) {
-                    return m ? NaN : ((s ? -1 : 1) * Infinity)
-                } else {
-                    m = m + Math.pow(2, mLen)
-                    e = e - eBias
-                }
-                return (s ? -1 : 1) * m * Math.pow(2, e - mLen)
-            }
-
-            exports.write = function (buffer, value, offset, isLE, mLen, nBytes) {
-                let e, m, c
-                let eLen = (nBytes * 8) - mLen - 1
-                let eMax = (1 << eLen) - 1
-                let eBias = eMax >> 1
-                let rt = (mLen === 23 ? Math.pow(2, -24) - Math.pow(2, -77) : 0)
-                let i = isLE ? 0 : (nBytes - 1)
-                let d = isLE ? 1 : -1
-                let s = value < 0 || (value === 0 && 1 / value < 0) ? 1 : 0
-
-                value = Math.abs(value)
-
-                if (isNaN(value) || value === Infinity) {
-                    m = isNaN(value) ? 1 : 0
-                    e = eMax
-                } else {
-                    e = Math.floor(Math.log(value) / Math.LN2)
-                    if (value * (c = Math.pow(2, -e)) < 1) {
-                        e--
-                        c *= 2
-                    }
-                    if (e + eBias >= 1) {
-                        value += rt / c
-                    } else {
-                        value += rt * Math.pow(2, 1 - eBias)
-                    }
-                    if (value * c >= 2) {
-                        e++
-                        c /= 2
-                    }
-
-                    if (e + eBias >= eMax) {
-                        m = 0
-                        e = eMax
-                    } else if (e + eBias >= 1) {
-                        m = ((value * c) - 1) * Math.pow(2, mLen)
-                        e = e + eBias
-                    } else {
-                        m = value * Math.pow(2, eBias - 1) * Math.pow(2, mLen)
-                        e = 0
-                    }
-                }
-
-                for (; mLen >= 8; buffer[offset + i] = m & 0xff, i += d, m /= 256, mLen -= 8) { }
-
-                e = (e << mLen) | m
-                eLen += mLen
-                for (; eLen > 0; buffer[offset + i] = e & 0xff, i += d, e /= 256, eLen -= 8) { }
-
-                buffer[offset + i - d] |= s * 128
-            }
-
-        }, {}], 4: [function (require, module, exports) {
-            module.exports = {
-                'ipPacket': require('./ip-packet'),
-                'udpPacket': require('./udp-packet'),
-                'tcpPacket': require('./tcp-packet'),
-                'ethernetPacket': require('./ethernet-packet')
-            }
-        }, { "./ip-packet": 5, "./tcp-packet": 6, "./udp-packet": 7, "./ethernet-packet": 8 }], 5: [function (require, module, exports) {
-            (function (Buffer) {
-                (function () {
-                    module.exports = configure({})
-
-                    function configure(opts) {
-                        function encode(packet, buf, offset) {
-                            if (!buf) { buf = new Buffer(encodingLength(packet, packet.version === 4 ? 20 : 40)) }
-                            if (!offset) { offset = 0 }
-                            if (packet.version === 4) {
-
-                                // IPv4 header
-                                buf[offset] = packet.version << 4 | (packet.ihl || 5)
-                                buf[offset + 1] = (packet.dscp || 0) << 2 | (packet.ecn || 0)
-                                buf.writeUInt16BE(20 + packet.data.length, offset + 2)
-                                buf.writeUInt16BE(packet.identification || 0, offset + 4)
-                                buf.writeUInt16BE((packet.flags || 0) << 13 | (packet.fragmentOffset || 0), offset + 6)
-                                buf[offset + 8] = packet.ttl || 0
-                                buf[offset + 9] = packet.protocol || 0
-                                buf.writeUInt16BE(0, offset + 10)
-                                encodeIp(packet.sourceIp, buf, offset + 12)
-                                encodeIp(packet.destinationIp, buf, offset + 16)
-                                buf.writeUInt16BE(checksum(buf, offset, offset + 20), offset + 10)
-                                packet.data.copy(buf, offset + 20)
-
-                                encode.bytes = 20 + packet.data.length
-                            } else {
-                                // IPv6 header
-                                buf.writeUInt32BE(packet.version << 28 | (packet.trafficClass << 20) | packet.flowLabel, offset);
-                                buf.writeUInt16BE(packet.data.length, offset + 4);
-                                buf[offset + 6] = packet.nextHeader;
-                                buf[offset + 7] = packet.hopLimit || 64;
-                                const sourceIpBuffer = Buffer.from(packet.sourceIp);
-                                const destinationIpBuffer = Buffer.from(packet.destinationIp);
-
-                                sourceIpBuffer.copy(buf, offset + 8, 0, 16);
-                                destinationIpBuffer.copy(buf, offset + 24, 0, 16);
-
-                                // Here you would continue encoding any additional IPv6 header fields
-
-                                packet.data.copy(buf, offset + 40);
-
-                                encode.bytes = 40 + packet.data.length;
-                            }
-
-                            return buf
-                        }
-
-                        function decode(buf, offset) {
-                            if (!offset) { offset = 0 }
-
-                            let version = buf[offset] >> 4
-                            if (version !== 4) { throw new Error('Currently only IPv4 is supported') }
-                            let ihl = buf[offset] & 15
-                            if (ihl > 5) { throw new Error('Currently only IHL <= 5 is supported') }
-                            let length = buf.readUInt16BE(offset + 2)
-                            let decodedChecksum = buf.readUInt16BE(offset + 10)
-                            let ignoreChecksum = opts.allowNullChecksum && decodedChecksum === 0
-
-                            if (!ignoreChecksum) {
-                                let sum = checksum(buf, offset, offset + 20)
-
-                                if (sum) { throw new Error('Bad checksum (' + sum + ')') }
-                            }
-
-                            decode.bytes = length
-                            return {
-                                version: version,
-                                ihl: ihl,
-                                dscp: buf[offset + 1] >> 2,
-                                ecn: buf[offset + 1] & 3,
-                                length: length,
-                                identification: buf.readUInt16BE(offset + 4),
-                                flags: buf[offset + 6] >> 5,
-                                fragmentOffset: buf.readUInt16BE(offset + 6) & 8191,
-                                ttl: buf[offset + 8],
-                                protocol: buf[offset + 9],
-                                checksum: decodedChecksum,
-                                sourceIp: decodeIp(buf, offset + 12),
-                                destinationIp: decodeIp(buf, offset + 16),
-                                data: buf.slice(offset + 20, offset + length)
-                            }
-                        }
-
-                        function encodingLength(packet, ipPacketSize) {
-                            return ipPacketSize + packet.data.length
-                        }
-
-                        encode.bytes = decode.bytes = 0
-
-                        return {
-                            configure: configure,
-                            encodingLength: encodingLength,
-                            encode: encode,
-                            decode: decode
-                        }
-                    }
-
-                    function encodeIp(addr, buf, offset) {
-                        for (let i = 0; i < 4; i++) {
-                            let oct = parseInt(addr, 10)
-                            buf[offset++] = oct
-                            addr = addr.slice(oct < 100 ? oct < 10 ? 2 : 3 : 4)
-                        }
-                    }
-
-                    function decodeIp(buf, offset) {
-                        return buf[offset] + '.' + buf[offset + 1] + '.' + buf[offset + 2] + '.' + buf[offset + 3]
-                    }
-
-                    function checksum(buf, offset, end) {
-                        let sum = 0
-                        for (; offset < end; offset += 2) { sum += buf.readUInt16BE(offset) }
-                        while (true) {
-                            let carry = sum >> 16
-                            if (!carry) { break }
-                            sum = (sum & 0xffff) + carry
-                        }
-                        return ~sum & 0xffff
-                    }
-
-                }).call(this)
-            }).call(this, require("buffer").Buffer)
-        }, { "buffer": 2 }], 6: [function (require, module, exports) {
-            (function (Buffer) {
-                (function () {
-                    exports.encode = encode
-                    exports.decode = decode
-                    function tcpChecksum(packet, buf) {
-                        // pseudo header: srcip (16), dstip (16), 0 (8), proto (8), udp len (16)
-                        let len = buf.length
-                        let srcip = packet.sourceIp
-                        let dstip = packet.destinationIp
-                        if (!srcip || !dstip) { return 0xffff }
-                        let protocol = packet.protocol === undefined ? 0x11 : packet.protocol
-                        let sum = 0xffff
-                        // pseudo header: srcip (16), dstip (16), 0 (8), proto (8), udp len (16)
-                        if (srcip && dstip) {
-                            if (typeof srcip === 'string') { srcip = Buffer.from(srcip.split('.')) }
-                            if (typeof dstip === 'string') { dstip = Buffer.from(dstip.split('.')) }
-                            sum = 0
-                            let pad = len % 2
-                            for (let i = 0; i < len + pad; i += 2) {
-                                if (i === 6) { continue } // ignore the currently written checksum
-                                sum += ((buf[i] << 8) & 0xff00) + ((buf[i + 1]) & 0xff)
-                            }
-                            for (let i = 0; i < 4; i += 2) {
-                                sum += ((srcip[i] << 8) & 0xff00) + (srcip[i + 1] & 0xff)
-                            }
-                            for (let i = 0; i < 4; i += 2) {
-                                sum += ((dstip[i] << 8) & 0xff00) + (dstip[i + 1] & 0xff)
-                            }
-                            sum += protocol + len
-                            while (sum >> 16) {
-                                sum = (sum & 0xffff) + (sum >> 16)
-                            }
-                            sum = 0xffff ^ sum
-                        }
-                        return sum
-                    }
-                    function encode({ data, sourcePort, destinationPort, sequenceNumber = 0, acknowledgmentNumber = 0, ack = false, psh = false, syn = false }) {
-                        const dataLength = data ? data.length : 0
-                        const packet = Buffer.alloc(dataLength + 20)
-                        packet.writeUInt16BE(sourcePort, 0)
-                        packet.writeUInt16BE(destinationPort, 2)
-                        packet.writeUInt32BE(sequenceNumber, 4)
-                        packet.writeUInt32BE(acknowledgmentNumber, 8)
-                        packet.writeUInt16BE(((20 / 4) << 12), 12);
-                        const setAck = (ack) ? (1 << 4) : (0 << 4)
-                        const setPsh = (psh) ? (1 << 3) : (0 << 3)
-                        const setSyn = (syn) ? (1 << 1) : (0 << 1)
-                        const flags = setSyn | setPsh | setAck
-                        packet.writeUInt8(flags, 13);
-                        packet.writeUInt16BE(8235, 14);
-                        packet.writeUInt16BE(0, 16);
-                        if (data) { data.copy(packet, 20) }
-                        const checksum = tcpChecksum(data, packet);
-                        packet.writeUInt16BE(checksum, 16)
-                        return packet
-                    }
-
-                    function decode(buffer) {
-                        const sourcePort = buffer.readUInt16BE(0)
-                        const destinationPort = buffer.readUInt16BE(2)
-                        const sequenceNumber = buffer.readUInt32BE(4)
-                        const acknowledgmentNumber = buffer.readUInt32BE(8)
-                        const dataOffset = buffer[12] >> 4 & 15
-                        const reserved = buffer[12] >> 1 & 7
-                        const flags = buffer.readUInt16BE(12) & 0b111111111
-                        const ns = flags >> 8 & 1
-                        const cwr = flags >> 7 & 1
-                        const ece = flags >> 6 & 1
-                        const urg = flags >> 5 & 1
-                        const ack = flags >> 4 & 1
-                        const psh = flags >> 3 & 1
-                        const rst = flags >> 2 & 1
-                        const syn = flags >> 1 & 1
-                        const fin = flags & 1
-                        const windowSize = buffer.readUInt16BE(14)
-                        const checksum = buffer.readUInt16BE(16)
-                        const urgentPointer = buffer.readUInt16BE(18)
-                        const dataOffsetAsBytes = dataOffset * 4
-                        const data = buffer.slice(dataOffsetAsBytes, buffer.length)
-
-                        return {
-                            sourcePort, destinationPort, sequenceNumber, acknowledgmentNumber, dataOffset,
-                            flags, reserved, ns, cwr, ece, urg, ack, psh, rst, syn, fin,
-                            windowSize, checksum, urgentPointer, data
-                        }
-                    }
-                }).call(this)
-            }).call(this, require("buffer").Buffer)
-        }, { "buffer": 2 }], 7: [function (require, module, exports) {
-            (function (Buffer) {
-                (function () {
-                    exports.encode = function (packet) {
-                        let data = packet.data, len = data.length
-                        let srcport = packet.sourcePort, dstport = packet.destinationPort
-                        let buf = Buffer.alloc(len + 8)
-                        buf.writeUInt16BE(srcport, 0)
-                        buf.writeUInt16BE(dstport, 2)
-                        buf.writeUInt16BE(buf.length, 4)
-                        packet.data.copy(buf, 8)
-                        buf.writeUInt16BE(checksum(packet, buf), 6)
-                        return buf
-                    }
-
-                    exports.decode = function (buf) {
-                        let len = buf.readUInt16BE(4)
-                        return {
-                            sourcePort: buf.readUInt16BE(0),
-                            destinationPort: buf.readUInt16BE(2),
-                            length: len,
-                            checksum: buf.readUInt16BE(6),
-                            data: buf.slice(8, len)
-                        }
-                    }
-
-                    exports.checksum = checksum
-                    function checksum(packet, buf) {
-                        // pseudo header: srcip (16), dstip (16), 0 (8), proto (8), udp len (16)
-                        let len = buf.length
-                        let srcip = packet.sourceIp
-                        let dstip = packet.destinationIp
-                        if (!srcip || !dstip) { return 0xffff }
-                        let protocol = packet.protocol === undefined ? 0x11 : packet.protocol
-                        let sum = 0xffff
-                        // pseudo header: srcip (16), dstip (16), 0 (8), proto (8), udp len (16)
-                        if (srcip && dstip) {
-                            if (typeof srcip === 'string') { srcip = Buffer.from(srcip.split('.')) }
-                            if (typeof dstip === 'string') { dstip = Buffer.from(dstip.split('.')) }
-                            sum = 0
-                            let pad = len % 2
-                            for (let i = 0; i < len + pad; i += 2) {
-                                if (i === 6) { continue } // ignore the currently written checksum
-                                sum += ((buf[i] << 8) & 0xff00) + ((buf[i + 1]) & 0xff)
-                            }
-                            for (let i = 0; i < 4; i += 2) {
-                                sum += ((srcip[i] << 8) & 0xff00) + (srcip[i + 1] & 0xff)
-                            }
-                            for (let i = 0; i < 4; i += 2) {
-                                sum += ((dstip[i] << 8) & 0xff00) + (dstip[i + 1] & 0xff)
-                            }
-                            sum += protocol + len
-                            while (sum >> 16) {
-                                sum = (sum & 0xffff) + (sum >> 16)
-                            }
-                            sum = 0xffff ^ sum
-                        }
-                        return sum
-                    }
-
-                }).call(this)
-            }).call(this, require("buffer").Buffer)
-        }, { "buffer": 2 }], 8: [function (require, module, exports) {
-            (function (Buffer) {
-                (function () {
-                    exports.encode = encodeEthernetFrame
-                    function encodeEthernetFrame({ destinationMac = '11:22:33:44:55:66', sourceMac = 'aa:bb:cc:dd:ee:ff', type, data }) {
-                        const ethernetFrameLength = 14; // Length of Ethernet frame header
-                        const totalLength = ethernetFrameLength + data.length;
-                        const frame = Buffer.alloc(totalLength);
-
-                        destinationMac.split(':').forEach((byte, index) => frame.writeUInt8(parseInt(byte, 16), index));
-                        sourceMac.split(':').forEach((byte, index) => frame.writeUInt8(parseInt(byte, 16), index + 6));
-                        frame.writeUInt16BE(parseInt(type, 16), 12); // EtherType
-                        data.copy(frame, ethernetFrameLength); // Copy payload to frame
-
-                        return frame;
-                    }
-                }).call(this)
-            }).call(this, require("buffer").Buffer)
-        }, { "buffer": 2 }]
-    }, {}, [4])(4)
-});
diff --git a/src/module.ts b/src/module.ts
index f869034..c5c498e 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -23,7 +23,7 @@ export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOption
             id: 'aboveArrow',
             path: 'aboveArrow',
             name: 'Above Arrow',
-            description: 'String above Arrow (Labels[key])',
+            description: 'Label directly above an arrow (hidden in simple format)',
             defaultValue: '',
             editor: SimpleEditor,
         })
@@ -31,39 +31,46 @@ export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOption
             id: 'belowArrow',
             path: 'belowArrow',
             name: 'Below Arrow',
-            description: 'String below arrow (Labels[key])',
+            description: 'Label directly below an arrow (hidden in simple format)',
             defaultValue: '',
             editor: SimpleEditor,
         })
         .addCustomEditor({
-            id: 'source',
-            path: 'source',
-            name: 'Source',
-            description: 'String source (Labels[key])',
-            defaultValue: '',
+            id: 'details',
+            path: 'details',
+            name: 'Details',
+            description: 'Label 2 lines below an arrow',
+            defaultValue: ['timestamp'],
             editor: SimpleEditor,
         })
         .addCustomEditor({
             id: 'sourceLabel',
             path: 'sourceLabel',
             name: 'Source Label',
-            description: 'String source label (Labels[key])',
+            description: 'Label at the beginning of an arrow',
             defaultValue: '',
             editor: SimpleEditor,
         })
         .addCustomEditor({
-            id: 'destination',
-            path: 'destination',
-            name: 'Destination',
-            description: 'String destination (Labels[key])',
+            id: 'destinationLabel',
+            path: 'destinationLabel',
+            name: 'Destination Label',
+            description: 'Label at the end of an arrow',
             defaultValue: '',
             editor: SimpleEditor,
         })
         .addCustomEditor({
-            id: 'destinationLabel',
-            path: 'destinationLabel',
-            name: 'Destination Label',
-            description: 'String destination label (Labels[key])',
+            id: 'source',
+            path: 'source',
+            name: 'Source Host',
+            defaultValue: 'Label used to determine beginning of an arrow',
+            editor: SimpleEditor,
+        })
+        .addCustomEditor({
+            id: 'destination',
+            path: 'destination',
+            name: 'Destination Host',
+            description: 'Label used to determine end of an arrow',
             defaultValue: '',
             editor: SimpleEditor,
         })
@@ -84,7 +91,7 @@ export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOption
             id: 'colorGenerator',
             path: 'colorGenerator',
             name: 'Items for color generator',
-            description: 'String label(s) for color (Labels[key])',
+            description: 'Which labels should be used for background color generation',
             defaultValue: '',
             editor: SimpleEditor,
         })