(window.webpackJsonpunifiNetworkUi=window.webpackJsonpunifiNetworkUi||[]).push([[15],{2821:function(e,t,a){"use strict";var n=a(0),i=a.n(n),r=a(3),l=a(1671),o=a(5),c=a(34);const s=Object(r.c)(o.a)`
  border-bottom: 1px ${({theme:e})=>e.colors.border} solid;
  box-sizing: border-box;

  @media ${c.a.VIEWPORT_M_UP} {
    padding: 0 ${({theme:e})=>e.space[4]}px;
  }
`,d=Object(r.c)(l.a)`
  bottom: -1px;
`;t.a=({isLoading:e,children:t,...a})=>i.a.createElement(s,Object.assign({},a,{flex:"none",className:"base-control-panel",position:"relative",alignItems:"center",justifyContent:"space-between",height:50}),t,i.a.createElement(d,{isLoading:e,placement:"bottom"}))},2822:function(e,t,a){"use strict";var n=a(0),i=a.n(n),r=a(3),l=a(5),o=a(1),c=a(47),s=a(481),d=a(2821),m=a(2823),u=a(2832),b=a(31),p=a(179);const O=Object(r.c)(c.a,{shouldForwardProp:e=>"addMargin"!==e})`
  font-size: 14px;
  ${({addMargin:e})=>e&&"margin-left: 50%;"}
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
`;t.a=({routes:e=[],hideFilterButton:t=!1,isLoading:a,children:n,filterTitleLabel:r,filtersActive:c,title:h,leftContent:g,isDisplayOptionsDisabled:E})=>{const f=(null==e?void 0:e.length)>1,v=!f&&1===e.length;return i.a.createElement(d.a,{isLoading:a},g&&g,f&&i.a.createElement(m.a,{routes:e}),v&&i.a.createElement(O,{weight:"bold"},e[0].label),h&&i.a.createElement(O,{weight:"bold",addMargin:t&&!g},i.a.createElement(o.b,{id:h})),i.a.createElement(l.a,{height:"100%",flex:f||h||v?"none":1,alignItems:"center",justifyContent:"flex-end",marginLeft:"auto"},n,!t&&i.a.createElement(p.a,{condition:E,wrapper:e=>i.a.createElement(s.a,{position:"bottom",width:"208px",portal:!0,message:i.a.createElement(b.p,null,i.a.createElement(o.b,{id:"COMMON_DISPLAY_OPTS_DISABLED"}))},e)},i.a.createElement(u.a,{disabled:E,filterTitleLabel:r,filtersActive:c}))))}},2823:function(e,t,a){"use strict";var n=a(0),i=a.n(n),r=a(3),l=a(25),o=a(807);var c=({items:e,...t})=>{const{params:a,path:n}=Object(l.n)(),r=Object(l.l)(),c=Object(l.k)(),s=e.find(({path:e})=>e===n)||((e,{pathname:t})=>e.find(({path:e})=>new RegExp(e.replace(/\/:\w+\?.*/g,"/?.*").replace(/:\w+/g,"\\w+").replace(/\//g,"\\$&")).test(t)))(e,r);return i.a.createElement(o.a,Object.assign({tabs:e,selectedTab:null==s?void 0:s.id,onSelectTab:({path:e,params:t={}})=>c.push(Object(l.i)(e,{...a,...t}))},t))};const s=Object(r.c)(c)`
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  div,
  button {
    height: 100% !important;
  }
`;t.a=({routes:e})=>{const t=Object(n.useMemo)(()=>e&&e.map(({id:e,label:t,disabled:a,path:n,...i})=>({id:e,label:t,disabled:"function"==typeof a?a(i):a,path:n})),[e]);return t?i.a.createElement(s,{selectedTabBold:!0,items:t}):null}},2824:function(e,t,a){"use strict";a.d(t,"b",(function(){return n.a})),a.d(t,"a",(function(){return l})),a.d(t,"d",(function(){return o})),a.d(t,"e",(function(){return u})),a.d(t,"c",(function(){return b.a}));a(2821);var n=a(2828),i=a(3),r=a(173);var l=Object(i.c)(r.a)`
  padding-left: ${({theme:e})=>e.space[3]}px;
  padding-right: ${({theme:e})=>e.space[3]}px;
  color: ${({theme:e})=>e.colors.subtlerText};
  &:hover {
    color: ${({theme:e})=>e.colors.mediumText};
  }
`;var o=Object(i.c)("span")`
  border-right: 1px ${({theme:e})=>e.colors.border} solid;
  margin: 0 ${({theme:e})=>e.space[4]}px;
  position: relative;
  height: 100%;
  display: block;
`,c=a(0),s=a.n(c),d=a(807);const m=i.a`
  align-items: center;
  display: flex;
  height: 100%;
  width: auto;
  justify-content: flex-end;
  overflow-x: unset;

  > div {
    margin: initial;
  }
`;function u(e){return s.a.createElement(d.a,Object.assign({className:m},e))}a(2823),a(2822);var b=a(2826)},2826:function(e,t,a){"use strict";var n=a(0),i=a.n(n),r=a(3),l=a(1),o=a(47),c=a(2600);const s=Object(r.c)(o.a)`
  line-height: 24px;
  color: ${({theme:e})=>e.motifPalette.text01};
`,d=Object(r.c)("div",{shouldForwardProp:e=>"toggleStyle"!==e})`
  justify-content: space-between;
  margin-top: ${({toggleStyle:e})=>{var t;return null!==(t=null==e?void 0:e.marginTop)&&void 0!==t?t:8}}px;
  margin-right: ${({toggleStyle:e})=>{var t;return null!==(t=null==e?void 0:e.marginRight)&&void 0!==t?t:0}}px;
  margin-bottom: ${({toggleStyle:e})=>{var t;return null!==(t=null==e?void 0:e.marginBottom)&&void 0!==t?t:0}}px;
  margin-left: ${({toggleStyle:e})=>{var t;return null!==(t=null==e?void 0:e.marginLeft)&&void 0!==t?t:0}}px;
  width: auto !important;

  label {
    margin-left: 0;
  }
`;t.a=({checked:e,disabled:t,id:a,onChange:n,text:r,toggleStyle:o})=>i.a.createElement(d,{toggleStyle:o},i.a.createElement(c.a,{checked:e,id:a,onChange:n,disabled:t},"string"==typeof r?i.a.createElement(s,{size:"body"},i.a.createElement(l.b,{id:r})):r))},2828:function(e,t,a){"use strict";var n=a(0),i=a.n(n),r=a(1),l=a(4),o=a(20);const c=e=>{var t;return null===(t=null==e?void 0:e.filters)||void 0===t?void 0:t.isFilterOpen};var s=a(1192),d=a(3),m=a(2769),u=a(3116),b=a(3108),p=a(464),O=a(3059);const h=Object(d.c)(O.a)`
  padding: 24px;
`;var g=({columns:e,columnLabels:t,tableType:a,hidden:c=[]})=>{var s;const d=Object(l.useDispatch)(),m=(null===(s=Object(l.useSelector)(Object(o.B)(a)))||void 0===s?void 0:s.initialColumns)||[],u=Object(n.useMemo)(()=>Object.values(e).every(e=>m.includes(e)),[m]),b=Object(n.useCallback)(()=>{const t=u||(null==m?void 0:m.length)?[]:Object.values(e);d(Object(o.L)(a,{initialColumns:t},!0))},[d,u,a,m]),p=Object(n.useMemo)(()=>[{full:!0,id:"showAllFields",checked:u||!!(null==m?void 0:m.length)&&"mixed",children:i.a.createElement(r.b,{id:"COMMON_ALL"}),onChange:b}].concat(Object.values(e).filter(e=>!c.includes(e)).map(e=>({full:!0,id:e,checked:m.includes(e),children:(null==t?void 0:t[e])?i.a.createElement(r.a,{id:t[e]}):e,onChange:({target:{checked:t}})=>{const n=t?[...m,e]:m.filter(t=>t!==e);d(Object(o.L)(a,{initialColumns:n},!0))}}))),[m,a]);return i.a.createElement(h,{spacing:"flush",items:p,variant:"list"})};const E=Object(d.c)(m.a)`
  width: 258px !important;
`;var f;!function(e){e.COLUMNS="columns",e.FILTERS="filters"}(f||(f={}));var v=({filterTitleLabel:e,isOpen:t,onClose:a,columnTabProps:c,renderFilterDrawerContent:s,footerProps:d,side:m="left"})=>{var O;const[h,v]=Object(n.useState)(f.FILTERS),{tableType:j}=c||{tableType:null},y=Object(l.useDispatch)(),w=(null===(O=Object(l.useSelector)(Object(o.B)(j)))||void 0===O?void 0:O.initialColumns)||[],S=d&&h===f.COLUMNS,x=Object(n.useMemo)(()=>{var e,t;return S&&Object(p.a)(null===(t=null===(e=null===o.c||void 0===o.c?void 0:o.c.tables)||void 0===e?void 0:e[j])||void 0===t?void 0:t.initialColumns,w)},[S,j,w]),T=Object(n.useCallback)(()=>{var e,t,a;const n=[...null!==(a=null===(t=null===(e=null===o.c||void 0===o.c?void 0:o.c.tables)||void 0===e?void 0:e[j])||void 0===t?void 0:t.initialColumns)&&void 0!==a?a:[]];y(Object(o.L)(j,{initialColumns:n},!0))},[y,j]),C=Object(n.useCallback)(({id:e})=>v(e),[v]),I=c?i.a.createElement(u.a,{onSelectTab:C,tabs:[{id:f.FILTERS,label:i.a.createElement(r.b,{id:"COMMON_CONTROL_PANEL_FILTERS"}),render:s},{id:f.COLUMNS,label:i.a.createElement(r.b,{id:"COMMON_CONTROL_PANEL_COLUMNS"}),render:()=>i.a.createElement(g,{columns:c.columns,hidden:c.hidden,columnLabels:c.columnLabels,tableType:j})}]}):s(),N=Object(n.useMemo)(()=>S?{label:i.a.createElement(r.b,{id:"COMMON_CONTROL_PANEL_FILTER_FOOTER_RESTORE_COLUMNS"}),onClick:T,disabled:x}:d,[S,d,x,T]),k=Object(n.useCallback)(()=>{a(),v(f.FILTERS)},[a,v]);return i.a.createElement(E,{in:t,renderHeader:()=>null,onClose:a,side:m},t&&i.a.createElement(b.a,{footerProps:N,headerProps:{label:e},onClose:k},I))},j=a(2822);t.a=Object(r.e)(({routes:e=[],hideFilterButton:t=!1,isLoading:a,children:r,filterFooterProps:d,columnTabProps:m,renderFilterDrawerContent:u,filterTitleLabel:b,filtersActive:p,title:O,onClose:h,intl:g,leftContent:E,isDisplayOptionsDisabled:f})=>{var y;const w=Object(l.useDispatch)(),S=Object(l.useSelector)(c),x=(null===(y=Object(l.useSelector)(Object(o.B)(null==m?void 0:m.tableType)))||void 0===y?void 0:y.initialColumns)||[],T=g.formatMessage({id:b||"COMMON_CONTROL_PANEL_FILTER_TITLE"});Object(n.useEffect)(()=>()=>{w(Object(s.b)(!1))},[]);const C=Object(n.useCallback)(()=>{w(Object(s.b)(!1)),null==h||h(),(null==m?void 0:m.tableType)&&w(Object(o.L)(m.tableType,{initialColumns:x}))},[w,h,null==m?void 0:m.tableType,x]);return i.a.createElement(i.a.Fragment,null,i.a.createElement(v,{isOpen:S,filterTitleLabel:T,onClose:C,columnTabProps:m,renderFilterDrawerContent:()=>S&&u,footerProps:d,side:"right"}),i.a.createElement(j.a,{leftContent:E,routes:e,hideFilterButton:t,isLoading:a,filterTitleLabel:T,filtersActive:p,title:O,isDisplayOptionsDisabled:f},r))})},2832:function(e,t,a){"use strict";var n=a(0),i=a.n(n),r=a(3),l=a(4),o=a(3117),c=a(34),s=a(5),d=a(1192);const m=Object(r.c)(o.a,{shouldForwardProp:e=>"disabled"!==e})`
  pointer-events: ${({disabled:e})=>e?"none":"auto"};
  opacity: ${({disabled:e})=>e?.45:1};
  cursor: ${({disabled:e})=>e?"default":"pointer"};
  padding: 0 8px 0 0;
  z-index: 5;

  // Hides the text element on smaller screens
  button div > span {
    display: none;
  }

  button svg {
    margin-right: 0;
  }

  button {
    padding: 0 8px;
  }

  @media ${c.a.VIEWPORT_M_UP} {
    button {
      padding: 0 16px;
    }

    button svg {
      margin-right: 4px;
    }

    button div > span {
      display: inline-block;
    }
  }
`;t.a=({filterTitleLabel:e,filtersActive:t,items:a,disabled:n})=>{const r=Object(l.useDispatch)();return i.a.createElement(s.a,{height:"100%"},i.a.createElement(m,{disabled:n,title:e,onClick:()=>!n&&r(Object(d.b)(!0)),filtersActive:t}),a)}},3101:function(e,t,a){"use strict";a.r(t);var n=a(4),i=a(0),r=a.n(i),l=a(25),o=a(31),c=a(22),s=a(909),d=a(8),m=a(89),u=a(256),b=a(362),p=a(20),O=a(170),h=a(316),g=a(6),E=a(464),f=a(2824),v=a(47),j=a(2701),y=a(3059),w=a(173),S=a(1013),x=a(1),T=a(3),C=a(34),I=a(1198),N=a(1196),k=a(1584),_=a(235);const L=Object(T.c)("div")`
  padding: 24px;
`,D=Object(T.c)(v.a)`
  color: ${({theme:e})=>e.motifPalette.text01};
  margin-bottom: ${({theme:e})=>e.spacing["spacing-m"]};
  display: block;
`,P=()=>{const e=Object(n.useSelector)(p.G),{showAllDevices:t,showWiredClients:a,show2GClients:l,show5GClients:o,showSSID:c,showWifiExperience:s,showRadioChannel:d,showWifiStandards:m,showWiredPorts:u,showWiredSpeed:b}=e,O=Object(n.useSelector)(k.b),h=Object(n.useDispatch)(),g=c&&s&&d&&m&&b&&u,E=a&&l&&o,v=Object(i.useCallback)(t=>{var a,n;const{id:i}=null!==(a=null==t?void 0:t.target)&&void 0!==a?a:{};if("showAllDescriptions"!==i){if(i){const t=null!==(n=e[i])&&void 0!==n?n:I.b.topologyViewSettings[i];h(Object(p.M)(Object.assign({},e,{[i]:!t})))}}else h(Object(p.M)(Object.assign({},e,{showSSID:!g,showWifiExperience:!g,showRadioChannel:!g,showWifiStandards:!g,showWiredSpeed:!g,showWiredPorts:!g})))},[h,e,g]),w=Object(i.useCallback)(({target:{checked:t}})=>{const a=Object.assign({},e,{showWiredClients:t,show2GClients:t,show5GClients:t});h(Object(p.M)(a))},[h,e]);return r.a.createElement(L,null,r.a.createElement(f.c,{checked:t,onChange:v,id:"showAllDevices",text:"COMMON_SHOW_ALL_DEVICES",toggleStyle:{marginTop:4,marginBottom:16}}),r.a.createElement(j.a,{variant:"secondary",multiOpen:!0,renderOnlyExpandedContent:!0,items:[{id:"clients",openByDefault:!0,label:r.a.createElement(x.b,{id:"TOPOLOGY_FILTER_CLIENTS"}),renderContent:()=>r.a.createElement(r.a.Fragment,null,r.a.createElement(f.c,{checked:E,onChange:w,id:"showAllClients",text:"COMMON_SHOW_ALL_CLIENTS",toggleStyle:{marginBottom:16}}),r.a.createElement(y.a,{spacing:"flush",variant:"list",items:[{full:!0,id:"show2GClients",checked:l,children:r.a.createElement(x.b,{id:"TOPOLOGY_FILTER_SHOW_2G_CLIENTS"}),onChange:v},{full:!0,id:"show5GClients",checked:o,children:r.a.createElement(x.b,{id:"TOPOLOGY_FILTER_SHOW_5G_CLIENTS"}),onChange:v},{full:!0,id:"showWiredClients",checked:a,children:r.a.createElement(x.b,{id:"TOPOLOGY_FILTER_SHOW_WIRED"}),onChange:v}]}))},{id:"description",label:r.a.createElement(x.b,{id:"TOPOLOGY_FILTER_DESCRIPTION"}),renderContent:()=>r.a.createElement(r.a.Fragment,null,r.a.createElement(f.c,{checked:g,onChange:v,id:"showAllDescriptions",text:"TOPOLOGY_FILTER_SHOW_ALL_DESCRIPTIONS",toggleStyle:{marginBottom:24}}),r.a.createElement(D,{size:"body",weight:"bold"},r.a.createElement(x.b,{id:"TOPOLOGY_FILTER_CAPTION_WIRELESS"})),r.a.createElement(y.a,{spacing:"flush",variant:"list",items:[{full:!0,id:"showSSID",checked:c,children:r.a.createElement(x.b,{id:"COMMON_SSID"}),onChange:v},{full:!0,id:"showWifiExperience",checked:s,children:r.a.createElement(x.b,{id:"COMMON_WIFI_EXP"}),onChange:v},{full:!0,id:"showRadioChannel",checked:d,children:r.a.createElement(x.b,{id:"COMMON_CHANNEL"}),onChange:v},{full:!0,id:"showWifiStandards",checked:m,children:r.a.createElement(x.b,{id:"COMMON_WIFI_STANDARDS"}),onChange:v}]}),r.a.createElement(D,{size:"body",weight:"bold",style:{marginTop:20}},r.a.createElement(x.b,{id:"TOPOLOGY_FILTER_CAPTION_WIRED"})),r.a.createElement(y.a,{spacing:"flush",variant:"list",items:[{full:!0,id:"showWiredSpeed",checked:b,children:r.a.createElement(x.b,{id:"TOPOLOGY_FILTER_SHOW_WIRED_SPEED"}),onChange:v},{full:!0,id:"showWiredPorts",checked:u,children:r.a.createElement(x.b,{id:"TOPOLOGY_FILTER_SHOW_WIRED_PORTS"}),onChange:v}]}))},{id:"status",openByDefault:!1,label:r.a.createElement(x.b,{id:"TOPOLOGY_FILTER_STATUS"}),renderContent:()=>r.a.createElement(y.a,{spacing:"flush",variant:"list",items:Object.values(_.b).map(t=>{var a;return{id:t,full:!0,checked:null!==(a=e[t])&&void 0!==a?a:I.b.topologyViewSettings[t],onChange:v,children:r.a.createElement(x.a,{id:"TOPOLOGY_FILTER_STATUS_"+t.toUpperCase()}),labelProps:{count:O[t]}}})})}]}))},R=Object(T.c)("div")`
  .base-control-panel {
    position: fixed;
    left: 0;
    right: 0;
    background: ${({theme:e})=>e.motifPalette.uiBase};
    z-index: 11;
  }

  @media ${C.a.VIEWPORT_S_UP} {
    .base-control-panel {
      left: 50px;
    }
  }
`,M=({onIoTButtonClick:e})=>{const t=Object(n.useSelector)(N.selectIsFirstIoTNetwork);return Object(n.useSelector)(Object(O.f)(O.a.VISUAL_PROGRAMMING))&&r.a.createElement(w.a,{variant:"link",onClick:e},r.a.createElement(x.b,{id:t?"TOPOLOGY_CREATE_IOT_NETWORK":"TOPOLOGY_MANAGE_IOT_NETWORK"}))},$=({onIoTButtonClick:e})=>Object(c.g)([Object(N.fetchIoTNetwork)(void 0,{crudCacheStrategy:{type:d.a.CACHE}})],r.a.createElement(M,{onIoTButtonClick:e}));var F=e=>{const{routes:t}=e,a=S.a.isSafari?R:r.a.Fragment,o=Object(n.useSelector)(p.G),c=Object(n.useSelector)(N.iotNetworkDataSelector),s=Object(n.useDispatch)(),d=Object(l.k)(),m=Object(l.m)(),u=Object(i.useMemo)(()=>Object(E.a)(o,I.b.topologyViewSettings),[o]),b=Object(i.useCallback)(()=>{s(Object(p.M)(I.b.topologyViewSettings))},[s]),O=Object(i.useCallback)(()=>{s(Object(p.g)())},[s]);return r.a.createElement(a,null,r.a.createElement(f.b,{filterTitleLabel:"COMMON_CONTROL_PANEL_FILTER_TITLE",isLoading:!1,routes:t,renderFilterDrawerContent:r.a.createElement(P,null),filterFooterProps:{label:r.a.createElement(x.b,{id:"COMMON_CONTROL_PANEL_FILTER_FOOTER_RESTORE_DEFAULTS"}),onClick:b,disabled:u},onClose:O,filtersActive:!u},r.a.createElement($,{onIoTButtonClick:()=>{s(Object(N.copyToIoTForm)(c)),d.push(Object(l.i)(t[0].path,m)+"/iot")}})))},A=a(2869),W=a(3056),G=a(2607),z=a(2757),V=a(1216),B=a(85),Y=a(2604),H=a(1207);const U=(e,t)=>{const a=t.find(t=>t.downlinkMac===e);return null==a?void 0:a.uplinkMac},X=e=>({id:"invisibleNodeName",name:"invisibleNodeName",mac:"invisibleNodeMac",type:"invisibleNodeType",parentMac:void 0,children:e.map(e=>({...e,parentMac:"invisibleNodeMac"}))}),Z=e=>{const{deviceState:t}=e;return t===g.DeviceState.DISCONNECTED||t===g.DeviceState.INFORM_ERROR},K=(e,t,a,n,i,r,l,o,c,s)=>{if(t&&a&&i&&r&&l&&o&&c&&s)return e;const{edges:d,vertices:m}=e,[u,b,p]=(e=>e.reduce((e,{type:t,radioBand:a,downlinkMac:n})=>(t===H.a.WIRELESS?(a===H.b.GHZ2&&e[0].add(n),a===H.b.GHZ5&&e[1].add(n)):e[2].add(n),e),[new Set,new Set,new Set]))(d),O=m.filter(e=>{const d=(m=e,n?"CLIENT"===(null==m?void 0:m.type)&&!(null==m?void 0:m.unifiDevice):"CLIENT"===m.type);var m;return"invisibleNode"===e.type||r&&(e=>{const{deviceState:t}=e;return t===g.DeviceState.CONNECTED||t===g.DeviceState.UPGRADING||t===g.DeviceState.PROVISIONING||t===g.DeviceState.ADOPTING||t===g.DeviceState.DELETING||t===g.DeviceState.RESTARTING||t===g.DeviceState.RFSCANNING||t===g.DeviceState.HEARTBEAT_MISSED})(e)||l&&Z(e)||o&&(e=>{const{deviceState:t}=e;return t===g.DeviceState.ISOLATED})(e)||c&&(e=>{const{deviceState:t}=e;return t===g.DeviceState.PENDING||t===g.DeviceState.ADOPTION_REQUIRED||t===g.DeviceState.ADOPTION_FAILED||t===g.DeviceState.FIRMWARE_MISMATCH})(e)||s&&(e=>{const{deviceState:t}=e;return t===g.DeviceState.MANAGED_BY_OTHER})(e)||d&&i&&p.has(e.mac)||d&&t&&u.has(e.mac)||d&&a&&b.has(e.mac)});return{...e,vertices:O}},J=()=>Object(l.l)().pathname.endsWith("iot");var Q=a(3075),q=a(3054),ee=a(3076),te=a(3074),ae=a(2675),ne=a(1646),ie=a(3120),re=a(1209),le=a(92),oe=a(76),ce=a(107),se=a(84),de=a(55),me=a(481),ue=a(48),be=a(10),pe=a(104),Oe=a(218),he=a(108),ge=a(5),Ee=a(101);const fe=Object(T.c)(he.c,{shouldForwardProp:e=>"isFaded"!==e})`
  user-select: none;
  display: block;
  height: ${50}px;
  width: ${120}px;
  object-fit: contain;
  margin: 0 auto;
  opacity: ${({isFaded:e})=>e?.55:1};
`,ve=Object(T.c)(fe,{shouldForwardProp:e=>"motif"!==e})`
  /*Dark theme we want black, light theme we want white background*/
  filter: ${({motif:e})=>"dark"===e?"brightness(0)":"brightness(100)"};
  position: absolute;
`,je=Object(T.c)(Oe.a)`
  // !important needed to override default styling of fallback images
  user-select: none;
  display: block;
  height: ${50}px !important;
  width: ${120}px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  padding: 0 !important;
`,ye=Object(T.c)(je,{shouldForwardProp:e=>"motif"!==e})`
  /*Dark theme we want black, light theme we want white background*/
  filter: ${({motif:e})=>"dark"===e?"brightness(0)":"brightness(100)"};
  position: absolute;
`,we=Object(T.c)("div")`
  position: fixed;
`,Se=Object(T.c)("text",{shouldForwardProp:e=>!["isHovered","innerRef"].includes(e)})`
  transition: none !important;
  fill: ${({theme:e,isHovered:t})=>t?e.motifPalette.text02+" !important":e.motifPalette.uBlue06};
`,xe={pointerEvents:"auto",opacity:.55},Te=({nodeData:e})=>{const{data:t}=e,{unifiDevice:a,allowedInVisualProgramming:i}=t,l=J(),o=Object(n.useSelector)(Object(m.selectClientData)(t.mac)),{motif:c}=Object(de.a)();return!l||i||a?r.a.createElement(je,{grid:!0,client:o,topology:!0}):r.a.createElement(me.a,{portal:!0,position:"top",width:248,isHoverable:!0,isInteractive:!0,message:r.a.createElement(v.a,null,r.a.createElement(x.a,{id:"TOPOLOGY_IOT_CONNECT_DEVICE_TO_USW",values:{link:Ee.a.iotUswClients}}))},r.a.createElement(we,null,r.a.createElement(ye,{grid:!0,client:o,motif:c}),r.a.createElement(je,{grid:!0,client:o,style:xe,topology:!0})))},Ce=r.a.memo(({data:e,isFaded:t})=>{var a,n,i;const{motif:l}=Object(de.a)();return t?r.a.createElement(we,{style:{transform:"translate(0, 0) scale(var(--d3-zoom-scale))",transformOrigin:"top left"}},r.a.createElement(ve,{motif:l,filesMap:"TOPOLOGY",device:{model:e.model,type:null===(a=se.deviceModels[e.model])||void 0===a?void 0:a.type}}),r.a.createElement(fe,{filesMap:"TOPOLOGY",device:{model:e.model,type:null===(n=se.deviceModels[e.model])||void 0===n?void 0:n.type},isFaded:t})):r.a.createElement(fe,{filesMap:"TOPOLOGY",device:{model:e.model,type:null===(i=se.deviceModels[e.model])||void 0===i?void 0:i.type},isFaded:t})},(e,t)=>e.isFaded===t.isFaded&&e.data.model===t.data.model),Ie=({nodeData:e,isFaded:t})=>{const{data:a}=e;return"DEVICE"===a.type?r.a.createElement(Ce,{data:a,isFaded:t}):r.a.createElement(Te,{nodeData:e})},Ne=Object(T.c)(ge.a,{shouldForwardProp:e=>"isFaded"!==e})`
  /* Helps with safari bug*/
  position: fixed;
  white-space: nowrap;
  transform: translate(-50%, -100%) scale(var(--d3-zoom-scale));
  transform-origin: bottom center;
  color: ${({theme:e,isFaded:t})=>t?e.motifPalette.neutral04:e.motifPalette.neutral07};

  .text-content {
    color: ${({theme:e,isFaded:t})=>t?e.motifPalette.neutral04:e.motifPalette.neutral07};
  }
`,ke={transition:"opacity 100ms cubic-bezier(0.65, 0, 0.35, 1), transform 100ms cubic-bezier(0.65, 0, 0.35, 1)",opacity:0,visibility:"hidden"},_e={exiting:{opacity:0,visibility:"initial"},entering:{opacity:1,visibility:"initial"},entered:{opacity:1,visibility:"initial"}},Le=({wifiRadios:e,isVisible:t,isFaded:a})=>r.a.createElement(ne.a,{in:t,unmountOnExit:!0,timeout:100},t=>{const n={...ke,..._e[t]};return e&&r.a.createElement("foreignObject",{x:0,y:-33,width:"1",height:"1",style:{overflow:"visible",...n}},r.a.createElement(Ne,{alignItems:"center",center:!0,isFaded:a},r.a.createElement(be.Yb,{size:"small"}),r.a.createElement(v.a,{style:{marginLeft:4},className:"text-content"},null==e?void 0:e.map(({protocol:e,channel:t})=>`${t} (${null==e?void 0:e.toUpperCase()})`).join(", "))))}),De=Object(T.c)("g",{shouldForwardProp:e=>"isFaded"!==e})`
  pointer-events: none;
  user-select: none;
  cursor: pointer;

  text {
    fill: ${({theme:e,isFaded:t})=>t?e.motifPalette.text04:e.motifPalette.uBlue06};
    transition: fill 0.2s linear;
    font-weight: bold;
  }
`,Pe=Object(T.c)("text",{shouldForwardProp:e=>"experienceState"!==e&&"isFaded"!==e})`
  fill: ${({theme:e,experienceState:t,isFaded:a})=>a?e.motifPalette.text04:ue.a["color-"+t]} !important;
`;function Re(e,t=!1){var a,n;const{x:i,y:r,parent:l}=e;if(t){const e=null!==(a=null==l?void 0:l.x)&&void 0!==a?a:0;return`translate(${null!==(n=null==l?void 0:l.y)&&void 0!==n?n:0},${e})`}return`translate(${r},${i})`}const Me=Object(T.c)("g")`
  cursor: pointer;
  transition: 0.2s ease-in;

  &:hover {
    filter: drop-shadow(0px 4.4px 4.4px rgba(0, 0, 0, 0.25));
    transform: translateX(-8px) scale(1.1, 1.1);
  }
`,$e=Object(T.c)("circle")`
  fill: ${({theme:e})=>e.motifPalette.uBlue06};
`,Fe=Object(T.c)("line")`
  stroke: ${({theme:e})=>e.motifPalette.uBlue06};
  stroke-width: 0.6;
  fill: none;
  pointer-events: none;
`,Ae=({collapsedNodes:e,data:t,multiUplinkWidth:a,handleChildrenToggle:n})=>{const i=((e,t)=>t.has(e))(t.mac,e)?be.Nb:be.rb;return r.a.createElement("g",null,r.a.createElement(Fe,{x1:0,y1:0,x2:60+a+-4.5,y2:0}),r.a.createElement(Me,{onClick:e=>n(t.id,e)},r.a.createElement($e,{cx:60+a,cy:0,r:10}),r.a.createElement(i,{className:"toggle-icon",x:60+a+-4.5,y:-4.5,fill:"white",width:9,height:9})))},We=({percentage:e,isVisible:t,isFaded:a})=>r.a.createElement(ne.a,{in:t,unmountOnExit:!0,timeout:100},t=>{const n={...ke,..._e[t]};return r.a.createElement(Pe,{style:n,y:58.5,textAnchor:"middle",isFaded:a,experienceState:Object(pe.c)(e)},e," %")}),Ge=({isHovered:e,data:t,multiUplinkWidth:a})=>{const n=Object(i.useRef)(null),l=t.name||t.mac,o=120+2*a;return Object(i.useEffect)(()=>{if(n.current){const e=n.current;let t=e.getComputedTextLength(),a=l.length,i=l;const r=3;let c=100;for(;t>o&&c>0&&i.length>0&&Math.abs(o-t)>r;)i=t>=o?i.slice(0,.15*-a):l.slice(0,1.15*a),e.textContent=i+"...",t=e.getComputedTextLength(),a=i.length,c--}},[l,o]),r.a.createElement(Se,{innerRef:n,y:42.5,textAnchor:"middle",isHovered:e},l)};var ze=({nodeData:e,experienceScore:t,handleChildrenToggle:a,handleNodeClick:l,transitionDuration:o,labelWidth:c,collapsedNodes:s,setHoveredNode:d,hoveredNode:m,isIoTMode:u,...b})=>{var O,h,g;const[E]=Object(i.useState)(Re(e,!0)),[f]=Object(i.useState)({opacity:0}),v=Object(i.useRef)(null),j=Object(i.useRef)(!0),y=Object(i.useRef)(!0),{showWifiExperience:w,showRadioChannel:S}=Object(n.useSelector)(p.G),{x:x,y:T}=e,C=(null===(h=null===(O=null==e?void 0:e.data)||void 0===O?void 0:O.internalChildren)||void 0===h?void 0:h.length)>0,I=e.data.id===m,k=c>0?32:16,_=Z(e.data),L=u&&!(null===(g=e.data)||void 0===g?void 0:g.allowedInVisualProgramming),D=Object(n.useSelector)(Object(N.selectIsIoTNodeSelected)(e.data.mac)),P=L||_,R=(e,t,a=1)=>{Object(te.a)(v.current).transition().duration(t).attr("transform",e).style("opacity",a).on("end",()=>{y.current=!1})};Object(i.useEffect)(()=>{j.current?j.current=!1:R(`translate(${T},${x})`,o,1)},[x,T,o]);return"invisibleNodeType"===e.data.type?null:r.a.createElement(ne.a,Object.assign({},b,{timeout:{enter:o,exit:o},onExit:()=>{((e,t)=>{const a=Re(e,!0);R(a,t,0)})(e,o)},onEnter:()=>{((e,t)=>{const a=Re(e);R(a,t,1)})(e,o)},unmountOnExit:!0,mountOnEnter:!0}),r.a.createElement("g",{id:e.data.id,ref:v,style:f,transform:E},r.a.createElement(Le,{isFaded:P,wifiRadios:e.data.wifiRadios,isVisible:e.data.wifiRadios&&S&&!I}),C&&r.a.createElement(Ae,{handleChildrenToggle:a,multiUplinkWidth:k,data:e.data,collapsedNodes:s}),r.a.createElement("foreignObject",{width:120,height:50,x:-60,y:-25,style:{overflow:"visible",pointerEvents:"none",display:"block"}},r.a.createElement(Ie,{nodeData:e,isFaded:P})),r.a.createElement(De,{onClick:()=>l(e),isFaded:P},r.a.createElement(Ge,{data:e.data,isHovered:I,multiUplinkWidth:k}),r.a.createElement(We,{percentage:t,isFaded:P,isVisible:t&&w&&!I&&!D}))))},Ve=a(183);const Be=Object(T.c)("path")`
  stroke: ${e=>(({type:e,radioBand:t})=>e===H.a.WIRELESS&&t===H.b.GHZ2?ue.a["blue-light-4"]:ue.a["blue-3"])(e)};
  stroke-width: 0.5;
  fill: none;
  pointer-events: none;
  stroke-dasharray: ${({type:e})=>e===H.a.WIRELESS?5:0};
`,Ye=Object(T.c)("span")`
  line-height: 20px;
  color: ${({theme:e})=>e.motifPalette.text03};
`,He=Object(T.c)("div")`
  user-select: none;
  align-items: center;
  white-space: nowrap;
  display: inline-flex;
  // This is to help with foreignObject issues in Safari. Without "fixed", the objects will
  // move to the top left of the page. We need the static positioning for LabelCalipers
  // component to measure correctly the label width before layouting the tree.
  position: ${({measuring:e})=>e?"static":"fixed"};
  color: ${({theme:e})=>e.motifPalette.neutral07};
`,Ue=Object(T.c)(be.xc)`
  path {
    fill: ${({theme:e})=>e.motifPalette.neutral07} !important;
  }
`,Xe={transition:"opacity 200ms cubic-bezier(0.65, 0, 0.35, 1), transform 200ms cubic-bezier(0.65, 0, 0.35, 1)",opacity:0,visibility:"hidden"},Ze={exiting:{opacity:0,visibility:"initial"},entering:{opacity:1,visibility:"initial"},entered:{opacity:1,visibility:"initial"}},Ke=({transform:e,children:t,isVisible:a})=>r.a.createElement(ne.a,{in:!!a,timeout:200,unmountOnExit:!0},a=>{const n={...Xe,...Ze[a]};return r.a.createElement("g",{transform:e,style:n,pointerEvents:"none"},r.a.createElement("foreignObject",{x:0,y:0,width:"1",height:"1",style:{overflow:"visible"}},t))}),Je=({protocol:e})=>{if(!(e=>e===H.c.A||e===H.c.B||e===H.c.G)(e)){if(e===H.c.NA||e===H.c.NG)return r.a.createElement(be.Pc,{size:"small"});if(e===H.c.AC||e===H.c.AD)return r.a.createElement(be.Qc,{size:"small"});if(e===H.c.AX)return r.a.createElement(be.Rc,{size:"small"})}return null},Qe=({networkData:e,measuring:t=!1})=>{const{protocol:a}=e;return r.a.createElement(He,{style:{transform:"translate(-100%,-100%) scale(var(--d3-zoom-scale))",transformOrigin:"bottom right"},measuring:t},r.a.createElement(Je,{protocol:a}),r.a.createElement(Ye,{style:{marginLeft:4}},a.toUpperCase()))},qe=({networkData:e,target:t,isVisible:a})=>r.a.createElement(Ke,{transform:`translate(${t.y-60-16}, ${t.x-8})`,isVisible:a},e.protocol&&r.a.createElement(Qe,{networkData:e})),et=({essid:e,measuring:t=!1})=>{const a=e.length>14?e.substring(0,12).concat("..."):e;return r.a.createElement(He,{style:{transform:"translate(-100%,0) scale(var(--d3-zoom-scale))",paddingLeft:16,transformOrigin:"right top"},measuring:t},r.a.createElement(be.Tc,null),r.a.createElement(Ye,{style:{marginLeft:4}},a))},tt=({essid:e,target:t,isVisible:a})=>r.a.createElement(Ke,{transform:`translate(${t.y-60-16}, ${t.x+8})`,isVisible:a},e&&r.a.createElement(et,{essid:e})),at=({uplinkPortNumber:e,style:t,measuring:a=!1})=>{const n=null==t?void 0:t.transform;return r.a.createElement(He,{style:{...t,transform:n+" scale(var(--d3-zoom-scale))"},measuring:a},r.a.createElement(be.h,{size:"small"}),r.a.createElement(be.I,{size:"small",style:{marginLeft:4,marginRight:4}}),r.a.createElement(Ye,null,e))},nt=({downlinkPortNumber:e,measuring:t=!1})=>r.a.createElement(He,{style:{transform:"translate(-100%,-100%) scale(var(--d3-zoom-scale))",transformOrigin:"bottom right"},measuring:t},r.a.createElement(be.i,{size:"small"}),r.a.createElement(be.I,{size:"small",style:{marginLeft:4,marginRight:4}}),r.a.createElement(Ye,null,e)),it=({downlinkPortNumber:e,uplinkPortNumber:t,measuring:a=!1})=>r.a.createElement(He,{style:{transform:"translate(-100%,-100%) scale(var(--d3-zoom-scale))",transformOrigin:"bottom right"},measuring:a},r.a.createElement(be.h,{size:"small"}),r.a.createElement(be.I,{size:"small",style:{marginLeft:4,marginRight:4}}),r.a.createElement(Ye,null,t),r.a.createElement(be.i,{size:"small",style:{marginLeft:10}}),r.a.createElement(be.I,{size:"small",style:{marginLeft:4,marginRight:4}}),r.a.createElement(Ye,null,e)),rt=({measuring:e=!1})=>null,lt=({rateMbps:e,measuring:t=!1})=>r.a.createElement(He,{style:{transform:"translate(-100%,0) scale(var(--d3-zoom-scale))",paddingRight:16,transformOrigin:"right top"},measuring:t},r.a.createElement(Ue,{size:"small"}),r.a.createElement(Ye,{style:{marginLeft:4}},Object(Ve.b)(e))),ot=({target:e,rateMbps:t,isVisible:a})=>r.a.createElement(Ke,{transform:`translate(${e.y-60}, ${e.x+8})`,isVisible:a},r.a.createElement(lt,{rateMbps:t})),ct=({target:e,downlinkPortNumber:t,isVisible:a})=>r.a.createElement(Ke,{transform:`translate(${e.y-60-16}, ${e.x-8})`,isVisible:a},r.a.createElement(nt,{downlinkPortNumber:t})),st=({source:e,target:t,networkData:a,isVisible:n})=>{var i;const{uplinkPortNumber:l}=a;if((null===(i=null==e?void 0:e.children)||void 0===i?void 0:i.length)>1){const i=a.downlinkMac===e.children[0].data.mac;return r.a.createElement(r.a.Fragment,null,i&&r.a.createElement(Ke,{transform:`translate(${e.y+60}, ${e.x-8})`,isVisible:n},r.a.createElement(rt,null)),r.a.createElement(Ke,{transform:`translate(${t.y-60-16}, ${t.x-8})`,isVisible:n},r.a.createElement(at,{uplinkPortNumber:l,style:{transform:"translate(-100%,-100%)",transformOrigin:"bottom right"}})))}return r.a.createElement(Ke,{transform:`translate(${t.y-60-16}, ${t.x-8})`,isVisible:n},r.a.createElement(at,{uplinkPortNumber:l,style:{transform:"translate(0,-100%)",transformOrigin:"bottom left"}}))},dt=(e,t)=>e.data.id===t,mt=({source:e,target:t,networkData:a,isVisible:n,hoveredNode:i})=>{var l;const{uplinkPortNumber:o,downlinkPortNumber:c}=a;if((null===(l=null==e?void 0:e.children)||void 0===l?void 0:l.length)>1){const l=a.downlinkMac===e.children[0].data.mac;return r.a.createElement(r.a.Fragment,null,l&&r.a.createElement(Ke,{transform:`translate(${e.y+60}, ${e.x-8})`,isVisible:n&&!dt(e,i)},r.a.createElement(rt,null)),r.a.createElement(Ke,{transform:`translate(${t.y-60-16}, ${t.x-8})`,isVisible:n&&!dt(t,i)},r.a.createElement(it,{downlinkPortNumber:c,uplinkPortNumber:o})))}return r.a.createElement(Ke,{isVisible:n&&!dt(t,i),transform:`translate(${t.y-60-16}, ${t.x-8})`},r.a.createElement(it,{downlinkPortNumber:c,uplinkPortNumber:o}))},ut=({source:e,target:t,networkData:a,hoveredNode:i})=>{const{downlinkPortNumber:l,uplinkPortNumber:o,rateMbps:c}=a,{showWiredSpeed:s,showWiredPorts:d}=Object(n.useSelector)(p.G),m=Object(n.useSelector)(Object(N.selectIsIoTNodeSelected)(t.data.mac));return l&&o?r.a.createElement(r.a.Fragment,null,r.a.createElement(mt,{source:e,target:t,networkData:a,isVisible:d&&!m,hoveredNode:i}),r.a.createElement(ot,{rateMbps:c,target:t,isVisible:c&&s&&!m&&!dt(t,i)})):o?r.a.createElement(r.a.Fragment,null,r.a.createElement(st,{source:e,target:t,networkData:a,isVisible:d&&!m&&!dt(t,i)}),r.a.createElement(ot,{rateMbps:c,target:t,isVisible:c&&s&&!m&&!dt(t,i)})):l?r.a.createElement(r.a.Fragment,null,r.a.createElement(ct,{target:t,downlinkPortNumber:l,isVisible:d&&!m&&!dt(t,i)}),r.a.createElement(ot,{rateMbps:c,target:t,isVisible:c&&!m&&s&&!dt(t,i)})):null},bt=({networkData:e,target:t,hoveredNode:a})=>{const{essid:i,type:l,channel:o}=e,{showSSID:c,showWifiStandards:s}=Object(n.useSelector)(p.G),d=l===H.a.WIRELESS,m=Object(n.useSelector)(Object(N.selectIsIoTNodeSelected)(t.data.mac));return r.a.createElement(r.a.Fragment,null,r.a.createElement(qe,{networkData:e,target:t,isVisible:!(!d||!s||m||!o||dt(t,a))}),r.a.createElement(tt,{essid:i,target:t,isVisible:!(!(d&&c&&i)||m||dt(t,a))}))},pt=(e,t,a,n,i)=>{const r=n-t,l=60+(i>0?32:16),o=60+i;return t!==n?`M ${t} ${e}\n          L ${t+l} ${e}\n          C ${t+l+.2*r} ${e},\n            ${n-o-.2*r} ${a},\n            ${n-o} ${a}\n          L ${n} ${a}`:`M ${t} ${e}\n          L ${t} ${e}\n          C ${t} ${e},\n            ${n} ${a},\n            ${n} ${a}\n          L ${n} ${a}`},Ot=Object(T.c)("g")`
  opacity: 0;
  pointer-events: none;
`;var ht=({transitionDuration:e,linkData:t,networkData:a,labelWidth:n,nextNodeListRef:l,prevNodeListRef:o,hoveredNode:c,...s})=>{const d=Object(i.useRef)(null),m=Object(i.useRef)(null),u=Object(i.useRef)(!0),{source:b,target:p}=t;return Object(i.useEffect)(()=>{u.current?u.current=!1:Object(te.a)(m.current).transition().duration(e).attr("d",()=>pt(b.x,b.y,p.x,p.y,n))},[n,b.x,b.y,p.x,p.y,e]),r.a.createElement(ne.a,Object.assign({},s,{timeout:{enter:e,exit:e},onExit:()=>{var t;const a=(null===(t=null==l?void 0:l.current)||void 0===t?void 0:t.find(e=>e.data.mac===b.data.mac))||b;Object(te.a)(d.current).transition().duration(e).style("opacity",0),Object(te.a)(m.current).transition().duration(e).attr("d",()=>pt(a.x,a.y,a.x,a.y,n))},onEnter:()=>{var t;const a=(null===(t=null==o?void 0:o.current)||void 0===t?void 0:t.find(e=>e.data.mac===b.data.mac))||b;Object(te.a)(d.current).transition().duration(e).style("opacity",1),Object(te.a)(m.current).attr("d",pt(a.x,a.y,a.x,a.y,n)).transition().duration(e).attr("d",()=>pt(b.x,b.y,p.x,p.y,n))}}),r.a.createElement(Ot,{innerRef:d},r.a.createElement(Be,{innerRef:m,type:a.type,radioBand:a.radioBand}),r.a.createElement(ut,{source:b,target:p,networkData:a,hoveredNode:c}),r.a.createElement(bt,{target:p,networkData:a,hoveredNode:c})))};const gt=Object(T.c)("div")`
  position: fixed;
  bottom: 36px;
  right: 32px;

  .fitToScreenButton {
    border-radius: 4px;

    &:hover {
      box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);
    }
  }

  Button {
    border: 1px solid ${({theme:e})=>e.motifPalette.neutral04};
    width: 36px;
    height: 36px;
    color: ${({theme:e})=>e.motifPalette.neutral08};
    background: ${({theme:e})=>e.motifPalette.neutral00};
    transition: box-shadow 0.2s linear;

    svg {
      margin: 0;
    }

    &:focus {
      color: ${({theme:e})=>e.motifPalette.neutral10};
    }

    &:hover {
      box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);
    }
  }

  .plus Button {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .customGroup {
    border-radius: 4px;
    margin-top: 16px;
    position: relative;

    & > div {
      display: flex;
    }
  }

  .minus Button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
  }
`;var Et=({onZoomInClick:e,onZoomOutClick:t,onResetZoomClick:a})=>r.a.createElement(gt,null,r.a.createElement(w.a,{variant:"tertiary",Icon:be.T,wrapClassName:"fitToScreenButton",onClick:a}),r.a.createElement("div",{className:"customGroup"},r.a.createElement(w.a,{variant:"tertiary",Icon:be.Ob,wrapClassName:"plus",onClick:e}),r.a.createElement(w.a,{variant:"tertiary",Icon:be.sb,wrapClassName:"minus",onClick:t})));const ft=(e,t)=>"dark"===e?t.motifPalette.uBlue09:t.motifPalette.uBlue01,vt=["isHovered","motif","disableInteraction","isSelected"],jt=Object(T.c)("rect",{shouldForwardProp:e=>vt.indexOf(e)<0})`
  pointer-events: ${({disableInteraction:e})=>e?"none":"auto"};
  cursor: pointer;
  fill: ${({theme:e,isHovered:t,motif:a,isSelected:n})=>n||t?ft(a,e):"transparent"};
  stroke: ${({theme:e,isSelected:t})=>t?e.motifPalette.uBlue06:"none"};
  stroke-width: 0.5;

  &:hover {
    fill: ${({theme:e,motif:t})=>ft(t,e)};
  }
`;var yt=({nodeData:e,labelWidth:t,transitionDuration:a,handleNodeClick:l,handleChildrenToggle:o,setHoveredNode:c,hoveredNode:s,isIoTMode:d,...m})=>{var u,b,p;const[O]=Object(i.useState)(Re(e,!0)),[h]=Object(i.useState)({opacity:0}),g=Object(i.useRef)(null),E=d&&!(null===(u=e.data)||void 0===u?void 0:u.allowedInVisualProgramming),f=Object(i.useRef)(!0),v=Object(i.useRef)(!0),{motif:j}=Object(de.a)(),y=Object(n.useSelector)(Object(N.selectIsIoTNodeSelected)(e.data.mac)),w=e.data.id===s,{x:S,y:x}=e,T=(e,t,a=1)=>{Object(te.a)(g.current).transition().duration(t).attr("transform",e).style("opacity",a).on("end",()=>{v.current=!1})};Object(i.useEffect)(()=>{f.current?f.current=!1:T(`translate(${x},${S})`,a,1)},[S,x,a]);const C=(null===(p=null===(b=null==e?void 0:e.data)||void 0===b?void 0:b.internalChildren)||void 0===p?void 0:p.length)>0;if("invisibleNodeType"===e.data.type)return null;const I=t>0?32:16;return r.a.createElement(ne.a,Object.assign({},m,{timeout:{enter:a,exit:a},onExit:()=>{((e,t)=>{const a=Re(e,!0);T(a,t,0)})(e,a)},onEnter:()=>{((e,t)=>{const a=Re(e);T(a,t,1)})(e,a)},unmountOnExit:!0,mountOnEnter:!0}),r.a.createElement("g",{id:e.data.id,ref:g,style:h,transform:O,onMouseEnter:()=>c(e.data.id),onMouseLeave:e=>{c(null)}},r.a.createElement(jt,{motif:j,onClick:()=>l(e),width:120+2*I,height:102,x:-60-I,y:-51,rx:6,isSelected:d&&y,disableInteraction:E,isHovered:w,onMouseOver:()=>c(e.data.id)}),C&&r.a.createElement("circle",{style:{cursor:"pointer"},cx:60+I,cy:0,r:10,onClick:t=>o(e.data.id,t)})))};const wt=Object(T.c)("div")`
  width: 100%;
  height: 100%;
  overflow: hidden;

  &:active {
    cursor: move;
  }

  /* d3-zoom-scale is used in safari to correctly scale transformed nodes
    inside foreignObject */
  .${"topology-svg-container"} {
    --d3-zoom-scale: 1;
  }
`,St=[.3,1],xt=[.3,2.5],Tt=(e,t,a,n,i=xt)=>{const r=(e=>{const t=e.length-1;return"invisibleNodeType"===e[0].data.type||"invisibleNodeType"===e[t].data.type})(a)?n:0,l=a.reduce((e,t)=>("invisibleNodeType"===t.data.type||(e.minX=Math.min(e.minX,t.x),e.maxX=Math.max(e.maxX,t.x),e.minY=Math.min(e.minY,t.y),e.maxY=Math.max(e.maxY,t.y)),e),{minX:0,maxX:0,minY:0,maxY:0}),o=l.maxX-l.minX+50+45,c=l.maxY-l.minY+120-r,s=Object(re.a)().range(i).domain(i).clamp(!0);let d=Math.min(t/o,e/c);d=s(.8*d);return{x:(e-(l.maxY+r)*d)/2,y:Math.max(0,t/2-(l.minX+(o-50)/2)*d),k:d}},Ct=e=>(Array.isArray(e)?e:[e]).map(e=>(e.id=e.mac,(null==e?void 0:e.children)&&e.children.length>0&&(e.children=Ct(e.children),e.internalChildren=e.children),e)),It=(e,t)=>Object(q.a)().scaleExtent([e.min,e.max]).on("zoom",t).filter(e=>!e.button&&"dblclick"!==e.type),Nt=e=>{const t=e.attr("stroke");e.attr("stroke","rgba(0,0,0,0)"===t?"rgba(255,255,255,0)":"rgba(0,0,0,0)"),Object(ee.a)("nav").style("stroke","rgba(0,0,0,0)"===t?"rgba(255,255,255,0)":"rgba(0,0,0,0)")},kt=(e,t)=>{e.style("--d3-zoom-scale",t.toString())},_t=(e,t,a)=>Math.min(Math.max(e,t),a),Lt=(e,t,a)=>{const n=""+a.current.k,i=""+t;e.current.transition("zoom-out").styleTween("--d3-zoom-scale",()=>Object(ae.a)(n,i)).call(()=>Nt(e.current))},Dt=e=>({transition:`all ${e}ms cubic-bezier(0.25, 0, 0.25, 1)`,opacity:0,position:"absolute",left:"-50px"}),Pt={entered:{opacity:1,left:0}};var Rt=e=>{const{data:t,containerSize:a,nodeSize:o,transform:c,scaleExtent:s,labelWidth:d}=e,m=Object(i.useRef)(!0),u=Object(i.useRef)(!1),b=Object(n.useSelector)(p.G),{showAllDevices:O,show2GClients:h,show5GClients:g,showWiredClients:E,online:f,offline:v,isolated:j,pending_adoption:y,managed_by_another_console:w}=b,x=(({showSSID:e,showWifiExperience:t,showRadioChannel:a,showWifiStandards:n,showWiredSpeed:i})=>e&&t&&a&&n&&i)(b),T=Object(i.useRef)(!1),C=Object(i.useRef)(c),I=Object(i.useRef)(),k=Object(n.useDispatch)(),_=Object(l.k)(),{site:L}=Object(l.m)(),{width:D,height:P}=a,{isSafari:R}=S.a,M=Object(i.useRef)(null),[$,F]=Object(i.useState)(()=>new Set),[A,G]=Object(i.useState)(!1),[z,V]=Object(i.useState)(null),B=J(),Y=Object(i.useRef)(t);Y.current=t,Object(i.useEffect)(()=>{O?(T.current=!0,F(new Set)):F(e=>{if(null==e?void 0:e.size)return e;const t=new Set;let a=0;return function e(n){var i,r;a>50||(a+=1,(null===(i=n.children)||void 0===i?void 0:i.length)&&("invisibleNodeMac"!==n.mac&&t.add(n.mac),null===(r=n.children)||void 0===r||r.forEach(e)))}(Y.current),T.current=!0,t})},[O]),Object(i.useEffect)(()=>{T.current=!1},[$.size]),Object(i.useEffect)(()=>{T.current||($.size?b.showAllDevices&&k(Object(p.M)(Object.assign({},b,{showAllDevices:!1}),!0)):b.showAllDevices||k(Object(p.M)(Object.assign({},b,{showAllDevices:!0}),!0)))},[k,b,$.size]);const H=Ct(t),U=Object(i.useRef)(null),X=Object(i.useRef)(null);Object(i.useEffect)(()=>{((e,t,a,n)=>{const{scaleExtent:i,transform:r}=e;t.current=Object(te.a)(".topology-svg-container");const l=Object(te.a)(".topology-g"),o=It(i,({transform:e})=>{a&&(Nt(t.current),kt(t.current,e.k)),n.current=e,l.attr("transform",e.toString())});t.current.call(o).call(o.transform,q.b.translate(r.x,r.y).scale(r.k))})(e,I,R,C)},[]);const Z=t=>{const{scaleExtent:a}=e,n=Object(te.a)(".topology-g"),i=Object(te.a)(".topology-svg-container"),r=It(a,({transform:e})=>{n.attr("transform",e.toString()),C.current=e});if(i.transition().call(r.scaleBy,t).on("end",()=>R&&Nt(I.current)),R){const e=_t(C.current.k*t,a.min,a.max);Lt(I,e,C)}},K=({source:t,target:a})=>{const{edgeData:n}=e;return n.find(e=>e.uplinkMac===t.data.mac&&e.downlinkMac===a.data.mac)},ee=({mac:t})=>{var a;const{edgeData:n}=e;return null===(a=n.find(e=>e.downlinkMac===t))||void 0===a?void 0:a.experienceScore},ae=(t,a)=>{const{transitionDuration:n}=e;if(a.persist(),!u.current){if($.has(t)){const e=new Set($);e.delete(t),u.current=!0,F(e)}else{const e=new Set($);e.add(t),u.current=!0,F(e)}setTimeout(()=>{u.current=!1,R&&Nt(I.current)},n+10)}},{nodes:re,links:se}=(()=>{const{separation:t,nodeSize:a}=e,n=Object(Q.a)().nodeSize([a.y,a.x]).separation((e,a)=>{var n,i;return(null===(n=null==e?void 0:e.parent)||void 0===n?void 0:n.id)===(null===(i=null==a?void 0:a.parent)||void 0===i?void 0:i.id)?t.siblings:t.nonSiblings})(Object(W.b)(H[0],e=>e.id&&$.has(e.id)?null:e.internalChildren)),i=n.descendants();m.current||(X.current=[...U.current]),U.current=[...i];return{nodes:i,links:n.links().filter(e=>"invisibleNodeMac"!==e.source.data.mac)}})(),{transitionDuration:de}=e,me=()=>{const t=Tt(D,P,re,o.x),{scaleExtent:a}=e,n=Object(te.a)(".topology-g"),i=Object(te.a)(".topology-svg-container"),r=It(a,({transform:e})=>{n.attr("transform",e.toString()),C.current=e});i.transition().call(r.transform,q.b.translate(t.x,t.y).scale(t.k)).on("end",()=>R&&Nt(I.current)),R&&Lt(I,t.k,C)};Object(i.useEffect)(()=>{m.current||me()},[O,h,g,E,f,v,j,y,w,$.size,x]),Object(i.useEffect)(()=>{R&&Nt(I.current)}),function(e,t,a,n){Object(i.useEffect)(()=>{if(S.a.isSafari){const i=Object(te.a)(".topology-g"),r=Object(te.a)(".topology-svg-container"),l=It(a,({transform:a})=>{i.attr("transform",a.toString()),kt(e.current,a.k),Nt(e.current),t.current=a}),o=e=>{e.preventDefault();const i=e.scale-n.current;if(n.current&&Math.abs(i)>.085){const o=1+i,c=_t(t.current.k*o,a.min,a.max);r.call(l.scaleTo,c),n.current=e.scale}},c=e=>{e.preventDefault(),n.current=e.scale},s=e=>{e.preventDefault(),n.current=null};return document.addEventListener("gesturestart",c),document.addEventListener("gesturechange",o),document.addEventListener("gestureend",s),()=>{document.removeEventListener("gesturestart",c),document.removeEventListener("gesturechange",o),document.removeEventListener("gestureend",s)}}return()=>{}},[])}(I,C,s,M);const ue=Object(i.useCallback)(({data:e})=>{const t=(e=>{const{mac:t,internalChildren:a,model:n}=e;if("UBB"!==n&&"UBBXG"!==n)return t;if(a){const e=a.find(e=>"UBB"===e.model);if(e)return e.mac}return t})(e);B?k(Object(N.toggleClientInIoTList)({mac:t})):(_.push(Object(l.i)("/:site/topology/:section?/:id?/:panel?/:subPanel?",{id:t,section:"properties",site:L,panel:ce.a.OVERVIEW})),k(Object(oe.g)({type:"DEVICE"===e.type?le.c.DEVICE:"CLIENT"===e.type?e.unifiDevice?le.c.UNIFI_DEVICE_CLIENT:le.c.CLIENT:void 0,mac:t})))},[k,_,B,L]);return Object(i.useEffect)(()=>{m.current&&(m.current=!1)}),r.a.createElement(r.a.Fragment,null,r.a.createElement(ne.a,{in:!0,appear:!0,timeout:0,addEndListener:()=>G(!0)},e=>r.a.createElement(wt,{style:{...Dt(de),...Pt[e]}},r.a.createElement("svg",{className:"topology-svg-container",width:D+"px",height:P+"px",strokeWidth:0,style:{position:"absolute"}},r.a.createElement("rect",{x:0,y:0,width:"100%",height:"100%",fill:"transparent"}),r.a.createElement("g",{className:"topology-g",strokeWidth:0},r.a.createElement(ie.a,{appear:!0,exit:!0,component:null},re.reverse().map(e=>r.a.createElement(yt,{isIoTMode:B,key:e.data.id+"-background",labelWidth:d,transitionDuration:A?de:0,handleNodeClick:ue,nodeData:e,handleChildrenToggle:ae,hoveredNode:z,setHoveredNode:V}))),r.a.createElement(ie.a,{appear:!0,exit:!0,component:null},se.map(e=>r.a.createElement(ht,{key:`${e.source.data.id}-${e.target.data.id}`,nextNodeListRef:U,prevNodeListRef:X,linkData:e,networkData:K(e),transitionDuration:A?de:0,labelWidth:d,hoveredNode:z}))),r.a.createElement(ie.a,{appear:!0,exit:!0,component:null},re.map(e=>r.a.createElement(ze,{key:e.data.id,isIoTMode:B,transitionDuration:A?de:0,experienceScore:ee(e.data),nodeData:e,labelWidth:d,handleChildrenToggle:ae,handleNodeClick:ue,collapsedNodes:$,hoveredNode:z,setHoveredNode:V}))))))),r.a.createElement(Et,{onResetZoomClick:()=>me(),onZoomOutClick:()=>Z(.75),onZoomInClick:()=>Z(1.25)}))},Mt=a(2600),$t=a(1671),Ft=a(2769);const At=Object(T.c)(v.a)`
  max-width: 200px;
`,Wt=Object(T.c)(be.B)`
  margin-right: 8px;
`,Gt=Object(T.c)("div")`
  padding: 4px 0;
  margin-bottom: 8px;
`,zt=Object(T.c)("div")`
  margin-top: 24px;
  border-bottom: 1px solid #e5e7ec;
`,Vt=()=>r.a.createElement(o.f,{alignItems:"center"},r.a.createElement(Wt,{size:"large"}),r.a.createElement(At,{weight:"bold",size:"body"},r.a.createElement(x.b,{id:"TOPOLOGY_IOT_MANAGEMENT"}))),Bt=()=>{const e=Object(n.useSelector)(N.selectIsFirstIoTNetwork),t=Object(n.useSelector)(N.selectIsIoTNetworkEnabled),a=Object(n.useSelector)(N.selectInternetAccess),i=Object(n.useSelector)(N.selectIntraNetworkAccess),l=Object(n.useDispatch)();return r.a.createElement("section",null,!e&&r.a.createElement(Gt,null,r.a.createElement(Mt.a,{checked:t,id:"networkEnabled",onChange:()=>{l(Object(N.setIoTFormProp)({enabled:!t}))}},r.a.createElement(v.a,{size:"body",color:"primary"},r.a.createElement(x.b,{id:"TOPOLOGY_IOT_ENABLE_NETWORK"})))),r.a.createElement(Gt,null,r.a.createElement(Mt.a,{checked:a,id:"internet_access_enabled",onChange:()=>{l(Object(N.setIoTFormProp)({internet_access_enabled:!a}))}},r.a.createElement(v.a,{size:"body",color:"primary"},r.a.createElement(x.b,{id:"TOPOLOGY_IOT_INTERNET_ACCESS"})))),r.a.createElement(Gt,null,r.a.createElement(Mt.a,{checked:i,id:"intra_network_access_enabled",onChange:()=>{const e=i?{intra_network_access_enabled:!1,intra_networks_ids:[]}:{intra_network_access_enabled:!0};l(Object(N.setIoTFormProp)(e))}},r.a.createElement(v.a,{size:"body",color:"primary"},r.a.createElement(x.b,{id:"TOPOLOGY_IOT_INTRA_NET_ACCESS"})))))},Yt=Object(T.c)("div")`
  margin-top: 30px;
`,Ht=()=>{const e=Object(n.useSelector)(h.selectLanEnrichedConfiguration),t=Object(n.useSelector)(N.selectIntraNetworkAccess),a=Object(n.useSelector)(N.selectIntraNetworkIds),i=Object(n.useDispatch)(),l=e.filter(e=>"IoT"!==e.configuration.name).map(({configuration:e})=>{const t=a.indexOf(e._id);return{id:e._id,children:e.name,checked:t>-1,onChange:()=>((e,t)=>{if(t>-1){const e=[...a];e.splice(t,1),i(Object(N.setIoTFormProp)({intra_networks_ids:e}))}else i(Object(N.setIoTFormProp)({intra_networks_ids:[...a,e]}))})(e._id,t)}});return t&&r.a.createElement(Yt,null,r.a.createElement("div",null,r.a.createElement(v.a,{size:"body",weight:"bold",color:"primary"},r.a.createElement(x.b,{id:"TOPOLOGY_IOT_NETWORKS_TITLE"}))),r.a.createElement("div",{style:{marginBottom:10}},r.a.createElement(v.a,{color:"tertiary"},r.a.createElement(x.b,{id:"TOPOLOGY_IOT_NETWORKS_DESC"}))),r.a.createElement(y.a,{variant:"boxed",direction:"row",full:!1,items:l}))},Ut=Object(T.c)("div")`
  flex: 0 0 24px;
  margin-left: auto;
`,Xt=Object(T.c)(w.a)`
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin-left: auto;
  padding: 0;
`,Zt=Object(T.c)(o.f)`
  border-bottom: 1px solid ${({theme:e})=>e.motifPalette.neutral03};
`,Kt=Object(T.c)(o.f)`
  margin: 4px 12px 4px 4px;
  height: 25px;
  flex: 0 0 25px;

  img {
    display: block;
    margin: 0 auto;
  }
`,Jt=Object(T.c)(v.a)`
  flex: 1 0 auto;

  span {
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    width: 100%;
    overflow: hidden;
  }
`,Qt=r.a.memo(({mac:e})=>{const t=Object(i.useMemo)(()=>Object(m.selectAnyClientTypeData)(e),[e]),a=Object(n.useSelector)(t),l=Object(n.useDispatch)();return r.a.createElement(Zt,{key:e,alignItems:"center"},r.a.createElement(Kt,{alignItems:"center",justifyContent:"center"},r.a.createElement(o.c,{size:"standard",client:a})),r.a.createElement(Jt,null,r.a.createElement(v.a,{size:"body",color:"secondary"},Object(m.getClientName)(a))),r.a.createElement(Ut,null,r.a.createElement(Xt,{Icon:r.a.createElement(be.y,{width:10,height:10}),onClick:()=>l(Object(N.toggleClientInIoTList)({mac:e}))})))}),qt=Object(T.c)("section")`
  margin-top: 24px;
`,ea=Object(T.c)(v.a)`
  font-size: 14px;
  line-height: 32px;
`,ta=Object(T.c)(o.f)`
  border-bottom: 1px solid ${({theme:e})=>e.motifPalette.neutral03};
`,aa=()=>{const e=Object(n.useSelector)(N.selectIoTClientMacList),t=Object(n.useDispatch)();return e.length>0?r.a.createElement(qt,null,r.a.createElement(ta,{alignItems:"center",justifyContent:"space-between"},r.a.createElement(ea,{heading:"primary"},r.a.createElement(x.b,{id:"TOPOLOGY_IOT_SELECTED_DEVICES_COUNT",values:{count:e.length}})),r.a.createElement(w.a,{variant:"link",onClick:()=>t(Object(N.clearClientMacsInIoTList)())},r.a.createElement(x.b,{id:"TOPOLOGY_IOT_CLEAR_ALL",values:{count:e.length}}))),r.a.createElement("div",null,e.map(e=>r.a.createElement(Qt,{key:e,mac:e})))):r.a.createElement(qt,null,r.a.createElement(v.a,null,r.a.createElement(x.b,{id:"TOPOLOGY_IOT_SELECT_DEVICES"})))},na=Object(T.c)(o.f)`
  margin-top: auto;
  padding-top: 24px;
`,ia=Object(T.c)(w.a)`
  margin-right: 8px;
`,ra=({onCancel:e})=>{const t=Object(n.useSelector)(N.selectIsFirstIoTNetwork),a=Object(n.useSelector)(N.selectIoTForm),i=Object(l.k)(),o=Object(l.m)(),c=fa[0].path,s=Object(n.useDispatch)(),d=Object(n.useSelector)(N.selectIsIoTFormSubmitting);return r.a.createElement(na,{justifyContent:"flex-end"},r.a.createElement(ia,{variant:"default",onClick:e},r.a.createElement(x.b,{id:"COMMON_ACTION_CANCEL"})),r.a.createElement(w.a,{variant:"primary",onClick:async()=>{i.push(Object(l.i)(c,o)),await s(Object(N.setIoTFormProp)({isSubmitting:!0})),t?await s(Object(N.createIoTNetwork)(a)):await s(Object(N.updateIoTNetwork)(a)),await s(Object(N.setIoTFormProp)({isSubmitting:!1}))},disabled:d},r.a.createElement(x.b,{id:t?"TOPOLOGY_CREATE_IOT_NETWORK":"TOPOLOGY_IOT_UPDATE_NETWORK"})))},la=({onCancel:e})=>{const t=Object(n.useSelector)(N.selectIsIoTNetworkLoading),a=Object(n.useSelector)(N.iotNetworkDataSelector),l=Object(n.useDispatch)();return Object(i.useEffect)(()=>{l(Object(N.copyToIoTForm)(a))},[l,a]),t&&!a?r.a.createElement($t.a,{isLoading:!0}):r.a.createElement(o.f,{padding:"24px 32px 24px",height:"100%",flexDirection:"column",overflow:"auto"},r.a.createElement(Bt,null),r.a.createElement(Ht,null),r.a.createElement(zt,null),r.a.createElement(aa,null),r.a.createElement(ra,{onCancel:e}))};var oa=()=>{const e=Object(l.k)(),t=Object(l.m)(),a=fa[0].path,i=Object(n.useSelector)(N.iotNetworkDataSelector),o=Object(n.useDispatch)(),c=()=>{e.push(Object(l.i)(a,t)),o(Object(N.copyToIoTForm)(i))};return r.a.createElement(Ft.a,{in:!0,onClose:c,header:r.a.createElement(Vt,null),style:{border:"none"}},r.a.createElement(la,{onCancel:()=>c()}))};const ca={siblings:1.5,nonSiblings:2},sa=Object(T.c)("div")`
  width: 100%;
  height: 100%;
  position: relative;

  @media ${C.a.VIEWPORT_S_UP} {
    margin-top: ${S.a.isSafari?"50px":0};
  }
`,da=e=>{const t=e>0;return 60+(t?32:16)+(t?100:75)+e+(t?16:0)+60},ma=e=>101+400/Math.max(Math.min(e,5),1),ua=e=>{const{treeData:t,topologyData:a,topologyViewSettings:n,width:l,height:o,labelWidth:c}=e,s=(e=>{const{showSSID:t,showWifiStandards:a,showWiredSpeed:n,showWiredPorts:i}=e;return t||a||n||i})(n),d=s?c:0,[m,u]=Object(i.useState)(()=>{const e=Object(W.b)(t),a="invisibleNodeType"===e.data.type?e.height-1:e.height,n=Math.max(ma(a),da(d));var i,r;const c=(i={x:n,y:75},r=ca,Object(Q.a)().nodeSize([i.y,i.x]).separation((e,t)=>{var a,n;return(null===(a=null==e?void 0:e.parent)||void 0===a?void 0:a.id)===(null===(n=null==t?void 0:t.parent)||void 0===n?void 0:n.id)?r.siblings:r.nonSiblings}))(e).descendants();return{nodeWidth:n,nodeHeight:75,rootHeight:a,transform:Tt(l,o,c,n,St)}}),{nodeWidth:b,nodeHeight:p,transform:O}=m;return Object(i.useEffect)(()=>{const e={...m},a=Object(W.b)(t),n="invisibleNodeType"===a.data.type?a.height-1:a.height;e.nodeWidth=Math.max(ma(n),da(d)),u(e)},[s,d]),r.a.createElement(Rt,{scaleExtent:{min:.3,max:2.5},data:t,labelWidth:d,edgeData:a.edges,separation:ca,containerSize:{width:l,height:o},transitionDuration:400,transform:O,nodeSize:{x:b,y:p}})},ba=e=>{var t,a;const{topologyData:l,topologyViewSettings:o}=e,{show2GClients:c,show5GClients:s,showWiredClients:d,online:m=!0,offline:u=!0,isolated:b=!0,pending_adoption:O=!0,managed_by_another_console:h=!0}=o,g=Object(n.useSelector)(B.selectIsUnifiDevicesPageSupportedController),E=Object(i.useMemo)(()=>(({edges:e,vertices:t})=>{const a=[],n=t.map(t=>({...t,parentMac:U(t.mac,e)})).filter(e=>void 0!==e),i=n.reduce((e,t)=>(e[t.mac]=t,e),{});return n.forEach(e=>{const t=i[e.parentMac];t?(t.children||(t.children=[])).push(e):a.push(e)}),a.length>1||0===a.length?X(a):a[0]})(K(l,c,s,g,d,m,u,b,O,h)),[l,c,s,g,d,m,u,b,O,h]),f=Object(n.useDispatch)(),v=Object(i.useCallback)(()=>{f(Object(p.M)(p.c.topologyViewSettings))},[f]);return 0===(null===(t=null==l?void 0:l.vertices)||void 0===t?void 0:t.length)?r.a.createElement(z.a,{icon:"noElements",maxWidth:386,detailPadding:35,title:r.a.createElement(x.b,{id:"TOPOLOGY_NO_DEVICES_TITLE"}),details:r.a.createElement(x.b,{id:"TOPOLOGY_NO_DEVICES_DESCRIPTION"}),button:null}):"invisibleNodeName"===E.id&&0===(null===(a=E.children)||void 0===a?void 0:a.length)?r.a.createElement(z.a,{icon:"noElements",maxWidth:386,detailPadding:35,title:r.a.createElement(x.b,{id:"COMMON_NO_MATCH"}),details:r.a.createElement(x.b,{id:"TOPOLOGY_NO_MATCH_IN_FILTERS_DESCRIPTION"}),button:r.a.createElement(w.a,{variant:"primary"},r.a.createElement(x.b,{id:"COMMON_BUTTON_RESET_DISPLAY_OPTION"})),onClick:v}):r.a.createElement(ua,Object.assign({treeData:E},e))},pa=Object(T.c)("div")`
  // Important to fixing caliper sizing. If nodes are only 1 level deep (no children) then the width
  // would be 0px as there are no labels. This fixes this issue without introducing any other ones.
  min-width: 1px;
  position: fixed;
  display: inline-flex;
  flex-direction: column;
  top: -10000px;
  left: -10000px;
  visibility: hidden;
  user-select: none;
  z-index: -1000;
`,Oa=r.a.forwardRef((e,t)=>{const{topologyData:a}=e;return r.a.createElement(pa,{innerRef:t},a.edges.map(e=>r.a.createElement(i.Fragment,{key:`${e.uplinkMac}-${e.downlinkMac}`},(e=>{const{type:t,rateMbps:a}=e;return t===H.a.WIRELESS?r.a.createElement(Qe,{networkData:e,measuring:!0}):t===H.a.WIRED&&a?r.a.createElement(lt,{rateMbps:a,measuring:!0}):null})(e),(e=>{const{uplinkPortNumber:t,downlinkPortNumber:a,type:n,essid:i}=e;return n===H.a.WIRELESS&&i?r.a.createElement(et,{essid:i,measuring:!0}):t&&a?r.a.createElement(r.a.Fragment,null,r.a.createElement(it,{uplinkPortNumber:t,downlinkPortNumber:a,measuring:!0})):t?r.a.createElement(at,{uplinkPortNumber:t,measuring:!0}):a?r.a.createElement(nt,{downlinkPortNumber:a,measuring:!0}):null})(e))))}),ha=()=>r.a.createElement(G.a,null,r.a.createElement("style",null,'\n        #root > header {\n          position: fixed;\n          top: 0;\n        }\n        #root > main {\n          margin-top: 50px;\n        }\n        #root #app-main nav[class^="nav"] {\n          position: fixed;\n          top: 50px;\n          left: 0;\n          z-index: 12;\n        }\n        #root #app-main > div > .main-panel {\n          margin-left: 50px;\n        }\n    ')),ga={updateTopologyViewSettings:p.M};var Ea=Object(n.connect)(e=>({topologyData:Object(V.b)(e),topologyViewSettings:Object(p.G)(e)}),ga)(e=>{const{ref:t,width:a,height:n}=Object(A.a)(),{ref:i,width:o}=Object(A.a)();return r.a.createElement(r.a.Fragment,null,S.a.isSafari&&r.a.createElement(ha,null),r.a.createElement(Oa,{topologyData:e.topologyData,ref:i}),r.a.createElement(sa,{innerRef:t},t&&a&&n&&o&&r.a.createElement(ba,Object.assign({width:a,height:n,labelWidth:o},e))),r.a.createElement(l.g,null,r.a.createElement(b.a,{path:"/:site/topology/iot",render:()=>r.a.createElement(oa,null)}),r.a.createElement(b.a,{path:"/:site/topology/properties/:id?/:panel?/:subPanel?/:subPanelId?",render:()=>r.a.createElement(Y.a,{panelType:void 0})})))}),fa=[{id:"topology",label:r.a.createElement(x.b,{id:"TOPOLOGY_SECTION_TOPOLOGY"}),path:"/:site/topology",component:r.a.createElement(Ea,null)}],va=a(1158);const ja=()=>{const e=Object(n.useDispatch)();return Object(i.useEffect)(()=>()=>{e(Object(p.g)()),e(Object(va.d)())},[e]),r.a.createElement(o.i,null,r.a.createElement(F,{routes:fa}),r.a.createElement(l.g,null,Object.values(fa).map(({id:e,path:t,component:a})=>r.a.createElement(b.a,{key:e,path:t,render:()=>a}))))};t.default=e=>Object(c.g)([Object(s.a)(),...e.location.pathname.includes("/properties")?[Object(g.fetchDevices)(void 0,{crudCacheStrategy:{type:d.a.CACHE}})]:[],Object(m.fetchClients)(void 0,{crudCacheStrategy:{type:d.a.CACHE}}),Object(O.d)(void 0,{crudCacheStrategy:{type:d.a.CACHE}}),Object(h.fetchLanEnrichedConfiguration)(void 0,{crudCacheStrategy:{type:d.a.CACHE}}),Object(u.c)("topology"),Object(u.c)("devices"),Object(u.c)("unifiDevices"),Object(u.c)("clients"),Object(va.c)()],r.a.createElement(ja,Object.assign({},e)),{trackingName:"topology"})}}]);