@promotedai/react-introspection
Version:
Promoted Introspection integration for React web apps
3 lines (2 loc) • 8.24 kB
JavaScript
import e,{useState as t,useRef as n,useCallback as a,useEffect as r,useMemo as l}from"react";import{makeStyles as o,Box as i,Button as s,Typography as c,Tooltip as E,createTheme as m,ThemeProvider as u,CircularProgress as p,Tabs as d,Tab as _}from"@material-ui/core";import{s as N,C as A}from"./CopyButton-630e99b4.js";import C from"copy-to-clipboard";import{makeStyles as R,createGenerateClassName as g,StylesProvider as O}from"@material-ui/core/styles";import{blue as b}from"@material-ui/core/colors";import{R as h,i as I}from"./index-9ae1c7e8.js";import"@material-ui/core/colors/blue";var v,f;!function(e){e.PERSONALIZE_CONV_MODEL_RANK="PERSONALIZE_CONV_MODEL_RANK",e.ENGAGEMENT_MODEL_RANK="ENGAGEMENT_MODEL_RANK",e.RETRIEVAL_RANK="RETRIEVAL_RANK"}(v||(v={})),function(e){e.CTR_30_DAY="CTR_30_DAY",e.CVR_30_DAY="CVR_30_DAY",e.PERSONALIZATION_SCORE="PERSONALIZATION_SCORE",e.MODEL_SCORE="MODEL_SCORE",e.P_NAVIGATES="P_NAVIGATES",e.P_CONV_GIVEN_NAVIGATE="P_CONV_GIVEN_NAVIGATE"}(f||(f={}));const y={[v.PERSONALIZE_CONV_MODEL_RANK]:"1002",[v.ENGAGEMENT_MODEL_RANK]:"1086",[v.RETRIEVAL_RANK]:"1210",[f.CTR_30_DAY]:"1065",[f.CVR_30_DAY]:"1069",[f.PERSONALIZATION_SCORE]:"1084",[f.MODEL_SCORE]:"1211",[f.P_NAVIGATES]:"200002",[f.P_CONV_GIVEN_NAVIGATE]:"201000"},L=[v.PERSONALIZE_CONV_MODEL_RANK,v.ENGAGEMENT_MODEL_RANK,v.RETRIEVAL_RANK],V=[f.P_NAVIGATES,f.P_CONV_GIVEN_NAVIGATE,f.CTR_30_DAY,f.CVR_30_DAY,f.PERSONALIZATION_SCORE,f.MODEL_SCORE],T=e=>"string"==typeof e?parseFloat(e).toFixed(3):"number"==typeof e?e.toFixed(3):e,D=(e,t)=>n=>{const a=n.feature_floats[e];return"function"==typeof t?t(a):a},S={[v.PERSONALIZE_CONV_MODEL_RANK]:{label:"Conversion Model Rank",value:D(y[v.PERSONALIZE_CONV_MODEL_RANK])},[v.ENGAGEMENT_MODEL_RANK]:{label:"All Engagement Model Rank",value:D(y[v.ENGAGEMENT_MODEL_RANK])},[v.RETRIEVAL_RANK]:{label:"Retrieval Rank",value:D(y[v.RETRIEVAL_RANK])},[f.P_NAVIGATES]:{label:"p(Navigate)",value:D(y[f.P_NAVIGATES],T)},[f.P_CONV_GIVEN_NAVIGATE]:{label:"p(Conv | Navigate)",value:D(y[f.P_CONV_GIVEN_NAVIGATE],T)},[f.CTR_30_DAY]:{label:"30-Day CTR",value:D(y[f.CTR_30_DAY],T)},[f.CVR_30_DAY]:{label:"30-Day CVR",value:D(y[f.CVR_30_DAY],T),formatter:T},[f.PERSONALIZATION_SCORE]:{label:"Personalization Score",value:D(y[f.PERSONALIZATION_SCORE],T)},[f.MODEL_SCORE]:{label:"Model Score",value:D(y[f.MODEL_SCORE],T)}},x=L.map((e=>S[e])),G=V.map((e=>S[e])),M={header:{borderBottom:"1px solid grey",gridColumn:"1 / 5"},itemLabel:{gridColumn:"1 / 3",textAlign:"right"},itemContent:{gridColumn:"3 / 5"},copied:{alignContent:"center",display:"inline-grid",gridTemplateColumns:"repeat(3, 1fr)",marginRight:"8px",verticalAlign:"middle"},copied__inner:{gridColumn:"1 / 2",marginRight:"4px"},copied__text:{fontSize:14,gridColumn:"2 / 4"}},P=o(N),k=o(M),K=({introspectionData:n,introspectionIds:a,handleClose:r,theme:l})=>{const o=P(l),m=k(l),u=(t,n,a,r,l)=>e.createElement(e.Fragment,null,e.createElement(i,{className:m.header},e.createElement(c,null,t)),null==n?void 0:n.map((t=>{const n="function"==typeof t.value?t.value(l):t.value;return e.createElement(e.Fragment,{key:t.label},e.createElement(i,{sx:Object.assign(Object.assign({},M.itemLabel),{gridColumn:a})},e.createElement(c,null,t.tooltip&&e.createElement(E,{arrow:!0,title:t.tooltip},e.createElement("span",null,t.label))),!t.tooltip&&e.createElement(c,null,t.label)),e.createElement(i,{sx:Object.assign(Object.assign({},M.itemContent),{gridColumn:r})},e.createElement(c,null,n||"-")))}))),[p,d]=t(!0);return e.createElement(i,{className:`${o.tabContentContainer} ${o["tabContentContainer--equal-columns"]}`},u("IDs",a,"1 / 2","2 / 5",n),u("Ranks",x,"1 / 3","3 / 5",n),u("Statistics",G,"1 / 3","3 / 5",n),e.createElement(i,{className:o.buttonContainer},e.createElement(A,{copyButtonVisible:p,handleCopy:()=>{d(!1),C(JSON.stringify({ids:a.map((e=>{var t;return{label:e.label,value:null!==(t=e.value)&&void 0!==t?t:"-"}})),ranks:x.map((e=>{var t;return{label:e.label,value:null!==(t=e.value(n))&&void 0!==t?t:"-"}})),statistics:G.map((e=>{var t;return{label:e.label,value:null!==(t=e.value(n))&&void 0!==t?t:"-"}}))})),setTimeout((()=>{d(!0)}),2e3)}}),e.createElement(s,{className:o.button,onClick:()=>{const e=document.createElement("a");e.href=`mailto:introspection@promoted.ai?subject=${encodeURIComponent("Introspection Report Request")}&body=${encodeURIComponent(JSON.stringify(null==a?void 0:a.reduce(((e,{label:t,value:n})=>Object.assign(Object.assign({},e),{[t]:n})),{})))}`,e.click()},variant:"outlined"},"Request Report..."),e.createElement(s,{onClick:r,className:o.button,variant:"contained"},"Close")))},w=R({container:{display:"block !important"}}),$=R(N),Y=({introspectionPayload:n,theme:a})=>{const r=$(a),l=w(a),[o,s]=t(!0);return e.createElement(i,{className:`${r.tabContentContainer} ${l.container}`},e.createElement("textarea",{readOnly:!0,style:{resize:"none",height:"400px",width:"calc(100% - 7px)",display:"block"}},JSON.stringify(n,null,2)),e.createElement(i,{className:r.buttonContainer},e.createElement(A,{copyButtonVisible:o,handleCopy:()=>{s(!1),C(JSON.stringify(n)),setTimeout((()=>{s(!0)}),2e3)}})))},Z=R((e=>({loading:{display:"flex",justifyContent:"center",alignItems:"center",height:"300px"},error:{padding:e.spacing(2),paddingBottom:e.spacing(3),color:e.palette.error.main,height:"300px"},popupContainer:{visibility:"hidden",position:"absolute",left:"-425px"},"popupContainer--right":{right:"-425px",left:"auto"},outerContainer:{color:"black",maxWidth:"100vw",width:"400px",zIndex:1001,maxHeight:"100vh"},innerContainer:{background:"#eee",paddingTop:e.spacing(1),position:"relative"},callout:{display:"none",[e.breakpoints.up("sm")]:{display:"block"},backgroundColor:"#eee",transform:"rotate(45deg) translateX(-50%)",height:"30px",left:"calc(100% - 4px)",position:"absolute",top:"49%",width:"30px"},"callout--right":{right:"calc(100% - 25px)",left:"auto"},promotedLogo:{bottom:"26px",height:"20px",left:"20px",position:"absolute",width:"20px"}}))),j=g({seed:"promoted-introspection"}),F=({error:o,triggerContainerRef:s,introspectionData:c,fullIntrospectionPayload:E,introspectionIds:N,logUserId:A,contentId:C,handleClose:R,direction:g="left"})=>{const v=m({typography:{body1:{fontSize:12}},palette:{primary:b}}),f=n(null),y=Z(v),[L,V]=t(0),T=a((()=>{if(!s.current||!f.current)return;const e=s.current.getBoundingClientRect(),t=f.current.getBoundingClientRect();f.current.style.visibility="visible",f.current.style.position="absolute","left"===g&&(f.current.style.left=-Math.min(t.width+25,e.left)+"px",f.current.style.right="auto"),"right"===g&&(f.current.style.right=-Math.min(t.width+25,window.innerWidth-e.right)+"px",f.current.style.left="auto"),f.current.style.top=-(t.height-e.height)/2+"px"}),[]);r((()=>{T()}),[T]);const D=l((()=>new ResizeObserver((()=>{T()}))),[]);r((()=>{if(f.current)return D.observe(f.current),window.addEventListener("resize",T),()=>{f.current&&D.unobserve(f.current),window.removeEventListener("resize",T)}}),[]);const S={[h.DATA_NOT_FOUND]:`Could not find introspection data for Log User ID ${A} and Content ID ${C}. This is likely because the user is not flagged as an internal user.`,[h.INVALID_RESPONSE]:`Response from server invalid for Log User ID ${A}`,[h.FETCH_FAILED]:`Fetch failed for Log User ID ${A}`};return e.createElement(u,{theme:v},e.createElement(O,{generateClassName:j},e.createElement("div",{ref:f,className:`${y.popupContainer} ${"right"===g?y["popupContainer--right"]:""}`},e.createElement(i,{className:y.outerContainer},e.createElement(i,{boxShadow:4,className:y.innerContainer},e.createElement(i,{className:`${y.callout} ${"right"===g?y["callout--right"]:""}`}),!c&&!o&&e.createElement("div",{className:y.loading},e.createElement(p,null)),o&&e.createElement("div",{className:y.error},S[o]),!o&&c&&e.createElement(e.Fragment,null,e.createElement(d,{onChange:(e,t)=>{V(t)},value:L,variant:"scrollable",indicatorColor:"primary"},e.createElement(_,{label:"Stats"}),e.createElement(_,{label:"Raw Response"})),e.createElement("img",{className:y.promotedLogo,src:I}),0===L&&e.createElement(K,{introspectionIds:N,introspectionData:c,handleClose:R,theme:v}),1===L&&e.createElement(Y,{theme:v,introspectionPayload:E})))))))};export{F as Popup};
//# sourceMappingURL=Popup-0ba9640c.js.map