https://electricui.com/78d56c48-4ce81dbf9ef5a6d9cbe3.js

1"use strict";(self.webpackChunk_electricui_blog=self.webpackChunk_electricui_blog||[]).push([[6738],{59901:function(l,s,t){var a=t(45392),p=t(2784),o=t(71360);function n(l){const s=Object.assign({p:"p",h2:"h2",code:"code",span:"span",h3:"h3"},(0,a.ah)(),l.components),{CodeBlock:t}=s;return t||function(l,s){throw new Error("Expected "+(s?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}("CodeBlock",!0),p.createElement(p.Fragment,null,p.createElement(s.p,null,"A Console allows for persistent logs of rich text to be displayed."),"\n",p.createElement(o.Z,{component:"Console",name:"overview"}),"\n",p.createElement(s.h2,null,"Usage"),"\n",p.createElement(s.p,null,"Consoles use the Data Source system, and accept a ",p.createElement(s.code,null,"dataSource")," prop. This allows for persistent storage of logs when navigating through the application."),"\n",p.createElement(t,null,p.createElement(s.span,{dangerouslySetInnerHTML:{__html:'<div class=\'line\'><span style="color: #4B83CD">import</span><span style="color: #333333"> </span><span style="color: #777777">{</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">Console&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{},&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">A&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">QueryableInnerOutput&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #777777">&amp;gt;&amp;gt;(&lt;/span>&lt;span style="color: #39927F">props&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ElectricConsoleProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">A&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ref&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Ref&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">ConsoleRefAPI&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">undefined&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #777777">})&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ReactElement&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Console&lt;/span>&lt;/div>\' >Console</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">}</span><span style="color: #333333"> </span><span style="color: #4B83CD">from</span><span style="color: #333333"> </span><span style="color: #777777">&apos;</span><span style="color: #886338">@electricui/components-desktop-blueprint-timeseries</span><span style="color: #777777">&apos;</span></div><div class=\'line\'><span style="color: #4B83CD">

1import</span><span style="color: #333333"> </span><span style="color: #777777">{</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">function&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">useMessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">unknown&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">M&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">&amp;gt;(&lt;/span>&lt;span style="color: #39927F">messageID&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">M&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">deviceIDOverride&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">DeviceID&lt;/span>&lt;span style="color: #777777">):&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">unknown&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">?&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ElectricUIDeveloperState&lt;/span>&lt;span style="color: #333333">[&lt;/span>&lt;span style="color: #248725">M&lt;/span>&lt;span style="color: #333333">] &lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">M&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useMessageDataSource&lt;/span>&lt;/div>\' >useMessageDataSource</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">}</span><span style="color: #333333"> </span><span style="color: #4B83CD">from</span><span style="color: #333333"> </span><span style="color: #777777">&apos;</span><span style="color: #886338">@electricui/core-timeseries</span><span style="color: #777777">&apos;</span></div><div class=\'line\'>&nbsp;</div><div class=\'line\'><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #3161AA"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">OverviewPage&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">JSX&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">Element&lt;/span>&lt;/div>\' >OverviewPage</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">=</span><span style="color: #333333"> </span><span style="color: #777777">()</span><span style="color: #333333"> </span><span style="color: #7A3E9D">=&gt;</span><span style="color: #333333"> </span><span style="color: #777777">{</span></div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">textDataSource&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >textDataSource</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">=</span><span style="color: #333333"> </span><span style="color: #3161AA"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #3161AA">useMessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">messageID&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">deviceIDOverride&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">DeviceID&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;span style="color: #333333">): &lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useMessageDataSource&lt;/span>&lt;/div>\' >useMessageDataSource</data-lsp></span><span style="color: #777777">&lt;</span><span style="color: #7A3E9D">string</span><span style="color: #777777">&gt;</span><span style="color: #333333">(</span><span style="color: #777777">&apos;</span><span style="color: #886338">text</span><span style="color: #777777">&apos;</span><span style="color: #333333">)</span></div><div class=\'line\'>&nbsp;</div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #4B83CD">return</span><span style="color: #333333"> </span><span style="color: #777777">&lt;</span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">Console&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{},&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">A&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">QueryableInnerOutput&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #777777">&amp;gt;&amp;gt;(&lt;/span>&lt;span style="color: #39927F">props&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ElectricConsoleProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">A&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ref&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Ref&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">ConsoleRefAPI&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">undefined&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #777777">})&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ReactElement&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Console&lt;/span>&lt;/div>\' >Console</data-lsp></span><span style="color: #1C1C1C"> </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">ElectricConsoleProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;.&lt;/span>&lt;span style="color: #39927F">dataSource&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >dataSource</data-lsp></span><span style="color: #777777">={</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">textDataSource&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >textDataSource</data-lsp></span><span style="color: #777777">}</span><span style="color: #1C1C1C"> </span><span style="color: #777777">/&gt;</span></div><div class=\'line\'><span style="color: #777777">}</span></div>'}})),"\n",p.createElement(s.p,null,"While text can be passed through directly, usually a simpler data type will be used in the Event which can be expanded to text via the component's accessor."),"\n",p.createElement(o.Z,{component:"Console",name:"transformed-text"}),"\n",p.createElement(t,null,p.createElement(s.span,{dangerouslySetInnerHTML:{__html:'<div class=\'line\'><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">counterDataSource&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >counterDataSource</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">=</span><span style="color: #333333"> </span><span style="color: #3161AA"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #3161AA">useMessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">messageID&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">deviceIDOverride&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="colo

1r: #39927F">DeviceID&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;span style="color: #333333">): &lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useMessageDataSource&lt;/span>&lt;/div>\' >useMessageDataSource</data-lsp></span><span style="color: #777777">&lt;</span><span style="color: #7A3E9D">number</span><span style="color: #777777">&gt;</span><span style="color: #333333">(</span><span style="color: #777777">&apos;</span><span style="color: #886338">counter</span><span style="color: #777777">&apos;</span><span style="color: #333333">)</span></div><div class=\'line\'>&nbsp;</div><div class=\'line\'><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #3161AA"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">OverviewPage&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">JSX&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">Element&lt;/span>&lt;/div>\' >OverviewPage</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">=</span><span style="color: #333333"> </span><span style="color: #777777">()</span><span style="color: #333333"> </span><span style="color: #7A3E9D">=&gt;</span><span style="color: #333333"> </span><span style="color: #777777">{</span></div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #4B83CD">return</span><span style="color: #333333"> (</span></div><div class=\'line\'><span style="color: #333333">    </span><span style="color: #777777">&lt;</span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">Console&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{},&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">A&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">QueryableInnerOutput&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #777777">&amp;gt;&amp;gt;(&lt;/span>&lt;span style="color: #39927F">props&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ElectricConsoleProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">A&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ref&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Ref&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">ConsoleRefAPI&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">undefined&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #777777">})&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ReactElement&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Console&lt;/span>&lt;/div>\' >Console</data-lsp></span></div><div class=\'line\'><span style="color: #1C1C1C">      </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">ElectricConsoleProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;.&lt;/span>&lt;span style="color: #39927F">dataSource&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >dataSource</data-lsp></span><span style="color: #777777">={</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">counterDataSource&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >counterDataSource</data-lsp></span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">      </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">ElectricConsoleProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;.&lt;/span>&lt;span style="color: #39927F">accessor&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> (&lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">data&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">time&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">tags&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{})&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">null&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >accessor</data-lsp></span><span style="color: #777777">={</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) num&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >num</data-lsp></span><span style="color: #1C1C1C"> </span><span style="color: #7A3E9D">=&gt;</span><span style="color: #1C1C1C"> </span><span style="color: #777777">`</span><span style="color: #886338">The hardware counted to </span><span style="color: #777777">${</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) num&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >num</data-lsp></span><span style="color: #777777">}</span><span style="color: #886338">!</span><span style="color: #777777">`</span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">    </span><span style="color: #777777">/&gt;</span></div><div class=\'line\'><span style="color: #333333">  )</span></div><div class=\'line\'><span style="color: #777777">}</span></div>'}})),"\n",p.createElement(s.h3,null,"Complex objects"),"\n",p.createElement(s.p,null,"Complex objects can be logged inline, in additional other log methods being used."),"\n",p.createElement(s.p,null,"By passing an object of the form ",p.createElement(s.code,null,'{ method: "log", args: ["Simply log", num] }'),", each argument will be rendered with the default inspector view for its type."),"\n",p.createElement(o.Z,{component:"Console",name:"other-methods"}),"\n",p.createElement(t,null,p.createElement(s.span,{dangerouslySetInnerHTML:{__html:'<div class=\'line\'><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #3161AA"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">OverviewPage&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">JSX&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">Element&lt;/span>&lt;/div>\' >OverviewPage</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">=</span><span style="color: #333333"> </span><span style="color: #777777">()</span><span style="color: #333333"> </span><span style="color: #7A3E9D">=&gt;</span><span style="color: #333333"> </span><span style="color: #777777">{</span></div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">counterDataSource&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >counterDataSource</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">=</span><span style="color: #333333"> </span><span style="color: #3161AA"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #3161AA">useMessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">messageID&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">deviceIDOverride&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">DeviceID&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;span style="color: #333333">): &lt;/span>&lt;

1span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useMessageDataSource&lt;/span>&lt;/div>\' >useMessageDataSource</data-lsp></span><span style="color: #777777">&lt;</span><span style="color: #7A3E9D">number</span><span style="color: #777777">&gt;</span><span style="color: #333333">(</span><span style="color: #777777">&apos;</span><span style="color: #886338">counter</span><span style="color: #777777">&apos;</span><span style="color: #333333">)</span></div><div class=\'line\'>&nbsp;</div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #4B83CD">return</span><span style="color: #333333"> (</span></div><div class=\'line\'><span style="color: #333333">    </span><span style="color: #777777">&lt;</span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">Console&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{},&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">A&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">QueryableInnerOutput&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #777777">&amp;gt;&amp;gt;(&lt;/span>&lt;span style="color: #39927F">props&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ElectricConsoleProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">A&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ref&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Ref&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">ConsoleRefAPI&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">undefined&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #777777">})&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ReactElement&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Console&lt;/span>&lt;/div>\' >Console</data-lsp></span></div><div class=\'line\'><span style="color: #1C1C1C">      </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">ElectricConsoleProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;span style="color: #333333"> method&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333">; &lt;/span>&lt;span style="color: #39927F">args&lt;/span>&lt;span style="color: #333333">: (&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">)[]; &lt;/span>&lt;span style="color: #777777">}&amp;gt;.&lt;/span>&lt;span style="color: #39927F">dataSource&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >dataSource</data-lsp></span><span style="color: #777777">={</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">counterDataSource&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >counterDataSource</data-lsp></span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">      </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">ElectricConsoleProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;span style="color: #333333"> method&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333">; &lt;/span>&lt;span style="color: #39927F">args&lt;/span>&lt;span style="color: #333333">: (&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">)[]; &lt;/span>&lt;span style="color: #777777">}&amp;gt;.&lt;/span>&lt;span style="color: #39927F">accessor&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> (&lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">data&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">time&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">tags&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{})&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    method&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    args&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> (&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">)[]&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #777777">}&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">null&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >accessor</data-lsp></span><span style="color: #777777">={(</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) num&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >num</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> </span><span style="color: #7A3E9D">number</span><span style="color: #777777">)</span><span style="color: #1C1C1C"> </span><span style="color: #7A3E9D">=&gt;</span><span style="color: #1C1C1C"> </span><span style="color: #777777">{</span></div><div class=\'line\'><span style="color: #1C1C1C">        </span><span style="color: #4B83CD">switch</span><span style="color: #1C1C1C"> (</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) num&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >num</data-lsp></span><span style="color: #1C1C1C">) </span><span style="color: #777777">{</span></div><div class=\'line\'><span style="color: #1C1C1C">          </span><span style="color: #4B83CD">case</span><span style="color: #1C1C1C"> </span><span style="color: #9E6D5A">0</span><span style="color: #777777">:</span></div><div class=\'line\'><span style="color: #1C1C1C">            </span><span style="color: #4B83CD">return</span><span style="color: #1C1C1C"> </span><span style="color: #777777">{</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) method&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;/div>\' >method</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> </span><span style="color: #777777">`</span><span style="color: #886338">warn</span><span style="color: #777777">`</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) args&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> (&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">)[]&lt;/span>&lt;/div>\' >args</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> [</span><span style="color: #777777">`</span><span style="color: #886338">Warn the user about</span><span style="color: #777777">`</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) num&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #9E6D5A">0&lt;/span>&lt;/div>\' >num</data-lsp></span><span style="color: #1C1C1C">

1] </span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">          </span><span style="color: #4B83CD">case</span><span style="color: #1C1C1C"> </span><span style="color: #9E6D5A">1</span><span style="color: #777777">:</span></div><div class=\'line\'><span style="color: #1C1C1C">            </span><span style="color: #4B83CD">return</span><span style="color: #1C1C1C"> </span><span style="color: #777777">{</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) method&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;/div>\' >method</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> </span><span style="color: #777777">`</span><span style="color: #886338">error</span><span style="color: #777777">`</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) args&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> (&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">)[]&lt;/span>&lt;/div>\' >args</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> [</span><span style="color: #777777">`</span><span style="color: #886338">Error about...</span><span style="color: #777777">`</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) num&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #9E6D5A">1&lt;/span>&lt;/div>\' >num</data-lsp></span><span style="color: #1C1C1C">] </span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">          </span><span style="color: #4B83CD">case</span><span style="color: #1C1C1C"> </span><span style="color: #9E6D5A">2</span><span style="color: #777777">:</span></div><div class=\'line\'><span style="color: #1C1C1C">            </span><span style="color: #4B83CD">return</span><span style="color: #1C1C1C"> </span><span style="color: #777777">{</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) method&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;/div>\' >method</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> </span><span style="color: #777777">`</span><span style="color: #886338">debug</span><span style="color: #777777">`</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) args&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> (&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">)[]&lt;/span>&lt;/div>\' >args</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> [</span><span style="color: #777777">`</span><span style="color: #886338">

1Debug log about...</span><span style="color: #777777">`</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) num&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #9E6D5A">2&lt;/span>&lt;/div>\' >num</data-lsp></span><span style="color: #1C1C1C">] </span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">          </span><span style="color: #4B83CD">default</span><span style="color: #777777">:</span></div><div class=\'line\'><span style="color: #1C1C1C">            </span><span style="color: #4B83CD">return</span><span style="color: #1C1C1C"> </span><span style="color: #777777">{</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) method&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;/div>\' >method</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> </span><span style="color: #777777">`</span><span style="color: #886338">log</span><span style="color: #777777">`</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) args&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> (&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">)[]&lt;/span>&lt;/div>\' >args</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> [</span><span style="color: #777777">`</span><span style="color: #886338">Simply log</span><span style="color: #777777">`</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) num&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >num</data-lsp></span><span style="color: #1C1C1C">] </span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">        </span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">      </span><span style="color: #777777">}}</span></div><div class=\'line\'><span style="color: #1C1C1C">    </span><span style="color: #777777">/&gt;</span></div><div class=\'line\'><span style="color: #333333">  )</span></div><div class=\'line\'><span style="color: #777777">}</span></div>'}})),"\n",p.createElement(s.h3,null,"Ordering"),"\n",p.createElement(s.p,null,"The display ordering can be changed via the ",p.createElement(s.code,null,"orderBy")," and ",p.createElement(s.code,null,"order")," props."),"\n",p.createElement(o.Z,{component:"Console",name:"ordering"}),"\n",p.createElement(s.p,null,"Note that changing the ordering causes a re-fetch from the persistence engine."),"\n",p.createElement(s.p,null,"Make sure to memoise the ordering function before passing it to the Console component, otherwise a new instance will be produced each render, resulting in degraded performance."),"\n",p.createElement(t,null,p.createElement(s.span,{dangerouslySetInnerHTML:{__html:'<div class=\'line\'><span style="color: #4B83CD">import</span><span style="color: #333333"> </span><span style="color: #777777">{</span></div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">Console&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{},&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">A&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">QueryableInnerOutput&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #777777">&amp;gt;&amp;gt;(&lt;/span>&lt;span style="color: #39927F">props&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ElectricConsoleProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">A&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ref&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Ref&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">ConsoleRefAPI&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">undefined&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #777777">})&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ReactElement&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Console&lt;/span>&lt;/div>\' >Console</data-lsp></span><span style="color: #777777">,</span></div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">type&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ConsoleRefAPI&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #3161AA">clear&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">void&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #777777">}&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">ConsoleRefAPI&lt;/span>&lt;/div>\' >ConsoleRefAPI</data-lsp></span><span style="color: #777777">,</span></div><div class=\'line\'><span style="color: #777777">}</span><span style="color: #333333"> </span><span style="color: #4B83CD">from</span><span style="color: #333333"> </span><span style="color: #777777">&apos;</span><span style="color: #886338">@electricui/components-desktop-blueprint-timeseries</span><span style="color: #777777">&apos;</span></div><div class=\'line\'><span style="color: #4B83CD">

1import</span><span style="color: #333333"> </span><span style="color: #777777">{</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">function&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">useMessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">unknown&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">M&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">&amp;gt;(&lt;/span>&lt;span style="color: #39927F">messageID&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">M&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">deviceIDOverride&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">DeviceID&lt;/span>&lt;span style="color: #777777">):&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">unknown&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">?&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ElectricUIDeveloperState&lt;/span>&lt;span style="color: #333333">[&lt;/span>&lt;span style="color: #248725">M&lt;/span>&lt;span style="color: #333333">] &lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">M&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useMessageDataSource&lt;/span>&lt;/div>\' >useMessageDataSource</data-lsp></span><span style="color: #777777">,</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">type&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Time&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Time&lt;/span>&lt;/div>\' >Time</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">}</span><span style="color: #333333"> </span><span style="color: #4B83CD">from</span><span style="color: #333333"> </span><span style="color: #777777">&apos;</span><span style="color: #886338">@electricui/core-timeseries</span><span style="color: #777777">&apos;</span></div><div class=\'line\'><span style="color: #4B83CD">

1import</span><span style="color: #333333"> </span><span style="color: #777777">{</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">function&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">useState&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">S&lt;/span>&lt;span style="color: #777777">&amp;gt;(&lt;/span>&lt;span style="color: #39927F">initialState&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">S&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> (&lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">S&lt;/span>&lt;span style="color: #333333">)&lt;/span>&lt;span style="color: #777777">):&lt;/span>&lt;span style="color: #333333"> [&lt;/span>&lt;span style="color: #248725">S&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Dispatch&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">SetStateAction&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">S&lt;/span>&lt;span style="color: #777777">&amp;gt;&amp;gt;&lt;/span>&lt;span style="color: #333333">] (+&lt;/span>&lt;span style="color: #9E6D5A">1&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">overload&lt;/span>&lt;span style="color: #333333">)&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useState&lt;/span>&lt;/div>\' >useState</data-lsp></span><span style="color: #777777">,</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">function&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">useCallback&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Function&lt;/span>&lt;span style="color: #777777">&amp;gt;(&lt;/span>&lt;span style="color: #39927F">callback&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">deps&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">DependencyList&lt;/span>&lt;span style="color: #777777">):&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useCallback&lt;/span>&lt;/div>\' >useCallback</data-lsp></span><span style="color: #777777">,</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">function&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">useMemo&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #777777">&amp;gt;(&lt;/span>&lt;span style="color: #3161AA">factory&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">deps&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">DependencyList&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">undefined&lt;/span>&lt;span style="color: #777777">):&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useMemo&lt;/span>&lt;/div>\' >

1useMemo</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">}</span><span style="color: #333333"> </span><span style="color: #4B83CD">from</span><span style="color: #333333"> </span><span style="color: #777777">&apos;</span><span style="color: #886338">react</span><span style="color: #777777">&apos;</span></div><div class=\'line\'><span style="color: #4B83CD">import</span><span style="color: #333333"> </span><span style="color: #777777">{</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">class&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Button&lt;/span>&lt;/div>\' >Button</data-lsp></span><span style="color: #333333"> </span><span style="color: #4B83CD">as</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">class&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">BlueprintButton&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #248725">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">BlueprintButton&lt;/span>&lt;/div>\' >BlueprintButton</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">}</span><span style="color: #333333"> </span><span style="color: #4B83CD">from</span><span style="color: #333333"> </span><span style="color: #777777">&apos;</span><span style="color: #886338">@blueprintjs/core</span><span style="color: #777777">&apos;</span></div><div class=\'line\'><span style="color: #4B83CD">import</span><span style="color: #333333"> </span><span style="color: #777777">{</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">IconNames&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">FUNCTION&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ADD&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">AIRPLANE&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ANCHOR&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ANNOTATION&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ANTENNA&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">APPLICATION&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">APPLICATIONS&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ARCHIVE&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ARRAY&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ASTERISK&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">AT&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">AXLE&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BACKLINK&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BADGE&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BARCODE&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BLANK&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BOLD&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BOOK&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BOOKMARK&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BOX&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BRIEFCASE&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #777777">...&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #9E6D5A">1123&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">more&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #333333">..&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ZoomToFit&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #777777">}&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">IconNames&lt;/span>&lt;/div>\' >IconNames</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">}</span><span style="color: #333333"> </span><span style="color: #4B83CD">from</span><span style="color: #333333"> </span><span style="color: #777777">&apos;</span><span style="color: #886338">@blueprintjs/icons</span><span style="color: #777777">&apos;</span></div><div class=\'line\'>&nbsp;</div><div class=\'line\'><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #3161AA"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">OverviewPage&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">JSX&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">Element&lt;/span>&lt;/div>\' >OverviewPage</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">=</span><span style="color: #333333"> </span><span style="color: #777777">()</span><span style="color: #333333"> </span><span style="color: #7A3E9D">=&gt;</span><span style="color: #333333"> </span><span style="color: #777777">{</span></div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">counterDataSource&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >counterDataSource</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">=</span><span style="color: #333333"> </span><span style="color: #3161AA"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #3161AA">useMessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">messageID&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">deviceIDOverride&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">DeviceID&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;span style="color: #333333">): &lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useMessageDataSource&lt;/span>&lt;/div>\' >useMessageDataSource</data-lsp></span><span style="color: #777777">&lt;</span><span style="color: #7A3E9D">number</span><span style="color: #777777">&gt;</span><span style="color: #333333">(</span><span style="color: #777777">&apos;</span><span style="color: #886338">counter</span><span style="color: #777777">&apos;</span><span style="color: #333333">)</span></div><div class=\'line\'>&nbsp;</div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #777777">[</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">order&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;/div>\' >order</data-lsp></span><span style="color: #777777">,</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">setOrder&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">Dispatch&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">SetStateAction&lt;/

1span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">&amp;gt;&amp;gt;&lt;/span>&lt;/div>\' >setOrder</data-lsp></span><span style="color: #777777">]</span><span style="color: #333333"> </span><span style="color: #777777">=</span><span style="color: #333333"> </span><span style="color: #3161AA"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #3161AA">useState&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">initialState&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> (&lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">)): [&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">Dispatch&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">SetStateAction&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">&amp;gt;&amp;gt;&lt;/span>&lt;span style="color: #333333">] (&lt;/span>&lt;span style="color: #777777">+&lt;/span>&lt;span style="color: #9E6D5A">1&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">overload&lt;/span>&lt;span style="color: #333333">)&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useState&lt;/span>&lt;/div>\' >useState</data-lsp></span><span style="color: #333333">(</span><span style="color: #9E6D5A">1</span><span style="color: #333333">)</span></div><div class=\'line\'>&nbsp;</div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">onClick&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">void&lt;/span>&lt;/div>\' >onClick</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">=</span><span style="color: #333333"> </span><span style="color: #3161AA"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #3161AA">useCallback&lt;/span>&lt;span style="color: #777777">&amp;lt;()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">void&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">callback&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">void,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">deps&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">DependencyList&lt;/span>&lt;span style="color: #333333">): &lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">void&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useCallback&lt;/span>&lt;/div>\' >useCallback</data-lsp></span><span style="color: #333333">(</span><span style="color: #777777">()</span><span style="color: #333333"> </span><span style="color: #7A3E9D">=&gt;</span><span style="color: #333333"> </span><span style="color: #3161AA"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">setOrder&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">value&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">SetStateAction&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">&amp;gt;)&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">void&lt;/span>&lt;/div>\' >setOrder</data-lsp></span><span style="color: #333333">(</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) state&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >

1state</data-lsp></span><span style="color: #333333"> </span><span style="color: #7A3E9D">=&gt;</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) state&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >state</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">*</span><span style="color: #333333"> </span><span style="color: #777777">-</span><span style="color: #9E6D5A">1</span><span style="color: #333333">)</span><span style="color: #777777">,</span><span style="color: #333333"> [</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">setOrder&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">Dispatch&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">SetStateAction&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">&amp;gt;&amp;gt;&lt;/span>&lt;/div>\' >setOrder</data-lsp></span><span style="color: #333333">])</span></div><div class=\'line\'>&nbsp;</div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">ordering&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">a&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Time&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">b&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Time&lt;/span>&lt;span style="color: #777777">)&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;/div>\' >ordering</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">=</span><span style="color: #333333"> </span><span style="color: #3161AA"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #3161AA">useMemo&lt;/span>&lt;span style="color: #777777">&amp;lt;(&lt;/span>&lt;span style="color: #39927F">a&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Time&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">b&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Time&lt;/span>&lt;span style="color: #777777">)&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">factory&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">a&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Time&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">b&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Time&lt;/span>&lt;span style="color: #777777">)&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">deps&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">DependencyList&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;span style="color: #333333">)&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">a&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Time&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">b&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Time&lt;/span>&lt;span style="color: #777777">)&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useMemo&lt;/span>&lt;/div>\' >

1useMemo</data-lsp></span><span style="color: #333333">(</span><span style="color: #777777">()</span><span style="color: #333333"> </span><span style="color: #7A3E9D">=&gt;</span><span style="color: #333333"> </span><span style="color: #777777">{</span></div><div class=\'line\'><span style="color: #333333">    </span><span style="color: #4B83CD">if</span><span style="color: #333333"> (</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">order&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;/div>\' >order</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">===</span><span style="color: #333333"> </span><span style="color: #9E6D5A">1</span><span style="color: #333333">) </span><span style="color: #777777">{</span></div><div class=\'line\'><span style="color: #333333">      </span><span style="color: #4B83CD">return</span><span style="color: #333333"> </span><span style="color: #777777">(</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) a&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >a</data-lsp></span><span style="color: #777777">:</span><span style="color: #333333"> </span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">type&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Time&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Time&lt;/span>&lt;/div>\' >Time</data-lsp></span><span style="color: #777777">,</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) b&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >b</data-lsp></span><span style="color: #777777">:</span><span style="color: #333333"> </span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">type&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Time&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Time&lt;/span>&lt;/div>\' >Time</data-lsp></span><span style="color: #777777">)</span><span style="color: #333333"> </span><span style="color: #7A3E9D">=&gt;</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) a&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >a</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">-</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) b&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >b</data-lsp></span></div><div class=\'line\'><span style="color: #333333">    </span><span style="color: #777777">}</span><span style="color: #333333"> </span><span style="color: #4B83CD">else</span><span style="color: #333333"> </span><span style="color: #777777">{</span></div><div class=\'line\'><span style="color: #333333">      </span><span style="color: #4B83CD">return</span><span style="color: #333333"> </span><span style="color: #777777">(</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) a&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >a</data-lsp></span><span style="color: #777777">:</span><span style="color: #333333"> </span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">type&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Time&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Time&lt;/span>&lt;/div>\' >Time</data-lsp></span><span style="color: #777777">,</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) b&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >b</data-lsp></span><span style="color: #777777">:</span><span style="color: #333333"> </span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">type&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Time&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Time&lt;/span>&lt;/div>\' >Time</data-lsp></span><span style="color: #777777">)</span><span style="color: #333333"> </span><span style="color: #7A3E9D">=&gt;</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) b&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >b</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">-</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) a&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >a</data-lsp></span></div><div class=\'line\'><span style="color: #333333">    </span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #777777">},</span><span style="color: #333333"> [</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">order&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;/div>\' >order</data-lsp></span><span style="color: #333333">])</span></div><div class=\'line\'>&nbsp;</div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #4B83CD">return</span><span style="color: #333333"> (</span></div><div class=\'line\'><span style="color: #333333">    </span><span style="color: #777777">&lt;&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">      </span><span style="color: #777777">&lt;</span><span style="color: #4B83CD"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">JSX&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">IntrinsicElements&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">div&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">DetailedHTMLProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">HTMLAttributes&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">HTMLDivElement&lt;/span>&lt;span style="color: #777777">&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">HTMLDivElement&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >div</data-lsp></span><span style="color: #1C1C1C"> </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">HTMLAttributes&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">HTMLDivElement&lt;/span>&lt;span style="color: #777777">&amp;gt;.&lt;/span>&lt;span style="color: #39927F">style&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">CSSProperties&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >style</data-lsp></span><span style="color: #777777">={{</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">StandardLonghandProperties&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;.&lt;/span>&lt;span style="color: #39927F">display&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Property&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">Display&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >display</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> </span><span style="color: #777777">&apos;</span><span style="color: #886338">flex</span><span style="color: #777777">&apos;</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">StandardLonghandProperties&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;.&lt;/span>&lt;span style="color: #39927F">justifyContent&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Property&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">JustifyContent&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >justifyContent</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> </span><span style="color: #777777">&apos;</span><span style="color: #886338">end</span><span style="color: #777777">&apos;</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">StandardShorthandProperties&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;.&lt;/span>&lt;span style="color: #39927F">

1padding&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Property&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">Padding&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >padding</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> </span><span style="color: #9E6D5A">5</span><span style="color: #1C1C1C"> </span><span style="color: #777777">}}&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">        </span><span style="color: #777777">&lt;</span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">class&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">BlueprintButton&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #248725">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">BlueprintButton&lt;/span>&lt;/div>\' >BlueprintButton</data-lsp></span></div><div class=\'line\'><span style="color: #1C1C1C">          </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">onClick&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> ((&lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">event&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">MouseEvent&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">HTMLElement&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">MouseEvent&lt;/span>&lt;span style="color: #777777">&amp;gt;)&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">void&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #777777">&amp;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">MouseEventHandler&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">HTMLButtonElement&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >onClick</data-lsp></span><span style="color: #777777">={</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">onClick&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">void&lt;/span>&lt;/div>\' >

1onClick</data-lsp></span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">          </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">icon&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">BlueprintIcons_16Id&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">MaybeElement&lt;/span>&lt;/div>\' >icon</data-lsp></span><span style="color: #777777">={</span></div><div class=\'line\'><span style="color: #1C1C1C">            </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">order&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;/div>\' >order</data-lsp></span><span style="color: #1C1C1C"> </span><span style="color: #777777">===</span><span style="color: #1C1C1C"> </span><span style="color: #9E6D5A">1</span></div><div class=\'line\'><span style="color: #1C1C1C">              </span><span style="color: #777777">?</span><span style="color: #1C1C1C"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">IconNames&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">FUNCTION&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ADD&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">AIRPLANE&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ANCHOR&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ANNOTATION&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ANTENNA&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">APPLICATION&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">APPLICATIONS&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ARCHIVE&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ARRAY&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ASTERISK&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">AT&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">AXLE&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BACKLINK&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BADGE&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BARCODE&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BLANK&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BOLD&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BOOK&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BOOKMARK&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BOX&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BRIEFCASE&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #777777">...&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #9E6D5A">1123&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">more&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #333333">..&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ZoomToFit&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #777777">}&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">IconNames&lt;/span>&lt;/div>\' >IconNames</data-lsp></span><span style="color: #777777">.</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) SORT_NUMERICAL&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">BlueprintIcons_16Id&lt;/span>&lt;/div>\' >SORT_NUMERICAL</data-lsp></span></div><div class=\'line\'><span style="color: #1C1C1C">              </span><span style="color: #777777">:</span><span style="color: #1C1C1C"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">IconNames&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">FUNCTION&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ADD&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">AIRPLANE&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">

1ANCHOR&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ANNOTATION&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ANTENNA&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">APPLICATION&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">APPLICATIONS&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ARCHIVE&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ARRAY&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ASTERISK&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">AT&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">AXLE&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BACKLINK&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BADGE&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BARCODE&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BLANK&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BOLD&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BOOK&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BOOKMARK&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BOX&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">BRIEFCASE&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #777777">...&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #9E6D5A">1123&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">more&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #333333">..&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ZoomToFit&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">IconName&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #777777">}&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">IconNames&lt;/span>&lt;/div>\' >IconNames</data-lsp></span><span style="color: #777777">.</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) SORT_NUMERICAL_DESC&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">BlueprintIcons_16Id&lt;/span>&lt;/div>\' >SORT_NUMERICAL_DESC</data-lsp></span></div><div class=\'line\'><span style="color: #1C1C1C">          </span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">        </span><span style="color: #777777">&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">          </span><span style="color: #777777">{</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">order&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;/div>\' >order</data-lsp></span><span style="color: #1C1C1C"> </span><span style="color: #777777">===</span><span style="color: #1C1C1C"> </span><span style="color: #9E6D5A">1</span></div><div class=\'line\'><span style="color: #1C1C1C">            </span><span style="color: #777777">?</span><span style="color: #1C1C1C"> </span><span style="color: #777777">&apos;</span><span style="color: #886338">Ordered By Ascending Time</span><span style="color: #777777">&apos;</span></div><div class=\'line\'><span style="color: #1C1C1C">            </span><span style="color: #777777">:</span><span style="color: #1C1C1C"> </span><span style="color: #777777">&apos;</span><span style="color: #886338">

1Ordered By Descending Time</span><span style="color: #777777">&apos;</span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">        </span><span style="color: #777777">&lt;/</span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">class&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">BlueprintButton&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #248725">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">BlueprintButton&lt;/span>&lt;/div>\' >BlueprintButton</data-lsp></span><span style="color: #777777">&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">      </span><span style="color: #777777">&lt;/</span><span style="color: #4B83CD"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">JSX&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">IntrinsicElements&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">div&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">DetailedHTMLProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">HTMLAttributes&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">HTMLDivElement&lt;/span>&lt;span style="color: #777777">&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">HTMLDivElement&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >div</data-lsp></span><span style="color: #777777">&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">      </span><span style="color: #777777">&lt;</span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">Console&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{},&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">A&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">QueryableInnerOutput&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #777777">&amp;gt;&amp;gt;(&lt;/span>&lt;span style="color: #39927F">props&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ElectricConsoleProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">A&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ref&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Ref&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">ConsoleRefAPI&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">undefined&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #777777">})&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ReactElement&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Console&lt;/span>&lt;/div>\' >Console</data-lsp></span></div><div class=\'line\'><span style="color: #1C1C1C">        </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">ElectricConsoleProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;.&lt;/span>&lt;span style="color: #39927F">order&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> (&lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">a&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">b&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">)&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >order</data-lsp></span><span style="color: #777777">={</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">ordering&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">a&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Time&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">b&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Time&lt;/span>&lt;span style="color: #777777">)&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;/div>\' >ordering</data-lsp></span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">        </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">ElectricConsoleProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;.&lt;/span>&lt;span style="color: #39927F">dataSource&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >dataSource</data-lsp></span><span style="color: #777777">={</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">counterDataSource&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >counterDataSource</data-lsp></span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">        </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">ElectricConsoleProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;.&lt;/span>&lt;span style="color: #39927F">accessor&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> (&lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">data&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">time&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">tags&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{})&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">null&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >accessor</data-lsp></span><span style="color: #777777">={(</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) data&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >data</data-lsp></span><span style="color: #777777">,</span><span style="color: #1C1C1C"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) time&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >time</data-lsp></span><span style="color: #777777">)</span><span style="color: #1C1C1C"> </span><span style="color: #7A3E9D">=&gt;</span><span style="color: #1C1C1C"> </span><span style="color: #777777">`</span><span style="color: #886338">Message received at time: </span><span style="color: #777777">${</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) time&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >time</data-lsp></span><span style="color: #777777">}

1`</span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">      </span><span style="color: #777777">/&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">    </span><span style="color: #777777">&lt;/&gt;</span></div><div class=\'line\'><span style="color: #333333">  )</span></div><div class=\'line\'><span style="color: #777777">}</span></div>'}})),"\n",p.createElement(s.h3,null,"Clearing"),"\n",p.createElement(s.p,null,"The internal store of data can be cleared via an imperative ref handle. Any re-fetching (via a component re-render, or an ordering change for example) may cause the data to re-appear. This feature is intended for 'quick development interfaces'."),"\n",p.createElement(o.Z,{component:"Console",name:"clear-button"}),"\n",p.createElement(t,null,p.createElement(s.span,{dangerouslySetInnerHTML:{__html:'<div class=\'line\'><span style="color: #4B83CD">import</span><span style="color: #333333"> </span><span style="color: #777777">{</span></div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">Console&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{},&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">A&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">QueryableInnerOutput&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #777777">&amp;gt;&amp;gt;(&lt;/span>&lt;span style="color: #39927F">props&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ElectricConsoleProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">A&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ref&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Ref&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">ConsoleRefAPI&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">undefined&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #777777">})&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ReactElement&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Console&lt;/span>&lt;/div>\' >Console</data-lsp></span><span style="color: #777777">,</span></div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">type&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ConsoleRefAPI&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #3161AA">clear&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">void&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #777777">}&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">ConsoleRefAPI&lt;/span>&lt;/div>\' >ConsoleRefAPI</data-lsp></span><span style="color: #777777">,</span></div><div class=\'line\'><span style="color: #777777">}</span><span style="color: #333333"> </span><span style="color: #4B83CD">from</span><span style="color: #333333"> </span><span style="color: #777777">&apos;</span><span style="color: #886338">@electricui/components-desktop-blueprint-timeseries</span><span style="color: #777777">&apos;</span></div><div class=\'line\'><span style="color: #4B83CD">

1import</span><span style="color: #333333"> </span><span style="color: #777777">{</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">function&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">useMessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">unknown&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">M&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">&amp;gt;(&lt;/span>&lt;span style="color: #39927F">messageID&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">M&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">deviceIDOverride&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">DeviceID&lt;/span>&lt;span style="color: #777777">):&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">unknown&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">?&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ElectricUIDeveloperState&lt;/span>&lt;span style="color: #333333">[&lt;/span>&lt;span style="color: #248725">M&lt;/span>&lt;span style="color: #333333">] &lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">M&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useMessageDataSource&lt;/span>&lt;/div>\' >useMessageDataSource</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">}</span><span style="color: #333333"> </span><span style="color: #4B83CD">from</span><span style="color: #333333"> </span><span style="color: #777777">&apos;</span><span style="color: #886338">@electricui/core-timeseries</span><span style="color: #777777">&apos;</span></div><div class=\'line\'><span style="color: #4B83CD">import</span><span style="color: #333333"> </span><span style="color: #777777">{</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">function&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">useRef&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #777777">&amp;gt;(&lt;/span>&lt;span style="color: #39927F">initialValue&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #777777">):&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">MutableRefObject&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> (+&lt;/span>&lt;span style="color: #9E6D5A">2&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">overloads&lt;/span>&lt;span style="color: #333333">)&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useRef&lt;/span>&lt;/div>\' >useRef</data-lsp></span><span style="color: #777777">,</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">function&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">useCallback&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Function&lt;/span>&lt;span style="color: #777777">&amp;gt;(&lt;/span>&lt;span style="color: #39927F">callback&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">deps&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">DependencyList&lt;/span>&lt;span style="color: #777777">):&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">T&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useCallback&lt;/span>&lt;/div>\' >useCallback</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">}</span><span style="color: #333333"> </span><span style="color: #4B83CD">from</span><span style="color: #333333"> </span><span style="color: #777777">&apos;</span><span style="color: #886338">react</span><span style="color: #777777">&apos;</span></div><div class=\'line\'><span style="color: #4B83CD">

1import</span><span style="color: #333333"> </span><span style="color: #777777">{</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">class&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Button&lt;/span>&lt;/div>\' >Button</data-lsp></span><span style="color: #333333"> </span><span style="color: #4B83CD">as</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">class&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">BlueprintButton&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #248725">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">BlueprintButton&lt;/span>&lt;/div>\' >BlueprintButton</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">}</span><span style="color: #333333"> </span><span style="color: #4B83CD">from</span><span style="color: #333333"> </span><span style="color: #777777">&apos;</span><span style="color: #886338">@blueprintjs/core</span><span style="color: #777777">&apos;</span></div><div class=\'line\'>&nbsp;</div><div class=\'line\'><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #3161AA"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">OverviewPage&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">JSX&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">Element&lt;/span>&lt;/div>\' >OverviewPage</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">=</span><span style="color: #333333"> </span><span style="color: #777777">()</span><span style="color: #333333"> </span><span style="color: #7A3E9D">=&gt;</span><span style="color: #333333"> </span><span style="color: #777777">{</span></div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">counterDataSource&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >counterDataSource</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">=</span><span style="color: #333333"> </span><span style="color: #3161AA"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #3161AA">useMessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">messageID&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">deviceIDOverride&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">DeviceID&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;span style="color: #333333">): &lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useMessageDataSource&lt;/span>&lt;/div>\' >useMessageDataSource</data-lsp></span><span style="color: #777777">&lt;</span><span style="color: #7A3E9D">number</span><span style="color: #777777">&gt;</span><span style="color: #333333">(</span><span style="color: #777777">&apos;</span><span style="color: #886338">counter</span><span style="color: #777777">&apos;</span><span style="color: #333333">)</span></div><div class=\'line\'>&nbsp;</div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">consoleRef&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">RefObject&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">ConsoleRefAPI&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >consoleRef</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">=</span><span style="color: #333333"> </span><span style="color: #3161AA"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #3161AA">useRef&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">ConsoleRefAPI&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">initialValue&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">ConsoleRefAPI&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">null&lt;/span>&lt;span style="color: #333333">): &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #3161AA">RefObject&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">ConsoleRefAPI&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> (&lt;/span>&lt;span style="color: #777777">+&lt;/span>&lt;span style="color: #9E6D5A">2&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">overloads&lt;/span>&lt;span style="color: #333333">)&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useRef&lt;/span>&lt;/div>\' >useRef</data-lsp></span><span style="color: #777777">&lt;</span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">type&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ConsoleRefAPI&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #3161AA">clear&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">void&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #777777">}&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">ConsoleRefAPI&lt;/span>&lt;/div>\' >ConsoleRefAPI</data-lsp></span><span style="color: #777777">&gt;</span><span style="color: #333333">(</span><span style="color: #AB6526">null</span><span style="color: #333333">)</span></div><div class=\'line\'>&nbsp;</div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">onClear&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">void&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">undefined&lt;/span>&lt;/div>\' >onClear</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">=</span><span style="color: #333333"> </span><span style="color: #3161AA"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #3161AA">useCallback&lt;/span>&lt;span style="color: #777777">&amp;lt;()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">void&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">undefined&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">callback&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">void&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">deps&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">DependencyList&lt;/span>&lt;span style="color: #333333">): &lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">void&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">useCallback&lt;/span>&lt;/div>\' >useCallback</data-lsp></span><span style="color: #333333">(</span><span style="color: #777777">()</span><span style="color: #333333"> </span><span style="color: #7A3E9D">=&gt;</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">consoleRef&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">RefObject&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">ConsoleRefAPI&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >consoleRef</data-lsp></span><span style="color: #777777">.</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">RefObject&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">ConsoleRefAPI&lt;/span>&lt;span style="color: #777777">&amp;gt;.&lt;/span>&lt;span style="color: #39927F">current&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">ConsoleRefAPI&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">null&lt;/span>&lt;/div>\' >current</data-lsp></span><span style="color: #777777">?.</span><span style="color: #3161AA"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) clear&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> (&lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">void&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >clear</data-lsp></span><span style="color: #333333">()</span><span style="color: #777777">,</span><span style="color: #333333"> [])</span></div><div class=\'line\'>&nbsp;</div><div class=\'line\'><span style="color: #333333">  </span><span style="color: #4B83CD">return</span><span style="color: #333333"> (</span></div><div class=\'line\'><span style="color: #333333">    </span><span style="color: #777777">&lt;&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">      </span><span style="color: #777777">&lt;</span><span style="color: #4B83CD"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">JSX&lt;/span>&lt;span style="color: #7777

177">.&lt;/span>&lt;span style="color: #39927F">IntrinsicElements&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">div&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">DetailedHTMLProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">HTMLAttributes&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">HTMLDivElement&lt;/span>&lt;span style="color: #777777">&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">HTMLDivElement&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >div</data-lsp></span><span style="color: #1C1C1C"> </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">HTMLAttributes&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">HTMLDivElement&lt;/span>&lt;span style="color: #777777">&amp;gt;.&lt;/span>&lt;span style="color: #39927F">style&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">CSSProperties&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >style</data-lsp></span><span style="color: #777777">={{</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">StandardLonghandProperties&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;.&lt;/span>&lt;span style="color: #39927F">display&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Property&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">Display&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >display</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> </span><span style="color: #777777">&apos;</span><span style="color: #886338">flex</span><span style="color: #777777">&apos;</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">StandardLonghandProperties&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;.&lt;/span>&lt;span style="color: #39927F">justifyContent&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Property&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">JustifyContent&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >justifyContent</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> </span><span style="color: #777777">&apos;</span><span style="color: #886338">end</span><span style="color: #777777">&apos;</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">StandardShorthandProperties&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;.&lt;/span>&lt;span style="color: #39927F">

1padding&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Property&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">Padding&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >padding</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> </span><span style="color: #9E6D5A">5</span><span style="color: #1C1C1C"> </span><span style="color: #777777">}}&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">        </span><span style="color: #777777">&lt;</span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">class&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">BlueprintButton&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #248725">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">BlueprintButton&lt;/span>&lt;/div>\' >BlueprintButton</data-lsp></span><span style="color: #1C1C1C"> </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">onClick&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> ((&lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">event&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">MouseEvent&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">HTMLElement&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">MouseEvent&lt;/span>&lt;span style="color: #777777">&amp;gt;)&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">void&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #777777">&amp;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">MouseEventHandler&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">HTMLButtonElement&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >onClick</data-lsp></span><span style="color: #777777">={</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">onClear&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">()&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">void&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">undefined&lt;/span>&lt;/div>\' >onClear</data-lsp></span><span style="color: #777777">}&gt;</span><span style="color: #1C1C1C">Clear</span><span style="color: #777777">&lt;/</span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">class&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">BlueprintButton&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #248725">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">BlueprintButton&lt;/span>&lt;/div>\' >BlueprintButton</data-lsp></span><span style="color: #777777">&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">      </span><span style="color: #777777">&lt;/</span><span style="color: #4B83CD"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">JSX&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">IntrinsicElements&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">div&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">DetailedHTMLProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">HTMLAttributes&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">HTMLDivElement&lt;/span>&lt;span style="color: #777777">&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">HTMLDivElement&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >div</data-lsp></span><span style="color: #777777">&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">      </span><span style="color: #777777">&lt;</span><span style="color: #248725"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">alias&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #3161AA">Console&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #4B83CD">extends&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Queryable&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">any&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{},&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{}&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">A&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">=&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">QueryableInnerOutput&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #777777">&amp;gt;&amp;gt;(&lt;/span>&lt;span style="color: #39927F">props&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ElectricConsoleProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">Q&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">K&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">A&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">&amp;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    &lt;/span>&lt;span style="color: #39927F">ref&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">Ref&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">ConsoleRefAPI&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">undefined&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #777777">})&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">ReactElement&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #4B83CD">import&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">Console&lt;/span>&lt;/div>\' >Console</data-lsp></span></div><div class=\'line\'><span style="color: #1C1C1C">        </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">ref&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #39927F">Ref&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">ConsoleRefAPI&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >ref</data-lsp></span><span style="color: #777777">={</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">consoleRef&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">React&lt;/span>&lt;span style="color: #777777">.&lt;/span>&lt;span style="color: #248725">RefObject&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #248725">ConsoleRefAPI&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >consoleRef</data-lsp></span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">        </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">ElectricConsoleProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;span style="color: #333333"> method&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333">; &lt;/span>&lt;span style="color: #39927F">args&lt;/span>&lt;span style="color: #333333">: (&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">)[]; &lt;/span>&lt;span style="color: #777777">}&amp;gt;.&lt;/span>&lt;span style="color: #39927F">dataSource&lt;/span>&lt;span style="color: #333333">: &lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >dataSource</data-lsp></span><span style="color: #777777">={</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #7A3E9D">const&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">counterDataSource&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #248725">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">string&lt;/span>&lt;span style="color: #777777">&amp;gt;&lt;/span>&lt;/div>\' >counterDataSource</data-lsp></span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">        </span><span style="color: #4481B7"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #39927F">ElectricConsoleProps&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">MessageDataSource&lt;/span>&lt;span style="color: #777777">&amp;lt;&lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">&amp;gt;,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;span style="color: #333333"> method&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333">; &lt;/span>&lt;span style="color: #39927F">args&lt;/span>&lt;span style="color: #333333">: (&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">)[]; &lt;/span>&lt;span style="color: #777777">}&amp;gt;.&lt;/span>&lt;span style="color: #39927F">accessor&lt;/span>&lt;span style="color: #777777">?:&lt;/span>&lt;span style="color: #333333"> 

1(&lt;/span>&lt;span style="color: #777777">(&lt;/span>&lt;span style="color: #39927F">data&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">time&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">number&lt;/span>&lt;span style="color: #777777">,&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">tags&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{})&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #7A3E9D">=&amp;gt;&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">{&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    method&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">    args&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> (&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">)[]&lt;/span>&lt;span style="color: #777777">;&lt;/span>&lt;/div>&lt;div class=&apos;line&apos;>&lt;span style="color: #777777">}&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">null&lt;/span>&lt;span style="color: #333333">) &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #AB6526">undefined&lt;/span>&lt;/div>\' >accessor</data-lsp></span><span style="color: #777777">={(</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) num&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >num</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> </span><span style="color: #7A3E9D">number</span><span style="color: #777777">)</span><span style="color: #1C1C1C"> </span><span style="color: #7A3E9D">=&gt;</span><span style="color: #1C1C1C"> </span><span style="color: #777777">{</span></div><div class=\'line\'><span style="color: #1C1C1C">          </span><span style="color: #4B83CD">switch</span><span style="color: #1C1C1C"> (</span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) num&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >num</data-lsp></span><span style="color: #1C1C1C">) </span><span style="color: #777777">{</span></div><div class=\'line\'><span style="color: #1C1C1C">            </span><span style="color: #4B83CD">case</span><span style="color: #1C1C1C"> </span><span style="color: #9E6D5A">0</span><span style="color: #777777">:</span></div><div class=\'line\'><span style="color: #1C1C1C">              </span><span style="color: #4B83CD">return</span><span style="color: #1C1C1C"> </span><span style="color: #777777">{</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) method&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;/div>\' >method</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> </span><span style="color: #777777">`</span><span style="color: #886338">warn</span><span style="color: #777777">`</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) args&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> (&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">)[]&lt;/span>&lt;/div>\' >args</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> [</span><span style="color: #777777">`</span><span style="color: #886338">Warn the user about</span><span style="color: #777777">`</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) num&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #9E6D5A">0&lt;/span>&lt;/div>\' >num</data-lsp></span><span style="color: #1C1C1C">

1] </span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">            </span><span style="color: #4B83CD">case</span><span style="color: #1C1C1C"> </span><span style="color: #9E6D5A">1</span><span style="color: #777777">:</span></div><div class=\'line\'><span style="color: #1C1C1C">              </span><span style="color: #4B83CD">return</span><span style="color: #1C1C1C"> </span><span style="color: #777777">{</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) method&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;/div>\' >method</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> </span><span style="color: #777777">`</span><span style="color: #886338">error</span><span style="color: #777777">`</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) args&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> (&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">)[]&lt;/span>&lt;/div>\' >args</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> [</span><span style="color: #777777">`</span><span style="color: #886338">Error about...</span><span style="color: #777777">`</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) num&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #9E6D5A">1&lt;/span>&lt;/div>\' >num</data-lsp></span><span style="color: #1C1C1C">] </span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">            </span><span style="color: #4B83CD">case</span><span style="color: #1C1C1C"> </span><span style="color: #9E6D5A">2</span><span style="color: #777777">:</span></div><div class=\'line\'><span style="color: #1C1C1C">              </span><span style="color: #4B83CD">return</span><span style="color: #1C1C1C"> </span><span style="color: #777777">{</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) method&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;/div>\' >method</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> </span><span style="color: #777777">`</span><span style="color: #886338">debug</span><span style="color: #777777">`</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) args&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> (&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">)[]&lt;/span>&lt;/div>\' >args</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> [</span><span style="color: #777777">`</span><span style="color: #886338">

1Debug log about...</span><span style="color: #777777">`</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) num&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #9E6D5A">2&lt;/span>&lt;/div>\' >num</data-lsp></span><span style="color: #1C1C1C">] </span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">            </span><span style="color: #4B83CD">default</span><span style="color: #777777">:</span></div><div class=\'line\'><span style="color: #1C1C1C">              </span><span style="color: #4B83CD">return</span><span style="color: #1C1C1C"> </span><span style="color: #777777">{</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) method&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;/div>\' >method</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> </span><span style="color: #777777">`</span><span style="color: #886338">log</span><span style="color: #777777">`</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> <data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">property&lt;/span>&lt;span style="color: #333333">) args&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> (&lt;/span>&lt;span style="color: #39927F">string&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #777777">|&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;span style="color: #333333">)[]&lt;/span>&lt;/div>\' >args</data-lsp></span><span style="color: #777777">:</span><span style="color: #1C1C1C"> [</span><span style="color: #777777">`</span><span style="color: #886338">Simply log</span><span style="color: #777777">`</span><span style="color: #777777">,</span><span style="color: #1C1C1C"> </span><span style="color: #39927F"><data-lsp lsp=\'&lt;div class=&apos;line&apos;>&lt;span style="color: #333333">(&lt;/span>&lt;span style="color: #39927F">parameter&lt;/span>&lt;span style="color: #333333">) num&lt;/span>&lt;span style="color: #777777">:&lt;/span>&lt;span style="color: #333333"> &lt;/span>&lt;span style="color: #39927F">number&lt;/span>&lt;/div>\' >num</data-lsp></span><span style="color: #1C1C1C">] </span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">          </span><span style="color: #777777">}</span></div><div class=\'line\'><span style="color: #1C1C1C">        </span><span style="color: #777777">}}</span></div><div class=\'line\'><span style="color: #1C1C1C">      </span><span style="color: #777777">/&gt;</span></div><div class=\'line\'><span style="color: #1C1C1C">    </span><span style="color: #777777">&lt;/&gt;</span></div><div class=\'line\'><span style="color: #333333">  )</span></div><div class=\'line\'><span style="color: #777777">}</span></div>'}})))}s.Z=function(l){void 0===l&&(l={});const{wrapper:s}=Object.assign({},(0,a.ah)(),l.components);return s?p.createElement(s,l,p.createElement(n,l)):n(l)}}}]);
2//# sourceMappingURL=78d56c48-4ce81dbf9ef5a6d9cbe3.js.map