https://basler.ai/static/js/347.1178a804.chunk.js

1"use strict";(self.webpackChunkfrontend_service=self.webpackChunkfrontend_service||[]).push([[347],{9347:(e,t,s)=>{s.r(t),s.d(t,{default:()=>_});var a=s(47313),n=s(936),i=s(97890),l=s(2786),o=s(58597),d=s(5286),r=s(16031),c=s.n(r);const m=l.ZP.div`
2  width: 400px;
3  min-width: 400px;
4  border-left: 2px solid ${e=>{let{theme:t}=e;return t.color.background.gray_2}};
5  margin-left: ${e=>{let{theme:t}=e;return t.spacing.m}};
6  .ant-tabs-content {
7    overflow: auto;
8  }
9  [role='tablist'] {
10    background-color: transparent;
11    padding: 0 0 0 8px;
12    ::before {
13      left: ${e=>{let{theme:t}=e;return t.spacing.xxs}};
14      right: ${e=>{let{theme:t}=e;return t.spacing.xxs}};
15    }
16  }
17  [role='tabpanel'] {
18    padding: 0 ${e=>{let{theme:t}=e;return t.spacing.s}};
19  }
20  h5 {
21    color: ${e=>{let{theme:t}=e;return t.color.text.secondary}} !important;
22  }
23`,u=l.ZP.div`
24  display: grid;
25  grid-template-columns: max-content max-content;
26  grid-template-rows: repeat(12, max-content);
27  gap: ${e=>{let{theme:t}=e;return t.spacing.xxs}};
28  align-items: center;
29  span:nth-child(odd) {
30    justify-self: end;
31    align-self: flex-start;
32  }
33  span:nth-child(even) {
34    inline-size: 270px;
35    word-break: break-all;
36  }
37`,g=(l.ZP.div`
38  font-size: 16px;
39  color: ${e=>{let{theme:t}=e;return t.color.misc.primary}};
40`,m);var v=s(1731),p=s(21711),x=s(39940),h=s(46417);const f=e=>{let{name:t,value:s}=e;return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsxs)(v.xv,{variant:"secondary",footnote:!0,children:[t,":"]}),(0,h.jsx)(v.xv,{strong:!0,children:s})]})},b=()=>{var e;const t=(0,n.Z)(),s=(0,l.Fg)(),{datasetId:a="",imageId:o=""}=(0,i.UO)(),r=(0,p.QZN)(a,o);return(0,h.jsxs)(v.kC,{direction:"column",gap:s.spacing.m,children:[(0,h.jsx)(v.Dx,{level:5,children:t.formatMessage(d.QS.imageMetaData)}),(0,h.jsxs)(u,{"data-testid":"image-meta-data",children:[(0,h.jsx)(f,{name:t.formatMessage(d.QS.name),value:null===r||void 0===r?void 0:r.name}),(0,h.jsx)(f,{name:t.formatMessage(d.QS.resolution),value:null!==r&&void 0!==r&&r.width&&null!==r&&void 0!==r&&r.height?`${r.width}x${r.height}`:""}),(0,h.jsx)(f,{name:t.formatMessage(d.QS.format),value:null===r||void 0===r||null===(e=r.format)||void 0===e?void 0:e.toUpperCase()}),(0,h.jsx)(f,{name:t.formatMessage(d.QS.size),value:(0,x.sS)(null===r||void 0===r?void 0:r.sizeInBytes)}),(0,h.jsx)(f,{name:t.formatMessage(d.QS.colorSpace),value:null===r||void 0===r?void 0:r.colorSpace}),(0,h.jsx)(f,{name:t.formatMessage(d.QS.bitDepth),value:null!==r&&void 0!==r&&r.bitDepth?`${(null===r||void 0===r?void 0:r.bitDepth)||""} bpp`:""}),(0,h.jsx)(f,{name:t.formatMessage(d.QS.cameraModel),value:null===r||void 0===r?void 0:r.cameraModel}),(0,h.jsx)(f,{name:t.formatMessage(d.QS.group),value:c().upperFirst(c().lowerCase(null===r||void 0===r?void 0:r.dataType))}),(0,h.jsx)(f,{name:t.formatMessage(d.QS.createdOn),value:(0,x.m2)(null===r||void 0===r?void 0:r.creationTimestamp)}),(0,h.jsx)(f,{name:t.formatMessage(d.QS.uploadedBy),value:null===r||void 0===r?void 0:r.uploader}),(0,h.jsx)(f,{name:t.formatMessage(d.QS.uploadedOn),value:(0,x.m2)(null===r||void 0===r?void 0:r.uploadTimestamp)}),(0,h.jsx)(f,{name:t.formatMessage(d.QS.source),value:t.formatMessage(d.QS.originalFile)})]})]})};var j=s(40765),S=s(87785),C=s(65551),y=s(37623),k=s(11493);const I=l.ZP.div`
41  display: flex;
42  justify-content: space-between;
43  margin: 0 0 0 30px;
44  border-radius: ${e=>{let{theme:t}=e;return t.borderRadius}};
45  padding: 0 2px 0 ${e=>{let{theme:t}=e;return t.spacing.xxs}};
46  width: 91%;
47  cursor: pointer;
48  ${e=>{let{selected:t}=e;return t&&l.iv`
49      background: ${e=>{let{theme:t}=e;return t.color.background.gray_1}};
50    `}}
51  ${e=>{let{hiddenElement:t}=e;return t&&l.iv`
52      opacity: 0.5;
53    `}}
54`,$=l.ZP.div`
55  display: flex;
56  justify-content: space-between;
57  align-items: center;
58  margin: ${e=>{let{theme:t}=e;return`0 0 ${t.spacing.xxs} 0`}};
59  border-radius: ${e=>{let{theme:t}=e;return t.borderRadius}};
60  ${e=>{let{hiddenElement:t}=e;return t&&l.iv`
61      opacity: 0.5;
62    `}}
63  ${e=>{let{selected:t}=e;return t&&l.iv`
64      background: ${e=>{let{theme:t}=e;return t.color.background.gray_1}};
65      span {
66        font-weight: 600;
67      }
68    `}}
69  ${e=>{let{onClick:t}=e;return!!t&&l.iv`
70      cursor: pointer;
71    `}}
72`,E=l.ZP.div`
73  display: flex;
74  align-items: center;
75  gap: ${e=>{let{theme:t}=e;return t.spacing.xxs}};
76  ${e=>{let{hiddenElement:t}=e;return t&&l.iv`
77      opacity: 0.5;
78    `}}
79  ${e=>{let{onClick:t}=e;return!!t&&l.iv`
80      cursor: pointer;
81    `}}
82`,N=e=>{let{name:t,color:s,hidden:a,selected:n,onClick:i,onVisibilityChange:l}=e;return(0,h.jsxs)($,{hiddenElement:a,selected:n,onClick:a?void 0:i,"data-testid":"image-class-row",children:[(0,h.jsxs)(v.kC,{gap:"13px",alignItems:"center",children:[(0,h.jsx)(v.zH,{value:s}),(0,h.jsx)(v.xv,{mark:!0,children:t})]}),(0,h.jsx)(v.zx,{type:"text",size:"small",icon:(0,h.jsx)(v.JO,{name:a?"eye-visible":"eye-invisible"}),onClick:l})]})},M=e=>{let{name:t,color:s,hidden:a,onClick:n}=e;return(0,h.jsxs)(E,{hiddenElement:a,onClick:a?void 0:n,"data-testid":"background-row",children:[(0,h.jsx)(v.zH,{value:s,size:"small",hiddenIcon:!0}),(0,h.jsx)(v.xv,{variant:"secondary",children:t})]})},T=e=>{let{index:t,type:s,selected:a,hidden:n,onClick:i,onVisibilityChange:l}=e;return(0,h.jsxs)(I,{selected:a,hiddenElement:n,onClick:n?void 0:i,"data-testid":"image-annotation-row",children:[(0,h.jsxs)(v.kC,{gap:"19px",alignItems:"center",children:[(0,h.jsx)(v.JO,{name:s===p.NUE.BBOX?"border-outer":"node-index"}),(0,h.jsx)(v.xv,{strong:a,children:(0,x.Bu)(c().toString(t),3)})]}),(0,h.jsx)(v.zx,{type:"text",size:"small",icon:(0,h.jsx)(v.JO,{name:n?"eye-visible":"eye-invisible"}),onClick:l})]})},A=(e,t)=>

82{var s;return e[c().toString(t.datasetClassId)]={className:t.datasetClassName,classColor:t.datasetClassColor,masks:null!==(s=e[t.datasetClassId])&&void 0!==s&&s.masks?[...e[t.datasetClassId].masks,t.id]:[t.id]},e},O=e=>{let{selectedLabel:t,onSelectLabel:s,hiddenElements:o,setHiddenElements:r}=e;const m=(0,n.Z)(),u=(0,l.Fg)(),{id:g="",datasetId:x="",versionId:f="",imageId:b=""}=(0,i.UO)(),{changeFilters:I,hiddenClasses:$}=(0,a.useContext)(C.Nm),E=(0,p.XzO)(g),O=(null===E||void 0===E?void 0:E.type)===p.cdz.OBJECT_DETECTION,Q=(null===E||void 0===E?void 0:E.type)===p.cdz.CLASSIFICATION,w=(null===E||void 0===E?void 0:E.type)===p.cdz.SEMANTIC_SEGMENTATION,z=(null===E||void 0===E?void 0:E.type)===p.cdz.INSTANCE_SEGMENTATION||w,{excludedClass:L}=(0,k.Um)(w?g:"",{datasetId:c().toNumber(x),datasetVersionId:c().toNumber(f)}),{datasetClasses:_,excludedDatasetClasses:F,isFetched:D}=(0,k.jc)(g,x,null===L||void 0===L?void 0:L.id,void 0,{includeDraft:!0}),{labels:B,isError:Z,isFetched:P,refetch:U}=(0,p.oFz)(g,x,f,b),H=(0,a.useRef)(null),R=(0,a.useRef)(null),V=[z?"segmentation":c().lowerCase(null===E||void 0===E?void 0:E.type).replaceAll(" ","-")],G=(0,a.useRef)(V),J=null===B||void 0===B?void 0:B.find((e=>e.id===c().toNumber(t))),K=!(null===F||void 0===F||!F.find((e=>e.id===(null===J||void 0===J?void 0:J.datasetClassId)))),X=(0,a.useRef)(!1),{Panel:Y}=v.Collapse;(0,a.useEffect)((()=>{if(t){var e,s,a,n;if(O&&(null===(e=G.current)||void 0===e||!e.includes("object-detection")))null===(a=H.current)||void 0===a||a.click();if(z&&(null===(s=G.current)||void 0===s||!s.includes("segmentation")))null===(n=R.current)||void 0===n||n.click()}}),[t]);const q=null===_||void 0===_?void 0:_.filter((e=>{var t;return null===(t=e.version)||void 0===t?void 0:t.find((e=>c().toString(e.id)===f))})),W=null===q||void 0===q?void 0:q.map((e=>({value:e.id,label:e.name})));(0,a.useLayoutEffect)((()=>{if(D&&P)if(X.current||!w)r({annotations:(null===B||void 0===B?void 0:B.filter((e=>$.includes(c().toString(e.datasetClassId)))).map((e=>c().toString(e.id))))||[],results:[]});else{X.current=!0;const e=(null===F||void 0===F?void 0:F.map((e=>c().toString(e.id))))||[];I({type:y.Yh.HIDE_CLASS,ids:[...e,...e.map((e=>`${e}_annotation`))]});const t=(null===B||void 0===B?void 0:B.filter((t=>e.includes(c().toString(t.datasetClassId)))).map((e=>e.id.toString())))||[];r({annotations:[...o.annotations,...t],results:[]})}}),[D,P,b]);const ee=null===B||void 0===B?void 0:B.find((e=>e.labelType===p.NUE.TAG)),te=null===B||void 0===B?void 0:B.filter((e=>e.labelType===p.NUE.BBOX)).reduce(((e,t)=>{var s;return e[c().toString(t.datasetClassId)]={className:t.datasetClassName,classColor:t.datasetClassColor,bboxes:null!==(s=e[t.datasetClassId])&&void 0!==s&&s.bboxes?[...e[t.datasetClassId].bboxes,t.id]:[t.id]},e}),{}),se=null===B||void 0===B?void 0:B.filter((e=>e.labelType===p.NUE.MASK&&(!w||!(null!==F&&void 0!==F&&F.find((t=>t.id===e.datasetClassId)))))).reduce(A,{}),ae=w?null===B||void 0===B?void 0:B.filter((e=>e.labelType===p.NUE.MASK&&(null===F||void 0===F?void 0:F.find((t=>t.id===e.datasetClassId))))).reduce(A,{}):void 0,ne=e=>{t&&e.includes(t)&&s(void 0)},ie=e=>{const t=o.annotations.includes(e),s={...o,annotations:t?o.annotations.filter((t=>t!==e)):[...o.annotations,e]};r(s),ne([e])},le=(e,t)=>{e.stopPropagation();const s=null===$||void 0===$?void 0:$.includes(t[0]);if(I({type:s?y.Yh.SHOW_CLASS:y.Yh.HIDE_CLASS,ids:[...t,...t.map((e=>`${e}_annotation`))]}),s)r({annotations:o.annotations.filter((e=>!(null!==B&&void 0!==B&&B.find((s=>c().toString(s.id)===e&&t.includes(c().toString(s.datasetClassId))))))),results:[]});else{const e=(null===B||void 0===B?void 0:B.filter((e=>t.includes(c().toString(e.datasetClassId)))).map((e=>e.id.toString())))||[];r({annotations:[...o.annotations,...e],results:[]}),ne([...e])}},oe=()=>{switch(null===E||void 0===E?void 0:E.type){case p.cdz.CLASSIFICATION:return{key:"classification",message:m.formatMessage(d.QS.classification),icon:"tag",ref:null};case p.cdz.OBJECT_DETECTION:return{key:"object-detection",message:m.formatMessage(d.QS.objectDetection),icon:"border-outer",ref:H};case p.cdz.INSTANCE_SEGMENTATION:return{key:"segmentation",message:m.formatMessage(d.QS.instanceSegmentation),icon:"node-index",ref:R};case p.cdz.SEMANTIC_SEGMENTATION:return{key:"segmentation",message:m.formatMessage(d.QS.semanticSegmentation),icon:"node-index",ref:R};default:return{key:"",message:"",icon:""}}};return(0,h.jsx)(h.Fragment,{children:Z?(0,h.jsx)(v.qz,{align:"left",message:m.formatMessage(d.QS.annotationInternalError),onRefresh:()=>{U()}}):(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(v.Collapse,{defaultActiveKey:V,onChange:e=>G.current=e,padding:{right:u.spacing.xs},children:(0,h.jsx)(Y,{header:(0,h.jsxs)(v.kC,{ref:oe().ref,alignItems:"center",gap:u.spacing.s,children:[(0,h.jsx)(v.JO,{name:oe().icon,color:u.color.misc.primary,width:16,height:16}),(0,h.jsx)(v.xv,{mark:!0,children:oe().message})]}),"data-testid":`image-${oe().key}`,children:Q?(0,h.jsx)(v.u,{disabled:!0,placement:"top",children:(0,h.jsx)(v.Select,{placeholder:m.formatMessage(d.QS.search),width:232,prefixIcon:(0,h.jsx)(j.Z,{}),value:null===ee||void 0===ee?void 0:ee.datasetClassId,options:W,disabled:!0})}):(0,h.jsx)(v.kC,{direction:"column",gap:w?u.spacing.xs:u.spacing.m,children:O?c().isEmpty(te)?(0,h.jsx)(v.xv,{variant:"disabled",footnote:!0,style:{textAlign:"center"},children:m.formatMessage(d.QS.noBboxes)}):Object.entries(te).sort(((e,t)=>e[1].className.localeCompare(t[1].className,void 0,{numeric:!0}))).map((e=>{var a;let[n,i]=e;const l=null===$||void 0===$?void 0:$.includes(c().toString(n));return(0,h.jsxs)(v.kC,{direction:"column",gap:u.spacing.xs,"data-testid":"class-bboxes",children:[(0,h.jsx)(N,{color:i.classColor,name:`${i.className}:`,hidden:l,onVisibilityChange:e=>le(e,[n])}),null===(a=i.bboxes)||void 0===a?void 0:a.map(((e,a)=>(0,h.jsx)(T,{index:a+1,type:p.NUE.BBOX,hidden:o.annotations.includes(c().toString(e)),onClick:()=>s(c().toString(e)),selected:t===c().toString(e),onVisibilityChange:t=>{t.stopPropagation(),ie(c().toString(e))}})))]})})):c().isEmpty(se)?(0,h.jsx)(v.xv,{variant:"disabled",footnote:!0,style:{textAlign:"center"},children:m.formatMessage(d.QS.noMasks)}):Object.entries(se).sort(((e,t)=>e[1].className.localeCompare(t[1].className,void 0,{numeric:!0}))).map((e=>{var a;let[n,i]=e;const l=null===$||void 0===$?void 0:$.includes(c().toString(n));return(0,h.jsxs)(v.kC,{direction:"column",gap:u.spacing.xs,"data-testid":"class-masks",children:[(0,h.jsx)(N,{color:i.classColor,name:w?

82i.className:`${i.className}:`,hidden:l,onVisibilityChange:e=>le(e,[n]),onClick:w&&i.masks.length?()=>s(c().toString(i.masks[0])):void 0,selected:w&&i.masks.includes(c().toNumber(t))}),!w&&(null===(a=i.masks)||void 0===a?void 0:a.map(((e,a)=>(0,h.jsx)(T,{index:a+1,type:p.NUE.MASK,hidden:o.annotations.includes(c().toString(e)),onClick:()=>s(c().toString(e)),selected:t===c().toString(e),onVisibilityChange:t=>{t.stopPropagation(),ie(c().toString(e))}}))))]})}))})},oe().key)}),!!ae&&!(null===F||void 0===F||!F.length)&&(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(S.Z,{style:{marginTop:u.spacing.s,marginBottom:u.spacing.s}}),(0,h.jsx)(v.Collapse,{defaultActiveKey:"background",padding:{left:u.spacing.m,right:u.spacing.xs,top:u.spacing.s},headerPadding:{top:u.spacing.xxxs,bottom:u.spacing.xxxs},style:{marginLeft:u.spacing.m},headerColor:K?u.color.background.gray_3:void 0,children:(0,h.jsx)(Y,{header:(0,h.jsxs)(v.kC,{alignItems:"center",justifyContent:"space-between",children:[(0,h.jsx)(v.xv,{variant:"secondary",strong:K,children:m.formatMessage(d.QS.background)}),(0,h.jsx)(v.zx,{type:"text",size:"small",icon:(0,h.jsx)(v.JO,{name:$.includes(c().toString(F[0].id))?"eye-visible":"eye-invisible"}),onClick:e=>le(e,F.map((e=>c().toString(e.id))))})]}),children:(0,h.jsx)(v.kC,{direction:"column-reverse",gap:u.spacing.xs,children:Object.entries(ae).map((e=>{let[t,a]=e;const n=null===$||void 0===$?void 0:$.includes(c().toString(t));return(0,h.jsx)(M,{name:a.className,color:(null===L||void 0===L?void 0:L.color)||u.color.text.secondary,hidden:n,onClick:()=>{var e;return s(c().toString(null===B||void 0===B||null===(e=B.find((e=>F.find((t=>t.id===e.datasetClassId)))))||void 0===e?void 0:e.id))}})}))})},"background")})]})]})})};var Q=s(16066);const w=e=>{let{selectedLabel:t,onSelectLabel:s,hiddenElements:l,setHiddenElements:o}=e;const r=(0,n.Z)(),c=(0,i.s0)(),{id:m="",datasetId:u="",versionId:p="",imageId:x="",tool:f=""}=(0,i.UO)(),{isPublic:j}=(0,C.d2)(),S=j?Q.paths.projectTemplates:Q.paths.projects,y=[{label:r.formatMessage(d.QS.imageMetaData),key:"meta-data",children:(0,h.jsx)(b,{})},{label:r.formatMessage(d.QS.imageAnnotation),key:"annotation",children:(0,h.jsx)(O,{selectedLabel:t,onSelectLabel:s,hiddenElements:l,setHiddenElements:o}),forceRender:!0}],k=e=>c(`${S}/${m}${Q.paths.datasets}/${u}${Q.paths.versions}/${p}${Q.paths.images}/${x}/${e}`);return(0,a.useEffect)((()=>{f||k("meta-data")}),[]),(0,h.jsx)(g,{children:(0,h.jsx)(v.mQ,{items:y,size:"small",defaultActiveKey:f,onChange:k,style:{height:"100%"}})})};var z=s(69368),L=s(91442);const _=()=>{var e,t,s;const r=(0,n.Z)(),{id:c="",datasetId:m="",versionId:u="",imageId:g="",tool:x=""}=(0,i.UO)(),f=(0,l.Fg)(),b=(0,p.XzO)(c),{isPublic:j}=(0,C.d2)(),S=j?Q.paths.projectTemplates:Q.paths.projects,y=(0,i.s0)(),{dataset:k}=(0,p.p9V)(c,m),{image:I,isError:$,refetch:E}=(0,p.clN)(c,m,u,g),{invalidProjectMapping:N}=(0,p.vQx)(),[M,T]=(0,a.useState)(),[A,O]=(0,a.useState)({annotations:[],results:[]}),_=`${S}/${c}${Q.paths.datasets}/${m}${Q.paths.versions}/${u}`,F=[{path:S,breadcrumbName:r.formatMessage(j?o.sY.titleLibrary:o.sY.title)},{path:`${S}/${c}${Q.paths.datasets}`,entityType:"project",breadcrumbName:null!==(e=null===b||void 0===b?void 0:b.name)&&void 0!==e?e:""},{path:_,entityType:"dataset",breadcrumbName:null!==(t=null===k||void 0===k?void 0:k.name)&&void 0!==t?t:""},{path:`${_}${Q.paths.images}`,breadcrumbName:r.formatMessage(d.QS.imageTools)}],D=(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(v.Du,{routes:F}),(0,h.jsx)(v.h4,{title:null!==(s=null===I||void 0===I?void 0:I.name)&&void 0!==s?s:"",onBack:()=>y(_),marginBottom:"none"}),(0,h.jsx)(C.X8,{url:`${Q.paths.projects}/${c}${Q.paths.classMapping}`,onMessage:e=>{var t;return(null===(t=e.payload)||void 0===t?void 0:t.entityMappingTypes.includes(p.Hio.DATASET))&&N(c,{mappingType:p.Hio.DATASET})},disabled:(null===b||void 0===b?void 0:b.type)!==p.cdz.SEMANTIC_SEGMENTATION,children:(0,h.jsxs)(v.kC,{wrap:"nowrap",style:{height:"100%",overflow:"hidden"},children:[(0,h.jsxs)(v.kC,{direction:"column",wrap:"nowrap",gap:f.spacing.s,style:{flexGrow:"1",maxWidth:"calc(100% - 400px)"},children:[(0,h.jsx)(z.Z,{projectId:c,datasetId:m,versionId:u,imageId:g,selectedLabel:M,onSelectLabel:T,hiddenElements:A,setHiddenElements:O}),(0,h.jsx)(L.Z,{projectId:c,datasetId:m,versionId:u,imageId:g,onSelect:e=>y(`${S}/${c}${Q.paths.datasets}/${m}${Q.paths.versions}/${u}${Q.paths.images}/${e}/${x}`)})]}),(0,h.jsx)(w,{selectedLabel:M,onSelectLabel:T,hiddenElements:A,setHiddenElements:O})]})})]});return(0,h.jsx)(h.Fragment,{children:$?(0,h.jsx)(v.qz,{message:r.formatMessage(d.QS.internalError),padding:{top:260},onRefresh:()=>{E()}}):D})}}}]);