\n {#if filter}\n select(itemIndex)}\n >\n {#if item.html}\n {@html item.html}\n {:else if item.text}{item.text}{/if}\n
\n {/if}\n {/each}\n {:else}\n \n
\n {/if}\n {#if viewItems.length}\n {#each viewItems as item, itemIndex (item.id)}\n {#if item.hidden != true}\n \n {#if nothingFoundText}{nothingFoundText}{:else} {/if}\n
\n {/if}\n\n\n\n","\n \n = viewIndex}\n on:click={decViewIndex}\n on:wheel|nonpassive={onWheel}\n title=\"use mouse wheel to scroll faster\"\n >\n
\n \n {#each viewItems as item, itemIndex (item._index)}\n \n {#if 'function' === typeof getImageURL && item.image}\n
\n {#if null != viewItemRanks[itemIndex]}\n \n \n
\n {/if}\n {#if showScrollToDetails}\n onClickItem(item._index)}>\n {scrollToDetailsText}\n
\n {/if}\n \n {\n addColumnDropdownOpened = !addColumnDropdownOpened\n }}\n >\n \n \n \n \n \n
\n \n {:else}\n \n {/if}\n {/each}\n \n \n {#if !showImages}\n = viewIndex}\n on:click={decViewIndex}\n on:wheel|nonpassive={onWheel}\n title=\"use mouse wheel to scroll faster\"\n >\n \n
\n {/if}\n \n {#each viewItems as item, itemIndex (item._index)}\n \n {#if 0 < item.text.trim().length}\n {@html item.text}\n {:else}\n \n {/if}\n {#if sigtestLetters}\n {sigtestLetters[item._itemIndex] || ''}\n {/if}\n \n
\n replaceItem(item._index, event.detail.item.id)}\n />\n
\n \n {:else}\n \n {#if 0 < item.text.trim().length}\n {@html item.text}\n {:else}\n \n {/if}\n {#if sigtestLetters}\n {sigtestLetters[item._itemIndex] || ''}\n {/if}\n
\n {/if}\n {#if !showImages}\n {#if showScrollToDetails}\n onClickItem(item._index)}>\n {scrollToDetailsText}\n
\n {/if}\n {#if null != viewItemRanks[itemIndex]}\n \n {itemName}\n \n
\n {\n addItem(event.detail.item.id)\n }}\n />\n
\n \n \n {:else}\n \n {/if}\n {/each}\n {#if !showImages}\n \n +\n
\n {/if}\n {/if}\n \n\n \n
\n {#each viewItems as item (item._index)}\n \n {#if attrPosition}\n {attrPosition}:\n {/if}\n {#if activeAttributeIndex == attrIndex}\n {@html attr.text}\n
\n {#if attr.custom}\n \n {/if}\n \n {#if item.attributes && item.attributes[attrIndex]}\n \n \n {#if sigtestStats}\n {#if null != item.attributes[attrIndex].sigtext}\n {@html item.attributes[attrIndex].sigtext}\n {:else if item.attributes[attrIndex].percents != undefined && null != item.attributes[attrIndex].percents}\n {0 === item.attributes[attrIndex].percents ? 0 : item.attributes[attrIndex].percents.toFixed(1)}%\n {:else if item.attributes[attrIndex].amount != undefined && null != item.attributes[attrIndex].amount}\n {0 === item.attributes[attrIndex].amount ? 0 : item.attributes[attrIndex].amount.toFixed(2)}\n {/if}\n {:else if item.attributes[attrIndex].text != undefined && null != item.attributes[attrIndex].text}\n {@html item.attributes[attrIndex].text}\n {:else if item.attributes[attrIndex].percents != undefined && null != item.attributes[attrIndex].percents}\n {0 === item.attributes[attrIndex].percents ? 0 : item.attributes[attrIndex].percents.toFixed(1)}%\n {:else if item.attributes[attrIndex].amount != undefined && null != item.attributes[attrIndex].amount}\n {0 === item.attributes[attrIndex].amount ? 0 : item.attributes[attrIndex].amount.toFixed(2)}\n {/if}\n \n {#if sigtestStats}\n \n {#each sigtestStats[item._itemIndex][attrIndex] as sigtestValue}\n \n {sigtestValue.letter || ''}\n \n {/each}\n \n {/if}\n
\n {:else if 0 === attrIndex}\n \n
\n\n\n\n","function isVisible(node) {\n if (!(node instanceof Element)) return false\n\n if (null === node.offsetParent) return false\n\n const style = window.getComputedStyle(node)\n if ('none' === style.display) return false\n if ('visible' !== style.visibility) return false\n\n // const rect = node.getBoundingClientRect()\n // return (\n // (rect.top + rect.height >= 0 &&\n // rect.top + rect.height <= (window.innerHeight || document.documentElement.clientHeight)) ||\n // (rect.bottom - rect.height >= 0 &&\n // rect.bottom - rect.height <= (window.innerHeight || document.documentElement.clientHeight))\n // )\n\n return true\n}\n\nexport default function shown(node, { onShown = () => {}, debounce = 200 } = {}) {\n let actualOnShown = onShown\n\n let timer = null\n let mutationObserverInstance = null\n\n const MutationObserver =\n 'undefined' !== typeof window ? window.MutationObserver || window.WebKitMutationObserver : null\n\n timer = setTimeout(function () {\n timer = null\n\n if (isVisible(node)) {\n actualOnShown()\n return\n }\n\n if (null != MutationObserver && 'undefined' !== typeof document && 'undefined' !== typeof document.body) {\n mutationObserverInstance = new MutationObserver(function () {\n if (null != timer) {\n clearTimeout(timer)\n }\n timer = setTimeout(function () {\n timer = null\n\n if (isVisible(node)) {\n mutationObserverInstance.disconnect()\n mutationObserverInstance = null\n actualOnShown()\n }\n }, debounce)\n })\n mutationObserverInstance.observe(document.body, {\n subtree: true,\n attributes: true,\n attributeFilter: ['style', 'class']\n })\n } else {\n const checkVisible = function () {\n if (isVisible(node)) {\n actualOnShown()\n } else {\n timer = setTimeout(checkVisible, 1000)\n }\n }\n timer = setTimeout(checkVisible, 1000)\n }\n }, 100)\n\n return {\n update(onShown) {\n actualOnShown = onShown\n },\n destroy() {\n if (null != mutationObserverInstance) {\n mutationObserverInstance.disconnect()\n mutationObserverInstance = null\n }\n if (null != timer) {\n clearTimeout(timer)\n timer = null\n }\n }\n }\n}\n","\n
\n \n {#if showTitle}\n
\n \n {@html title || ''}\n
\n {/if}\n \n {#if showExportButton}\n \n {#if exporting}\n \n {:else}\n \n {/if}\n
\n {/if}\n {#if showFullScreenButton}\n \n \n
\n {/if}\n \n {#if enableSigtestAnalysis}\n \n {filter.options[additionalFilterIndexes[index] ?? 0].label}\n \n {/each}\n {/if}\n {#if enablePresets}\n {#if presets && 0 < presets.length}\n Show:\n \n \n {presetFetching\n ? '......'\n : 0 <= presetIndex\n ? (presets[presetIndex] || { text: 'custom' }).text\n : 'custom'}\n \n \n {/if}\n {/if}\n {#if enableRankBy}\n Rank by:\n \n \n {@html sortByAttributeIndexText}\n \n
\n \n Analysis:\n \n {'sigtest' === analysisMode ? sigtestAnalysisName : mainAnalysisName}\n \n
\n {/if}\n {#if itemsHasImages}\n \n
\n \n ({ id: i, text: v.label }))}\n selected={additionalFilterIndexes[index]}\n itemTextWrap={false}\n dropdownOffset={10}\n on:select={event => selectAdditionalFilter(event.detail.item, index)}\n />\n
\n \n
\n \n
\n \n {/if}\n \n
\n \n
\n \n {@html title || placeholder || ' '}\n
\n \n \n \n \n \n
') }}>
\n \n )}\n >\n \n \n )}\n ') }}>
\n
\n )}\n >\n \n \n \n \n \n \n \n \n \n \n ) : (\n \n )\n }\n\n render() {\n const { upgradePackage = null, disabled } = this.props\n const { acceptFile = true, warnings, errors } = this.state\n\n return (\n \n \n \n \n Upgrade to {upgradePackage.name} plan to use this functionality\n
\n\n
\n )\n }\n)\n\nOEItem.propTypes = {\n dataId: PropTypes.string,\n responseId: PropTypes.number,\n path: PropTypes.string,\n answer: PropTypes.object,\n survey: PropTypes.object,\n question: PropTypes.object,\n tags: PropTypes.array,\n surveyImages: PropTypes.object,\n selectedQuestion: PropTypes.string,\n pipingMask: PropTypes.object,\n toolBoxOptions: PropTypes.array,\n isRejected: PropTypes.bool,\n onUpdateSchema: PropTypes.func,\n voiceBusy: PropTypes.bool,\n setVoiceBusy: PropTypes.func\n}\n\nOEItem.displayName = 'OEItem'\n\nexport default OEItem\n","import React, { memo, useContext, useRef, useMemo, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport style from '@aytm/app/stats/page/comments/styles/index.module.scss'\nimport classNames from 'classnames'\nimport { range, getToolBoxOptions } from '@aytm/app/stats/page/comments/lib/utils'\n\nimport { OEContext } from '@aytm/app/stats/page/comments'\n\nimport Button from '@aytm/lib/rfd-ui/components/basic/button'\nimport Response from '@aytm/app/stats/page/comments/comments/Response'\n\nimport scrollToElement from 'scroll-to-element'\n\nlet scrollToElementTimer\n\nconst PageDataComments = memo(\n ({\n reportId,\n apiKey,\n survey,\n surveyImages,\n responsesOptions,\n responsesRef,\n showTraitsRef,\n responseOrderRef,\n popupNotificationsDisabled,\n isShowHiddenFilters,\n currentResponseRef,\n setCurrentResponse,\n onCloseNotification,\n onUpdateParams,\n onUpdateSchema,\n onPageChange\n }) => {\n const { searchState } = useContext(OEContext)\n\n const { request, tagsList, totalPages, isLoading, isProcessing, isQAMode, isShowAllTools, isVideoResponsesMode } =\n searchState\n const { currentPage } = request\n\n const searchStateRef = useRef()\n searchStateRef.current = searchState\n\n const toolBoxOptions = useMemo(() => getToolBoxOptions(survey, tagsList) || [], [survey, tagsList])\n\n const trackCurrentResponse = useCallback(() => {\n const bodyPosition = document.body.getBoundingClientRect()\n if (0 < bodyPosition.top) setCurrentResponse(null)\n else {\n for (const responseRef of responsesRef.current) {\n if (!responseRef || null === responseRef.node) continue\n const position = responseRef.node.getBoundingClientRect()\n if (position.top >= 150 || position.top + position.height > bodyPosition.height) {\n setCurrentResponse({ uid: responseRef.uid, index: responseRef.index })\n break\n }\n }\n }\n }, [setCurrentResponse, responsesRef])\n\n useEffect(() => {\n document.removeEventListener('scroll', trackCurrentResponse)\n\n if (isLoading || isProcessing) return\n\n document.addEventListener('scroll', trackCurrentResponse)\n\n // eslint-disable-next-line consistent-return\n return () => document.removeEventListener('scroll', trackCurrentResponse)\n }, [isLoading, isProcessing, trackCurrentResponse])\n\n useEffect(() => {\n if (searchStateRef.current.isLoading || searchStateRef.current.isProcessing) return\n\n null !== scrollToElementTimer && clearTimeout(scrollToElementTimer)\n scrollToElementTimer = null\n\n setCurrentResponse(null)\n // eslint-disable-next-line consistent-return\n return () => {\n null !== scrollToElementTimer && clearTimeout(scrollToElementTimer)\n }\n }, [apiKey, request, setCurrentResponse])\n\n useEffect(() => {\n if (searchStateRef.current.isLoading || isProcessing) return\n\n null !== scrollToElementTimer && clearTimeout(scrollToElementTimer)\n scrollToElementTimer = null\n\n if (currentResponseRef?.current) {\n const currentResponseNode = (responsesRef.current || []).find(\n item => item.uid == currentResponseRef.current.uid\n )\n scrollToElementTimer = setTimeout(() => {\n scrollToElementTimer = null\n currentResponseNode\n ? scrollToElement(currentResponseNode.node, {\n offset: -150,\n align: 'top',\n duration: 250\n })\n : trackCurrentResponse()\n }, 100)\n }\n\n // eslint-disable-next-line consistent-return\n return () => null !== scrollToElementTimer && clearTimeout(scrollToElementTimer)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isProcessing, trackCurrentResponse, responsesRef, isShowAllTools])\n\n useEffect(() => {\n if (!isLoading) return\n\n scrollToElement('#header', {\n offset: 0,\n align: 'top',\n duration: 250\n })\n }, [isLoading])\n\n return (\n <>\n {renderQuestionWithAnswers(answer, path)}
\n \n {responsesOptions.pageData && 0 < responsesOptions.pageData.length ? (\n responsesOptions.pageData.map((item, i) => (\n (responsesRef.current[i] = { uid: item.response.uid, node: el, index: i })}\n >\n
\n ))\n ) : (\n \n {!isLoading && <>{isVideoResponsesMode ? 'No videos found' : 'No comments found'}}\n
\n )}\n {(isLoading || isProcessing) && (\n \n
\n \n ) : null}\n \n )\n }\n)\n\nPageDataComments.propTypes = {\n reportId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n apiKey: PropTypes.object,\n survey: PropTypes.object,\n surveyImages: PropTypes.object,\n popupNotificationsDisabled: PropTypes.object,\n responsesOptions: PropTypes.object,\n responsesRef: PropTypes.object,\n showTraitsRef: PropTypes.object,\n responseOrderRef: PropTypes.object,\n currentResponseRef: PropTypes.object,\n isShowHiddenFilters: PropTypes.bool,\n setCurrentResponse: PropTypes.func,\n onCloseNotification: PropTypes.func,\n onUpdateParams: PropTypes.func,\n onUpdateSchema: PropTypes.func,\n onPageChange: PropTypes.func\n}\n\nPageDataComments.displayName = 'PageDataComments'\n\nexport default PageDataComments\n","import React, { useContext, useEffect, useMemo, useCallback, useRef } from 'react'\nimport PropTypes from 'prop-types'\nimport style from '@aytm/app/stats/page/comments/styles/index.module.scss'\nimport classNames from 'classnames'\nimport { range } from '@aytm/app/stats/page/comments/lib/utils'\n\nimport { OEContext } from '@aytm/app/stats/page/comments'\n\nimport Fade from '@aytm/app/stats/page/comments/comments/components/Fade'\nimport Button from '@aytm/lib/rfd-ui/components/basic/button'\nimport Response from '@aytm/app/stats/page/comments/comments/Response'\n\nimport scrollToElement from 'scroll-to-element'\n\nconst PageDataQA = ({\n reportId,\n surveyImages,\n responsesOptions,\n showTraitsRef,\n responseOrderRef,\n popupNotificationsDisabled,\n isShowHiddenFilters,\n onCloseNotification,\n onPageChange\n}) => {\n const { searchState, commentStatusesState } = useContext(OEContext)\n const { request, isLoading, isProcessing, isQALoading, qaProcessedResponseId } = searchState\n const { reject } = commentStatusesState\n const { currentPage, pageSize } = request\n\n const isOnePerPage = useMemo(() => 1 == pageSize, [pageSize])\n\n const onApproveAll = () => {\n // collecting uids to approve\n const uidsToApprove = responsesOptions.pageData.reduce((ret, item) => {\n ret.push({\n uid: item.response.uid.toString(36),\n isRejected: reject[item.response.uid] || 'true' == reject[item.response.uid]\n })\n return ret\n }, [])\n if (onPageChange && 'function' == typeof onPageChange) {\n onPageChange(currentPage + 1, uidsToApprove)\n }\n scrollToElement('#header', {\n offset: 0,\n align: 'top',\n duration: 250\n })\n }\n const onApproveAllRef = useRef()\n onApproveAllRef.current = onApproveAll\n\n const onKeyDownHandler = useCallback(event => {\n if ((49 == event.keyCode || 97 == event.keyCode || 35 == event.keyCode) && event.shiftKey) {\n onApproveAllRef.current()\n }\n }, [])\n\n useEffect(() => {\n if (!isOnePerPage) window.addEventListener('keydown', onKeyDownHandler)\n else window.removeEventListener('keydown', onKeyDownHandler)\n return () => {\n window.removeEventListener('keydown', onKeyDownHandler)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOnePerPage])\n\n const renderResponse = item => (\n \n {currentPage < totalPages ? (\n
\n \n {currentPage > 1 ? (\n
\n \n
\n )\n\n return (\n <>\n {!isLoading && !isProcessing ? 'All done!' : 'Loading...'}
\n )}\n {isQALoading ||\n (!isOnePerPage && (isLoading || isProcessing) && (\n \n
\n \n ) : null}\n \n )\n}\n\nPageDataQA.propTypes = {\n reportId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n survey: PropTypes.object,\n surveyImages: PropTypes.object,\n popupNotificationsDisabled: PropTypes.object,\n responsesOptions: PropTypes.object,\n responsesRef: PropTypes.object,\n showTraitsRef: PropTypes.object,\n responseOrderRef: PropTypes.object,\n isShowHiddenFilters: PropTypes.bool,\n onCloseNotification: PropTypes.func,\n onPageChange: PropTypes.func\n}\n\nPageDataQA.displayName = 'PageDataQA'\n\nexport default PageDataQA\n","import React, { memo, useContext, useState, useMemo, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport moment from 'moment'\n\nimport {\n checkSentimentStatus,\n getLastItemPath,\n getLastSentimentValue,\n isVideoOrImageType,\n isXpertOrVirtualType,\n pathQuestionIdToOld,\n questionByPath,\n questionOldIdToId,\n responseTagsByPath\n} from '@aytm/app/stats/page/comments/lib/utils'\nimport { updateQACounter, changeResponseCommentStatus } from '@aytm/app/stats/page/comments/actions'\nimport { DEFAULT_SELECTED_QUESTION } from '@aytm/app/stats/page/comments/lib/constants'\n\nimport Popup from '@aytm/lib/rfd-ui/components/basic/popup'\n\nimport OEItem from '@aytm/app/stats/page/comments/comments/OEItem'\nimport Traits from '@aytm/app/stats/page/comments/comments/components/Traits'\nimport Kudos from '@aytm/app/stats/page/comments/comments/components/Kudos'\nimport Reject from '@aytm/app/stats/page/comments/comments/components/Reject'\nimport Approve from '@aytm/app/stats/page/comments/comments/components/Approve'\nimport ResponseDropdown from '@aytm/app/stats/page/comments/comments/components/ResponseDropdown'\n\nimport { OEContext } from '@aytm/app/stats/page/comments/index'\n\nimport style from '@aytm/app/stats/page/comments/comments/styles/Response.module.scss'\n\nconst Response = memo(\n ({\n dataId,\n survey,\n surveyImages,\n reportVirtual,\n reportSchema,\n response,\n toolBoxOptions,\n showTraitsRef,\n responseOrderRef,\n popupNotificationsDisabled,\n isShowHiddenFilters,\n onUpdateSchema,\n onUpdateParams,\n onCloseNotification\n }) => {\n const { dispatch, searchState, commentStatusesState, dispatchCommentStatuses } = useContext(OEContext)\n const {\n isShowAllTraits,\n isShowSentiments,\n isTagsManagementDisabled,\n isAdmin,\n isSurveyGuest,\n isRejectAvailable,\n isSurveyOwner,\n isQAMode,\n CSRF,\n qaTotal,\n qaCounter,\n request,\n sentimentOptions,\n isVideoResponsesMode\n } = searchState\n\n const { uid: responseId } = response.response\n\n const { pageSize, selectedQuestion } = request\n\n const rejectStatus = commentStatusesState.reject[responseId]\n const [voiceBusy, setVoiceBusy] = useState(false)\n\n const isOnePerPage = isQAMode && 1 == pageSize\n const isRejected = !(isQAMode && isOnePerPage) && rejectStatus && 'true' == rejectStatus\n\n const hasTraits = Boolean(response.trait && Object.keys(response.trait).length > 4)\n const hasQuestionOrder = Boolean(response.session && response.session.order)\n\n const responseDate = moment(\n new Date(response.sessionFinishAt ? response.sessionFinishAt : response.completedAt)\n ).utcOffset(window.surveyTimeZone.offset)\n\n const [rejectReason, setRejectReason] = useState()\n const [kudosConfirm, setKudosConfirm] = useState()\n const [isResponseOrder, setIsResponseOrder] = useState(searchState.isResponseOrder || false)\n const [isShowToolsDropdown, setIsShowToolsDropdown] = useState(false)\n const [isShowTraits, setIsShowTraits] = useState(isShowAllTraits || false)\n const [isShowOtherResponses, setIsShowOtherResponses] = useState(false)\n\n useEffect(() => {\n showTraitsRef.current[responseId] = setIsShowTraits\n if (hasQuestionOrder) {\n responseOrderRef.current[responseId] = setIsResponseOrder\n }\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n delete showTraitsRef.current[responseId]\n if (hasQuestionOrder) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n delete responseOrderRef.current[responseId]\n }\n }\n }, [response, isShowAllTraits, hasQuestionOrder, responseId, responseOrderRef, showTraitsRef])\n\n const onChangeResponseStatus = async (responseId, action, reason = null) => {\n const params = {\n type: action,\n responseId,\n scope: action,\n commentStatusesState,\n dispatchCommentStatuses,\n CSRF,\n onSuccess: () => {\n if (isQAMode) {\n if (isOnePerPage) {\n dispatch({\n type: 'SET_PARAMS',\n request: {\n value: {\n qaProcessedResponseId: responseId,\n qaAction: action\n }\n }\n })\n }\n dispatch({\n type: 'ADD_PROCESSED_QA',\n request: {\n responseId\n }\n })\n // delayed counter update to allow animation ends for isOnePerPage\n setTimeout(\n () => {\n updateQACounter({ dispatch, qaTotal, qaCounter })\n },\n isOnePerPage ? 600 : 0\n )\n }\n }\n }\n if (reason) {\n params.reason = reason\n }\n await changeResponseCommentStatus(params)\n }\n\n const onToggleOtherResponses = () => {\n setIsShowOtherResponses(!isShowOtherResponses)\n }\n\n const onToggleToolsDropdown = () => {\n setIsShowToolsDropdown(!isShowToolsDropdown)\n }\n\n const onToggleResponseOrder = isResponseOrder => {\n setIsResponseOrder(isResponseOrder)\n }\n\n const onToggleTraits = () => {\n setIsShowTraits(!isShowTraits)\n }\n\n const questionsKeys = useMemo(() => {\n const answers =\n hasQuestionOrder && isResponseOrder\n ? response.session.order.filter(keyName => {\n const newKeyName = questionOldIdToId(keyName, survey)\n return (reportSchema.length\n ? reportSchema.some(schemaKey => newKeyName == questionOldIdToId(schemaKey, survey))\n : true) &&\n selectedQuestion !== DEFAULT_SELECTED_QUESTION &&\n !isShowOtherResponses\n ? 0 == selectedQuestion.indexOf(newKeyName)\n : true\n })\n : (reportSchema.length ? reportSchema : Object.keys(response.answer)).reduce((acc, cur) => {\n const newKeyName = questionOldIdToId(cur, survey)\n if (\n selectedQuestion == DEFAULT_SELECTED_QUESTION ||\n (selectedQuestion !== DEFAULT_SELECTED_QUESTION &&\n !isShowOtherResponses &&\n 0 == selectedQuestion.indexOf(newKeyName))\n )\n response.answer[cur] && acc.push(cur)\n return acc\n }, [])\n return answers.map(keyName => {\n return {\n keyName,\n path: questionOldIdToId(keyName, survey),\n question: questionByPath(keyName, survey, reportVirtual)\n }\n })\n }, [\n response,\n isShowOtherResponses,\n isResponseOrder,\n hasQuestionOrder,\n reportSchema,\n reportVirtual,\n selectedQuestion,\n survey\n ])\n\n const lastItemPath = getLastItemPath(questionsKeys, selectedQuestion, response)\n const lastItem = lastItemPath ? questionByPath(lastItemPath, survey, reportVirtual) : null\n const lastSentimentValue = lastItemPath ? getLastSentimentValue(lastItemPath, response) : 'None'\n const sentimentStatus =\n !lastItem || (lastItem && (isXpertOrVirtualType(lastItem) || isVideoOrImageType(lastItem)))\n ? false\n : checkSentimentStatus(lastItemPath, sentimentOptions)\n\n const panelValue = (response.trait && response.trait.panel) || (response.variables && response.variables.panel)\n\n return questionsKeys.length ? (\n \n {!isLoading && !isProcessing && responsesOptions.pageData.length ? (\n
\n \n by {response.rejection.rejected_by},{' '}\n {moment(new Date(response.rejection.rejected_at)).format('MM/DD/YYYY [at] hh:mm A')}\n
\n ) : null}\n \n
\n {isShowTraits /*&& !isRejected*/ && hasTraits && (\n \n (\n
\n {panelValue ? `Panel: ${panelValue}` : null}
}\n contentTheme={'compact-black'}\n >\n Response ID: {responseId}\n \n {responseDate.format(`hh:mma [${window.surveyTimeZone.name}] dddd MMMM DD, YYYY`)}
\n )}\n contentTheme={'compact-black'}\n >\n {responseDate.format('ddd hh:mma')}
\n \n \n {isQAMode && isOnePerPage && !isRejected && !rejectReason && !kudosConfirm && (\n
\n \n
\n )}\n \n
\n )}\n \n {questionsKeys.map(({ keyName, path, question }) =>\n question ? (\n
\n\n \n {children}\n
\n )\n )\n}\n\nFade.propTypes = {\n show: PropTypes.bool,\n children: PropTypes.node\n}\n\nexport default Fade\n","import React, { memo, useContext } from 'react'\nimport PropTypes from 'prop-types'\nimport style from '@aytm/app/stats/page/comments/comments/styles/Response.module.scss'\nimport NotificationPopup from '@aytm/app/stats/page/comments/comments/components/NotificationPopup'\nimport classNames from 'classnames'\nimport Popup from '@aytm/lib/rfd-ui/components/basic/popup'\nimport { OEContext } from '@aytm/app/stats/page/comments'\nimport { changeResponseCommentStatus } from '@aytm/app/stats/page/comments/actions'\n\nconst Kudos = memo(({ responseId, kudosConfirm, setKudosConfirm, onCloseNotification, popupNotificationsDisabled }) => {\n const { dispatchCommentStatuses, commentStatusesState, searchState } = useContext(OEContext)\n const { CSRF, isAdmin } = searchState\n const kudosStatus = commentStatusesState.kudos[responseId]\n\n const onToggleKudosResponse = async (responseId, type) => {\n await changeResponseCommentStatus({\n type,\n responseId,\n reason: null,\n scope: 'kudos',\n commentStatusesState,\n dispatchCommentStatuses,\n CSRF\n })\n }\n\n const onToggleKudos = async type => {\n if ('unkudos' == type) {\n await onToggleKudosResponse(responseId, type)\n setKudosConfirm('')\n } else {\n setKudosConfirm(type)\n }\n }\n\n const onConfirmToggleKudos = async () => {\n await onToggleKudosResponse(responseId, kudosConfirm)\n setKudosConfirm('')\n }\n\n const onCancelToggleKudos = () => {\n setKudosConfirm('')\n }\n\n switch (true) {\n case 'true' == kudosStatus:\n case 'revertable' == kudosStatus:\n return (\n \n
\n )}\n >\n Error\n \n )\n default:\n switch (true) {\n case Boolean(kudosConfirm): {\n return (\n {kudosStatus.message}
\n \n \n Cancel\n \n \n Give Kudos\n \n \n
\n )\n }\n default:\n return (\n \n \n \n \n
\n )}\n >\n {children}\n \n )\n}\n\nNotificationPopup.propTypes = {\n disabled: PropTypes.bool,\n type: PropTypes.string,\n action: PropTypes.string,\n status: PropTypes.string,\n onClosePopup: PropTypes.func,\n children: PropTypes.any\n}\n\nNotificationPopup.displayName = 'NotificationPopup'\n\nexport default NotificationPopup\n","import React, { memo, useContext, useState, useRef, useMemo, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nimport ADND from '@aytm/lib/adnd/ADND'\n\nimport { DEFAULT_CODEBOOK } from '@aytm/app/stats/page/sidebar/coding/lib/constants'\n\nimport { changeResponseTagState } from '@aytm/app/stats/page/comments/actions'\nimport { checkSentimentStatus, getDownloadUrl } from '@aytm/app/stats/page/comments/lib/utils'\n\nimport ImageResponse from '@aytm/app/stats/page/comments/comments/components/OEQuestionResponse/ImageResponse'\nimport VideoResponse from '@aytm/app/stats/page/comments/comments/components/OEQuestionResponse/VideoResponse'\nimport AudioResponse from '@aytm/app/stats/page/comments/comments/components/OEQuestionResponse/AudioResponse'\nimport TextReponse from '@aytm/app/stats/page/comments/comments/components/OEQuestionResponse/TextReponse'\n\nimport ToolBox from '@aytm/app/stats/page/comments/comments/components/ToolBox'\nimport Sentiment from '@aytm/app/stats/page/comments/comments/components/Sentiment'\nimport useEventListener from '@aytm/app/stats/page/comments/lib/hooks/useEventListener'\n\nimport { OEContext } from '@aytm/app/stats/page/comments'\n\nimport style from '@aytm/app/stats/page/comments/comments/styles/OEItem.module.scss'\n\nconst OEQuestionResponse = memo(\n ({\n node,\n nodeOptions,\n toolBoxOptions,\n path,\n responseId,\n dataId,\n tags,\n answer,\n question,\n sentiment,\n best_span_str,\n onUpdateSchema,\n isRejected,\n isVirtualOrXpert,\n isVideoOrImage,\n hasTitle,\n voiceBusy,\n setVoiceBusy\n }) => {\n const { windowUID, searchState, dispatch, dispatchCommentStatuses } = useContext(OEContext)\n\n const { sentimentOptions, isShowAllTools, isShowSentiments, isTagsManagementDisabled, isQAMode } = searchState\n const sentimentStatus = checkSentimentStatus(path, sentimentOptions)\n\n const [isDisabledToolBox, setIsDisabledToolBox] = useState(false)\n\n const dndTagTargetRef = useRef(null)\n\n const downloadUrl = useMemo(() => getDownloadUrl(question, answer), [question, answer])\n\n const onAddTag = async (tag, responseId, path, action) => {\n let type\n switch (tag.type) {\n case 'sentiment': {\n type = 'SENTIMENT_CHANGED'\n tag.currentValue = sentiment\n break\n }\n default: {\n if ('modify' != action) {\n type = 'TAG_ADDED'\n }\n }\n }\n tag.tag = tag.tag.trim()\n await changeResponseTagState({\n tag,\n type,\n responseId,\n path,\n action,\n onUpdateSchema,\n dispatch,\n dispatchCommentStatuses\n })\n }\n\n const onRemoveTag = async (tag, responseId, path) => {\n await changeResponseTagState({\n tag,\n type: 'TAG_REMOVED',\n responseId,\n path,\n action: 'delete',\n onUpdateSchema,\n dispatch,\n dispatchCommentStatuses\n })\n }\n\n const onDNDEnter = () => {\n dndTagTargetRef.current.classList.add(style['comment-answer-dnd-active'])\n }\n\n const onDNDLeave = () => {\n dndTagTargetRef.current.classList.remove(style['comment-answer-dnd-active'])\n }\n\n const onDNDDrop = async dropData => {\n const { tag, type, value, label, codebook } = dropData.data\n\n if (windowUID != dropData.data.windowUID) {\n if ('sentiment' == type) return\n if (tags.some(item => item.tag.toLowerCase() == `${DEFAULT_CODEBOOK}: ${label}`.toLowerCase())) return\n\n dndTagTargetRef.current.classList.remove(style['comment-answer-dnd-active'])\n\n setIsDisabledToolBox(true)\n await onAddTag(\n {\n tag: label,\n type: type || 'manual',\n label: label,\n codebook: null\n },\n responseId,\n path,\n 'create'\n )\n setIsDisabledToolBox(false)\n } else {\n if ('sentiment' == type && !sentimentStatus) return\n if ('sentiment' != type && tags.some(item => item.tag == tag)) return\n\n dndTagTargetRef.current.classList.remove(style['comment-answer-dnd-active'])\n\n setIsDisabledToolBox(true)\n await onAddTag(\n {\n tag: 'sentiment' == type ? value : codebook == undefined || null === codebook ? label : tag,\n type: type || 'manual',\n label: label,\n codebook: codebook == undefined || null === codebook ? null : codebook\n },\n responseId,\n path,\n 'create'\n )\n setIsDisabledToolBox(false)\n }\n }\n\n const dndTagTarget =\n !isQAMode && !isTagsManagementDisabled && !isRejected && !isVirtualOrXpert\n ? ADND.targets\n .data({\n acceptTypes: ['sidebar-tag', 'sidebar-tag-sentiment']\n })\n .onEnter(onDNDEnter)\n .onLeave(onDNDLeave)\n .onDrop(onDNDDrop)\n : null\n\n useEffect(() => {\n if (dndTagTarget) dndTagTarget.connect(dndTagTargetRef.current)\n\n return () => {\n if (dndTagTarget) dndTagTarget.disconnect()\n }\n }, [dndTagTarget])\n\n useEventListener('dndEndTag', () => {\n dndTagTargetRef.current.classList.remove(style['comment-answer-dnd-active'])\n })\n\n return (\n {statuses[type][status]}
\n \n \n
\n \n )}\n \n )\n }\n)\n\nOEQuestionResponse.propTypes = {\n node: PropTypes.object,\n nodeOptions: PropTypes.object,\n toolBoxOptions: PropTypes.array,\n path: PropTypes.string,\n tags: PropTypes.array,\n responseId: PropTypes.number,\n dataId: PropTypes.string,\n answer: PropTypes.object,\n question: PropTypes.object,\n sentiment: PropTypes.string,\n best_span_str: PropTypes.string,\n isVirtualOrXpert: PropTypes.bool,\n isVideoOrImage: PropTypes.bool,\n hasTitle: PropTypes.bool,\n isRejected: PropTypes.bool,\n onUpdateSchema: PropTypes.func,\n voiceBusy: PropTypes.bool,\n setVoiceBusy: PropTypes.func\n}\n\nOEQuestionResponse.displayName = 'QuestionResponse'\n\nexport default OEQuestionResponse\n\nADND().connect()\n","import React, { useState, useRef, useCallback } from 'react'\nimport PropTypes from 'prop-types'\nimport { AudioVisualizer } from 'react-audio-visualize'\n\nimport { stripHTML } from '@aytm/lib/common/func'\n\nimport useIsVisible from '@aytm/lib/hooks/useIsVisible'\n\nimport Popup from '@aytm/lib/rfd-ui/components/basic/popup'\n\nimport { Dropdown } from 'primereact/dropdown'\n\nimport style from '@aytm/app/stats/page/comments/comments/styles/OEItem.module.scss'\n\nconst synth = window.speechSynthesis\n\nconst getVoiceList = () => {\n if (0 < window.voicesListSelect?.length) return\n if (0 < synth.getVoices().length) {\n window.voicesListSelect = synth.getVoices().map((voice, i) => {\n return { text: `${voice.name} (${voice.lang})`, value: i }\n })\n } else setTimeout(getVoiceList, 500)\n}\ngetVoiceList()\n\nconst AudioResponse = ({ node, voiceBusy, setVoiceBusy }) => {\n const array = node.t\n\n const [blobs, setBlobs] = useState({})\n\n const [time, setTime] = useState(0)\n const [played, setPlayed] = useState('')\n const [playedAll, setPlayedAll] = useState(null)\n\n const [llmVoice, setLlmVoice] = useState(Number(localStorage.getItem('aytmLlmVoice') || 0))\n const [userVoice, setUserVoice] = useState(Number(localStorage.getItem('aytmUserVoice') || 0))\n\n const initRef = useRef(false)\n\n const audioRef = useRef(null)\n const blockRef = useRef(null)\n\n const currentPlayed = useRef(null)\n const utterThis = useRef(null)\n\n const isVisible = useIsVisible(blockRef)\n\n const updateLlmVoice = event => {\n setLlmVoice(Number(event.value || 0))\n localStorage.setItem('aytmLlmVoice', Number(event.value || 0))\n }\n\n const updateUserVoice = event => {\n setUserVoice(Number(event.value || 0))\n localStorage.setItem('aytmUserVoice', Number(event.value || 0))\n }\n\n const playAudio = uid => {\n if (!uid) return\n if (played == uid) {\n setPlayed(null)\n audioRef.current.pause()\n return\n }\n const reader = new FileReader()\n setPlayed(uid)\n reader.onload = event => {\n const srcUrl = event.target.result\n audioRef.current.src = srcUrl\n void audioRef.current.play()\n }\n reader.readAsDataURL(blobs[uid])\n audioRef.current.load()\n audioRef.current.onload = () => {\n void audioRef.current.play()\n }\n }\n\n const onTimeUpdate = () => {\n // console.log(i)\n // console.log(audioRef.current.currentTime)\n setTime(audioRef.current.currentTime)\n // setPrc(a)\n }\n\n const nextTrack = () => {\n setTimeout(() => {\n if (playedAll != null) setPlayedAll(playedAll < node.t.length - 1 ? playedAll + 1 : null)\n if (playedAll == node.t.length - 1) setVoiceBusy(false)\n }, 150)\n }\n\n const audioEnded = () => {\n setPlayed(null)\n nextTrack()\n }\n\n const playAll = () => {\n setPlayedAll(playedAll != null ? null : 0)\n if (playedAll != null && utterThis.current) {\n synth.cancel()\n utterThis.current = null\n setPlayedAll(null)\n currentPlayed.current = null\n setPlayed(null)\n if (audioRef.current) audioRef.current.pause()\n setVoiceBusy(false)\n }\n }\n\n const popupContent = useCallback(\n () => (\n \n
\n + Add tag
\n \n Skipper:\n
\n ),\n [llmVoice, userVoice]\n )\n\n if (!initRef.current && isVisible) {\n initRef.current = true\n node.t\n .filter(node => node.audio_uid)\n .forEach(node =>\n fetch(node.audio_url)\n .then(r => r.blob())\n .then(r => {\n blobs[node.audio_uid] = r\n setBlobs(Object.assign({}, blobs))\n })\n //eslint-disable-next-line no-console\n .catch(error => console.log(error))\n )\n }\n\n if (playedAll != null && playedAll != currentPlayed.current) {\n currentPlayed.current = playedAll\n setVoiceBusy(true)\n if (!node.t[playedAll].audio_uid) {\n utterThis.current = new SpeechSynthesisUtterance(stripHTML(node.t[playedAll].text))\n utterThis.current.voice = synth.getVoices()['llm' == node.t[playedAll].type ? llmVoice : userVoice]\n utterThis.current.onend = () => {\n nextTrack()\n }\n synth.speak(utterThis.current)\n } else playAudio(node.t[playedAll].audio_uid)\n }\n\n const renderBlock = (block, index) => (\n \n
\n )\n\n return (\n \n
\n \n \n {'llm' == block.type ? 'Skipper' : 'Respondent'}\n {block.audio_uid ? (\n blobs[block.audio_uid] ? (\n <>\n playAudio(block.audio_uid)}\n />\n ) : null}\n \n Download audio\n \n \n ) : (\n \n )\n ) : null}\n
\n \n \n {!voiceBusy || playedAll != null ? (\n <>\n playAll()}\n />\n \n \n \n \n ) : null}\n\n {array.map((block, index) => renderBlock(block, index))}\n
\n )\n}\n\nAudioResponse.propTypes = {\n node: PropTypes.object,\n nodeOptions: PropTypes.object,\n toolBoxOptions: PropTypes.array,\n path: PropTypes.string,\n tags: PropTypes.array,\n responseId: PropTypes.number,\n dataId: PropTypes.string,\n survey: PropTypes.object,\n answer: PropTypes.object,\n question: PropTypes.object,\n sentiment: PropTypes.string,\n best_span_str: PropTypes.string,\n isVirtualOrXpert: PropTypes.bool,\n isVideoOrImage: PropTypes.bool,\n hasTitle: PropTypes.bool,\n isRejected: PropTypes.bool,\n onUpdateSchema: PropTypes.func,\n voiceBusy: PropTypes.bool,\n setVoiceBusy: PropTypes.func\n}\n\nAudioResponse.displayName = 'AudioResponse'\n\nexport default AudioResponse\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nimport style from '@aytm/app/stats/page/comments/comments/styles/OEItem.module.scss'\n\nconst ImageResponse = ({ node }) => {\n const { url, width, height } = node.i.original\n\n return (\n \n 
\n
\n )\n}\n\nImageResponse.propTypes = {\n node: PropTypes.object\n}\n\nImageResponse.displayName = 'ImageResponse'\n\nexport default ImageResponse\n","import React, { useContext, useMemo } from 'react'\nimport PropTypes from 'prop-types'\n\nimport { escapeRegExp } from '@aytm/lib/common/func'\nimport { showSpellcheckerDiff, highlightSearchString } from '@aytm/app/stats/page/comments/lib/utils'\nimport { OEContext } from '@aytm/app/stats/page/comments'\n\nimport style from '@aytm/app/stats/page/comments/comments/styles/OEItem.module.scss'\n\nconst TextResponse = ({ node, best_span_str }) => {\n const { searchState } = useContext(OEContext)\n\n const { request, correctionsLevel, isHighlightSearchTerms } = searchState\n\n const str = useMemo(\n () => showSpellcheckerDiff(node.t, node.te || node.t, correctionsLevel, style),\n [node.t, node.te, correctionsLevel]\n )\n\n const content = useMemo(() => {\n let content =\n null === best_span_str ||\n 2 > best_span_str?.length ||\n (0 < best_span_str?.length && new RegExp(`^${escapeRegExp(best_span_str)}([.,?!])?$`).test(node.t))\n ? str\n : str.replace(best_span_str, `${best_span_str}`)\n\n if (isHighlightSearchTerms) {\n content = highlightSearchString(content, request.query)\n }\n\n return content.replace(/\\n/gi, '')\n }, [node.t, str, best_span_str, request, isHighlightSearchTerms])\n\n return \n}\n\nTextResponse.propTypes = {\n node: PropTypes.object,\n best_span_str: PropTypes.string\n}\n\nTextResponse.displayName = 'TextResponse'\n\nexport default TextResponse\n","import React, { useContext, useState, useRef } from 'react'\nimport PropTypes from 'prop-types'\n\nimport { OEContext } from '@aytm/app/stats/page/comments'\n\nimport style from '@aytm/app/stats/page/comments/comments/styles/OEItem.module.scss'\n\nconst VideoResponse = ({ node, path, responseId, downloadUrl, isRejected }) => {\n const { searchState } = useContext(OEContext)\n\n const { isShowAllTools, isQAMode } = searchState\n\n const { thumbnail_url, mp4File } = node.v\n\n const [isShowVideo, setIsShowVideo] = useState(false)\n\n const videoRef = useRef(null)\n\n return (\n
\n {null !== downloadUrl && !isShowAllTools && !isRejected && !isQAMode ? (\n \n DOWNLOAD\n \n ) : null}\n {isShowVideo ? (\n \n ) : (\n
\n )\n}\n\nVideoResponse.propTypes = {\n node: PropTypes.object,\n path: PropTypes.string,\n responseId: PropTypes.number,\n downloadUrl: PropTypes.string,\n isRejected: PropTypes.bool\n}\n\nVideoResponse.displayName = 'VideoResponse'\n\nexport default VideoResponse\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport Popup from '@aytm/lib/rfd-ui/components/basic/popup'\nimport { imageAsset as imageAssetUrl } from '@aytm/app/survey/editor/resources/urls'\nimport {\n IMAGE_ASSET_PATH_FILTER_RESIZE_TO_LIMIT,\n IMAGE_ASSET_PATH_FILTER_RESIZE_AND_PAD\n} from '@aytm/lib/common/assets'\nimport {\n ALLOWED_HTML_TAGS,\n PIPING_MASK_REGEX,\n QUESTION_TITLE_PIPING_THUMB_HEIGHT,\n QUESTION_TITLE_PIPING_THUMB_WIDTH,\n QUESTION_TITLE_PIPING_IMAGE_MIN_WIDTH,\n QUESTION_TITLE_PIPING_IMAGE_MAX_WIDTH,\n QUESTION_TITLE_PIPING_IMAGE_MIN_HEIGHT,\n QUESTION_TITLE_PIPING_IMAGE_MAX_HEIGHT\n} from '@aytm/app/stats/page/comments/lib/constants'\nimport { removeLogicFromText } from '@aytm/app/stats/page/comments/lib/utils'\nimport style from '@aytm/app/stats/page/comments/comments/styles/OEQuestionTitle.module.scss'\nimport ImagePreview from '@aytm/app/survey/editor/components/content/assets/ImagePreview'\n\nconst OEQuestionTitle = ({ pipingMask, questionText, nodeOptions, surveyImages }) => {\n let resultText = (pipingMask && pipingMask[`___${nodeOptions.value}t`]) || questionText\n let thumbPreview = null\n\n const renderQuestionThumbnail = image => (\n setIsShowVideo(true)}>\n 
\n
\n )}\n \n (\n
\n )\n\n if (nodeOptions.image) {\n if ('string' == typeof nodeOptions.image) {\n if (surveyImages[nodeOptions.image]) {\n thumbPreview = renderQuestionThumbnail({\n original_url: surveyImages[nodeOptions.image].original.url,\n original_path: surveyImages[nodeOptions.image].original.path\n })\n }\n } else {\n thumbPreview = renderQuestionThumbnail({\n original_url: nodeOptions.image.original.url,\n original_path: nodeOptions.image.original.path\n })\n }\n }\n\n if ('string' === typeof resultText) {\n resultText.match(PIPING_MASK_REGEX)?.forEach(matchedItem => {\n const key = matchedItem.match(/\\[(.*)]/i)[1].toLowerCase()\n const mask = key && pipingMask ? pipingMask[key.toLowerCase()] : null\n if (mask) {\n if (mask.original_url) {\n resultText = resultText.replace(matchedItem, '')\n thumbPreview = renderQuestionThumbnail(mask)\n } else {\n resultText = resultText.replace(matchedItem, mask)\n }\n }\n })\n\n resultText = removeLogicFromText(resultText)\n if (ALLOWED_HTML_TAGS.test(resultText)) {\n resultText = \n }\n }\n\n return (\n <>\n {thumbPreview}\n {nodeOptions.prefix}: \n {resultText}\n \n )\n}\n\nOEQuestionTitle.propTypes = {\n pipingMask: PropTypes.object,\n questionText: PropTypes.string,\n nodeOptions: PropTypes.object,\n surveyImages: PropTypes.object\n}\n\nOEQuestionTitle.displayName = 'QuestionTitle'\n\nexport default OEQuestionTitle\n","import React, { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport style from '@aytm/app/stats/page/comments/comments/styles/Response.module.scss'\nimport NotificationPopup from '@aytm/app/stats/page/comments/comments/components/NotificationPopup'\nimport TextField from '@aytm/lib/rfd-ui/components/basic/text-field'\nimport Button from '@aytm/lib/rfd-ui/components/basic/button'\nimport classNames from 'classnames'\nimport InlineSelect from '@aytm/lib/rfd-ui/components/basic/inline-select'\nimport { REJECTED_OPTIONS } from '@aytm/app/stats/page/comments/lib/constants'\nimport { OEContext } from '@aytm/app/stats/page/comments'\nimport useResponseStatus from '@aytm/app/stats/page/comments/lib/hooks/useResponseStatus'\n\nconst getRejectsOptions = () => REJECTED_OPTIONS\n// eslint-disable-next-line react/display-name\nconst WrappedInlineSelect = React.forwardRef((props, ref) => \n \n \n \n
\n )\n }\n case Boolean(rejectReason): {\n return (\n - \n {(selectedQuestion == DEFAULT_SELECTED_QUESTION || isShowOtherResponses) && hasQuestionOrder && (\n <>\n
- \n
\n \n {searchState.isVideoResponsesMode && - \n \n \n Open response\n \n \n \n )}\n
}\n \n )}\n {onToggleTraits && (\n <>\n
}\n \n )}\n {searchState.isVideoResponsesMode && (\n <>\n
\n option.disabled}\n isValidNewOption={isValidNewOption}\n onMenuOpen={onMenuOpen}\n onMenuClose={onMenuClose}\n onKeyDown={onKeyDown}\n onChange={onChange}\n onInputChange={onInputChange}\n filterOption={filterOption}\n formatCreateLabel={formatCreateLabel}\n />\n {isShowSearchIconOverlay && (\n \n )}\n
\n )\n}\n\nSearchInput.propTypes = {\n survey: PropTypes.object,\n tagsList: PropTypes.array,\n questionsList: PropTypes.array,\n placeholder: PropTypes.string,\n disabled: PropTypes.bool\n}\n\nSearchInput.displayName = 'SearchInput'\n\nexport default SearchInput\n","/* eslint-disable react/display-name */\n\nimport React, { memo, useContext, useState, useRef, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport { changeResponseTagState } from '@aytm/app/stats/page/comments/actions'\n\nimport { OEContext } from '@aytm/app/stats/page/comments'\n\nimport Popup from '@aytm/lib/rfd-ui/components/basic/popup'\nimport ClickOutside from '@aytm/lib/rfd-ui/components/basic/click-outside'\nimport SentimentIcon from '@aytm/app/stats/page/comments/comments/components/SentimentIcon'\n\nimport style from '@aytm/app/stats/page/comments/comments/styles/Sentiments.module.scss'\n\nconst sentimentValues = [\n {\n sentiment: 'None',\n style: {\n left: '-20px',\n top: '-60px'\n },\n value: 0\n },\n {\n sentiment: 'Positive',\n style: {\n left: '-30px',\n top: '-38px'\n },\n value: 3\n },\n {\n sentiment: 'Mixed',\n style: {\n left: '-35px',\n top: '-15px'\n },\n value: 4\n },\n {\n sentiment: 'Negative',\n style: {\n left: '-30px',\n top: '8px'\n },\n value: 1\n },\n {\n sentiment: 'Neutral',\n style: {\n left: '-20px',\n top: '30px'\n },\n value: 2\n }\n]\n\nconst Sentiment = memo(({ sentiment = 'None', keyBase, responseId, path, onUpdateSchema, className }) => {\n const { commentStatusesState, dispatch, dispatchCommentStatuses } = useContext(OEContext)\n\n const sentimentStatus = commentStatusesState.sentiment[responseId] || {}\n\n const [isActive, setIsActive] = useState(false)\n const [inProgress, setInProgress] = useState(false)\n\n const [activeLabel, setActiveLabel] = useState(null)\n\n const sentimentPopupRef = useRef(null)\n const intersectionObserverRef = useRef(null)\n\n const onChangeSentiment = async value => {\n if (null === value) return\n\n setInProgress(true)\n await changeResponseTagState({\n tag: {\n tag: value.sentiment,\n type: 'sentiment',\n value: value.value,\n sentiment: value.sentiment.toUpperCase(),\n currentValue: sentiment\n },\n type: 'SENTIMENT_CHANGED',\n responseId,\n path,\n action: 'create',\n onUpdateSchema,\n dispatch,\n dispatchCommentStatuses\n })\n setInProgress(false)\n setIsActive(false)\n }\n\n const onClickOutside = () => {\n setIsActive(false)\n }\n\n useEffect(() => {\n if (isActive) {\n intersectionObserverRef.current ||= new window.IntersectionObserver(\n entries =>\n entries.forEach(entry => {\n if (entry.target != sentimentPopupRef.current) return\n !entry.isIntersecting && setIsActive(false)\n }),\n {\n rootMargin: '-200px 0px 0px 0px'\n }\n )\n intersectionObserverRef.current.observe(sentimentPopupRef.current)\n } else if (null !== intersectionObserverRef.current) intersectionObserverRef.current.disconnect()\n\n return () => {\n if (null !== intersectionObserverRef.current) intersectionObserverRef.current.disconnect()\n }\n }, [isActive])\n\n return (\n {sentimentStatus[path].message}
\n )}\n />\n ) : null}\n\n {isActive && !inProgress ? (\n {activeLabel || sentiment}
\n ) : null}\n\n {inProgress ? (\n \n {sentimentValues.map(sentimentValue => (\n setActiveLabel(sentimentValue.sentiment)}\n onMouseOut={() => {\n setActiveLabel(null)\n }}\n onClick={isActive ? () => onChangeSentiment(sentimentValue) : undefined}\n />\n ))}\n
\n \n \n
\n - \n {!isShowCorrectionsDisabled && (\n <>\n
- \n
\n \n - \n
\n \n - \n
\n \n - \n
\n \n {!isSentimentsManagementDisabled && (\n - \n
\n \n )}\n {!isAdvancedFiltersDisabled && (null === question || !['ir', 'vr', 'va'].includes(question.type)) && (\n <>\n - \n
- \n
- \n \n {totalComments ? (\n <>\n \n {totalComments}\n \n ) : null}\n\n\n {totalImageResponses ? (\n <>\n \n {totalImageResponses}\n \n ) : null}\n\n\n {totalVideoResponses ? (\n <>\n \n {totalVideoResponses}\n \n ) : null}\n\n \n
\n \n )}\n {selectedQuestion == DEFAULT_SELECTED_QUESTION && (\n <>\n
\n \n )}\n
\n
\n
/g, ' ')))),\n [questionsOptionsList]\n )\n\n const hasQuestionOrder = useMemo(() => survey && survey.options && survey.options.sessionOrder, [survey])\n const hasTraits = useMemo(() => Boolean(survey.traits != undefined && 1 < survey.traits.length), [survey.traits])\n const isEmptyScope = useMemo(\n () => !query.length && selectedQuestion == DEFAULT_SELECTED_QUESTION,\n [query, selectedQuestion]\n )\n\n const orderByOptions = useMemo(\n () =>\n ORDER_BY_OPTIONS.filter(item => {\n let visible = isSpecialsSortingDisabled ? item.get('isSimple') : true\n\n if ('sentiment' == item.get('value') && !isShowSentiments) visible = false\n\n if (\n 'similarity' == item.get('value') &&\n !questionsOptionsList.some(_item => _item.get('type') == item.get('forType'))\n )\n visible = false\n if ('similarity' == item.get('value') && 'on' != window.features.oe_sort_similarity?.status) visible = false\n\n if (\n question &&\n item.get('notForType') &&\n item.get('notForType').includes(question.type) &&\n ['sentiment', 'length'].includes(item.get('value'))\n )\n visible = false\n\n return visible\n }).map(item => {\n let newItem = item\n\n if (newItem.get('forType') && (!question || (question && question.type != newItem.get('forType')))) {\n newItem = newItem.set('disabled', true)\n }\n\n if (newItem.get('notForType') && question && newItem.get('notForType').includes(question.type)) {\n newItem = newItem.set('disabled', true)\n }\n\n if (orderBy == newItem.get('value')) {\n newItem = newItem.set('text', `${newItem.get('text')} ${'asc' == orderDirection ? '↑' : '↓'}`)\n }\n\n return newItem\n }),\n [question, questionsOptionsList, orderBy, orderDirection, isShowSentiments, isSpecialsSortingDisabled]\n )\n\n const onSelectQuestion = option => {\n const selected = option.get('value')\n dispatch({ type: 'SET_PARAM', request: { name: 'isPreserveState', value: true } })\n dispatch({\n type: 'SET_REQUEST_PARAM_SET',\n request: {\n selectedQuestion: selected,\n currentPage: 1\n }\n })\n if (onSelectedQuestionChange && 'function' == typeof onSelectedQuestionChange) {\n onSelectedQuestionChange(selected)\n }\n }\n\n const onEveryFileCallback = (percent = 0) => {\n setDownloadProgress(Math.ceil(percent))\n }\n\n const onFinishCallback = () => {\n setDownloadInProgress(false)\n setDownloadProgress(0)\n }\n\n const onToggleToolsDropdown = useCallback(\n (_, val) => {\n setIsShowToolsDropdown(val != undefined ? val : !isShowToolsDropdown)\n },\n [isShowToolsDropdown]\n )\n\n const onToggleAllTools = useCallback(\n (_, val = null) => {\n const value = null !== val ? val : !isShowAllTools\n dispatch({ type: 'SET_PARAM', request: { name: 'isShowAllTools', value } })\n },\n [dispatch, isShowAllTools]\n )\n\n const onToggleAllTraits = useCallback(() => {\n dispatch({ type: 'SET_PARAM', request: { name: 'isShowAllTraits', value: !isShowAllTraits } })\n Object.keys(showTraitsRef.current).forEach(key => {\n showTraitsRef.current[key](!isShowAllTraits)\n })\n }, [dispatch, showTraitsRef, isShowAllTraits])\n\n const onToggleQAMode = useCallback(() => {\n dispatch({ type: 'SET_QA_MODE', request: { value: !isQAMode } })\n setIsShowToolsDropdown(false)\n }, [dispatch, isQAMode])\n\n const onNewFilter = useCallback(() => {\n onToggleToolsDropdown(null, false)\n if (!query.length && selectedQuestion == DEFAULT_SELECTED_QUESTION) return\n onCreateFilter(searchToFilterLogic(query, selectedQuestion, questionsList, survey))\n }, [survey, query, selectedQuestion, questionsList, onCreateFilter, onToggleToolsDropdown])\n\n const onLoadPerPage = useCallback(\n option => {\n const newPageSize = option._root.entries[0][1]\n if (pageSize != newPageSize) {\n const newCurrentPage = Math.ceil(\n currentResponseRef?.current\n ? (pageSize * (currentPage - 1) + currentResponseRef.current?.index + 1) / newPageSize\n : 1\n )\n dispatch({\n type: 'SET_PARAMS',\n request: { value: { isProcessing: Math.ceil(totalResponses / newPageSize), isPreserveState: true } }\n })\n dispatch({\n type: 'SET_REQUEST_PARAM_SET',\n request: {\n pageSize: newPageSize,\n currentPage: newCurrentPage\n }\n })\n }\n },\n [dispatch, pageSize, currentPage, totalResponses, currentResponseRef]\n )\n\n const onSelectOrderBy = useCallback(\n option => {\n dispatch({ type: 'SET_PARAM', request: { name: 'isPreserveState', value: true } })\n const req = {\n currentPage: 1\n }\n if (option._root.entries[0][1] == orderBy) {\n req.orderDirection = 'asc' == orderDirection ? 'desc' : 'asc'\n } else {\n req.orderBy = option._root.entries[0][1]\n req.orderDirection = option._root.entries[3][1]\n }\n dispatch({\n type: 'SET_REQUEST_PARAM_SET',\n request: req\n })\n },\n [dispatch, orderBy, orderDirection]\n )\n\n const onDownloadAllClick = useCallback(() => {\n setDownloadInProgress(true)\n const filename = `AYTM-Survey-${window.surveyId}-Video-Response.zip`\n fetchData({\n customParams: {\n pageSize: totalVideoResponses,\n currentPage: 1\n },\n customFetchDataCallback: ({ cs }) => {\n const files = cs.reduce((acc, response) => {\n Object.keys(response.answer).forEach(k => {\n if (response.answer[k].v && response.answer[k].v.mp4File) {\n acc.push({\n filename: `AYTM-Survey-${window.surveyId}-Video-Response-${response.response.uid}_${questionOldIdToId(\n k\n )}.mp4`,\n url: response.answer[k].v.mp4File\n })\n }\n })\n return acc\n }, [])\n downloadAndPackImages(filename, files, onEveryFileCallback, onFinishCallback)\n }\n })\n }, [totalVideoResponses, fetchData])\n\n useEffect(() => {\n if (\n isLoading ||\n isProcessing ||\n (dndDroppedTag && 'manual' == dndDroppedTag.type && !tagsList.some(tag => tag.tag == dndDroppedTag.tag))\n ) {\n setDndDroppedTag(null)\n }\n }, [tagsList, dndDroppedTag, isLoading, isProcessing])\n\n useEffect(() => {\n if ('codebook' == isShowDNDDropzone && dndTargetCodebook && !isQAMode) {\n dndTargetCodebook.connect(dndTargetCodebookRef.current)\n }\n if ('codebook-guided' == isShowDNDDropzone && dndTargetCodebook && !isQAMode) {\n dndTargetCodebook.connect(dndTargetCodebookRef.current)\n }\n\n return () => {\n if (dndTargetCodebook) dndTargetCodebook.disconnect()\n }\n }, [dndTargetCodebook, isShowDNDDropzone, isQAMode])\n\n useEffect(() => {\n if ('tag' == isShowDNDDropzone && dndTargetTag && !isQAMode) {\n dndTargetTag.connect(dndTargetTagRef.current)\n }\n\n return () => {\n if (dndTargetTag) dndTargetTag.disconnect()\n }\n }, [dndTargetTag, isShowDNDDropzone, isQAMode])\n\n useEventListener('codingPanelOpened', () => {\n onToggleAllTools(null, true)\n })\n\n useEventListener('assignMultiple', event => {\n setDndDroppedTag(event.detail || null)\n })\n\n useEventListener('assignMultipleCancel', () => {\n setDndDroppedTag(null)\n })\n\n useEventListener('dndStartCodebook', event => {\n if (!isTagsManagementDisabled && !isQAMode) {\n setIsShowDNDDropzone(event.detail.guided ? 'codebook-guided' : 'codebook')\n }\n })\n\n useEventListener('dndEndCodebook', () => {\n setIsShowDNDDropzone(false)\n })\n\n useEventListener('dndStartTag', () => {\n if (!isTagsManagementDisabled && !isQAMode) {\n setIsShowDNDDropzone('tag')\n }\n })\n\n useEventListener('dndEndTag', () => {\n setIsShowDNDDropzone(false)\n })\n\n const renderHelpContent = useCallback(\n () => (\n
\n {orderByOptions.map(opt => (\n
\n ),\n [orderByOptions]\n )\n\n return (\n <>\n \n \n {'id' == opt.get('value') ? opt.get('value').toUpperCase() : opt.get('value')}\n {' '}\n - {opt.get('description')}\n
\n ))}\n\n
\n )}\n {'codebook-guided' == isShowDNDDropzone && !isQAMode && (\n \n Drag the codebook here\n
\n to Skipper - apply ...\n
\n \n to Skipper - apply ...\n
\n
\n )}\n {'tag' == isShowDNDDropzone && !isQAMode && (\n \n Drag the codebook here\n
\n to Skipper - finalize and apply ...\n
\n \n to Skipper - finalize and apply ...\n
\n
\n )}\n {dndDroppedTag && !isQAMode && (\n \n Drag the tag here\n
\n to apply to multiple comments ...\n
\n \n to apply to multiple comments ...\n
\n
\n )}\n \n {!error ? (\n <>\n
\n {!loading && !error ? (\n \n
\n ) : (\n \n All comments\n
on this page:\n (!loading && commentsOnPageCount ? onTagApply(true) : {})}\n />\n
\n on this page:\n
\n All comments\n
found:\n (!loading && totalCommentsCount ? onTagApply(false) : {})}\n />\n
\n found:\n
\n
\n \n {loading ? (\n \n ) : (\n
\n )}\n {error}
\n )}\n \n \n \n
\n \n
\n \n \n \n
\n )}\n \n {!isVideoResponsesMode && (!isQAMode || (isQAMode && !isOnePerPage)) ? (\n <>\n \n \n \n \n ) : null}\n
\n {!isQAMode && (\n <>\n {(!isTagsManagementDisabled ||\n (isSurveyGuest &&\n window.features.oe_tags_management &&\n 'live' == window.features.oe_tags_management?.status)) && (\n \n
\n \n {isQAMode && (\n \n
\n \n {!isQAMode && isVideoResponsesMode ? (\n \n {downloadInProgress ? `Downloading ${downloadProgress}%` : 'DOWNLOAD'}\n \n ) : null}\n {!isQAMode ? (\n <>\n
\n \n {totalResponses <= 10 ? (\n <>{totalResponses} found\n ) : (\n \n {totalResponses < pageSize ? (\n <>{totalResponses} found\n ) : (\n <>\n {pageSize}/{totalResponses}\n \n )}\n \n )}\n
\n \n
\n \n ) : (\n \n
\n )}\n QA MODE
\n \n EXIT\n \n \n \n \n (Shift+1 to approve{isOnePerPage ? ', Shift+3 to reject' : ''})\n \n
\n \n
\n \n )}\n \n )\n}\n\nSurveyHeaderComments.propTypes = {\n survey: PropTypes.object,\n readOnly: PropTypes.bool,\n isHighlightSearchTerms: PropTypes.bool,\n isAdvancedFiltersDisabled: PropTypes.bool,\n isSpecialsSortingDisabled: PropTypes.bool,\n pageData: PropTypes.array,\n loadRejectedCS: PropTypes.string,\n questionsOptionsList: PropTypes.object,\n showTraitsRef: PropTypes.object,\n responseOrderRef: PropTypes.object,\n currentResponseRef: PropTypes.object,\n setIsHighlightSearchTerms: PropTypes.func,\n onCreateFilter: PropTypes.func,\n onSelectedQuestionChange: PropTypes.func,\n onPageChange: PropTypes.func,\n onUpdateSchema: PropTypes.func,\n fetchData: PropTypes.func\n}\n\nSurveyHeaderComments.displayName = 'SurveyHeader'\n\nexport default SurveyHeaderComments\n\nADND().connect()\n","/* eslint-disable react/prop-types, react/display-name */\n\nimport React, { memo, useContext, useState, useMemo, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport CreatableSelect from 'react-select/creatable'\n\nimport { components } from 'react-select'\n\nimport { encodeText, decodeText } from '@aytm/app/stats/lib/helpers'\n\nimport { FORBIDDEN_SYMBOLS } from '@aytm/app/stats/page/sidebar/coding//lib/constants'\nimport { HIDDEN_TAG_TYPES, TAG_MAX_LENGTH, TAG_MIN_LENGTH } from '@aytm/app/stats/page/comments/lib/constants'\n\nimport { OEContext } from '@aytm/app/stats/page/comments'\n\nimport Popup from '@aytm/lib/rfd-ui/components/basic/popup'\n\nimport style from '@aytm/app/stats/page/comments/comments/styles/ToolBox.module.scss'\n\nconst { MultiValue, Option } = components\n\nconst OPTION_REG = new RegExp(`^[^${FORBIDDEN_SYMBOLS}]*$`, 'i')\n\nconst rsStyles = {\n option: (provided, state) => {\n return { ...provided, isDisabled: 'codebook' == state.data?.type }\n },\n multiValue: (provided, state) => {\n return { ...provided, backgroundColor: state.styles.backgroundColor }\n }\n}\n\nconst rsComponents = {\n DropdownIndicator: null,\n MultiValue: ({ children, data, ...props }) => (\n \n {0 < totalResponses ? (\n getPerPageOptions(true, loadRejectedCS)}\n value={pageSize}\n disabled={readOnly}\n onSelect={onLoadPerPage}\n >\n {totalResponses < pageSize ? <>{totalResponses} found : <>Show {pageSize} per page}\n \n ) : null}\n
\n \n {qaCounter} done / {qaTotal || 0} left\n
\n \n \n \n \n
\n ),\n Option: ({ children, data, ...props }) => (\n \n )\n}\n\nconst rsFormatGroupLabel = data => (\n \n)\n\nconst rsFormatCreateLabel = value => `Create: ${encodeText(value, false)}`\n\nconst ToolBox = memo(\n ({ tags, path, dataId, responseId, downloadUrl, toolBoxOptions, isDisabledToolBox, onAddTag, onRemoveTag }) => {\n const { searchState, commentStatusesState } = useContext(OEContext)\n\n const { tagsList, isTagsManagementDisabled } = searchState\n\n const tagsStatus = commentStatusesState.tags[responseId] || {}\n\n const [isDisabled, setIsDisabled] = useState(isDisabledToolBox || false)\n\n const inputValue = useMemo(\n () =>\n tags\n .filter(tagItem => !['junk', 'sentiment', HIDDEN_TAG_TYPES].includes(tagItem.type))\n .map(tagItem => tagsList.find(tag => tag.tag == tagItem.tag))\n .filter(tagItem => tagItem != undefined && null !== tagItem),\n [tags, tagsList]\n )\n\n const filterOption = useCallback(\n (option, searchText) => {\n const text = searchText.trim().toLowerCase()\n\n if (0 < text.length) {\n return (\n option.data.__isNew__ ||\n option.data.label.toLowerCase().includes(encodeText(text, false)) ||\n ('codebook' == option.data.type &&\n option.data.tags.some(tag => tag.toLowerCase().includes(encodeText(text, false))))\n )\n } else {\n const { label, value } = option\n return !inputValue.some(\n v =>\n v.label == label &&\n ('tag' == v.type\n ? (null !== v.codebook ? `${v.codebook}: ${v.value}` : v.value) == value\n : v.value == value)\n )\n }\n },\n [inputValue]\n )\n\n const isValidNewOption = useCallback(\n value => {\n const _value = value.trim()\n return (\n OPTION_REG.test(_value) &&\n _value.length >= TAG_MIN_LENGTH &&\n _value.length <= TAG_MAX_LENGTH &&\n !toolBoxOptions.some(group =>\n group.options.some(option => _value.toLowerCase() == option.label.toLowerCase())\n )\n )\n },\n [toolBoxOptions]\n )\n\n const onChange = async (newValue, actionMeta) => {\n switch (actionMeta.action) {\n case 'pop-value':\n case 'remove-value': {\n if (!Object.hasOwn(actionMeta, 'removedValue')) return\n\n const tag = {\n tag: actionMeta.removedValue.value,\n type: actionMeta.removedValue.type,\n label: actionMeta.removedValue.label,\n codebook: actionMeta.removedValue.codebook\n }\n\n setIsDisabled(true)\n await onRemoveTag(tag, responseId, path)\n setIsDisabled(false)\n\n break\n }\n case 'select-option':\n case 'create-option':\n default: {\n if (!Object.hasOwn(actionMeta, 'option') && !isValidNewOption(newValue[newValue.length - 1].value)) return\n\n const tag = Object.hasOwn(actionMeta, 'option')\n ? {\n tag: actionMeta.option.value,\n type: actionMeta.option.type,\n label: actionMeta.option.label,\n codebook: actionMeta.option.codebook\n }\n : {\n tag: encodeText(newValue[newValue.length - 1].value, false).trim(),\n type: 'manual',\n label: encodeText(newValue[newValue.length - 1].label, false).trim(),\n codebook: null\n }\n\n if (onAddTag && 'function' == typeof onAddTag) {\n setIsDisabled(true)\n await onAddTag(tag, responseId, path, 'create')\n setIsDisabled(false)\n }\n\n break\n }\n }\n }\n\n useEffect(() => {\n setIsDisabled(isDisabledToolBox)\n }, [isDisabledToolBox])\n\n return (\n \n
\n )\n }\n)\n\nToolBox.propTypes = {\n tags: PropTypes.array,\n path: PropTypes.string,\n dataId: PropTypes.string,\n responseId: PropTypes.number,\n downloadUrl: PropTypes.string,\n toolBoxOptions: PropTypes.array,\n isDisabledToolBox: PropTypes.bool,\n onAddTag: PropTypes.func,\n onRemoveTag: PropTypes.func\n}\n\nToolBox.displayName = 'ToolBox'\n\nexport default ToolBox\n","import React, { useMemo } from 'react'\nimport PropTypes from 'prop-types'\nimport style from '@aytm/app/stats/page/comments/comments/styles/Traits.module.scss'\n\nconst Traits = ({ response, survey }) => {\n const { trait } = response\n const { traits } = survey\n const { uid: responseId } = response.response\n\n const traitsOrder = useMemo(\n () =>\n traits\n .map(trait => ('country' == trait.id ? 'geo' : trait.id))\n .filter(traitName => !['county', 'state'].includes(traitName)),\n [traits]\n )\n\n const renderTraitItem = traitName => {\n const result = []\n const traitValue = trait[traitName]\n\n if (traitValue != undefined) {\n switch (traitName) {\n case 'age': {\n // ignore age if age_range trait exists\n if (!traits.some(t => 'age_range' == t?.id)) {\n result.push({\n l: `${trait[traitName]} Age`,\n r: 'at the time of response'\n })\n }\n break\n }\n case 'geo': {\n Object.keys(trait[traitName]).forEach(geoType => {\n switch (geoType) {\n case 'country': {\n result.push({\n l: trait[traitName][geoType].id,\n r: geoType\n })\n break\n }\n case 'county':\n case 'state': {\n result.push({\n l: trait[traitName][geoType].text,\n r: geoType\n })\n break\n }\n default:\n break\n }\n })\n break\n }\n default: {\n const _trait = traits.find(t => traitName == t?.id)\n if (_trait) {\n const traitValueArr = _trait.values.reduce((acc, item) => {\n if (Array.isArray(traitValue)) {\n if (traitValue.includes(item.id)) {\n acc.push(item.name)\n }\n } else {\n if (traitValue == item.id) {\n acc.push(item.name)\n }\n }\n return acc\n }, [])\n\n result.push({\n l: traitValueArr.join(', '),\n r: _trait.title\n })\n }\n break\n }\n }\n }\n\n return result.map((item, index) => (\n \n {null !== downloadUrl ? (\n \n DOWNLOAD\n \n ) : null}\n
\n {tagsStatus[path] ? (\n {tagsStatus[path].message}
}\n />\n ) : null}\n - {traitsOrder.map(traitName => renderTraitItem(traitName))}
\n {errors.length ? (\n
\n )\n}\n\nCommentsOpenEnded.propTypes = {\n specialMode: PropTypes.string,\n surveyData: PropTypes.object,\n reportId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n apiKey: PropTypes.object,\n statActionsUrl: PropTypes.string,\n questionId: PropTypes.string,\n loadRejectedCS: PropTypes.string,\n sentimentOptions: PropTypes.object,\n reportParams: PropTypes.object,\n reportVirtual: PropTypes.object,\n reportSchema: PropTypes.array,\n reports: PropTypes.array,\n windowUID: PropTypes.string,\n isShowHiddenFilters: PropTypes.bool,\n isAdvancedFiltersDisabled: PropTypes.bool,\n isQAModeDisabled: PropTypes.bool,\n isSpecialsSortingDisabled: PropTypes.bool,\n isAiAssistantsOECodingDisabled: PropTypes.bool,\n onBeforeFetch: PropTypes.func,\n onFetch: PropTypes.func,\n onTagsFetch: PropTypes.func,\n onNoSchema: PropTypes.func,\n onInvalidKey: PropTypes.func,\n onCreateFilter: PropTypes.func,\n onUpdateParams: PropTypes.func,\n onUpdateSchema: PropTypes.func,\n onQuestionListChange: PropTypes.func,\n onSelectedQuestionChange: PropTypes.func,\n onQAModeChange: PropTypes.func\n}\n\nCommentsOpenEnded.displayName = 'CommentsOpenEnded'\n\nexport default CommentsOpenEnded\n","import React, { memo, useContext, useMemo } from 'react'\nimport PropTypes from 'prop-types'\nimport ImageResponseItem from '@aytm/app/stats/page/comments/image-responses/ImageResponseItem'\nimport {\n pathQuestionIdToOld,\n questionByPath,\n questionOldIdToId,\n responseTagsByPath\n} from '@aytm/app/stats/page/comments/lib/utils'\nimport { OEContext } from '@aytm/app/stats/page/comments/index'\nimport { DEFAULT_SELECTED_QUESTION } from '@aytm/app/stats/page/comments/lib/constants'\n\nconst Response = memo(\n ({ survey, surveyImages, reportVirtual, reportSchema, response, onUpdateParams, isShowPopup, setIsShowPopup }) => {\n const { searchState, commentStatusesState } = useContext(OEContext)\n const { request, isResponseOrder } = searchState\n const { selectedQuestion } = request\n const { uid: responseId } = response.response\n const rejectStatus = commentStatusesState.reject[responseId]\n const hasQuestionOrder = Boolean(response.session && response.session.order)\n const isRejected = rejectStatus && 'true' == rejectStatus\n\n const questionsKeys = useMemo(() => {\n const answers =\n hasQuestionOrder && isResponseOrder\n ? response.session.order.filter(keyName => {\n const newKeyName = questionOldIdToId(keyName, survey)\n return (reportSchema.length\n ? reportSchema.some(schemaKey => newKeyName == questionOldIdToId(schemaKey, survey))\n : true) && selectedQuestion !== DEFAULT_SELECTED_QUESTION\n ? 0 == selectedQuestion.indexOf(newKeyName)\n : true\n })\n : (reportSchema.length ? reportSchema : Object.keys(response.answer)).reduce((acc, cur) => {\n const newKeyName = questionOldIdToId(cur, survey)\n if (\n selectedQuestion == DEFAULT_SELECTED_QUESTION ||\n (selectedQuestion !== DEFAULT_SELECTED_QUESTION && 0 == selectedQuestion.indexOf(newKeyName))\n )\n response.answer[cur] && acc.push(cur)\n return acc\n }, [])\n return answers.map(keyName => {\n return {\n keyName,\n path: questionOldIdToId(keyName, survey),\n question: questionByPath(keyName, survey, reportVirtual)\n }\n })\n }, [response, isResponseOrder, hasQuestionOrder, reportSchema, reportVirtual, selectedQuestion, survey])\n\n return questionsKeys.length ? (\n <>\n {questionsKeys.map(\n ({ keyName, path, question }) =>\n question && (\n \n
\n ) : (\n <>\n Error
\n {errors.map(error => (\n{error.message}
\n ))}\n \n \n (currentResponseRef.current = responseData)}\n onUpdateSchema={_onTagsUpdateSchema}\n onPageChange={onPageChange}\n onCloseNotification={onCloseNotification}\n />\n
\n {document.querySelector('#coding-container') &&\n createPortal(\n \n {!isError && (\n \n \n \n )}\n {isRejected && response.rejection ? (\n (!isError ? setIsShowPopup(`${responseId}_${path}`) : null)}\n onLoad={onLoadImage}\n />\n setIsShowPopup(null)}\n closeOnClick={true}\n />\n\n
\n )\n }\n\n return renderQuestionWithAnswers(answer, path)\n }\n)\n\nImageResponseItem.propTypes = {\n dataId: PropTypes.string,\n responseId: PropTypes.number,\n path: PropTypes.string,\n question: PropTypes.object,\n survey: PropTypes.object,\n surveyImages: PropTypes.object,\n isRejected: PropTypes.bool,\n response: PropTypes.object,\n pipingMask: PropTypes.object,\n answer: PropTypes.object,\n tags: PropTypes.array,\n isShowPopup: PropTypes.string,\n setIsShowPopup: PropTypes.func,\n onUpdateParams: PropTypes.func\n}\n\nImageResponseItem.displayName = 'ImageResponseItem'\n\nexport default ImageResponseItem\n","import React, { memo, useCallback, useContext, useEffect, useRef, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport { OEContext } from '@aytm/app/stats/page/comments'\nimport ImageResponse from '@aytm/app/stats/page/comments/image-responses/ImageResponse'\nimport { range } from '@aytm/app/stats/page/comments/lib/utils'\nimport Button from '@aytm/lib/rfd-ui/components/basic/button'\nimport scrollToElement from 'scroll-to-element'\nimport { DEFAULT_SELECTED_QUESTION } from '@aytm/app/stats/page/comments/lib/constants'\n\nimport style from '@aytm/app/stats/page/comments/styles/index.module.scss'\n\nconst PageDataImageResponses = memo(\n ({\n reportId,\n surveyImages,\n responsesOptions,\n showTraitsRef,\n responseOrderRef,\n isFilterDuplicates,\n isShowHiddenFilters,\n currentResponse,\n onCloseNotification,\n onChangeFilterDuplicates,\n onUpdateParams,\n onPageChange\n }) => {\n const { searchState } = useContext(OEContext)\n\n const { request, totalPages, isLoading, isProcessing, isAdmin } = searchState\n const { currentPage, selectedQuestion } = request\n\n const [isShowPopup, setIsShowPopup] = useState(null)\n\n const searchStateRef = useRef()\n searchStateRef.current = searchState\n\n const currentResponseRef = useRef()\n currentResponseRef.current = currentResponse\n\n const onKeyDownHandler = useCallback(event => {\n if (27 == event.keyCode) {\n setIsShowPopup(null)\n }\n }, [])\n\n useEffect(() => {\n window.addEventListener('keydown', onKeyDownHandler)\n return () => {\n window.removeEventListener('keydown', onKeyDownHandler)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n useEffect(() => {\n if (!isLoading) return\n\n scrollToElement('#header', {\n offset: 0,\n align: 'top',\n duration: 250\n })\n }, [isLoading])\n\n return (\n <>\n \n by {response.rejection.rejected_by},{' '}\n {moment(new Date(response.rejection.rejected_at)).format('MM/DD/YYYY [at] hh:mm A')}\n
\n ) : null}\n \n
\n \n {!selectedQuestion || (selectedQuestion && selectedQuestion == DEFAULT_SELECTED_QUESTION) ? (\n {path}\n ) : null}\n Open response\n
\n {responseId}
\n \n {responsesOptions.pageData && 0 < responsesOptions.pageData.length ? (\n responsesOptions.pageData.map(item => (\n \n \n {range(0, 80).map(id => (\n \n ))}\n \n
\n )}\n \n \n \n \n {!isLoading && !isProcessing ? (\n <>\n {!isLoading && <>No image responses found}
\n )}\n {(isLoading || isProcessing) && (\n \n
\n \n ) : null}\n \n {currentPage < totalPages ? (\n
\n \n {currentPage > 1 ? (\n
\n \n {isAdmin &&\n !isLoading &&\n !isProcessing &&\n selectedQuestion &&\n selectedQuestion !== DEFAULT_SELECTED_QUESTION ? (\n
\n \n )\n }\n)\n\nPageDataImageResponses.propTypes = {\n reportId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n survey: PropTypes.object,\n surveyImages: PropTypes.object,\n responsesOptions: PropTypes.object,\n showTraitsRef: PropTypes.object,\n responseOrderRef: PropTypes.object,\n currentResponse: PropTypes.object,\n isShowHiddenFilters: PropTypes.bool,\n isFilterDuplicates: PropTypes.bool,\n setCurrentResponse: PropTypes.func,\n onCloseNotification: PropTypes.func,\n onUpdateParams: PropTypes.func,\n onPageChange: PropTypes.func,\n onChangeFilterDuplicates: PropTypes.func\n}\n\nPageDataImageResponses.displayName = 'PageDataImageResponses'\n\nexport default PageDataImageResponses\n","import React, { useContext, useCallback, useMemo, useState } from 'react'\nimport PropTypes from 'prop-types'\n\nimport style from '@aytm/app/stats/page/comments/styles/index.module.scss'\nimport classNames from 'classnames'\nimport { CSS_SUPPORTS_STICKY } from '@aytm/lib/common/func'\n\n//components\nimport Popup from '@aytm/lib/rfd-ui/components/basic/popup'\nimport Select from '@aytm/lib/rfd-ui/components/basic/select'\nimport InlineSelect from '@aytm/lib/rfd-ui/components/basic/inline-select'\nimport Pagination from '@aytm/lib/rfd-ui/components/advanced/pagination'\nimport { questionOldIdToId, removeLogicFromText } from '@aytm/app/stats/page/comments/lib/utils'\nimport {\n DEFAULT_SELECTED_QUESTION,\n IMAGE_RESPONSES_PER_PAGE_OPTIONS,\n ORDER_BY_OPTIONS_IMAGES\n} from '@aytm/app/stats/page/comments/lib/constants'\nimport { OEContext } from '@aytm/app/stats/page/comments'\nimport downloadAndPackImages from '@aytm/app/stats/page/comments/lib/download/invoke'\nconst getPerPageOptions = () => IMAGE_RESPONSES_PER_PAGE_OPTIONS\n\nconst SurveyHeaderComments = ({\n readOnly,\n questionsOptionsList,\n currentResponse,\n onSelectedQuestionChange,\n onPageChange,\n fetchData\n}) => {\n const { searchState, dispatch } = useContext(OEContext)\n\n const { request, totalPages, totalImageResponses, isQAMode, isLoading, isProcessing } = searchState\n const { selectedQuestion, pageSize, currentPage, orderBy, orderDirection } = request\n\n const [downloadInProgress, setDownloadInProgress] = useState(false)\n const [downloadProgress, setDownloadProgress] = useState(0)\n\n const question = useMemo(\n () => questionsOptionsList.toJS().find(q => q.value == selectedQuestion) || null,\n [questionsOptionsList, selectedQuestion]\n )\n const questionsOptionsListSelect = useMemo(\n () =>\n questionsOptionsList\n .filter(item => !item.get('isOptionHidden'))\n .map(item => item.set('text', removeLogicFromText(item.get('text').replace(/\n {!isFilterDuplicates ? 'Show' : 'Hide'} duplicates\n
\n ) : null}\n /g, ' ')))),\n [questionsOptionsList]\n )\n\n const orderByOptions = useMemo(\n () =>\n ORDER_BY_OPTIONS_IMAGES.filter(item =>\n 'similarity' !== item.get('value')\n ? true\n : window.features.oe_sort_similarity && 'on' == window.features.oe_sort_similarity?.status\n ).map(item => {\n let newItem = item\n // disable for specific question type\n if (newItem.get('forType') && (!question || (question && question.type !== item.get('forType')))) {\n newItem = newItem.set('disabled', true)\n }\n if (newItem.get('value') == orderBy) {\n newItem = newItem.set('text', `${newItem.get('text')} ${'asc' == orderDirection ? '↑' : '↓'}`)\n }\n return newItem\n }),\n [orderDirection, orderBy, question]\n )\n\n const onSelectOrderBy = option => {\n dispatch({ type: 'SET_PARAM', request: { name: 'isPreserveState', value: true } })\n if (option._root.entries[0][1] == orderBy) {\n dispatch({\n type: 'SET_REQUEST_PARAM',\n request: {\n name: 'orderDirection',\n value: 'asc' == orderDirection ? 'desc' : 'asc'\n }\n })\n } else {\n dispatch({\n type: 'SET_REQUEST_PARAM_SET',\n request: {\n orderBy: option._root.entries[0][1],\n orderDirection: option._root.entries[3][1]\n }\n })\n }\n }\n\n const onSelectQuestion = option => {\n const selected = option.get('value')\n dispatch({ type: 'SET_PARAM', request: { name: 'isPreserveState', value: true } })\n dispatch({\n type: 'SET_REQUEST_PARAM_SET',\n request: {\n selectedQuestion: selected,\n currentPage: 1\n }\n })\n if (onSelectedQuestionChange && 'function' == typeof onSelectedQuestionChange) {\n onSelectedQuestionChange(selected)\n }\n }\n\n const onLoadPerPage = option => {\n const newPageSize = option._root.entries[0][1]\n if (pageSize !== newPageSize) {\n const newCurrentPage = Math.ceil(\n null !== currentResponse ? (pageSize * (currentPage - 1) + currentResponse.index + 1) / newPageSize : 1\n )\n dispatch({\n type: 'SET_PARAMS',\n request: { value: { isProcessing: Math.ceil(totalImageResponses / newPageSize), isPreserveState: true } }\n })\n dispatch({\n type: 'SET_REQUEST_PARAM_SET',\n request: {\n pageSize: newPageSize,\n currentPage: newCurrentPage\n }\n })\n }\n }\n\n const onEveryFileCallback = (percent = 0) => {\n setDownloadProgress(Math.ceil(percent))\n }\n\n const onFinishCallback = () => {\n setDownloadInProgress(false)\n setDownloadProgress(0)\n }\n\n const onDownloadAllClick = () => {\n setDownloadInProgress(true)\n const filename = `AYTM-Survey-${window.surveyId}-Image-Response-${\n selectedQuestion !== DEFAULT_SELECTED_QUESTION ? selectedQuestion : 'ALL'\n }.zip`\n fetchData({\n customParams: {\n pageSize: totalImageResponses,\n currentPage: 1\n },\n customFetchDataCallback: ({ cs }) => {\n const files = cs.reduce((acc, response) => {\n Object.keys(response.answer).forEach(k => {\n if (response.answer[k].i && response.answer[k].i.original) {\n acc.push({\n filename: `AYTM-Survey-${window.surveyId}-Image-Response-${response.response.uid}_${questionOldIdToId(\n k\n )}.jpg`,\n url: response.answer[k].i.original.url\n })\n }\n })\n return acc\n }, [])\n downloadAndPackImages(filename, files, onEveryFileCallback, onFinishCallback)\n }\n })\n }\n\n const renderHelpContent = useCallback(\n () => (\n
\n {orderByOptions.map(opt => (\n
\n ),\n [orderByOptions]\n )\n\n return (\n <>\n \n \n {'id' == opt.get('value') ? opt.get('value').toUpperCase() : opt.get('value')}\n {' '}\n - {opt.get('description')}\n
\n ))}\n\n
\n \n \n )\n}\n\nSurveyHeaderComments.propTypes = {\n readOnly: PropTypes.bool,\n isHighlightSearchTerms: PropTypes.bool,\n pageData: PropTypes.array,\n questionsOptionsList: PropTypes.object,\n currentResponse: PropTypes.object,\n setIsHighlightSearchTerms: PropTypes.func,\n onSelectedQuestionChange: PropTypes.func,\n onPageChange: PropTypes.func,\n onUpdateSchema: PropTypes.func,\n fetchData: PropTypes.func\n}\n\nSurveyHeaderComments.displayName = 'SurveyHeader'\n\nexport default SurveyHeaderComments\n","import { useRef, useEffect } from 'react'\nimport { convertTraits } from '@aytm/app/stats/lib/traits'\nimport { getRejectsAndKudos } from '@aytm/app/stats/page/comments/lib/utils'\nimport { AbortController as _abortControllerPolyfill } from 'abortcontroller-polyfill/dist/cjs-ponyfill'\nimport { DEFAULT_FETCH_TIMEOUT, FETCH_TIMEOUT_STEP } from '@aytm/app/stats/page/comments/lib/constants'\nimport { fetchSearchResults } from '@aytm/app/stats/page/comments/apiCalls'\n\n/* compat/compat disabled because polyfill is used */\n// eslint-disable-next-line compat/compat\nconst AbortController = window.AbortController || _abortControllerPolyfill\n\nlet fetchTimeout = DEFAULT_FETCH_TIMEOUT\nlet fetchDebounceTimeout = 0\nlet fetchTimer = null\n\nconst useFetchDataImageResponses = ({\n apiKey,\n dispatch,\n dispatchCommentStatuses,\n searchStateRef,\n surveyData,\n setSurvey,\n setSurveyImages,\n specialMode,\n onNoSchema,\n onBeforeFetch,\n onFetch,\n onInvalidKey\n}) => {\n const abortController = useRef(null)\n\n const { isPreserveState, request } = searchStateRef.current\n const { query, selectedQuestion, pageSize, orderBy, orderDirection, currentPage } = request\n\n const fetchDataCallback = async data => {\n const { cs } = data\n\n dispatch({ type: 'SET_PARAM', request: { name: 'isProcessing', value: true } })\n\n // eslint-disable-next-line unicorn/consistent-destructuring\n const _survey = data.survey || surveyData.survey || {}\n\n const assets = data.assets || surveyData.survey.assets || {}\n const traits = convertTraits(_survey)\n\n let codeBooks = _survey.codeBooks\n if (!Array.isArray(codeBooks)) {\n codeBooks = Object.keys(codeBooks || {}).reduce(\n (acc, cur) => acc.concat(codeBooks[cur].map(codebook => Object.assign({ type: cur }, codebook))),\n []\n )\n }\n\n await setSurvey(\n Object.assign({}, _survey, {\n assets,\n traits,\n codeBooks\n })\n )\n\n if (surveyData.images) setSurveyImages(surveyData.images)\n\n dispatch({ type: 'SEARCH_RESULTS', data: { data, pageSize, specialMode } })\n dispatchCommentStatuses({\n type: 'BATCH_DATA',\n data: { batchData: getRejectsAndKudos(cs), isPreserveState }\n })\n dispatch({ type: 'SET_PARAM', request: { name: 'isPreserveState', value: false } })\n\n fetchTimeout = DEFAULT_FETCH_TIMEOUT\n }\n\n const fetchData = async (\n { includeSchema = false, customParams = {}, customFetchDataCallback = null } = {},\n fetchDataComplete = null\n ) => {\n try {\n if (null !== abortController.current) {\n abortController.current.abort()\n abortController.current = null\n }\n\n abortController.current = new AbortController()\n\n const { signal } = abortController.current\n const data = await fetchSearchResults({\n query,\n selectedQuestion,\n currentPage,\n pageSize,\n orderBy,\n orderDirection,\n flattenAnswers: true,\n includeSchema: includeSchema || (!customFetchDataCallback && surveyData.survey == undefined),\n signal,\n ...customParams\n })\n switch (data.status) {\n case 'OK': {\n dispatch({ type: 'SET_PARAM', request: { name: 'isLoading', value: false } })\n\n if (null !== customFetchDataCallback) {\n customFetchDataCallback(data)\n } else {\n if (\n window.shareKey == undefined &&\n data.survey != undefined &&\n data.survey.target_market.quotas == undefined\n ) {\n onNoSchema(_data => fetchDataCallback(_data), data)\n } else {\n fetchDataCallback(data)\n if (onFetch && 'function' == typeof onFetch) {\n onFetch(data)\n }\n }\n if (fetchDataComplete && 'function' == typeof fetchDataComplete) {\n fetchDataComplete()\n }\n }\n break\n }\n case 'RUNNING': {\n fetchTimeout += FETCH_TIMEOUT_STEP\n fetchTimer = setTimeout(() => {\n fetchTimer = null\n fetchData({ includeSchema, customParams, customFetchDataCallback }, fetchDataComplete)\n }, fetchTimeout)\n break\n }\n case 'NO SCHEMA': {\n if (onNoSchema && 'function' == typeof onNoSchema) {\n onNoSchema()\n }\n if (fetchDataComplete && 'function' == typeof fetchDataComplete) {\n fetchDataComplete()\n }\n break\n }\n case 'INVALID KEY': {\n if (onInvalidKey && 'function' == typeof onInvalidKey) {\n onInvalidKey(fetchDataComplete)\n }\n break\n }\n default: {\n dispatch({ type: 'FAILURE', error: { name: 'CustomError', message: 'Something happen' } })\n }\n }\n fetchDebounceTimeout = 0\n\n abortController.current = null\n } catch (error) {\n if (!error.name || (error.name && 'AbortError' !== error.name)) {\n dispatch({ type: 'FAILURE', error })\n }\n\n fetchTimeout = DEFAULT_FETCH_TIMEOUT\n fetchDebounceTimeout = 0\n }\n }\n\n const fetchDataDelay = (force = false, fetchDataComplete) => {\n dispatch({ type: 'SEARCH_INIT' })\n onBeforeFetch && 'function' == typeof onBeforeFetch && onBeforeFetch()\n\n if (null !== fetchTimer) {\n clearTimeout(fetchTimer)\n fetchTimer = null\n }\n\n if (null !== abortController.current) {\n abortController.current.abort()\n abortController.current = null\n }\n\n const callback = () => {\n fetchTimer = null\n\n if (null === apiKey) {\n // fetchDataCallback(getDefaultData())\n return\n }\n\n fetchData({ includeSchema: force }, fetchDataComplete)\n }\n\n if (0 < fetchDebounceTimeout) {\n fetchTimer = setTimeout(callback, fetchDebounceTimeout)\n } else callback()\n }\n\n // eslint-disable-next-line unicorn/consistent-function-scoping\n const fetchDataDestroy = () => {\n fetchTimeout = DEFAULT_FETCH_TIMEOUT\n fetchDebounceTimeout = 1000\n\n if (null !== fetchTimer) {\n clearTimeout(fetchTimer)\n fetchTimer = null\n }\n\n if (null !== abortController.current) {\n abortController.current?.abort()\n abortController.current = null\n }\n }\n\n // normal mode fetch data effect\n useEffect(() => {\n fetchDataDelay()\n\n // eslint-disable-next-line consistent-return\n return () => fetchDataDestroy()\n // disabled: fetchDataDelay is const\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [apiKey, query, selectedQuestion, pageSize, currentPage, orderBy, orderDirection])\n\n return [fetchData, fetchDataDelay]\n}\n\nexport default useFetchDataImageResponses\n","import { useEffect } from 'react'\nimport { difference, isEqual } from 'lodash'\nimport { convertTraits } from '@aytm/app/stats/lib/traits'\n\nimport { decodeText } from '@aytm/app/stats/lib/helpers'\nimport { mapReportSearchQuery, getTagsList, getIsDefaultReportParams } from '@aytm/app/stats/page/comments/lib/utils'\nimport {\n DEFAULT_ORDER_BY,\n DEFAULT_PER_PAGE_IMAGE_RESPONSES,\n DEFAULT_SELECTED_QUESTION,\n ORDER_BY_OPTIONS_IMAGES\n} from '@aytm/app/stats/page/comments/lib/constants'\n\nconst useComments = ({\n dispatch,\n searchStateRef,\n reportParams,\n propsRef,\n responsesOptionsRef,\n survey,\n surveyData,\n setSurvey,\n setSurveyImages,\n specialMode,\n questionsOptionsList,\n onQuestionListChange,\n setResponsesOptions,\n reportVirtual,\n reportSchema,\n pageData\n}) => {\n useEffect(() => {\n const traits = convertTraits(surveyData.survey || {})\n const _surveyData = Object.assign({}, surveyData.survey || {}, {\n traits,\n codeBooks: (surveyData.survey || {}).codeBooks || []\n })\n\n if (!isEqual(survey, _surveyData)) {\n setSurvey(_surveyData)\n setSurveyImages(_surveyData.images || {})\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [surveyData])\n\n useEffect(() => {\n if (onQuestionListChange && 'function' == typeof onQuestionListChange) {\n onQuestionListChange(questionsOptionsList.toJS())\n }\n }, [questionsOptionsList, onQuestionListChange])\n\n useEffect(() => {\n const selectedOrderBy =\n reportParams.orderBy && ORDER_BY_OPTIONS_IMAGES.find(item => item.get('value') == reportParams.orderBy)\n const question =\n reportParams.selectedQuestion && reportParams.selectedQuestion !== DEFAULT_SELECTED_QUESTION\n ? reportParams.selectedQuestion\n : null\n const isFailedOrderBy =\n selectedOrderBy &&\n (('similarity' == selectedOrderBy.get('value') && !question) ||\n ('similarity' == selectedOrderBy.get('value') && window.features?.oe_sort_similarity?.status !== 'on'))\n\n const request = {\n query: searchStateRef.current.request.query,\n currentPage: searchStateRef.current.request.currentPage,\n selectedQuestion: reportParams.selectedQuestion || DEFAULT_SELECTED_QUESTION,\n pageSize: reportParams.pageSize || DEFAULT_PER_PAGE_IMAGE_RESPONSES,\n orderBy: !reportParams.orderBy || isFailedOrderBy ? DEFAULT_ORDER_BY : reportParams.orderBy,\n orderDirection: !reportParams.orderDirection || isFailedOrderBy ? 'asc' : reportParams.orderDirection\n }\n\n const reportQuery = reportParams.query\n ? reportParams.query\n : reportParams.searchString\n ? [\n {\n value: decodeText(reportParams.searchString, false),\n label: decodeText(reportParams.searchString, false),\n type: 'plain'\n }\n ]\n : []\n\n if (difference(searchStateRef.current.request.query, mapReportSearchQuery(reportQuery)).length) {\n request.query = mapReportSearchQuery(reportQuery)\n }\n dispatch({\n type: 'SET_REQUEST',\n request: JSON.parse(JSON.stringify(request))\n })\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [reportParams])\n\n useEffect(() => {\n if (searchStateRef.current.isProcessing) {\n setResponsesOptions({\n ...responsesOptionsRef.current,\n survey,\n reportVirtual,\n reportSchema\n })\n\n dispatch({\n type: 'SET_PARAMS',\n request: {\n value: { tagsList: getTagsList(survey.tags, { codeBooks: survey.codeBooks }), isProcessing: false }\n }\n })\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [survey, reportVirtual, reportSchema])\n\n useEffect(() => {\n responsesOptionsRef.current.pageData = pageData\n setResponsesOptions({ ...responsesOptionsRef.current })\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [pageData])\n\n useEffect(() => {\n if (propsRef.current.onUpdateParams) {\n const params = JSON.parse(JSON.stringify(searchStateRef.current.request))\n propsRef.current.onUpdateParams(\n getIsDefaultReportParams(params, specialMode) ? null : params,\n undefined,\n specialMode\n )\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [searchStateRef.current.request, specialMode])\n}\n\nexport default useComments\n","import React, { useState, useMemo, useRef, useContext } from 'react'\nimport PropTypes from 'prop-types'\n\nimport { convertTraits } from '@aytm/app/stats/lib/traits'\nimport { DEFAULT_SELECTED_QUESTION } from '@aytm/app/stats/page/comments/lib/constants'\nimport { getQuestionsOptionsList } from '@aytm/app/stats/page/comments/lib/utils'\n\nimport { OEContext } from '@aytm/app/stats/page/comments'\n\n// styles\nimport '@aytm/app/stats/page/styles/globals.scss'\nimport '@aytm/app/stats/page/comments/styles/keyframes.scss'\n\nimport style from '@aytm/app/stats/page/comments/styles/index.module.scss'\n\nimport SurveyHeaderImageResponses from '@aytm/app/stats/page/comments/image-responses/components/SurveyHeaderImageResponses'\nimport PageDataImageResponses from '@aytm/app/stats/page/comments/image-responses/PageDataImageResponses'\nimport useFetchDataImageResponses from '@aytm/app/stats/page/comments/image-responses/hooks/useFetchDataImageResponses'\nimport useImageResponses from '@aytm/app/stats/page/comments/image-responses/hooks/useImageResponses'\n\nconst ImageResponses = props => {\n const {\n specialMode,\n surveyData,\n reportId,\n apiKey,\n reportParams = {},\n reportVirtual,\n reportSchema,\n loadRejectedCS,\n isShowHiddenFilters,\n isAdvancedFiltersDisabled,\n isSpecialsSortingDisabled,\n isFilterDuplicates,\n onBeforeFetch,\n onFetch,\n onUpdateSchema,\n onNoSchema,\n onInvalidKey,\n onCreateFilter,\n onQuestionListChange,\n onChangeFilterDuplicates,\n onSelectedQuestionChange\n } = props\n\n const { searchState, dispatch, dispatchCommentStatuses } = useContext(OEContext)\n\n const { pageData = [], disabled: readOnly, errors } = searchState\n\n const [survey, setSurvey] = useState(\n Object.assign({}, surveyData.survey || {}, {\n traits: convertTraits(surveyData.survey || {}),\n codeBooks: (surveyData.survey || {}).codeBooks || []\n })\n )\n const [surveyImages, setSurveyImages] = useState(surveyData.images || {})\n const [currentResponse, setCurrentResponse] = useState(null)\n const [responsesOptions, setResponsesOptions] = useState({\n survey,\n reportParams,\n reportVirtual,\n reportSchema,\n selectedQuestion: reportParams.selectedQuestion || DEFAULT_SELECTED_QUESTION\n })\n\n const showTraitsRef = useRef({})\n const responseOrderRef = useRef({})\n\n const searchStateRef = useRef()\n searchStateRef.current = searchState\n\n const responsesOptionsRef = useRef()\n responsesOptionsRef.current = responsesOptions\n\n const propsRef = useRef()\n propsRef.current = props\n const surveyRef = useRef()\n surveyRef.current = survey\n\n const isSpecialsSortingDisabledRef = useRef()\n isSpecialsSortingDisabledRef.current = isSpecialsSortingDisabled\n\n const questionsOptionsList = useMemo(\n () =>\n getQuestionsOptionsList(\n responsesOptions.survey,\n responsesOptions.reportVirtual,\n responsesOptions.reportSchema,\n responsesOptions.selectedQuestion,\n specialMode\n ),\n [responsesOptions, specialMode]\n )\n\n const [fetchData] = useFetchDataImageResponses({\n apiKey,\n dispatch,\n dispatchCommentStatuses,\n searchStateRef,\n propsRef,\n responsesOptionsRef,\n surveyData,\n survey,\n setSurvey,\n setSurveyImages,\n specialMode,\n onNoSchema,\n onBeforeFetch,\n onFetch,\n onInvalidKey\n })\n\n useImageResponses({\n apiKey,\n dispatch,\n searchStateRef,\n reportParams,\n propsRef,\n responsesOptionsRef,\n surveyData,\n survey,\n setSurvey,\n setSurveyImages,\n specialMode,\n questionsOptionsList,\n onQuestionListChange,\n setResponsesOptions,\n reportVirtual,\n reportSchema,\n pageData\n })\n\n const onPageChange = page => {\n const request = {\n currentPage: page\n }\n dispatch({\n type: 'SET_REQUEST_PARAM_SET',\n request\n })\n }\n\n return (\n \n
\n \n \n {downloadInProgress ? `Downloading ${downloadProgress}%` : 'DOWNLOAD'}\n \n
\n \n \n \n \n
\n \n {totalImageResponses <= 12 ? (\n <>{totalImageResponses} found\n ) : (\n \n {totalImageResponses < pageSize ? (\n <>{totalImageResponses} found\n ) : (\n <>\n {pageSize}/{totalImageResponses}\n \n )}\n \n )}\n
\n \n
\n \n {errors.length ? (\n
\n )\n}\n\nImageResponses.propTypes = {\n specialMode: PropTypes.string,\n surveyData: PropTypes.object,\n reportId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n apiKey: PropTypes.object,\n statUrl: PropTypes.string,\n statActionsUrl: PropTypes.string,\n CSRF: PropTypes.string,\n questionId: PropTypes.string,\n loadRejectedCS: PropTypes.string,\n reportParams: PropTypes.object,\n reportVirtual: PropTypes.object,\n reportSchema: PropTypes.array,\n isAdmin: PropTypes.bool,\n isSurveyGuest: PropTypes.bool,\n isShowHiddenFilters: PropTypes.bool,\n isAdvancedFiltersDisabled: PropTypes.bool,\n isTagsManagementDisabled: PropTypes.bool,\n isSentimentsManagementDisabled: PropTypes.bool,\n isSpecialsSortingDisabled: PropTypes.bool,\n isSurveyOwner: PropTypes.bool,\n isFilterDuplicates: PropTypes.bool,\n onChangeFilterDuplicates: PropTypes.func,\n onBeforeFetch: PropTypes.func,\n onFetch: PropTypes.func,\n onNoSchema: PropTypes.func,\n onInvalidKey: PropTypes.func,\n onCreateFilter: PropTypes.func,\n onUpdateParams: PropTypes.func,\n onUpdateSchema: PropTypes.func,\n onQuestionListChange: PropTypes.func,\n onSelectedQuestionChange: PropTypes.func,\n onQAModeChange: PropTypes.func\n}\n\nImageResponses.displayName = 'ImageResponses'\n\nexport default ImageResponses\n","import React, { useMemo, useReducer } from 'react'\nimport PropTypes from 'prop-types'\n\nimport CommentsOpenEnded from '@aytm/app/stats/page/comments/comments'\nimport ImageResponses from '@aytm/app/stats/page/comments/image-responses'\nimport VideoResponses from '@aytm/app/stats/page/comments/video-responses'\n\nimport { commentStatusesReducer, pageDataReducer } from '@aytm/app/stats/page/comments/reducers'\nimport {\n DEFAULT_COMMENT_STATUSES_STATE,\n DEFAULT_QUERY,\n DEFAULT_ORDER_BY,\n DEFAULT_ORDER_DIRECTION,\n DEFAULT_PER_PAGE,\n DEFAULT_PER_PAGE_IMAGE_RESPONSES,\n DEFAULT_PER_PAGE_VIDEO_RESPONSES,\n DEFAULT_SEARCH_STATE,\n DEFAULT_SELECTED_QUESTION\n} from '@aytm/app/stats/page/comments/lib/constants'\nimport { setCsApiKey, setStatActionsUrl, setStatUrl } from '@aytm/app/stats/page/comments/apiCalls'\n\nexport const OEContext = React.createContext()\n\nconst Comments = props => {\n const {\n specialMode = 'comments',\n CSRF,\n apiKey,\n statUrl,\n statActionsUrl,\n reportParams,\n sentimentOptions,\n windowUID,\n isAdmin,\n isSurveyOwner,\n isSurveyGuest,\n isRejectAvailable,\n isShowAllTools,\n isQAModeDisabled,\n isTagsManagementDisabled,\n isSentimentsManagementDisabled,\n isShowCorrectionsDisabled,\n ...rest\n } = props\n\n // set API endpoints\n setCsApiKey(apiKey)\n setStatUrl(statUrl)\n setStatActionsUrl(statActionsUrl)\n\n const components = {\n comments: CommentsOpenEnded,\n 'image-responses': ImageResponses,\n 'video-responses': VideoResponses\n }\n\n const [searchState, dispatch] = useReducer(pageDataReducer, {\n ...DEFAULT_SEARCH_STATE,\n CSRF,\n sentimentOptions,\n request: {\n ...DEFAULT_SEARCH_STATE.request,\n query: reportParams.query || DEFAULT_QUERY,\n selectedQuestion: reportParams.selectedQuestion || DEFAULT_SELECTED_QUESTION,\n pageSize:\n reportParams.pageSize ||\n ('image-responses' == specialMode\n ? DEFAULT_PER_PAGE_IMAGE_RESPONSES\n : 'video-responses' == specialMode\n ? DEFAULT_PER_PAGE_VIDEO_RESPONSES\n : DEFAULT_PER_PAGE),\n orderBy: reportParams.orderBy || DEFAULT_ORDER_BY,\n orderDirection: reportParams.orderDirection || DEFAULT_ORDER_DIRECTION\n },\n isAdmin,\n isSurveyOwner,\n isSurveyGuest,\n isRejectAvailable,\n isShowAllTools: isShowAllTools || false,\n isShowAllTraits: false,\n isQAModeDisabled,\n isTagsManagementDisabled,\n isSentimentsManagementDisabled,\n isShowCorrectionsDisabled,\n isShowSentiments: !isSentimentsManagementDisabled,\n isVideoResponsesMode: 'video-responses' == specialMode\n })\n const [commentStatusesState, dispatchCommentStatuses] = useReducer(\n commentStatusesReducer,\n DEFAULT_COMMENT_STATUSES_STATE\n )\n\n const oeContextValue = useMemo(() => {\n return { windowUID, searchState, dispatch, commentStatusesState, dispatchCommentStatuses }\n }, [windowUID, searchState, dispatch, commentStatusesState, dispatchCommentStatuses])\n\n const Component = components[specialMode]\n\n return (\n \n
\n ) : (\n Error
\n {errors.map(error => (\n{error.message}
\n ))}\n \n \n
\n )}\n \n {errors.length ? (\n
\n )\n}\n\nVideoResponses.propTypes = {\n specialMode: PropTypes.string,\n surveyData: PropTypes.object,\n reportId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n apiKey: PropTypes.object,\n statActionsUrl: PropTypes.string,\n questionId: PropTypes.string,\n loadRejectedCS: PropTypes.string,\n sentimentOptions: PropTypes.object,\n reportParams: PropTypes.object,\n reportVirtual: PropTypes.object,\n reportSchema: PropTypes.array,\n reports: PropTypes.array,\n windowUID: PropTypes.string,\n isShowHiddenFilters: PropTypes.bool,\n isAdvancedFiltersDisabled: PropTypes.bool,\n isSpecialsSortingDisabled: PropTypes.bool,\n onBeforeFetch: PropTypes.func,\n onFetch: PropTypes.func,\n onTagsFetch: PropTypes.func,\n onNoSchema: PropTypes.func,\n onInvalidKey: PropTypes.func,\n onCreateFilter: PropTypes.func,\n onUpdateParams: PropTypes.func,\n onUpdateSchema: PropTypes.func,\n onQuestionListChange: PropTypes.func,\n onSelectedQuestionChange: PropTypes.func,\n onQAModeChange: PropTypes.func\n}\n\nVideoResponses.displayName = 'VideoResponses'\n\nexport default VideoResponses\n","const questionRegExp = /^[a-z]*q[a-z]?\\d+/i\nconst deepCopy = obj => JSON.parse(JSON.stringify(obj))\n\nconst ignoredVariables = ['GROUP', 'PANEL', 'STATUS', 'MSA', 'TAG']\n\nexport default aytmLogic => {\n const customVariables = aytmLogic.customVariables || {}\n\n const refs = Object.keys(aytmLogic.refsList)\n const refsList = deepCopy(aytmLogic.refsList)\n\n const questions = refs.filter(ref => questionRegExp.test(ref))\n const clusters = ((aytmLogic.assets || [])['hm.cluster'] || []).map(cluster => cluster.title)\n const traits = deepCopy(aytmLogic.traits)\n const variables = refs.filter(\n ref =>\n !questionRegExp.test(ref) &&\n -1 === ignoredVariables.indexOf(ref) &&\n (!Object.hasOwn(customVariables, ref.toLowerCase()) || 'x' !== customVariables[ref.toLowerCase()].type)\n )\n const codebooks = deepCopy(aytmLogic.codeBooks || {})\n const tags = deepCopy(aytmLogic.tags || {})\n\n return {\n refsList,\n questions,\n clusters,\n traits,\n variables,\n codebooks,\n tags\n }\n}\n","const extractSelection = (cursorSelection, editorState) => {\n if (!cursorSelection) {\n return null\n }\n\n const { startOffset, endOffset } = cursorSelection\n const plainText = editorState.getCurrentContent().getPlainText()\n\n return {\n range: {\n start: 0,\n end: endOffset\n },\n text: {\n beforeCursor: plainText.slice(0, startOffset),\n afterCursor: plainText.slice(endOffset)\n }\n }\n}\n\nexport default extractSelection\n","const extractTokens = parseResult =>\n parseResult &&\n parseResult.expression &&\n parseResult.expression.status &&\n parseResult.expression.status.tokens &&\n parseResult.expression.status.tokens.length\n ? parseResult.expression.status.tokens\n : null\n\nconst extractParseError = parseResult =>\n parseResult && parseResult.expression && parseResult.expression.status && parseResult.expression.status.errors\n ? parseResult.expression.status.errors.find(error => 'parse' === error.type)\n : null\n\nconst extractLastTokenProperty = (tokens, property, offset = 1) => {\n const lastToken = tokens ? tokens[tokens.length - offset] : null\n return lastToken ? lastToken[property] : null\n}\n\nconst extractBeforeCursor = (textBeforeCursor = '', tokens = [], eofToken, resultErrorParse) => {\n const parsedTokens = []\n const trimmed = textBeforeCursor.replace(/^\\s/, '')\n const errorPosition = resultErrorParse ? resultErrorParse.position : null\n\n let parsedPosition = 0\n\n if (!tokens || !tokens[0] || tokens[0].token !== 'EOF') {\n parsedTokens.push(eofToken)\n }\n\n if (tokens && tokens.length) {\n for (const token of tokens) {\n const position = token.position + token.match.length\n if (trimmed.length < position) {\n break\n }\n if (!errorPosition || (errorPosition && errorPosition >= position)) {\n parsedPosition = position\n parsedTokens.push(token)\n }\n }\n }\n\n const parsedText = trimmed.slice(0, parsedPosition)\n const nonParsedText = trimmed.slice(parsedPosition)\n\n return { parsedTokens, parsedText, nonParsedText }\n}\n\nexport default (textBeforeCursor, textAfterCursor, parseResultPattern, parseResultEof) => {\n const oefTokens = extractTokens(parseResultEof)\n const oefToken = oefTokens ? oefTokens[0] : null\n const resultParsedTokens = extractTokens(parseResultPattern)\n const resultErrorParse = extractParseError(parseResultPattern)\n\n if (oefToken && (resultParsedTokens || resultErrorParse)) {\n const { parsedTokens, parsedText, nonParsedText } = extractBeforeCursor(\n textBeforeCursor,\n resultParsedTokens,\n oefToken,\n resultErrorParse\n )\n\n const lastTokenType = extractLastTokenProperty(parsedTokens, 'token', 1)\n const lastExpectedTokens = extractLastTokenProperty(parsedTokens, 'expected', 1)\n const prelastTokenType = extractLastTokenProperty(parsedTokens, 'token', 2)\n const prelastExpectedTokens = extractLastTokenProperty(parsedTokens, 'expected', 2)\n\n return {\n text: {\n beforeCursor: textBeforeCursor,\n afterCursor: textAfterCursor,\n nonParsed: nonParsedText,\n parsed: parsedText\n },\n tokens: {\n type: {\n prelast: prelastTokenType,\n last: lastTokenType\n },\n expected: {\n prelast: prelastExpectedTokens,\n last: lastExpectedTokens\n },\n match: {\n prelast: extractLastTokenProperty(parsedTokens, 'match', 2),\n last: extractLastTokenProperty(parsedTokens, 'match', 1)\n }\n }\n }\n }\n\n return null\n}\n","const createStringLabels = textBefore => {\n const lastSingleQuoute = textBefore.lastIndexOf(\"'\")\n const lastDoubleQuoute = textBefore.lastIndexOf('\"')\n const numberOfSingleQuote = textBefore.split(\"'\").length - 1\n const numberOfDoubleQuote = textBefore.split('\"').length - 1\n\n if (0 === numberOfSingleQuote % 2 && 0 === numberOfDoubleQuote % 2) {\n return [\"'\", '\"']\n }\n\n if (-1 === lastSingleQuoute && -1 === lastDoubleQuoute) {\n return [\"'\", '\"']\n }\n\n if (lastSingleQuoute > lastDoubleQuoute && 1 === numberOfSingleQuote % 2) {\n return [\"'\"]\n }\n\n if (lastSingleQuoute < lastDoubleQuoute && 1 === numberOfDoubleQuote % 2) {\n return ['\"']\n }\n\n return []\n}\n\nexport const TOKENS_CAN_BE_COMPLETED = [\n 'TOKEN',\n 'NTOKEN',\n 'ATOKEN',\n 'ERROR',\n 'BREF',\n 'NREF',\n 'TRAIT',\n 'NTRAIT',\n 'ATRAIT',\n 'LIKE',\n 'AND',\n 'OR',\n 'IN',\n 'IN_SHAPE',\n 'NOT',\n 'NOT_IN',\n 'CODEBOOK_IN',\n 'CODEBOOK_EQ',\n 'CODEBOOK_NEQ',\n 'TAG_IN',\n 'TAG_EQ',\n 'TAG_NEQ',\n 'MAX',\n 'MAXPOS',\n 'MAXPOSITION',\n 'MIN',\n 'MINPOS',\n 'MINPOSITION',\n 'COUNT',\n 'TAG'\n]\n\nexport const TOKENS_OPERATOR_LABELS = {\n LIKE: 'like',\n AND: 'and',\n OR: 'or',\n IN: 'in',\n IN_SHAPE: 'in cluster',\n NOT: 'not',\n NOT_IN: 'not in',\n CODEBOOK_IN: 'codebook_in',\n CODEBOOK_EQ: 'codebook_eq',\n CODEBOOK_NEQ: 'codebook_neq',\n TAG_IN: 'tag_in',\n TAG_EQ: 'tag_eq',\n TAG_NEQ: 'tag_neq',\n MAX: 'max',\n MAXPOS: 'maxposition',\n MAXPOSITION: 'maxposition',\n MIN: 'min',\n MINPOS: 'minposition',\n MINPOSITION: 'minposition',\n COUNT: 'count',\n // string\n STR: createStringLabels,\n // compare\n EQ: '=',\n NEQ: '!=',\n LE: '<=',\n GE: '>=',\n LT: '<',\n GT: '>',\n // math\n MLT: '*',\n DIV: '/',\n ADD: '+',\n SUB: '-',\n // other\n COMMA: ',',\n LPAREN: '(',\n RPAREN: ')'\n}\n","const ALWAYS = 'ALWAYS'\nconst OPTIONAL = 'OPTIONAL'\nconst NONE = 'NONE'\n\nexport const SPACES = {\n ALWAYS,\n OPTIONAL,\n NONE\n}\n\nconst always = () => {\n return {\n before: SPACES.ALWAYS,\n after: SPACES.ALWAYS\n }\n}\n\nconst optional = () => {\n return {\n before: SPACES.OPTIONAL,\n after: SPACES.OPTIONAL\n }\n}\n\nconst none = () => {\n return {\n before: SPACES.NONE,\n after: SPACES.NONE\n }\n}\n\nconst reference = () => {\n return {\n before: SPACES.OPTIONAL,\n after: SPACES.ALWAYS\n }\n}\n\nconst operator = () => {\n return {\n before: SPACES.OPTIONAL,\n after: SPACES.ALWAYS\n }\n}\n\nconst TOKEN_DEFAULT_SPACES = optional\n\nconst TOKEN_SPACES = {\n EOF: none,\n TOKEN: optional,\n ISODATE: reference,\n // references\n BREF: reference,\n TREF: reference,\n NREF: reference,\n ARRAYREF: reference,\n TRAIT: reference,\n CODEBOOK: optional,\n TAG: optional,\n // values:\n NUMBER: optional,\n STR: (parserResult, token) => {\n const nonParsed = parserResult.text.nonParsed.trim()\n const parsed = parserResult.text.parsed.trim()\n const tokenIsQuote = '\"' === token || \"'\" === token\n\n return {\n before: !parsed || (nonParsed && tokenIsQuote) ? SPACES.NONE : SPACES.ALWAYS,\n after: SPACES.OPTIONAL\n }\n },\n // operators\n LIKE: operator,\n AND: operator,\n OR: operator,\n IN: operator,\n NOT: operator,\n NOT_IN: operator,\n CODEBOOK_IN: operator,\n CODEBOOK_EQ: operator,\n CODEBOOK_NEQ: operator,\n TAG_IN: operator,\n TAG_EQ: operator,\n TAG_NEQ: operator,\n IN_SHAPE: operator,\n // operators: compare\n EQ: always,\n NEQ: always,\n LE: always,\n GE: always,\n LT: always,\n GT: always,\n // operators\n MAX: operator,\n MAXPOS: operator,\n MAXPOSITION: operator,\n MIN: operator,\n MINPOS: operator,\n MINPOSITION: operator,\n COUNT: operator,\n // operators: math\n MLT: operator,\n DIV: operator,\n ADD: operator,\n SUB: operator,\n // other\n COMMA: () => {\n return {\n before: SPACES.NONE,\n after: SPACES.ALWAYS\n }\n },\n LPAREN: () => {\n return {\n before: SPACES.OPTIONAL,\n after: SPACES.NONE\n }\n },\n RPAREN: () => {\n return {\n before: SPACES.NONE,\n after: SPACES.OPTIONAL\n }\n }\n}\n\nconst detectTokenSpaces = (parserResult, token, label) =>\n (TOKEN_SPACES[token] || TOKEN_DEFAULT_SPACES)(parserResult, label)\n\nconst calculateSpaceBefore = ({ newTextBefore, prevTokenSpaceAfter, nextTokenSpaceBefore }) => {\n if (nextTokenSpaceBefore === SPACES.NONE) {\n return ''\n }\n if (prevTokenSpaceAfter === SPACES.ALWAYS || nextTokenSpaceBefore === SPACES.ALWAYS) {\n return ' '\n }\n if (prevTokenSpaceAfter === SPACES.NONE) {\n return ''\n }\n if (newTextBefore.trim()) {\n return ' '\n }\n return ''\n}\n\nconst calculateSpaceAfter = ({ newTextAfter, nextTokenSpaceAfter }) => {\n if (nextTokenSpaceAfter === SPACES.ALWAYS) {\n return ' '\n }\n\n if (nextTokenSpaceAfter === SPACES.NONE) {\n return ''\n }\n\n if (newTextAfter.trim()) {\n return ' '\n }\n\n return ''\n}\n\nexport default function insertSpaces({ newTextBefore, newTextAfter, token, label, previousToken, parserResult }) {\n const previousTokenSpaces = detectTokenSpaces(parserResult, previousToken, label)\n const currentTokenSpaces = detectTokenSpaces(parserResult, token, label)\n\n return {\n spaceBefore: calculateSpaceBefore({\n newTextBefore,\n prevTokenSpaceAfter: previousTokenSpaces.after,\n nextTokenSpaceBefore: currentTokenSpaces.before\n }),\n spaceAfter: calculateSpaceAfter({\n newTextAfter,\n nextTokenSpaceAfter: currentTokenSpaces.after\n })\n }\n}\n","const canCompleteLastWord = ({ parsed, nonParsed } = {}) =>\n (nonParsed && /\\S$/.test(nonParsed) && !/\"|'/.test(nonParsed) && !/ {2,}/.test(nonParsed)) ||\n (!nonParsed && /\\w$/.test(parsed))\n\nconst canCompleteLastQuote = ({ nonParsed } = {}) => nonParsed && /^\"([^\"]*)$|^'([^']*)$/.test(nonParsed.trim())\n\nconst parserWordRegExp = /([\\w\"']+)|(<>)|([<>!]=)|([.,:=<>-])/giu\n\nconst processText = text => {\n const trimmed = text.trim()\n const words = trimmed.match(parserWordRegExp)\n\n if (words && words.length) {\n const firstWord = words[0]\n const lastWord = words[words.length - 1]\n const withoutFirstWord = trimmed.slice(firstWord.length).trim()\n const withoutLastWord = trimmed.slice(0, -lastWord.length).trim()\n\n return {\n words,\n trimmed,\n lastWord,\n firstWord,\n withoutFirstWord,\n withoutLastWord,\n endsWith: { letter: !/\\s$/g.test(text) },\n startsWithLetter: !/^\\s/g.test(text)\n }\n }\n\n return {\n trimmed,\n words: [],\n lastWord: '',\n firstWord: '',\n withoutFirstWord: '',\n withoutLastWord: '',\n endsWith: { letter: !/\\s$/g.test(text) },\n startsWithLetter: !/^\\s/g.test(text)\n }\n}\n\nconst intersectionDistanceFromEnd = (baseString, comparedString) => {\n let distance = 0\n while (comparedString.length > distance) {\n const str = comparedString.slice(0, comparedString.length - distance)\n if (baseString.endsWith(str)) {\n return comparedString.length - distance\n }\n distance++\n }\n return 0\n}\n\nconst insertString = ({ canBeCompleted, parserResult }) => {\n const {\n text,\n text: { beforeCursor, afterCursor }\n } = parserResult\n if (canBeCompleted) {\n if (canCompleteLastQuote(text)) {\n return {\n newTextBefore: beforeCursor.trim(),\n newTextAfter: afterCursor.trim()\n }\n }\n } else {\n return {\n newTextBefore: beforeCursor.trim(),\n newTextAfter: afterCursor.trim()\n }\n }\n return null\n}\n\nconst insertValue = ({ parserResult }) => {\n return {\n newTextBefore: parserResult.text.parsed,\n newTextAfter: parserResult.text.afterCursor.trim()\n }\n}\n\nconst insertOperator = ({ canBeCompleted, token, label, parserResult }) => {\n const {\n text: { beforeCursor, afterCursor }\n } = parserResult\n\n if ('STR' === token) {\n return insertString({ canBeCompleted, parserResult })\n }\n\n const textBefore = processText(beforeCursor)\n const textAfter = processText(afterCursor)\n\n if (canBeCompleted) {\n const textLabel = processText(label)\n if (!textLabel.withoutFirstWord) {\n const lastWordCI = textBefore.lastWord.toLowerCase()\n\n if (label.startsWith(lastWordCI) && lastWordCI !== label) {\n return {\n fuzzy: textBefore.lastWord,\n fuzzyIndexOf: 0,\n offsetText: textBefore.lastWord,\n newTextBefore: textBefore.withoutLastWord,\n newTextAfter: textAfter.startsWithLetter ? textAfter.withoutFirstWord : textAfter.trimmed\n }\n }\n\n return null\n } else {\n const lower = beforeCursor.toLowerCase()\n const distance = intersectionDistanceFromEnd(lower, label)\n\n if (distance) {\n const char = beforeCursor[beforeCursor.length - 1 - distance]\n if (!/[a-z]/i.test(char)) {\n const tail = label.slice(distance)\n return {\n fuzzy: beforeCursor.slice(-distance),\n fuzzyIndexOf: 0,\n offsetText: beforeCursor.slice(-distance),\n newTextBefore: beforeCursor.slice(0, -distance).trim(),\n newTextAfter: afterCursor.toLowerCase().startsWith(tail)\n ? afterCursor.slice(tail.length).trim()\n : textAfter.trimmed\n }\n }\n }\n }\n return null\n }\n\n const newTextAfter =\n label.length > textAfter.trimmed.length\n ? label.startsWith(textAfter.trimmed)\n ? ''\n : textAfter.trimmed\n : textAfter.trimmed.startsWith(label)\n ? textAfter.trimmed.slice(label.length).trim()\n : textAfter.trimmed\n\n return {\n newTextBefore: textBefore.trimmed,\n newTextAfter\n }\n}\n\nconst insertByReplaceLastWord = ({ canBeCompleted, label, parserResult, startsWith }) => {\n const {\n text,\n text: { beforeCursor, afterCursor }\n } = parserResult\n\n const textBefore = processText(beforeCursor)\n const textAfter = processText(afterCursor)\n\n if (canBeCompleted) {\n if (canCompleteLastWord(text) && textBefore.lastWord.length < label.length) {\n const lastWordCI = textBefore.lastWord.toLowerCase()\n const labelCI = label.toLowerCase()\n const indexOf = labelCI.indexOf(lastWordCI)\n\n const canComplete = startsWith\n ? 0 === indexOf && lastWordCI !== labelCI\n : -1 !== indexOf && lastWordCI !== labelCI\n\n if (canComplete) {\n return {\n fuzzy: textBefore.lastWord,\n fuzzyIndexOf: indexOf,\n offsetText: textBefore.lastWord,\n newTextBefore: textBefore.withoutLastWord,\n newTextAfter: textAfter.startsWithLetter ? textAfter.withoutFirstWord : textAfter.trimmed\n }\n }\n }\n } else {\n const newTextAfter =\n label.length > textAfter.firstWord.length\n ? label.startsWith(textAfter.firstWord)\n ? textAfter.withoutFirstWord\n : textAfter.trimmed\n : textAfter.trimmed.startsWith(label)\n ? textAfter.trimmed.slice(label.length).trim()\n : textAfter.trimmed\n\n return {\n newTextBefore: textBefore.trimmed,\n newTextAfter\n }\n }\n\n return null\n}\n\nexport const LABEL_RULES = {\n uid: {\n denied: {\n after: ['GT', 'GE', 'LT', 'LE']\n }\n },\n completed: {\n allowed: {\n before: ['OR', 'TOKEN', 'AND', 'NOT', 'LPAREN', 'RPAREN', 'EQ', 'NEQ', 'LE', 'GE', 'LT', 'GT', 'EOF'],\n after: ['OR', 'TOKEN', 'AND', 'NOT', 'LPAREN', 'RPAREN', 'EQ', 'NEQ', 'LE', 'GE', 'LT', 'GT']\n }\n }\n}\n\nexport default function insertToken(type, { canBeCompleted, token, label, parserResult }) {\n const lastToken = parserResult.tokens.type.last\n const lastLabel = parserResult.tokens.match.last\n\n if ('operator' == type) {\n if ('UID' === lastLabel && -1 !== LABEL_RULES.uid.denied.after.indexOf(token)) {\n return null\n }\n\n if ('COMPLETED' === lastLabel && -1 === LABEL_RULES.completed.allowed.after.indexOf(token)) {\n return null\n }\n\n return insertOperator({ canBeCompleted, token, label, parserResult })\n }\n\n if ('value' === type) {\n return insertValue({ parserResult })\n }\n\n if ('question' == type) {\n return insertByReplaceLastWord({ canBeCompleted, label, parserResult, startsWith: true })\n }\n\n if ('variable' == type) {\n if ('uid' === label && 'SUB' === lastToken) {\n return null\n }\n\n if ('completed' === label && -1 === LABEL_RULES.completed.allowed.before.indexOf(lastToken)) {\n return null\n }\n\n return insertByReplaceLastWord({ canBeCompleted, token, label, parserResult })\n }\n\n if ('codebook' === type) {\n return insertByReplaceLastWord({ canBeCompleted, token, label, parserResult })\n }\n\n if ('tag' === type) {\n return insertByReplaceLastWord({ canBeCompleted, token, label, parserResult })\n }\n\n return null\n}\n","import insertSpaces from '@aytm/app/stats/lib/draft-js/autocompletePlugin/lib/insert-spaces'\nimport insertToken from '@aytm/app/stats/lib/draft-js/autocompletePlugin/lib/insert-token'\n\nexport default function processSuggestionData(\n type,\n { canBeCompleted, token, label, parserResult, completeAfterInsert, description }\n) {\n const processedText = insertToken(type, { canBeCompleted, token, label, parserResult })\n if (!processedText) {\n return null\n }\n\n const previousToken =\n canBeCompleted && !parserResult.text.nonParsed ? parserResult.tokens.type.prelast : parserResult.tokens.type.last\n\n const { newTextBefore, newTextAfter, fuzzy, fuzzyIndexOf, offsetText } = processedText\n const { spaceBefore, spaceAfter } = insertSpaces({\n newTextBefore,\n newTextAfter,\n previousToken,\n parserResult,\n token,\n label\n })\n\n const suggestion = {\n id: label,\n token,\n label,\n textBefore: completeAfterInsert\n ? newTextBefore + spaceBefore + label\n : newTextBefore + spaceBefore + label + spaceAfter,\n textAfter: completeAfterInsert ? (newTextAfter ? spaceAfter + newTextAfter : '') : newTextAfter\n }\n\n if (fuzzy) {\n suggestion.fuzzy = fuzzy\n }\n\n if (offsetText) {\n suggestion.offsetText = offsetText\n }\n\n if (fuzzyIndexOf) {\n suggestion.fuzzyIndexOf = fuzzyIndexOf\n }\n\n if (description) {\n suggestion.description = description\n }\n\n return suggestion\n}\n","const extractLongestLabel = labels => {\n if (!labels.length) {\n return null\n }\n\n const firstLabel = labels[0]\n\n const group = labels.reduce(\n (accumulator, label, index) => {\n if (label.startsWith(accumulator.label)) {\n accumulator.labels.push({ index, label })\n }\n return accumulator\n },\n { labels: [], label: firstLabel }\n )\n\n return group.labels.reduce(\n (accumulator, item, index) => {\n labels.splice(item.index - index, 1)\n\n if (accumulator.label.length == item.label.length) {\n accumulator.labels.push(item.label)\n } else if (accumulator.label.length < item.label.length) {\n accumulator.labels = [item.label]\n accumulator.label = item.label\n }\n\n return accumulator\n },\n { labels: [], label: firstLabel }\n )\n}\n\nexport default labels => {\n const copyOfLabels = labels.slice()\n let longestLabels = []\n let flag = true\n\n while (flag) {\n const extracted = extractLongestLabel(copyOfLabels)\n if (extracted) {\n longestLabels = longestLabels.concat(extracted.labels)\n } else {\n flag = false\n }\n }\n\n return longestLabels\n}\n","import { Observable, EMPTY as EMPTY_OBSERVABLE } from 'rxjs'\nimport { TOKENS_CAN_BE_COMPLETED } from '@aytm/app/stats/lib/draft-js/autocompletePlugin/lib/tokens'\nimport extractLongestLabels from '@aytm/lib/rfd-ui/components/advanced/lib/draft-js/suggestionsPlugin/lib/extract-longest-labels'\nimport processSuggestionData from '@aytm/app/stats/lib/draft-js/autocompletePlugin/lib/process-suggestion-data'\n\nconst escapeRegExp = string => string.replace(/[$()*+.?[\\\\\\]^{|}]/g, '\\\\$&')\n\nconst createFilterByRegExp = (canBeCompleted, textBefore) => {\n if (!canBeCompleted) {\n return token => /^[a-z]+$/i.test(token)\n }\n\n const lastWordCI = textBefore.lastWord.toUpperCase()\n const completeWithLetter = new RegExp('^' + escapeRegExp(lastWordCI) + '([A-Z]+)$')\n const completeWithNumber = new RegExp('^' + escapeRegExp(lastWordCI) + '([0-9]+)$')\n\n return token =>\n lastWordCI == token || !token.startsWith(lastWordCI)\n ? false\n : /\\d$/.test(token)\n ? completeWithNumber.test(token)\n : completeWithLetter.test(token)\n}\n\nconst filterDuplicates = (item, position, array) => array.indexOf(item) == position\n\nconst addTransitionQuestionTokens = tokens => {\n const tokensWithTransitions = []\n\n for (let i = -1, prevToken = ''; i < tokens.length - 1; i++) {\n const nextToken = tokens[i + 1]\n const shouldAddTransition = nextToken.startsWith(prevToken)\n ? /\\d+$/.test(nextToken) && prevToken.length < nextToken.length\n : /\\d+$/.test(nextToken)\n\n if (shouldAddTransition) {\n tokensWithTransitions.push(nextToken.replace(/\\d+$/, ''))\n }\n\n tokensWithTransitions.push(nextToken)\n prevToken = nextToken\n }\n\n return tokensWithTransitions\n}\n\nconst toToken = refType => ('a' === refType ? 'ARRAYREF' : refType.toUpperCase() + 'REF')\nconst extractIndex = label => {\n const match = label.match(/\\d+$/)\n return match && match[0] ? parseInt(match[0], 10) : 0\n}\n\nconst createFilterByTokenType = (refsList, tokens) => question =>\n refsList[question] && tokens && tokens.includes(toToken(refsList[question]))\nconst sortQuestionLabel = (a, b) => extractIndex(a.label) - extractIndex(b.label)\n\nexport default function createQuestionSuggestion(\n textBefore,\n _,\n {\n dependencies: {\n aytmLogic: { refsList, questions },\n parserResult\n }\n }\n) {\n if (!questions || !parserResult) {\n return EMPTY_OBSERVABLE\n }\n\n const longestQuestionLabels = extractLongestLabels(questions)\n\n const transformToSuggestion =\n ({ canBeCompleted, parserResult }) =>\n question => {\n const completeAfterInsert = !longestQuestionLabels.includes(question)\n const token = refsList[question] ? refsList[question].toUpperCase() + 'REF' : null\n const label = question\n\n return processSuggestionData('question', {\n canBeCompleted,\n token,\n label,\n parserResult,\n completeAfterInsert\n })\n }\n\n const createSuggestions = (tokens, canBeCompleted) => {\n const filterByRegExp = createFilterByRegExp(canBeCompleted, textBefore)\n const filterByTokenType = createFilterByTokenType(refsList, tokens)\n\n return addTransitionQuestionTokens(questions.filter(filterByTokenType))\n .filter(filterByRegExp)\n .filter(filterDuplicates)\n .map(transformToSuggestion({ canBeCompleted, parserResult }))\n .filter(suggestion => suggestion)\n .sort(sortQuestionLabel)\n }\n\n return new Observable(observer => {\n const {\n tokens: { expected, type },\n text: { nonParsed }\n } = parserResult\n\n const isLastTokenCompletable = TOKENS_CAN_BE_COMPLETED.includes(type.last)\n const hasNonParsedText = Boolean(nonParsed)\n const hasNonParsedTextTrimmed = Boolean(nonParsed.trim())\n const canBeCompleted = Boolean(hasNonParsedTextTrimmed || (!hasNonParsedText && isLastTokenCompletable))\n\n const suggestedLabels = []\n const suggestionTokens =\n !hasNonParsedText && isLastTokenCompletable ? expected.prelast || expected.last || [] : expected.last || []\n\n createSuggestions(suggestionTokens, canBeCompleted).forEach(suggestion => {\n suggestedLabels.push(suggestion.label)\n observer.next(suggestion)\n })\n\n if (canBeCompleted && suggestionTokens === expected.prelast) {\n createSuggestions(expected.last || [])\n .filter(suggestion => !suggestedLabels.includes(suggestion.label))\n .forEach(suggestion => observer.next(suggestion))\n }\n\n observer.complete()\n })\n}\n","import { Observable, EMPTY as EMPTY_OBSERVABLE } from 'rxjs'\nimport processSuggestionData from '@aytm/app/stats/lib/draft-js/autocompletePlugin/lib/process-suggestion-data'\n\nconst valueTokenType = 'STR'\nconst lastTypes = ['EQ', 'NEQ']\nconst prelastTypes = ['TRAIT']\nconst ignoredTokens = ['AGE', 'PANEL', 'STATUS', 'GROUP']\n\nexport default function createTraitSuggestion(\n _,\n __,\n {\n dependencies: {\n aytmLogic: { refsList, traits },\n parserResult\n }\n }\n) {\n if (!traits || !parserResult || !refsList) {\n return EMPTY_OBSERVABLE\n }\n\n const {\n tokens: { expected, match, type },\n text: { nonParsed }\n } = parserResult\n\n const canCreateSuggestion =\n lastTypes.includes(type.last) && prelastTypes.includes(type.prelast) && expected.last.includes(valueTokenType)\n\n if (!canCreateSuggestion) {\n return EMPTY_OBSERVABLE\n }\n\n const variable = match.prelast\n const hasCurrentVariable =\n 't' === refsList[variable] && !ignoredTokens.includes(variable) && traits.some(t => variable.toLowerCase() == t.id)\n\n if (!hasCurrentVariable) {\n return EMPTY_OBSERVABLE\n }\n\n const transformToSuggestion =\n ({ canBeCompleted, parserResult }) =>\n value => {\n const token = valueTokenType\n const label = `\"${value.id}\"`\n const description = value.id !== (value.name.en || value.name) ? value.name.en || value.name : null\n\n return processSuggestionData('value', { canBeCompleted, token, label, parserResult, description })\n }\n\n return new Observable(observer => {\n const canBeCompleted = Boolean(nonParsed)\n const trait = traits.find(t => variable.toLowerCase() == t.id)\n const values = (trait.values || []).map(v => v)\n\n values\n .map(transformToSuggestion({ canBeCompleted, parserResult }))\n .filter(suggestion => suggestion)\n .forEach(suggestion => observer.next(suggestion))\n\n observer.complete()\n })\n}\n","import operatorBuilder from './operator-suggestion'\nimport questionBuilder from './question-suggestion'\nimport clusterBuilder from './cluster-suggestion'\nimport traitBuilder from './trait-suggestion'\nimport variableBuilder from './variable-suggestion'\nimport codebookBuilder from './codebook-suggestion'\nimport tagBuilder from './tag-suggestion'\n\nexport default [\n operatorBuilder,\n questionBuilder,\n clusterBuilder,\n traitBuilder,\n variableBuilder,\n codebookBuilder,\n tagBuilder\n]\n","import { Observable, EMPTY as EMPTY_OBSERVABLE } from 'rxjs'\nimport {\n TOKENS_OPERATOR_LABELS,\n TOKENS_CAN_BE_COMPLETED\n} from '@aytm/app/stats/lib/draft-js/autocompletePlugin/lib/tokens'\nimport processSuggestionData from '@aytm/app/stats/lib/draft-js/autocompletePlugin/lib/process-suggestion-data'\n\nconst transformToSuggestion =\n ({ canBeCompleted, parserResult }) =>\n ({ token, label }) =>\n processSuggestionData('operator', { canBeCompleted, parserResult, token, label })\n\nexport const reduceTokensToOperators = textBefore => (operators, token) => {\n if (TOKENS_OPERATOR_LABELS[token]) {\n const label =\n 'function' === typeof TOKENS_OPERATOR_LABELS[token]\n ? TOKENS_OPERATOR_LABELS[token](textBefore)\n : TOKENS_OPERATOR_LABELS[token]\n if (Array.isArray(label)) {\n label.forEach(label => {\n operators.push({ token, label })\n })\n } else {\n operators.push({ token, label })\n }\n }\n return operators\n}\n\nexport default function createOperatorSuggestion(textBefore, _, { dependencies: { parserResult } }) {\n if (!parserResult) {\n return EMPTY_OBSERVABLE\n }\n\n const createSuggestions = (tokens, canBeCompleted) =>\n tokens\n .reduce(reduceTokensToOperators(textBefore.trimmed), [])\n .map(transformToSuggestion({ canBeCompleted, parserResult }))\n .filter(suggestion => suggestion)\n\n return new Observable(observer => {\n const {\n tokens: { expected, type },\n text: { nonParsed }\n } = parserResult\n\n const isLastTokenCompletable = TOKENS_CAN_BE_COMPLETED.includes(type.last)\n const hasNonParsedText = Boolean(nonParsed)\n const hasNonParsedTextTrimmed = Boolean(nonParsed.trim())\n const canBeCompleted = Boolean(hasNonParsedTextTrimmed || (!hasNonParsedText && isLastTokenCompletable))\n\n const suggestedLabels = []\n const suggestionTokens =\n !hasNonParsedText && isLastTokenCompletable ? expected.prelast || expected.last || [] : expected.last || []\n\n createSuggestions(suggestionTokens, canBeCompleted).forEach(suggestion => {\n suggestedLabels.push(suggestion.label)\n observer.next(suggestion)\n })\n\n if (canBeCompleted && suggestionTokens === expected.prelast) {\n createSuggestions(expected.last || [])\n .filter(suggestion => !suggestedLabels.includes(suggestion.label))\n .forEach(suggestion => observer.next(suggestion))\n }\n\n observer.complete()\n })\n}\n","import { Observable, EMPTY as EMPTY_OBSERVABLE } from 'rxjs'\nimport processSuggestionData from '@aytm/app/stats/lib/draft-js/autocompletePlugin/lib/process-suggestion-data'\n\nconst clusterTokenType = 'STR'\nconst insertAfterToken = 'IN_SHAPE'\n\nexport default function createClusterSuggestion(\n _,\n __,\n {\n dependencies: {\n aytmLogic: { clusters },\n parserResult\n }\n }\n) {\n if (!clusters || !clusters.length || !parserResult) {\n return EMPTY_OBSERVABLE\n }\n\n const {\n tokens: { expected, type },\n text: { nonParsed }\n } = parserResult\n\n if ((expected.last && !expected.last.includes(clusterTokenType)) || type.last !== insertAfterToken) {\n return EMPTY_OBSERVABLE\n }\n\n const transformToSuggestion =\n ({ canBeCompleted, parserResult }) =>\n value => {\n const token = clusterTokenType\n const label = '\"' + value.replace(/</g, '<').replace(/>/g, '>').replace(/&/g, '&') + '\"'\n\n return processSuggestionData('value', { canBeCompleted, token, label, parserResult })\n }\n\n return new Observable(observer => {\n const canBeCompleted = Boolean(nonParsed)\n\n clusters\n .map(transformToSuggestion({ canBeCompleted, parserResult }))\n .filter(suggestion => suggestion)\n .forEach(suggestion => observer.next(suggestion))\n\n observer.complete()\n })\n}\n","import { Observable, EMPTY as EMPTY_OBSERVABLE } from 'rxjs'\nimport { TOKENS_CAN_BE_COMPLETED } from '@aytm/app/stats/lib/draft-js/autocompletePlugin/lib/tokens'\nimport processSuggestionData from '@aytm/app/stats/lib/draft-js/autocompletePlugin/lib/process-suggestion-data'\n\nexport default function createVariableSuggestion(\n _,\n __,\n {\n dependencies: {\n aytmLogic: { refsList, traits, variables },\n parserResult\n }\n }\n) {\n if (!variables || !parserResult || !refsList) {\n return EMPTY_OBSERVABLE\n }\n\n const extractTokens = variable => {\n if (refsList[variable]) {\n const prefix = refsList[variable].toUpperCase()\n\n return 'D' === prefix ? ['ISODATE'] : [prefix + 'REF', 'TRAIT']\n }\n\n return []\n }\n\n const transformToSuggestion =\n ({ canBeCompleted, parserResult, suggestionTokens }) =>\n variable => {\n const tokens = extractTokens(variable)\n const token = suggestionTokens.find(suggestionToken => tokens.find(token => suggestionToken === token))\n const label = variable.toLowerCase()\n\n const trait = traits.find(t => String(t.id).toLowerCase() === label)\n const description = trait != undefined && trait.id !== trait.title ? trait.title : null\n\n return token\n ? null !== description\n ? processSuggestionData('variable', { canBeCompleted, token, label, parserResult, description })\n : processSuggestionData('variable', { canBeCompleted, token, label, parserResult })\n : null\n }\n\n const createSuggestions = (suggestionTokens, canBeCompleted) =>\n variables\n .map(transformToSuggestion({ canBeCompleted, parserResult, suggestionTokens }))\n .filter(suggestion => suggestion)\n\n return new Observable(observer => {\n const {\n tokens: { type, expected },\n text: { nonParsed }\n } = parserResult\n\n const isLastTokenCompletable = TOKENS_CAN_BE_COMPLETED.includes(type.last)\n const hasNonParsedText = Boolean(nonParsed)\n const hasNonParsedTextTrimmed = Boolean(nonParsed.trim())\n const canBeCompleted = Boolean(hasNonParsedTextTrimmed || (!hasNonParsedText && isLastTokenCompletable))\n\n const suggestedLabels = []\n const suggestionTokens =\n !hasNonParsedText && isLastTokenCompletable ? expected.prelast || expected.last || [] : expected.last || []\n\n createSuggestions(suggestionTokens, canBeCompleted).forEach(suggestion => {\n suggestedLabels.push(suggestion.label)\n observer.next(suggestion)\n })\n\n if (canBeCompleted && suggestionTokens === expected.prelast) {\n createSuggestions(expected.last || [])\n .filter(suggestion => !suggestedLabels.includes(suggestion.label))\n .forEach(suggestion => observer.next(suggestion))\n }\n\n observer.complete()\n })\n}\n","import { Observable, EMPTY as EMPTY_OBSERVABLE } from 'rxjs'\nimport { TOKENS_CAN_BE_COMPLETED } from '@aytm/app/stats/lib/draft-js/autocompletePlugin/lib/tokens'\nimport processSuggestionData from '@aytm/app/stats/lib/draft-js/autocompletePlugin/lib/process-suggestion-data'\n\nexport default function createCodebookSuggestion(\n _,\n __,\n {\n dependencies: {\n aytmLogic: { refsList, codebooks },\n parserResult\n }\n }\n) {\n if (!codebooks || !parserResult || !refsList) {\n return EMPTY_OBSERVABLE\n }\n\n const extractTokens = () => {\n if (refsList['CODEBOOK']) {\n return ['CODEBOOK']\n }\n\n return []\n }\n\n const transformToSuggestion = ({ canBeCompleted, parserResult, suggestionTokens }) => {\n const tokens = extractTokens()\n const token = suggestionTokens.find(suggestionToken => tokens.find(token => suggestionToken === token))\n const label = 'codebook'\n\n return token ? processSuggestionData('codebook', { canBeCompleted, token, label, parserResult }) : null\n }\n\n const createSuggestions = (suggestionTokens, canBeCompleted) =>\n [transformToSuggestion({ canBeCompleted, parserResult, suggestionTokens })].filter(suggestion => suggestion)\n\n return new Observable(observer => {\n const {\n tokens: { type, expected },\n text: { nonParsed }\n } = parserResult\n\n const isLastTokenCompletable = TOKENS_CAN_BE_COMPLETED.includes(type.last)\n const hasNonParsedText = Boolean(nonParsed)\n const hasNonParsedTextTrimmed = Boolean(nonParsed.trim())\n const canBeCompleted = Boolean(hasNonParsedTextTrimmed || (!hasNonParsedText && isLastTokenCompletable))\n\n const suggestedLabels = []\n const suggestionTokens =\n !hasNonParsedText && isLastTokenCompletable ? expected.prelast || expected.last || [] : expected.last || []\n\n createSuggestions(suggestionTokens, canBeCompleted).forEach(suggestion => {\n suggestedLabels.push(suggestion.label)\n observer.next(suggestion)\n })\n\n if (canBeCompleted && suggestionTokens === expected.prelast) {\n createSuggestions(expected.last || [])\n .filter(suggestion => !suggestedLabels.includes(suggestion.label))\n .forEach(suggestion => observer.next(suggestion))\n }\n\n observer.complete()\n })\n}\n","import { Observable, EMPTY as EMPTY_OBSERVABLE } from 'rxjs'\nimport { TOKENS_CAN_BE_COMPLETED } from '@aytm/app/stats/lib/draft-js/autocompletePlugin/lib/tokens'\nimport processSuggestionData from '@aytm/app/stats/lib/draft-js/autocompletePlugin/lib/process-suggestion-data'\n\nexport default function createTagSuggestion(\n _,\n __,\n {\n dependencies: {\n aytmLogic: { refsList, tags },\n parserResult\n }\n }\n) {\n if (!tags || !parserResult || !refsList) {\n return EMPTY_OBSERVABLE\n }\n\n const extractTokens = () => {\n if (refsList['TAG']) {\n return ['TAG']\n }\n\n return []\n }\n\n const transformToSuggestion = ({ canBeCompleted, parserResult, suggestionTokens }) => {\n const tokens = extractTokens()\n const token = suggestionTokens.find(suggestionToken => tokens.find(token => suggestionToken === token))\n const label = 'tag'\n\n return token ? processSuggestionData('tag', { canBeCompleted, token, label, parserResult }) : null\n }\n\n const createSuggestions = (suggestionTokens, canBeCompleted) =>\n [transformToSuggestion({ canBeCompleted, parserResult, suggestionTokens })].filter(suggestion => suggestion)\n\n return new Observable(observer => {\n const {\n tokens: { type, expected },\n text: { nonParsed }\n } = parserResult\n\n const isLastTokenCompletable = TOKENS_CAN_BE_COMPLETED.includes(type.last)\n const hasNonParsedText = Boolean(nonParsed)\n const hasNonParsedTextTrimmed = Boolean(nonParsed.trim())\n const canBeCompleted = Boolean(hasNonParsedTextTrimmed || (!hasNonParsedText && isLastTokenCompletable))\n\n const suggestedLabels = []\n const suggestionTokens =\n !hasNonParsedText && isLastTokenCompletable ? expected.prelast || expected.last || [] : expected.last || []\n\n createSuggestions(suggestionTokens, canBeCompleted).forEach(suggestion => {\n suggestedLabels.push(suggestion.label)\n observer.next(suggestion)\n })\n\n if (canBeCompleted && suggestionTokens === expected.prelast) {\n createSuggestions(expected.last || [])\n .filter(suggestion => !suggestedLabels.includes(suggestion.label))\n .forEach(suggestion => observer.next(suggestion))\n }\n\n observer.complete()\n })\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport styles from '@aytm/lib/rfd-ui/styles/SuggestionsComponent.module.scss'\n\nconst SuggestionItem = ({ suggestion, index, selectedIndex, selectSuggestion }) => (\n \n
\n ) : (\n <>\n Error
\n {errors.map(error => (\n{error.message}
\n ))}\n \n \n
\n {document.querySelector('#coding-container') &&\n createPortal(\n \n
\n ) : null}\n \n Q{question.visual_position}: \n \n
\n \n
\n \n)\n\nSuggestionItem.propTypes = {\n index: PropTypes.number,\n onSelect: PropTypes.func,\n suggestion: PropTypes.object,\n selectSuggestion: PropTypes.func,\n selectedIndex: PropTypes.number\n}\n\nexport default SuggestionItem\n","import React from 'react'\nimport autobind from 'autobind-decorator'\nimport getSelectionCoords from '@aytm/lib/rfd-ui/components/advanced/lib/draft-js/suggestionsPlugin/lib/get-selection-coords'\nimport SuggestionsComponent from '@aytm/lib/rfd-ui/components/advanced/lib/draft-js/suggestionsPlugin/components/Suggestions'\nimport SuggestionItem from './SuggestionItem'\nimport styles from '@aytm/lib/rfd-ui/styles/SuggestionsComponent.module.scss'\n\nconst DROPDOWN_OFFSET_Y = 24\n\nexport default class CustomSuggestionsComponent extends SuggestionsComponent {\n componentDidUpdate(prevProps, prevState, snapshot) {\n super.componentDidUpdate(prevProps, prevState, snapshot)\n if (prevState.visibility !== this.state.visibility) {\n if (this.state.visibility) {\n window.addEventListener('scroll', this.handleScroll)\n } else {\n window.removeEventListener('scroll', this.handleScroll)\n }\n }\n }\n\n componentDidMount() {\n super.componentDidMount()\n if (this.state.visibility) {\n window.addEventListener('scroll', this.handleScroll)\n }\n }\n\n componentWillUnmount() {\n super.componentWillUnmount()\n window.removeEventListener('scroll', this.handleScroll)\n }\n\n @autobind\n handleScroll() {\n this.updatePosition()\n }\n\n @autobind\n selectSuggestion(suggestion) {\n const { selectSuggestion, onBeforeSelect } = this.props\n\n onBeforeSelect(suggestion)\n selectSuggestion(suggestion)\n }\n\n @autobind\n updateItems(items, visibility) {\n const { fuzzyItems, nonFuzzyItems } = items.reduce(\n (accumulator, item) => {\n const group = item.fuzzy ? 'fuzzyItems' : 'nonFuzzyItems'\n accumulator[group].push(item)\n return accumulator\n },\n { fuzzyItems: [], nonFuzzyItems: [] }\n )\n\n const sortedFuzzyItems = fuzzyItems.sort((a, b) => a.fuzzyIndexOf || 0 - b.fuzzyIndexOf || 0)\n\n super.updateItems([...sortedFuzzyItems, ...nonFuzzyItems], visibility)\n }\n\n @autobind\n calculatePortalStyles(items = [], props) {\n if (this.refItems.current) {\n const itemsElement = this.refItems.current\n const itemsElementRects = itemsElement.getClientRects()\n\n if (itemsElementRects && itemsElementRects[0]) {\n const selectionCoords = getSelectionCoords()\n const dropdownOffsetLeft = this.calculateDropdownOffsetLeft({\n items,\n itemsElementRects,\n selectionCoords,\n props\n })\n\n return {\n position: 'fixed',\n left: Math.floor(selectionCoords.x + dropdownOffsetLeft),\n top: Math.floor(selectionCoords.y + DROPDOWN_OFFSET_Y)\n }\n }\n }\n\n return {\n visibility: 'hidden',\n x: 0,\n y: 0\n }\n }\n\n @autobind\n renderDropdown() {\n return (\n \n {suggestion.fuzzy ? (\n ' + suggestion.fuzzy + ''\n )}${suggestion.description != undefined ? ' (' + suggestion.description + ')' : ''}`\n }}\n />\n ) : (\n <>\n {suggestion.label}\n {suggestion.description != undefined ? ' (' + suggestion.description + ')' : ''}\n \n )}\n
\n \n {this.state.items.map((suggestion, index) => (\n \n
\n ))}\n \n )\n }\n}\n","const createErrorRefRegExp = error =>\n new RegExp('(^|\\\\b|\\\\s)' + error.get('text').replace(/[$()*+,./?[\\\\\\]^{|}-]/g, '\\\\$&') + '($|\\\\b|\\\\s)', 'gi')\nconst isDetectableError = (error, text) => 'parse' != error.get('type') || text.toUpperCase() != error.get('text')\nconst hasParseError = errors => errors.some(error => 'parse' === error.get('type'))\n\nconst strategy = {\n errorTypes: ['ref', 'trait', 'parse', 'cluster'],\n detectError: (errors, error, text, callback) => {\n if (!hasParseError(errors) && isDetectableError(error, text) && error.has('text')) {\n if ('cluster' === error.get('type')) {\n const start = error.get('position')\n const end = start + error.get('text').length + 2\n\n callback(start, end)\n } else {\n const reg = createErrorRefRegExp(error)\n let matchArr\n while ((matchArr = reg.exec(text)) !== null) {\n const start = matchArr.index\n const end = start + matchArr[0].length\n callback(start, end)\n }\n }\n }\n },\n detectErrors: (errors, text, callback) => {\n if (hasParseError(errors)) {\n callback(0, text.length)\n }\n }\n}\n\nexport default strategy\n","const createErrorRefRegExp = error =>\n new RegExp('(^|\\\\b|\\\\s)' + error.get('text').replace(/[$()*+,./?[\\\\\\]^{|}-]/g, '\\\\$&') + '($|\\\\b|\\\\s)', 'gi')\n\nexport default cursor => {\n if (!cursor) {\n return null\n }\n\n return {\n errorTypes: ['ref', 'alias', 'sref', 'old', 'cluster'],\n detectError: (_, error, text, callback) => {\n if ('cluster' === error.get('type')) {\n const start = error.get('position')\n const end = start + error.get('text').length + 2\n\n if (!(cursor.selection.end >= start && cursor.selection.end <= end)) {\n callback(start, end)\n }\n } else {\n const reg = createErrorRefRegExp(error)\n\n let matchArr\n while ((matchArr = reg.exec(text)) !== null) {\n const start = matchArr.index\n const end = start + matchArr[0].length\n if (!(cursor.selection.end >= start && cursor.selection.end <= end)) {\n callback(start, end)\n }\n }\n }\n }\n }\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport autobind from 'autobind-decorator'\nimport classNames from 'classnames'\nimport { Map, List, fromJS } from 'immutable'\nimport { Modifier, EditorState, SelectionState } from 'draft-js'\n\n// suggestions plugin from rdf-ui\nimport createSuggestionsPlugin from '@aytm/lib/rfd-ui/components/advanced/lib/draft-js/suggestionsPlugin'\nimport ErrorsDecoratorFactory from '@aytm/lib/rfd-ui/components/advanced/lib/draft-js/decorators/ErrorsDecoratorFactory'\n\n// suggestions plugin from stats\nimport extractAytmLogic from '@aytm/app/stats/lib/draft-js/autocompletePlugin/lib/extract-aytm-logic'\nimport extractSelection from '@aytm/app/stats/lib/draft-js/autocompletePlugin/lib/extract-selection'\nimport extractParserResult from '@aytm/app/stats/lib/draft-js/autocompletePlugin/lib/extract-parser-result'\nimport suggestionsBuilders from '@aytm/app/stats/lib/draft-js/autocompletePlugin/builders'\nimport SuggestionsComponent from '@aytm/app/stats/lib/draft-js/autocompletePlugin/components/Suggestions'\n\nimport ErrorsDecoratorStrategy from '@aytm/app/stats/lib/draft-js/decorators/errors-decorator-strategy'\nimport WarningsDecoratorStrategy from '@aytm/app/stats/lib/draft-js/decorators/warnings-decorator-strategy'\n\n// components\nimport RichText from '@aytm/lib/rfd-ui/components/advanced/rich-text'\n\n// styles\nimport '@aytm/app/stats/page/styles/globals.scss'\n\nimport style from '@aytm/app/stats/page/components/styles/AdvancedFilter.module.scss'\n\nconst STORAGE_KEY = 'stats-autocomplete'\nconst EVENT_KEY = 'statsKeydownEvent'\nconst HOTKEYS = 'CTRL + ['\n\nconst toggleAutocomplete = () => {\n localStorage.setItem(STORAGE_KEY, localStorage.getItem(STORAGE_KEY) !== 'true')\n const event = document.createEvent('Event')\n event.initEvent(EVENT_KEY, true, true)\n dispatchEvent(event)\n}\n\nwindow.addEventListener('keydown', event => {\n if (event.ctrlKey && '[' === event.key) {\n toggleAutocomplete()\n }\n})\n\nexport default class AdvancedFilter extends React.Component {\n static propTypes = {\n locale: PropTypes.instanceOf(Map).isRequired,\n parserResultEof: PropTypes.object.isRequired,\n parserResultPattern: PropTypes.object.isRequired,\n surveySchema: PropTypes.object.isRequired,\n hintPosition: PropTypes.oneOf(['top', 'bottom']),\n pattern: PropTypes.string.isRequired,\n prefix: PropTypes.string,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n onUpdate: PropTypes.func,\n onFocus: PropTypes.func,\n onBlur: PropTypes.func,\n onActive: PropTypes.func\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n const { parserResultPattern, pattern } = nextProps\n let newState = null\n\n if (pattern !== prevState.pattern) {\n newState = { pattern }\n }\n\n if (parserResultPattern !== prevState.parserResultPattern) {\n const parserState = {\n parserResultPattern,\n errors: fromJS(parserResultPattern.expression.status.errors)\n }\n newState = newState ? Object.assign({}, newState, parserState) : parserState\n }\n\n return newState\n }\n\n constructor(props) {\n super(props)\n const { parserResultEof, parserResultPattern, surveySchema, locale } = props\n\n this.state = {\n parserResultEof,\n surveySchema,\n active: false,\n hovered: false,\n cursorTextStyle: null,\n errors: List(),\n showHint: false\n }\n\n this.parserTimer = null\n\n this.refSuggestionsComponent = null\n\n this.pluginStore = {\n canAutocompleteBeActive: this.canAutocompleteBeActive,\n getSuggestionsData: (beforeCursor, afterCursor) => {\n return {\n aytmLogic: extractAytmLogic(surveySchema),\n parserResult: extractParserResult(beforeCursor, afterCursor, parserResultPattern, parserResultEof)\n }\n }\n }\n\n this.decoratorErrorsStore = {\n strategy: ErrorsDecoratorStrategy,\n getLocale: () => locale,\n getErrors: () => this.state.errors\n }\n\n this.plugins = this.createPlugins()\n this.decorators = this.createDecorators()\n }\n\n @autobind\n createDecorators() {\n return [ErrorsDecoratorFactory(this.decoratorErrorsStore)]\n }\n\n @autobind\n createPlugins() {\n return [\n createSuggestionsPlugin(this.pluginStore, {\n extractSelection,\n suggestionsBuilders,\n SuggestionsComponent\n })\n ]\n }\n\n @autobind\n canAutocompleteBeActive() {\n return true !== this.props.disabled && 'false' !== localStorage.getItem(STORAGE_KEY)\n }\n\n @autobind\n onAutocompleteUpdate() {\n this.forceUpdate(() => {\n this.updateSuggestionsComponent()\n })\n }\n\n @autobind\n onMouseEnter() {\n const { active, showHint } = this.state\n const { hintPosition } = this.props\n if (!showHint) {\n this.setState({\n showHint: 'top' === hintPosition || !active,\n hovered: true\n })\n } else {\n this.setState({\n hovered: true\n })\n }\n }\n\n @autobind\n onMouseLeave() {\n const { active, showHint } = this.state\n if (!active && showHint) {\n this.setState({\n showHint: false,\n hovered: false\n })\n } else {\n this.setState({\n hovered: false\n })\n }\n }\n\n @autobind\n onEditorChange(getContent) {\n const { onChange } = this.props\n const { html } = getContent({ text: false, html: true })\n\n setTimeout(() => {\n this.pluginStore.canAutocompleteBeActive = this.canAutocompleteBeActive\n\n this.updateSuggestionsComponent()\n })\n\n 'function' === typeof onChange && onChange(html)\n }\n\n @autobind\n onEditorUpdate(editorState, prevEditorState) {\n this.pluginStore.canAutocompleteBeActive = this.canAutocompleteBeActive\n\n const { onUpdate } = this.props\n const nextPattern = editorState.getCurrentContent().getPlainText()\n\n if (nextPattern != this.state.pattern) {\n this.pluginStore.canAutocompleteBeActive = () => false\n } else {\n setTimeout(() => {\n this.updateDecoratorErrors()\n })\n }\n\n 'function' === typeof onUpdate && onUpdate(editorState, prevEditorState)\n }\n\n @autobind\n onEditorFocus(event, editorState) {\n const { onFocus } = this.props\n 'function' === typeof onFocus && onFocus(event, editorState)\n\n this.setActiveState(true)\n }\n\n @autobind\n onEditorBlur(event, editorState) {\n const { onBlur } = this.props\n 'function' === typeof onBlur && onBlur(event, editorState)\n\n this.setActiveState(false)\n }\n\n @autobind\n handlePastedText(_text, _html, editorState, callback) {\n const parts = _text\n .split(/\\s*,\\s*/)\n .flatMap(v => v.split(/\\s+/))\n .filter(v => 0 < v.trim().length)\n\n if (parts.every(v => Number.isInteger(Number(v)))) {\n const text = parts.join(', ')\n\n const content = editorState.getCurrentContent()\n const selection = editorState.getSelection()\n\n const newContent = Modifier.replaceText(content, selection, text)\n\n const lastBlock = newContent.getLastBlock()\n const selectionState = new SelectionState({\n anchorKey: lastBlock.getKey(),\n anchorOffset: lastBlock.getLength(),\n focusKey: lastBlock.getKey(),\n focusOffset: lastBlock.getLength()\n })\n\n const newSelection = new SelectionState({\n anchorKey: content.getLastBlock().getKey(),\n anchorOffset: 0,\n focusKey: content.getFirstBlock().getKey(),\n focusOffset: content.getLastBlock().getLength()\n })\n const newText = Modifier.removeRange(newContent, selectionState, 'backward').getPlainText('\\n')\n const newEditorState = EditorState.push(editorState, Modifier.replaceText(content, newSelection, newText))\n\n const key = newEditorState.getCurrentContent().getLastBlock().getKey()\n const offset = Math.min(\n (selection.getIsBackward() ? selection.getFocusOffset() : selection.getAnchorOffset()) + text.length,\n newText.length\n )\n\n callback(\n EditorState.forceSelection(\n newEditorState,\n new SelectionState({\n anchorKey: key,\n anchorOffset: offset,\n focusKey: key,\n focusOffset: offset,\n hasFocus: true\n })\n )\n )\n\n return 'handled'\n }\n\n return 'non-handled'\n }\n\n @autobind\n onSuggestionsBeforeSelect() {\n this.pluginStore.canAutocompleteBeActive = this.canAutocompleteBeActive\n }\n\n @autobind\n setActiveState(active) {\n const { hovered } = this.state\n const { onActive, hintPosition = 'bottom' } = this.props\n const showHint = ((active || hovered) && 'top' === hintPosition) || (!active && 'top' !== hintPosition)\n\n 'function' === typeof onActive && onActive(active)\n\n this.setState({ active, showHint }, () => {\n this.parserTimer !== null && window.clearTimeout(this.parserTimer)\n this.parserTimer = null\n\n this.updateDecoratorErrors()\n this.refText.forceUpdateEditorState()\n })\n }\n\n @autobind\n updateDecoratorErrors() {\n const { active, errors } = this.state\n const plugin = this.getSuggestionPlugin()\n\n this.decoratorErrorsStore.getErrors = active\n ? () => errors.filter(error => 'parse' !== error.get('type'))\n : () => errors\n\n this.decoratorErrorsStore.strategy = active\n ? plugin\n ? WarningsDecoratorStrategy(plugin.getCursor())\n : null\n : ErrorsDecoratorStrategy\n }\n\n @autobind\n updateSuggestionsComponent() {\n if (this.refText && this.refText.refEditor) {\n this.refText.refEditor.onChange(this.refText.state.editorState)\n }\n }\n\n @autobind\n calculateCursorStyles() {\n if (\n this.refText &&\n this.refText.refEditor &&\n this.refText.refEditor.editor &&\n this.refText.refEditor.editor.editor\n ) {\n const element = this.refText.refEditor.editor.editor\n const style = window.getComputedStyle(element)\n\n this.setState({\n cursorTextStyle: style ? style.font : null\n })\n }\n }\n\n componentDidMount() {\n window.addEventListener(EVENT_KEY, this.onAutocompleteUpdate)\n\n setTimeout(() => {\n this.calculateCursorStyles()\n })\n }\n\n componentWillUnmount() {\n this.parserTimer !== null && window.clearTimeout(this.parserTimer)\n\n window.removeEventListener(EVENT_KEY, this.onAutocompleteUpdate)\n }\n\n componentDidUpdate(prevProps, prevState) {\n const { parserResultEof, parserResultPattern, surveySchema, pattern, active } = this.state\n\n if (prevProps.surveySchema != surveySchema) {\n this.setState({\n surveySchema: prevProps.surveySchema\n })\n return\n }\n\n this.pluginStore.getSuggestionsData = (beforeCursor, afterCursor) => {\n return {\n aytmLogic: extractAytmLogic(surveySchema),\n parserResult: extractParserResult(beforeCursor, afterCursor, parserResultPattern, parserResultEof)\n }\n }\n\n if (prevState.parserResultPattern != parserResultPattern || prevState.pattern != pattern) {\n this.parserTimer !== null && window.clearTimeout(this.parserTimer)\n this.parserTimer = setTimeout(\n () => {\n this.parserTimer = null\n\n this.updateDecoratorErrors()\n this.refText.forceUpdateEditorState()\n },\n active ? 500 : 0\n )\n }\n }\n\n @autobind\n getSuggestionPlugin() {\n return this.plugins && this.plugins[0] ? this.plugins[0] : null\n }\n\n @autobind\n renderSuggestions() {\n const plugin = this.getSuggestionPlugin()\n\n if (!plugin || !plugin.SuggestionsComponent) {\n return null\n }\n\n const SuggestionsComponent = plugin.SuggestionsComponent\n\n return (\n \n
\n \n {this.renderHint('bottom')}\n \n )\n }\n}\n","/* eslint-disable react/prop-types, react/display-name */\nimport React, { useState, useRef, useMemo, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport CreatableSelect from 'react-select/creatable'\n\nimport { components } from 'react-select'\n\nimport { encodeText, decodeText } from '@aytm/app/stats/lib/helpers'\n\nimport { ALLOWED_HTML_TAGS, SENTIMENTS_ICON_HASH } from '@aytm/app/stats/page/comments/lib/constants'\n\nimport { stripTags, sanitizeReactSelectOption, getSearchInputOptions } from '@aytm/app/stats/page/comments/lib/utils'\n\n// styles\nimport style from '@aytm/app/stats/page/components/styles/SearchInput.module.scss'\n\nconst { MenuList, MultiValue, Option, ClearIndicator, IndicatorsContainer } = components\n\nconst searchInputStyles = {\n option: (provided, state) => {\n return { ...provided, isDisabled: state.data.disabled }\n },\n multiValue: (provided, state) => {\n return { ...provided, backgroundColor: state.styles.backgroundColor }\n }\n}\n\nconst filterOption = (option, searchText) => {\n const text = searchText.trim().toLowerCase()\n return (\n option.data.__isNew__ ||\n option.data.label.toLowerCase().includes(encodeText(text, false)) ||\n ('codebook' == option.data.type &&\n option.data.tags.some(tag => tag.toLowerCase().includes(encodeText(text, false))))\n )\n}\n\nconst formatCreateLabel = value => `Search for: ${encodeText(value, false)}`\n\nconst isValidNewOption = value => 0 < value.trim().length\n\nconst SearchInput = ({\n survey,\n tagsList,\n search,\n disabled,\n isTagsManagementDisabled,\n isSentimentsManagementDisabled,\n onSearchChange\n}) => {\n const { query = [] } = search\n\n const [searchInputValue, setSearchInputValue] = useState(\n query.map(value => ('tag' == value.type ? { ...value, value: `${value.codebook}: ${value.label}` } : value))\n )\n const [isShowSearchIconOverlay, setIsShowSearchIconOverlay] = useState(false)\n\n const [searchInputOptions, setSearchInputOptions] = useState(\n () =>\n getSearchInputOptions(\n searchInputValue,\n { codeBooks: survey.codeBooks },\n tagsList,\n [],\n null,\n isTagsManagementDisabled,\n isSentimentsManagementDisabled\n ) || []\n )\n\n const menuTimer = useRef(null)\n\n const searchInputRef = useRef(null)\n const searchInputValueRef = useRef('')\n\n const convertSearchInputValue = useCallback(\n () =>\n searchInputValue.map(value => {\n if ('codebook' == value.type) {\n Object.assign(value, {\n color: `#${survey.codeBooks.find(codebook => codebook.title == value.value)?.color || '88d1cd'}`\n })\n }\n if ('tag' == value.type) {\n Object.assign(value, {\n color: `#${\n survey.codeBooks.find(codebook => codebook.tags.some(tag => `${codebook.title}: ${tag}` == value.value))\n ?.color || '88d1cd'\n }`\n })\n }\n return value\n }) || [],\n [searchInputValue, survey.codeBooks]\n )\n\n const onChange = useCallback(\n (newValue, actionMeta) => {\n if ('clear' == actionMeta.action) {\n setSearchInputValue([])\n return\n }\n\n switch (actionMeta.action) {\n case 'pop-value':\n case 'remove-value': {\n setSearchInputValue(newValue || [])\n break\n }\n case 'select-option': {\n setSearchInputValue(\n newValue.map(value => {\n if ('codebook' == value.type) {\n return { type: 'codebook', label: value.label, value: value.value }\n }\n if ('tag' == value.type) {\n return { type: 'tag', label: value.label, value: value.value, codebook: value.codebook }\n }\n return value\n }) || []\n )\n break\n }\n case 'create-option':\n default: {\n const newOption = sanitizeReactSelectOption(newValue[newValue.length - 1])\n newOption.type = 'plain'\n if (!searchInputValue.some(item => item.value == newOption.value && 'plain' == newOption.type)) {\n setSearchInputValue([...newValue])\n }\n break\n }\n }\n searchInputValueRef.current = ''\n },\n [searchInputValue]\n )\n\n const onMenuOpen = () => {\n if (searchInputRef.current?.state.inputValue) {\n setIsShowSearchIconOverlay(true)\n }\n }\n\n const onMenuClose = useCallback(() => {\n if (searchInputRef.current.state.inputValue) {\n searchInputValueRef.current = searchInputRef.current.state.inputValue\n }\n\n menuTimer.current && clearTimeout(menuTimer.current)\n menuTimer.current = setTimeout(() => setIsShowSearchIconOverlay(false), 100)\n\n return () => menuTimer.current && clearTimeout(menuTimer.current)\n }, [])\n\n const onKeyDown = useCallback(\n event => {\n if (event && 'Enter' === event.key && !searchInputRef.current?.state?.menuIsOpen) {\n onSearchChange({ query: searchInputValue })\n }\n },\n [searchInputValue, onSearchChange]\n )\n\n const onSearchInputIconClick = useCallback(() => {\n searchInputRef.current.blur()\n searchInputRef.current.state.menuIsOpen = false\n searchInputRef.current.state.isFocused = false\n\n onSearchChange({\n query: searchInputValue.map(value =>\n 'tag' == value.type ? { ...value, value: value.value.replace(`${value.codebook}: `, '') } : value\n )\n })\n }, [searchInputValue, onSearchChange])\n\n const onSearchOverlayClick = useCallback(() => {\n if (\n searchInputValueRef.current &&\n (!searchInputValue ||\n (searchInputValue &&\n !searchInputValue.some(item => item.value === searchInputValueRef.current && 'plain' === item.type)))\n ) {\n onSearchChange({\n query: [\n ...searchInputValue.map(value =>\n 'tag' == value.type ? { ...value, value: value.value.replace(`${value.codebook}: `, '') } : value\n ),\n { type: 'plain', label: searchInputValueRef.current, value: searchInputValueRef.current }\n ]\n })\n searchInputValueRef.current = ''\n }\n setIsShowSearchIconOverlay(false)\n }, [searchInputValue, onSearchChange])\n\n const showClearIndicator = useCallback(\n props => {\n const inputValue = props?.getValue() || []\n const difference = query\n .filter(\n _query =>\n !inputValue.some(_inputValue =>\n 'tag' == _query.type && 'tag' == _inputValue.type\n ? `${_query.codebook}: ${_query.value}` == _inputValue.value\n : _query.type == _inputValue.type && _query.value == _inputValue.value\n )\n )\n .concat(\n inputValue.filter(\n _inputValue =>\n !query.some(_query =>\n 'tag' == _query.type && 'tag' == _inputValue.type\n ? `${_query.codebook}: ${_query.value}` == _inputValue.value\n : _query.type == _inputValue.type && _query.value == _inputValue.value\n )\n )\n )\n\n return !difference.length && !searchInputRef.current?.state.inputValue\n },\n [query]\n )\n\n const searchInputComponents = useMemo(() => {\n return {\n DropdownIndicator: null,\n MenuList: ({ children, ...props }) =>\n children.length ? \n
\n \n {prefix && }\n {this.renderSuggestions()}\n (this.refText = el)}\n html={pattern}\n plugins={this.plugins}\n decorators={this.decorators}\n allowUndo={true}\n multiline={false}\n spellCheck={false}\n disableFormatting={true}\n readOnly={readOnly}\n onChange={this.onEditorChange}\n onUpdate={this.onEditorUpdate}\n onFocus={withReadOnly(this.onEditorFocus)}\n onBlur={withReadOnly(this.onEditorBlur)}\n handlePastedText={this.handlePastedText}\n />\n
\n \n option.disabled}\n isValidNewOption={isValidNewOption}\n onMenuOpen={onMenuOpen}\n onMenuClose={onMenuClose}\n onKeyDown={onKeyDown}\n onChange={onChange}\n filterOption={filterOption}\n formatCreateLabel={formatCreateLabel}\n />\n {isShowSearchIconOverlay && }\n
\n )\n}\n\nSearchInput.propTypes = {\n survey: PropTypes.object,\n tagsList: PropTypes.array,\n search: PropTypes.object,\n disabled: PropTypes.bool,\n isTagsManagementDisabled: PropTypes.bool,\n isSentimentsManagementDisabled: PropTypes.bool,\n onSearchChange: PropTypes.func\n}\n\nSearchInput.displayName = 'SearchInput'\n\nexport default SearchInput\n","// import '@aytm/app/stats/page/styles/globals.scss'\n\nimport Highcharts from 'highcharts'\nimport HighchartsMore from 'highcharts/highcharts-more'\nimport HighchartsSunburst from 'highcharts/modules/sunburst'\nimport HighchartsTreemap from 'highcharts/modules/treemap'\nimport HighchartsTreegraph from 'highcharts/modules/treegraph'\nimport HighchartsExporting from 'highcharts/modules/exporting'\n\nHighchartsMore(Highcharts)\nHighchartsSunburst(Highcharts)\nHighchartsTreemap(Highcharts)\nHighchartsTreegraph(Highcharts)\nHighchartsExporting(Highcharts)\n\nimport { cleanSearchData, getIsDefaultReportParams } from '@aytm/app/stats/page/comments/lib/utils'\n\nimport { RenameAllCodebooks, RenameAllTags } from '@aytm/app/stats/page/sidebar/reports/actions'\n\nfunction renderComponent(props, element, path, component = 'default') {\n return new Promise((resolve, reject) => {\n if (null === element) {\n reject('element not specified')\n return\n }\n const React = require('react')\n const ReactDOM = require('react-dom')\n const reactEl = React.createElement(require(`@aytm/app/stats/page/${path}`)[component], props)\n resolve(ReactDOM.render(reactEl, element))\n })\n}\n\nexport function renderDataView(name, { target, props, clear }) {\n switch (name) {\n case 'CompareItems': {\n return require('@aytm/app/stats/data-views/CompareItems').default({ target, props, clear })\n }\n default:\n return null\n }\n}\n\nexport function updateDataView(name, component, props) {\n switch (name) {\n case 'CompareItems': {\n return require('@aytm/app/stats/data-views/CompareItems').update(component, props)\n }\n default:\n return false\n }\n}\n\nexport function unlinkDataView(name, component) {\n switch (name) {\n case 'CompareItems': {\n return require('@aytm/app/stats/data-views/CompareItems').unlink(component)\n }\n default:\n return false\n }\n}\n\nexport function renderSpecials(props, element) {\n return renderComponent(props, element, 'comments/index')\n}\n\nexport function renderReportsPanel(props, element) {\n return renderComponent(props, element, 'sidebar/reports/ReportsPanel')\n}\n\nexport function renderReportControls(props, element) {\n return renderComponent(props, element, 'sidebar/reports/ReportControls', 'ReportControls')\n}\n\nexport function renderPalettesPanel(props, element) {\n return renderComponent(props, element, 'sidebar/palettes/PalettesPanel')\n}\n\nexport function renderWeightingPanel(props, element) {\n return renderComponent(props, element, 'sidebar/weighting/WeightingPanel')\n}\n\nexport function renderFiltersPanel(props, element) {\n return renderComponent(props, element, 'sidebar/filters/FiltersPanel')\n}\n\nexport function renderDataCleaningPanel(props, element) {\n return renderComponent(props, element, 'sidebar/data-cleaning/DataCleaningPanel')\n}\n\nexport function renderDataLab(props, element) {\n return renderComponent(props, element, 'sidebar/data-lab/DataLabPanel')\n}\n\nexport function renderMapping(props, element) {\n return renderComponent(props, element, 'sidebar/mapping/MappingPanel')\n}\n\nexport function renderCrosstab(props, element) {\n return renderComponent(props, element, 'sidebar/crosstab/CrosstabPanel')\n}\n\nexport function renderExportSpecific(props, element) {\n return renderComponent(props, element, 'sidebar/export/ExportSpecific')\n}\n\nexport function renderHeatMapPopup(props, element) {\n return renderComponent(props, element, 'question-views/hm/HeatMapPopup')\n}\n\nexport function renderQuestionHeader(props, element) {\n return renderComponent(props, element, 'question-views/components/QuestionHeader')\n}\n\nexport function renderVQComponent(props, element) {\n return renderComponent(props, element, 'question-views/vq/Component')\n}\n\nexport function renderCQComponent(props, element) {\n return renderComponent(props, element, 'question-views/cq/Component')\n}\n\nexport function renderXQComponent(props, element) {\n return renderComponent(props, element, 'question-views/xq/Component')\n}\n\nexport function renderCLComponent(props, element) {\n return renderComponent(props, element, 'question-views/cl/Component')\n}\n\nexport function renderTLComponent(props, element) {\n return renderComponent(props, element, 'question-views/tl/Component')\n}\n\nexport function renderSNComponent(props, element) {\n return renderComponent(props, element, 'question-views/sn/Component')\n}\n\nexport function renderCLMappingComponent(props, element) {\n return renderComponent(props, element, 'question-views/cl-mapping/Component')\n}\n\nexport function renderTLMappingComponent(props, element) {\n return renderComponent(props, element, 'question-views/tl-mapping/Component')\n}\n\nexport function renderOEControls(props, element) {\n return renderComponent(props, element, 'question-views/oe/Controls')\n}\n\nexport function renderCNControls(props, element) {\n return renderComponent(props, element, 'question-views/cn/Controls')\n}\n\nexport function renderDCControls(props, element) {\n return renderComponent(props, element, 'question-views/data-cleaning/Controls')\n}\n\nexport function renderDCResponses(props, element) {\n return renderComponent(props, element, 'question-views/data-cleaning/Responses')\n}\n\nexport function unlinkComponent(element) {\n return new Promise((resolve, reject) => {\n if (null === element) {\n reject('element not specified')\n return\n }\n const ReactDOM = require('react-dom')\n resolve(ReactDOM.unmountComponentAtNode(element))\n })\n}\n\nexport function initializeXpertsDebug() {\n return new Promise((resolve, _reject) => {\n const id = 'xperts-debug'\n let element = document.querySelector(`#${id}`)\n const exists = null !== element\n if (!exists) {\n element = document.createElement('div')\n element.id = id\n element.style.position = 'absolute'\n element.style.width = '100%'\n element.style.height = '80%'\n element.style.margin = '0 0 0 -100%'\n element.style.textAlign = 'left'\n element.style.zIndex = 1000\n document.querySelector('#page').appendChild(element)\n }\n if (element) {\n resolve(\n renderXpertsDebug({ text: 'Drop .json file here or click anywhere to open \"File open...\" dialog' }, element)\n )\n }\n })\n}\n\nexport function renderXpertsDebug(props, element) {\n return renderComponent(props, element, 'xperts-debug/XpertsDebugPopup')\n}\n\nif ('undefined' != typeof window) {\n window['Highcharts'] = Highcharts\n\n window['$STATS'] || (window['$STATS'] = {})\n\n window['$STATS']['renderDataView'] = renderDataView\n window['$STATS']['updateDataView'] = updateDataView\n window['$STATS']['unlinkDataView'] = unlinkDataView\n\n window['$STATS']['renderSpecials'] = renderSpecials\n\n window['$STATS']['renderReportsPanel'] = renderReportsPanel\n window['$STATS']['renderReportControls'] = renderReportControls\n window['$STATS']['renderPalettesPanel'] = renderPalettesPanel\n window['$STATS']['renderWeightingPanel'] = renderWeightingPanel\n window['$STATS']['renderFiltersPanel'] = renderFiltersPanel\n window['$STATS']['renderDataCleaningPanel'] = renderDataCleaningPanel\n window['$STATS']['renderDataLab'] = renderDataLab\n window['$STATS']['renderMapping'] = renderMapping\n window['$STATS']['renderCrosstab'] = renderCrosstab\n\n window['$STATS']['renderExportSpecific'] = renderExportSpecific\n\n window['$STATS']['renderHeatMapPopup'] = renderHeatMapPopup\n\n window['$STATS']['renderQuestionHeader'] = renderQuestionHeader\n\n window['$STATS']['renderVQComponent'] = renderVQComponent\n window['$STATS']['renderCQComponent'] = renderCQComponent\n window['$STATS']['renderXQComponent'] = renderXQComponent\n window['$STATS']['renderCLComponent'] = renderCLComponent\n window['$STATS']['renderTLComponent'] = renderTLComponent\n window['$STATS']['renderSNComponent'] = renderSNComponent\n\n window['$STATS']['renderCLMappingComponent'] = renderCLMappingComponent\n window['$STATS']['renderTLMappingComponent'] = renderTLMappingComponent\n\n window['$STATS']['renderCNControls'] = renderCNControls\n window['$STATS']['renderOEControls'] = renderOEControls\n window['$STATS']['renderDCControls'] = renderDCControls\n\n window['$STATS']['renderDCResponses'] = renderDCResponses\n\n window['$STATS']['unlinkComponent'] = unlinkComponent\n\n window['$STATS']['XpertsDebug'] = initializeXpertsDebug\n window['$STATS']['renderXpertsDebug'] = renderXpertsDebug\n\n window['$STATS']['RenameAllCodebooks'] = RenameAllCodebooks\n window['$STATS']['RenameAllTags'] = RenameAllTags\n\n window['$STATS']['cleanSearchData'] = cleanSearchData\n window['$STATS']['isSpecialsDefault'] = getIsDefaultReportParams\n}\n","// lib\nimport React, { useReducer, useState, useRef, useMemo, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport { isEqual } from 'lodash'\n\nimport { dataReducer } from '@aytm/app/stats/page/question-views/components/mapping/reducers'\n\n// components\nimport { default as ComponentContainer } from '@aytm/app/stats/page/question-views/components/mapping/Component'\n\nimport Entities from '@aytm/app/stats/page/question-views/components/mapping/Entities'\nimport Attributes from '@aytm/app/stats/page/question-views/components/mapping/Attributes'\nimport Variables from '@aytm/app/stats/page/question-views/components/mapping/Variables'\n\nimport Controls from '@aytm/app/stats/page/question-views/components/mapping/Controls'\nimport Sources from '@aytm/app/stats/page/question-views/components/mapping/Sources'\nimport Footer from '@aytm/app/stats/page/question-views/components/mapping/Footer'\n\nconst Component = ({\n model,\n data,\n states,\n disabled,\n onChange,\n onReset,\n onControlsChange,\n onModeChange,\n onUpdateData,\n onInvalidKey,\n onPublish,\n onPublished\n}) => {\n const [state, dispatch] = useReducer(dataReducer, {\n entities: JSON.parse(JSON.stringify(model.entities)),\n attributes: JSON.parse(JSON.stringify(model.attributes)),\n variables: JSON.parse(JSON.stringify(model.variables || [])),\n refs: {},\n errors: []\n })\n\n const [changed, setChanged] = useState(false)\n\n const timer = useRef(null)\n\n const stateRef = useRef()\n stateRef.current = state\n\n const attributesOptions = useMemo(\n () =>\n data.options.attributes.map(attribute => {\n const option = {\n icon: attribute.icon,\n label: attribute.label,\n search: attribute.search\n }\n\n const refs = state.entities.map(entity => {\n const i = data.options.entities.findIndex(v => v.pattern == entity.pattern)\n return attribute.refs[i]\n })\n\n option.key = refs.join(', ')\n option.text = `${option.label}${option.key}`\n\n return option\n }),\n [data.options.entities, data.options.attributes, state.entities]\n )\n\n const checkModel = () => {\n const newData = {}\n if (!isEqual(state.entities, model.entities)) {\n newData.errors ||= JSON.parse(JSON.stringify(state.errors))\n for (const i in state.entities) {\n const index = newData.errors.indexOf(`e${Number(i) + 1}`)\n 0 <= index && newData.errors.splice(index, 1)\n }\n newData.entities = JSON.parse(JSON.stringify(model.entities))\n }\n if (!isEqual(state.attributes, model.attributes)) {\n newData.errors ||= JSON.parse(JSON.stringify(state.errors))\n for (const i in state.attributes) {\n const index = newData.errors.indexOf(`a${Number(i) + 1}`)\n 0 <= index && newData.errors.splice(index, 1)\n }\n newData.attributes = JSON.parse(JSON.stringify(model.attributes))\n }\n if (!isEqual(state.variables, model.variables)) {\n newData.refs = state.refs\n newData.errors ||= JSON.parse(JSON.stringify(state.errors))\n for (const vi in state.variables) {\n delete newData.refs[`v${Number(vi) + 1}`]\n const index = newData.errors.indexOf(`v${Number(vi) + 1}`)\n 0 <= index && newData.errors.splice(index, 1)\n }\n newData.variables = JSON.parse(JSON.stringify(model.variables))\n }\n return newData\n }\n const checkState = () => {\n const newData = {}\n if (!isEqual(state.entities, model.entities)) newData.entities = JSON.parse(JSON.stringify(state.entities))\n if (!isEqual(state.attributes, model.attributes)) newData.attributes = JSON.parse(JSON.stringify(state.attributes))\n if (!isEqual(state.variables, model.variables)) newData.variables = JSON.parse(JSON.stringify(state.variables))\n return newData\n }\n\n const checkError = () => {\n if (0 < state.errors.length || !state.entities.length || !state.attributes.length) {\n return { error: true }\n }\n if (state.attributes.some(attr => attr.refs.split(',').length < state.entities.length)) {\n return {\n error:\n 'For each attribute, please make sure there is a question number or subquestion number that corresponds to each entity.'\n }\n }\n return { error: false }\n }\n\n useEffect(() => {\n if (changed) return\n\n dispatch({\n type: 'RESET',\n data: { ...checkModel() }\n })\n\n setChanged(\n !isEqual(stateRef.current.entities, model.entities) ||\n !isEqual(stateRef.current.attributes, model.attributes) ||\n !isEqual(stateRef.current.variables, model.variables)\n )\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [model.entities, model.attributes, model.variables])\n\n useEffect(() => {\n setChanged(true)\n\n const newData = {\n refs: state.refs,\n ...checkError(),\n ...checkState()\n }\n\n timer.current && clearTimeout(timer.current)\n timer.current = setTimeout(() => {\n onChange(newData)\n\n setChanged(false)\n }, 300)\n\n return () => timer.current && clearTimeout(timer.current)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state])\n\n const dataContextValue = useMemo(() => {\n return {\n id: model.id,\n mode: model.mode,\n group: model.group,\n original: model.original,\n data,\n disabled,\n attributesOptions,\n dispatch\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [model.id, model.mode, model.group, model.original, data, disabled, attributesOptions, dispatch])\n\n return (\n
${option.key}`\n\n return option\n }),\n [data.options.entities, data.options.attributes, state.entities]\n )\n\n const checkModel = () => {\n const newData = {}\n if (!isEqual(state.entities, model.entities)) {\n newData.errors ||= JSON.parse(JSON.stringify(state.errors))\n for (const i in state.entities) {\n const index = newData.errors.indexOf(`e${Number(i) + 1}`)\n 0 <= index && newData.errors.splice(index, 1)\n }\n newData.entities = JSON.parse(JSON.stringify(model.entities))\n }\n if (!isEqual(state.attributes, model.attributes)) {\n newData.errors ||= JSON.parse(JSON.stringify(state.errors))\n for (const i in state.attributes) {\n const index = newData.errors.indexOf(`a${Number(i) + 1}`)\n 0 <= index && newData.errors.splice(index, 1)\n }\n newData.attributes = JSON.parse(JSON.stringify(model.attributes))\n }\n return newData\n }\n const checkState = () => {\n const newData = {}\n if (!isEqual(state.entities, model.entities)) newData.entities = JSON.parse(JSON.stringify(state.entities))\n if (!isEqual(state.attributes, model.attributes)) newData.attributes = JSON.parse(JSON.stringify(state.attributes))\n return newData\n }\n\n const checkError = () => {\n if (0 < state.errors.length || !state.entities.length || !state.attributes.length) {\n return { error: true }\n }\n if (state.attributes.some(attr => attr.refs.split(',').length < state.entities.length)) {\n return {\n error:\n 'For each attribute, please make sure there is a question number or subquestion number that corresponds to each entity.'\n }\n }\n return { error: false }\n }\n\n useEffect(() => {\n if (changed) return\n\n dispatch({\n type: 'RESET',\n data: { ...checkModel() }\n })\n\n setChanged(\n !isEqual(stateRef.current.entities, model.entities) || !isEqual(stateRef.current.attributes, model.attributes)\n )\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [model.entities, model.attributes])\n\n useEffect(() => {\n setChanged(true)\n\n const newData = {\n ...checkError(),\n ...checkState()\n }\n\n timer.current && clearTimeout(timer.current)\n timer.current = setTimeout(() => {\n onChange(newData)\n\n setChanged(false)\n }, 300)\n\n return () => timer.current && clearTimeout(timer.current)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state])\n\n const dataContextValue = useMemo(() => {\n return {\n id: model.id,\n mode: model.mode,\n group: model.group,\n original: model.original,\n data,\n disabled,\n attributesOptions,\n dispatch\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [model.id, model.mode, model.group, model.original, data, disabled, attributesOptions, dispatch])\n\n return (\n
\n
\n )\n}\n\nControls.propTypes = {\n model: PropTypes.object,\n data: PropTypes.object,\n features: PropTypes.object,\n collapsed: PropTypes.bool,\n disabled: PropTypes.bool,\n isSurveyGuest: PropTypes.bool,\n onViewModeChange: PropTypes.func,\n onConfigChange: PropTypes.func,\n onPresetChange: PropTypes.func,\n onApplyToAll: PropTypes.func,\n onExport: PropTypes.func,\n onToggle: PropTypes.func\n}\n\nControls.displayName = 'Controls'\n\nexport default Controls\n","// lib\nimport React, { useState, useRef, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport { Transition } from 'react-transition-group'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/components/styles/Component.module.scss'\n\nexport const DataContext = React.createContext()\n\nconst Component = ({ Controls, children, model, data, states, changed, disabled, ...props }) => {\n const [collapsed, setCollapsed] = useState(\n !states.error && states.loaded && (states.collapsed == undefined || states.collapsed)\n )\n const [maxHeight, setMaxHeight] = useState(0)\n\n const [transitionDuration, setTransitionDuration] = useState(500)\n\n const componentRef = useRef()\n\n const collapsedRef = useRef()\n collapsedRef.current = collapsed\n\n const onToggle = () => {\n setCollapsed(!collapsedRef.current)\n setTransitionDuration(500)\n }\n\n // TODO\n useEffect(() => {\n states.collapsed != undefined && setCollapsed(states.collapsed)\n }, [states.collapsed])\n\n useEffect(() => {\n setMaxHeight(componentRef.current ? componentRef.current.getBoundingClientRect().height : 0)\n setTransitionDuration(collapsed ? 500 : 10)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [children, states.error, collapsed, componentRef.current])\n\n useEffect(() => {\n collapsedRef.current && !changed && !states.loading && setCollapsed(!states.error && states.loaded)\n }, [states.error, states.loaded, states.loading, changed])\n\n return (\n \n
\n \n {
\n \n \n {status => (\n \n
\n )}\n \n \n )\n}\n\nComponent.propTypes = {\n Controls: PropTypes.any,\n children: PropTypes.any,\n model: PropTypes.object,\n data: PropTypes.object,\n states: PropTypes.object,\n changed: PropTypes.bool,\n disabled: PropTypes.bool\n}\n\nComponent.displayName = 'Component'\n\nexport default Component\n","// libs\nimport React, { useMemo, useRef } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport htmlReactParser, { domToReact } from 'html-react-parser'\nimport { linkifyText } from '@aytm/app/stats/lib/linkify-text'\nimport { prepareForEditing, applyEditing } from './lib/TextEditor/converters'\n\nimport linkDecorators from '@aytm/app/stats/page/question-views/components/lib/TextEditor/linkDecorators'\nimport { SKIPPER_LINK_NAMES } from '@aytm/app/stats/page/question-views/components/lib/skipper-links/const'\nimport openSidebarLink, { OPEN_SIDEBAR_LINK_NAME } from './lib/skipper-links/open-sidebar'\nimport { getAttributesFromLinkNode } from '@aytm/app/stats/page/question-views/components/lib/skipper-links/attributes'\nimport { onSkipperLinkClick } from '@aytm/app/stats/page/question-views/components/lib/skipper-links/click'\n\n// components\nimport { Button } from 'primereact/button'\n\nimport TextEditor from '@aytm/app/stats/page/question-views/components/TextEditor'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/components/styles/QuestionAnnotation.module.scss'\nimport styleTextFormatting from '@aytm/app/stats/page/question-views/components/styles/TextFormatting.module.scss'\n\nconst QuestionAnnotation = ({\n note,\n editing,\n isNoteEditable,\n disabled,\n setNote,\n onSaveEditing,\n onCancelEditing,\n onAIAddQuestionClick\n}) => {\n const transformedNote = useMemo(() => (note ? linkifyText(note) : note), [note])\n const parsedNode = useMemo(\n () =>\n transformedNote\n ? htmlReactParser(transformedNote, {\n trim: true,\n replace(domNode) {\n if (SKIPPER_LINK_NAMES.includes(domNode.name)) {\n const linkAttributes = getAttributesFromLinkNode(domNode)\n const title = linkAttributes.title\n return (\n \n {children}\n {'string' === typeof states.error && (\n
\n {states.error}
\n )}\n \n {editing ? (\n <>\n {isNoteEditable && (\n
\n ) : null\n}\n\nQuestionAnnotation.propTypes = {\n note: PropTypes.string,\n editing: PropTypes.bool,\n isNoteEditable: PropTypes.bool,\n disabled: PropTypes.bool,\n setNote: PropTypes.func,\n onSaveEditing: PropTypes.func,\n onCancelEditing: PropTypes.func,\n onAIAddQuestionClick: PropTypes.func\n}\n\nQuestionAnnotation.displayName = 'QuestionAnnotation'\n\nexport default QuestionAnnotation\n","// libs\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/components/styles/QuestionBody.module.scss'\n\nconst QuestionBody = ({ children, editing, isQuestionCollapsed }) => (\n \n
\n )}\n \n
\n \n \n
\n \n ) : (\n \n
\n \n
\n )}\n {parsedNode}
\n \n {children}\n
\n)\n\nQuestionBody.propTypes = {\n children: PropTypes.any,\n editing: PropTypes.bool,\n isQuestionCollapsed: PropTypes.bool\n}\n\nQuestionBody.displayName = 'QuestionBody'\n\nexport default QuestionBody\n","import React, { Fragment, useState, useRef, useMemo, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport ADND from '@aytm/lib/adnd/ADND'\nimport { formatAmounts } from '@aytm/app/stats/lib/helpers'\nimport { getIsDefaultReportParams } from '@aytm/app/stats/page/comments/lib/utils'\nimport { imageAsset as imageAssetUrl } from '@aytm/app/survey/editor/resources/urls'\nimport htmlReactParser, { domToReact } from 'html-react-parser'\nimport openSidebarLink, { OPEN_SIDEBAR_LINK_NAME } from './lib/skipper-links/open-sidebar'\n\n// components\nimport Popup from '@aytm/lib/rfd-ui/components/basic/popup'\n\nimport QuestionTitle from '@aytm/app/stats/page/question-views/components/QuestionTitle'\nimport QuestionAnnotation from '@aytm/app/stats/page/question-views/components/QuestionAnnotation'\n\nimport ImagePreview from '@aytm/app/survey/editor/components/content/assets/ImagePreview'\n\n// hooks\nimport { useSingleAndDoubleClick } from '@aytm/app/stats/page/question-views/components/lib/hooks/useSingleAndDoubleClick'\nimport useMountedRef from '@aytm/lib/hooks/useMountedRef'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/components/styles/QuestionHeader.module.scss'\nimport annotationStyle from '@aytm/app/stats/page/question-views/components/styles/QuestionAnnotation.module.scss'\n\n// consts\nimport {\n IMAGE_ASSET_PATH_FILTER_RESIZE_TO_LIMIT,\n IMAGE_ASSET_PATH_FILTER_RESIZE_AND_PAD\n} from '@aytm/lib/common/assets'\nimport {\n QUESTION_TITLE_THUMB_HEIGHT,\n QUESTION_TITLE_THUMB_WIDTH,\n QUESTION_TITLE_IMAGE_MIN_WIDTH,\n QUESTION_TITLE_IMAGE_MAX_WIDTH,\n QUESTION_TITLE_IMAGE_MIN_HEIGHT,\n QUESTION_TITLE_IMAGE_MAX_HEIGHT,\n TYPE_DND_MAP\n} from '@aytm/app/stats/page/question-views/components/lib/constants'\n\n// SVGs\nimport RadarSVG from '@aytm/app/stats/page/question-views/components/lib/svg/radar.svg'\n\nconst QuestionHeader = ({\n model = {},\n question,\n onScrollToSkip,\n specialType,\n reportId,\n features,\n windowUID,\n sortableList,\n questionView,\n isEditingExt,\n titleExt,\n isQuestionCollapsed,\n isReportXpert,\n isShared,\n getReportParams,\n onToggleCollapse,\n onUpdateParams,\n onTitleChange,\n onStorytellingNoteChange,\n oeSearchParams,\n onCloneQuestion,\n onAIAssistantsClick,\n onAIAddQuestionClick,\n onFinalizeDragLayerContent,\n onDndStart,\n onDndEnd,\n onSetTitleExt,\n onSetEditQuestionExt,\n onSaveExt,\n onAIAssistantsCancel\n}) => {\n const {\n id,\n key,\n parentID,\n disabled,\n type,\n icon,\n subType,\n pre_type,\n position,\n visual_position,\n text,\n header,\n storytellingNote,\n answer,\n image,\n skipsTo,\n aiAssistantsText,\n aiAssistantsHash,\n aiAssistantsTotalTime,\n aiAssistantsCurrentTime,\n aiProgressMessage\n } = model\n\n const [title, setTitle] = useState(\n titleExt != undefined && null !== titleExt ? titleExt : ('string' === typeof header && header) || text\n )\n const [note, setNote] = useState(storytellingNote)\n\n const [isEditing, setIsEditing] = useState(isEditingExt || false)\n const [isCollapsed, setIsCollapsed] = useState(isQuestionCollapsed)\n const [thumbnailPreviewOpened, setThumbnailPreviewOpened] = useState(false)\n\n const [aiAssistantPopupPosition, setAIAssistantPopupPosition] = useState('topright')\n const [aiAssistantRequestFailed, setAIAssistantRequestFailed] = useState(false)\n\n const mountedRef = useMountedRef()\n\n const componentRef = useRef(null)\n\n const savedValues = useRef(null)\n savedValues.current = {\n text: titleExt != undefined && null !== titleExt ? titleExt : ('string' === typeof header && header) || text,\n note: storytellingNote\n }\n\n const dndListItemRef = useRef(questionView)\n const dndListItemHandleRef = useRef()\n\n const isRadarEnabled =\n ['rb', 'cb', 'mx', 'sr', 'se', 'ro', 'aro', 'mp', 'qa', 'bpm', 'psc'].includes(type) && !features.radar.hidden\n\n const isAIAssistantsEnabled = 'dc' !== type && !isShared && !disabled && !features.ai_assistants.disabled\n\n const aiProgressMessageNode = useMemo(\n () =>\n aiProgressMessage\n ? htmlReactParser(aiProgressMessage, {\n trim: true,\n replace({ name, attribs, children }) {\n if (OPEN_SIDEBAR_LINK_NAME === name) {\n const tab = attribs?.tab || ''\n const focus = attribs?.focus || ''\n const icon = attribs?.icon || ''\n return (\n \n (\n setThumbnailPreviewOpened(true)}\n onImageHide={() => setThumbnailPreviewOpened(false)}\n previewUrl={imageAssetUrl(image.original.path, {\n width: QUESTION_TITLE_IMAGE_MAX_WIDTH,\n height: QUESTION_TITLE_IMAGE_MAX_HEIGHT,\n filter: IMAGE_ASSET_PATH_FILTER_RESIZE_TO_LIMIT,\n unsharp: true,\n backgroundColor: 'transparent'\n })}\n />\n )}\n contentTheme=\"thin-black\"\n hideOtherPopupsOnShow\n >\n
\n )\n\n const renderRadarLink = () => {\n const msg = features.radar.available ? (\n \n
OF THE STAT REPORT'\n ) : null\n\n return (\n
: null}\n
\n {isTogglable && (\n \n {isCollapsed ? 'Expand' : 'Collapse'}\n \n )}\n void (setAIAssistantRequestFailed(false), onAIAssistantsClick(onAIAssistantsClickCallback))\n }\n >\n {aiAssistantsHash && (\n \n )}\n \n \n \n \n ) : null}\n\n {isAnnotationEditable ? (\n \n \n \n ) : null}\n\n {isRadarEnabled ? renderRadarLink() : null}\n
\n\n {isDraggable && }\n\n {!isCollapsed && aiProgressMessage ? (\n \n onShowCommentsPage(event, 'comments')\n : null\n }\n >\n {'loading' != answer && null !== answer.comments && 0 < answer.comments\n ? formatAmounts(answer, 'comments')\n : 0}\n \n \n ) : null}\n\n {'cn' === type && !features.comments_page.hidden ? (\n onShowCommentsPage(event, 'total')\n : null\n }\n >\n {'loading' != answer && null !== answer.total && 0 < answer.total ? formatAmounts(answer, 'total') : 0}\n \n \n ) : null}\n\n {'ir' === type && !features.comments_page.hidden ? (\n onShowCommentsPage(event, 'image-responses')\n : null\n }\n >\n {'loading' != answer && null !== answer.images && 0 < answer.images ? formatAmounts(answer, 'images') : 0}\n \n \n ) : null}\n\n {'va' === type && !features.comments_page.hidden ? (\n onShowCommentsPage(event, 'videos')\n : null\n }\n >\n {'loading' != answer && null !== answer.videos && 0 < answer.videos ? formatAmounts(answer, 'videos') : 0}\n \n \n ) : null}\n\n {undefined !== skipsTo && skipsTo.length ? renderSkipToLinks() : null}\n\n {isAIAssistantsEnabled ? (\n <>\n {aiAssistantRequestFailed ? (\n (\n void setAIAssistantRequestFailed(false)}\n >\n \n \n \n Sorry, mate, I've lost my bearings!... \n ðŸ§\n \n
\n Let's give it another go in a bit\n
\n )}\n >\n \n \n ) : null}\n \n {'dc' !== type && (\n <>\n
\n\n {image != undefined && image.original != undefined ? renderQuestionThumbnail(image) : null}\n\n {'oe' === type && !features.comments_page.hidden ? (\n \n
\n {questionId}
\n \n )}\n\n \n
\n \n Let's give it another go in a bit\n
\n {aiProgressMessageNode}\n {onAIAssistantsCancel ? (\n <>\n
\n
\n
\n ) : null}\n\n {!isCollapsed && !onSaveExt && !aiProgressMessage && (\n \n
\n
void onAIAssistantsCancel()}>\n Cancel\n
\n \n ) : null}\n \n
\n ) : (\n \n )\n}\n\nQuestionTitle.propTypes = {\n question: PropTypes.object,\n title: PropTypes.string,\n editing: PropTypes.bool,\n disabled: PropTypes.bool,\n setTitle: PropTypes.func\n}\n\nQuestionTitle.displayName = 'QuestionTitle'\n\nexport default QuestionTitle\n","// lib\nimport React, { useRef } from 'react'\nimport PropTypes from 'prop-types'\nimport { Map } from 'immutable'\n\nimport countText from '@aytm/app/survey/editor/lib/text-count'\n\n// components\nimport RichTextCounter from '@aytm/lib/rfd-ui/components/advanced/rich-text-counter'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/components/styles/TextEditor.module.scss'\n\nexport const formatOptions = Map({\n BOLD: true,\n ITALIC: true,\n UNDERLINE: true,\n blockquote: true,\n 'header-one': true\n})\n\nconst TextEditor = ({ text, height = 230, characters = 250, className, disabled, decorators, onChange }) => {\n const refEditorField = useRef()\n\n const onFocus = () => {\n refEditorField.current.refRichText.refEditor.focus()\n }\n\n const onChangeText = getContent => {\n const { html } = getContent({ html: true, text: false })\n 'function' === typeof onChange && onChange(html)\n }\n\n return (\n \n {!disabled ? (\n
\n )\n}\n\nTextEditor.propTypes = {\n text: PropTypes.string,\n height: PropTypes.number,\n characters: PropTypes.number,\n className: PropTypes.string,\n disabled: PropTypes.bool,\n decorators: PropTypes.array,\n onChange: PropTypes.func.isRequired\n}\n\nTextEditor.displayName = 'TextEditor'\n\nexport default TextEditor\n","import React, { useState, useRef, useCallback } from 'react'\nimport PropTypes from 'prop-types'\n\n// components\nimport Popup from '@aytm/lib/rfd-ui/components/basic/popup'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/components/styles/Controls.module.scss'\n\nconst Controls = ({ children, data, collapsed, onToggle }) => {\n const [status, setStatus] = useState('')\n\n const timer = useRef(null)\n\n const toggle = useCallback(() => {\n setStatus('toggling')\n onToggle()\n\n timer.current && clearTimeout(timer.current)\n timer.current = setTimeout(() => 'toggling' === status && setStatus(''), 500)\n\n return () => timer.current && clearTimeout(timer.current)\n }, [status, onToggle])\n\n return (\n \n
\n ) : (\n \n )}\n \n {data.icon && (\n
\n )\n}\n\nControls.propTypes = {\n data: PropTypes.object,\n collapsed: PropTypes.bool,\n onToggle: PropTypes.func,\n children: PropTypes.any\n}\n\nControls.displayName = 'Controls'\n\nexport default Controls\n","// lib\nimport React, { useMemo } from 'react'\nimport PropTypes from 'prop-types'\n\n// components\nimport { Button } from 'primereact/button'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/components/styles/Footer.module.scss'\n\nconst Footer = ({ children, data, states, updateTextPrefix, onUpdateData }) => {\n const updateText = useMemo(\n () =>\n `${updateTextPrefix ? updateTextPrefix : states.updated ? 'Updat' : 'Generat'}${\n updateTextPrefix ? '' : states.loading ? 'ing' : 'e'\n } ${data.texts.update}`,\n [data.texts.update, states.loading, states.updated, updateTextPrefix]\n )\n const updateDisabled = useMemo(\n () => states.error || states.loaded || states.loading || states.disabled.update,\n [states.error, states.loaded, states.loading, states.disabled.update]\n )\n\n return (\n <>\n \n \n \n
\n )}\n {children}
\n \n \n \n \n
\n {data.help && (\n \n }\n content={() => }\n >\n \n \n
\n )}\n \n
\n \n )\n}\n\nFooter.propTypes = {\n children: PropTypes.any,\n data: PropTypes.object,\n states: PropTypes.object,\n updateTextPrefix: PropTypes.string,\n onUpdateData: PropTypes.func\n}\n\nFooter.displayName = 'Footer'\n\nexport default Footer\n","import { prepareForEditing, applyEditing } from '../converters'\n\ndescribe('TextEditor custom tag converters', () => {\n const replaceRegex = /<(cq-link|vq-link)[^>]*?>.*?<\\/\\1>/gs\n const charBase = 0xf222\n\n describe('prepareForEditing', () => {\n it('should replace cq-link and vq-link tags with special characters', () => {\n const html = '\n
\n {children}
\n ${expectedChar1} and ${expectedChar2}
`)\n expect(Object.keys(result.charsMap)).toHaveLength(2)\n expect(result.charsRegexp).toEqual(new RegExp(`[${expectedChar1}${expectedChar2}]`, 'g'))\n })\n\n it('should handle tags with attributes', () => {\n const html = 'Normal link
'\n const result = prepareForEditing(html, replaceRegex, charBase)\n\n expect(result.html).toBe(html)\n expect(Object.keys(result.charsMap)).toHaveLength(0)\n expect(result.charsRegexp).toEqual(/a^/) // This regex will never match anything\n })\n })\n\n describe('applyEditing', () => {\n it('should restore original tags from special characters', () => {\n const originalHtml = 'Normal text
'\n const charsMap = {}\n const charsRegexp = new RegExp(\n `[${String.fromCodePoint(charBase)}${String.fromCodePoint(charBase + 1)}${String.fromCodePoint(charBase + 2)}]`,\n 'g'\n )\n const result = applyEditing(html, charsMap, charsRegexp)\n\n expect(result).toBe(html)\n })\n\n it('should preserve character if no replacement found', () => {\n const specialChar = String.fromCodePoint(charBase)\n const html = `${specialChar} No replacement for this`\n const charsMap = {}\n const charsRegexp = new RegExp(`[${specialChar}]`, 'g')\n const result = applyEditing(html, charsMap, charsRegexp)\n\n expect(result).toBe(html)\n })\n })\n})\n","const prepareForEditing = (\n html: string,\n replaceRegex = /<(cq-link|vq-link|cvq-link)[^>]*?>.*?<\\/\\1>/g,\n charBase = 0xf222\n): { html: string; charsMap: { [char: string]: { text: string; title?: string } }; charsRegexp: RegExp } => {\n let currentChar = charBase\n const charsMap: { [char: string]: { text: string; title?: string } } = {}\n const usedChars: string[] = []\n\n const convertedHtml = html.replace(replaceRegex, match => {\n const char = String.fromCodePoint(currentChar)\n const titleMatch = match.match(/title=\"([^\"]*)\"/)\n const title = titleMatch ? titleMatch[1] : void 0\n\n charsMap[char] = { text: match, ...(title && { title }) }\n usedChars.push(char)\n currentChar++\n return char\n })\n\n const charsRegexp = usedChars.length > 0 ? new RegExp(`[${usedChars.join('')}]`, 'g') : new RegExp('a^')\n\n return {\n html: convertedHtml,\n charsMap: charsMap,\n charsRegexp\n }\n}\n\nconst applyEditing = (html: string, charsMap: { [char: string]: { text: string } }, charsRegexp: RegExp): string =>\n html.replace(charsRegexp, char => {\n const replacement = charsMap[char]\n if (!replacement) {\n return char\n }\n return replacement.text\n })\n\nexport { prepareForEditing, applyEditing }\n","import React, { useEffect, useRef } from 'react'\nimport { CompositeDecorator, ContentBlock } from 'draft-js'\n\nimport style from '@aytm/app/stats/page/question-views/components/styles/TextEditor.module.scss'\n\nlet linkDecoratorComponentID = 0\nconst linkDecoratorComponentIDPrefix = `${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`\n\nconst linkDecorators = (charsMap: { [char: string]: { text: string; title?: string } }, charsRegexp: RegExp) => {\n const LinkComponent = (props: { decoratedText: string; children: React.ReactNode }) => {\n const title = charsMap[props.decoratedText]?.title\n const idRef = useRef{position}.
\n \n
\n \n {disabled || 'advanced' == itemMode ? renderAdvanced() : renderBasic()}\n
\n \n
\n \n {disabled ? null : (\n \n {!methodsOptions.length ? (\n \n onMethodChange(\n event.value,\n event.originalEvent &&\n event.originalEvent.shiftKey &&\n !event.originalEvent.ctrlKey &&\n !event.originalEvent.altKey &&\n !event.originalEvent.metaKey\n )\n }\n onFocus={onMethodFocus}\n onBlur={onMethodBlur}\n />\n ) : (\n \n onMethodChange(\n event.value,\n event.originalEvent &&\n event.originalEvent.shiftKey &&\n !event.originalEvent.ctrlKey &&\n !event.originalEvent.altKey &&\n !event.originalEvent.metaKey\n )\n }\n onFocus={onMethodFocus}\n onBlur={onMethodBlur}\n />\n )}\n
\n \n
\n \n \n \n \n
\n )}\n \n )\n\n return (\n \n {disabled ? null : (\n \n \n \n )}\n
\n )\n}\n\nAttribute.propTypes = {\n item: PropTypes.object,\n position: PropTypes.number,\n dimension: PropTypes.number,\n dndItemsList: PropTypes.any,\n onMethodFocus: PropTypes.func,\n onMethodBlur: PropTypes.func\n}\n\nAttribute.displayName = 'Attribute'\n\nexport default Attribute\n","// lib\nimport React, { useContext, useState, useRef, useEffect, useCallback } from 'react'\nimport PropTypes from 'prop-types'\n\nimport ADND from '@aytm/lib/adnd/ADND'\nimport { DataContext } from '@aytm/app/stats/page/question-views/components/mapping/Component'\n\nimport { generateUID } from '@aytm/app/stats/lib/helpers'\n\n// components\nimport Popup from '@aytm/lib/rfd-ui/components/basic/popup'\n\nimport Attribute from '@aytm/app/stats/page/question-views/components/mapping/Attribute'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/components/mapping/styles/Component.module.scss'\n\nconst onDNDPositionChange = ({ newPosition, dragItemUpdater } = {}) =>\n dragItemUpdater(node => {\n const itemPositionNode = node.querySelector(`.stats-Concept-Item-index`)\n if (null !== itemPositionNode) {\n itemPositionNode.innerHTML = null === `${newPosition + 1}.` ? '' : `${newPosition + 1}.`\n }\n })\n\nconst getDefaultAttribute = (item = {}) => {\n return {\n key: generateUID(),\n text: '',\n refs: '',\n method: '',\n ...item\n }\n}\n\nconst Attributes = ({ items, dimension, onModeChange }) => {\n const { id, mode, group, data, disabled, dispatch } = useContext(DataContext)\n\n const [activeLabel, setActiveLabel] = useState(' ')\n\n const dndItemsListRef = useRef()\n\n const methodTimer = useRef(null)\n\n const onDNDUpdateItemPositions = ({ hiddenItemIndex, placeholderIndex } = {}) => {\n const itemPositionNodes = dndItemsListRef.current.querySelectorAll(`.stats-Concept-Item .stats-Concept-Item-index`)\n\n for (const [i, itemPositionNode] of itemPositionNodes.entries()) {\n if (null !== itemPositionNode) {\n const visualItemIndex = i + (null !== hiddenItemIndex && hiddenItemIndex <= i ? -1 : 0)\n const newItemIndex =\n visualItemIndex + (null !== placeholderIndex && placeholderIndex <= visualItemIndex ? 1 : 0)\n itemPositionNode.innerHTML = null === `${newItemIndex + 1}` ? '' : `${newItemIndex + 1}.`\n }\n }\n }\n\n const onDNDDrop = res => {\n const { item, position, clone } = res\n\n if (clone) {\n dispatch({\n type: 'ADD_ATTRIBUTE',\n data: {\n item: {\n ...getDefaultAttribute(item.item),\n key: generateUID()\n },\n position\n }\n })\n } else if (item.id != id) {\n item.remove()\n dispatch({\n type: 'ADD_ATTRIBUTE',\n data: {\n item: {\n ...getDefaultAttribute(item.item),\n key: generateUID()\n },\n position\n }\n })\n } else if (item.position != position) {\n dispatch({\n type: 'REORDER_ATTRIBUTES',\n data: {\n from: item.position,\n to: position\n }\n })\n }\n\n onDNDUpdateItemPositions()\n }\n\n const dndItemsList = ADND.targets\n .itemsList(\n {\n acceptTypes: [`dlq-attribute-${data.windowUID}`],\n placeholderVMargin: 10\n },\n { capture: false }\n )\n .buildPlaceholder(() => {\n const placeholderNode = document.createElement('div')\n placeholderNode.className = `${style.placeholder}`\n return placeholderNode\n })\n .onPositionChange(onDNDPositionChange)\n .onUpdateItemPositions(onDNDUpdateItemPositions)\n .onEnter(onDNDUpdateItemPositions)\n .onLeave(onDNDUpdateItemPositions)\n .onDrop(onDNDDrop)\n\n const onAddClick = () => {\n dispatch({\n type: 'ADD_ATTRIBUTE',\n data: {\n item: getDefaultAttribute(),\n position: items.length\n }\n })\n }\n\n const onMethodBlur = () => {\n if (null !== methodTimer.current) return\n setActiveLabel(' ')\n }\n\n const onMethodFocus = useCallback(() => {\n methodTimer.current && clearTimeout(methodTimer.current)\n methodTimer.current = setTimeout(() => {\n methodTimer.current = null\n\n setActiveLabel('Hold Shift to apply to all')\n }, 200)\n\n return () => methodTimer.current && clearTimeout(methodTimer.current)\n }, [])\n\n useEffect(() => {\n dndItemsList.connect(dndItemsListRef.current)\n\n return () => {\n dndItemsList.disconnect()\n }\n }, [dndItemsList])\n\n return (\n Please list corresponding questions/subquestions for each run separated by commas.
}\n >\n {renderComponent()}\n \n\n \n
\n \n {disabled || group == undefined || null === group || ['custom', 'survey'].includes(group) ? (\n \n {items.length} {1 == items.length ? 'attribute' : 'attributes'}\n \n ) : (\n <>\n
\n \n \n {items.length} {1 == items.length ? 'attribute' : 'attributes'}\n \n
\n \n onModeChange('advanced' == mode ? 'basic' : 'advanced')}>\n {'advanced' == mode ? 'switch to basic mode' : 'switch to advanced mode'}\n \n
\n \n )}\n \n Questions/Subquestions\n }\n content={() => (\n <>\n
\n Select the following for questions/subquestions:
\n- \n
- The question(s) or subquestion(s) you would like to include as attributes. \n
- \n How you would like the question/subquestion summarized (mean, box scores, or an individual answer\n option).\n \n
- \n Review definitions for mean and box score options \n
\n \n
\n Label
\n \n {items.map((item, index) => (\n
\n {disabled ? null : (\n \n
\n )}\n \n )\n}\n\nAttributes.propTypes = {\n items: PropTypes.array,\n dimension: PropTypes.number,\n onModeChange: PropTypes.func\n}\n\nAttributes.displayName = 'Attributes'\n\nexport default Attributes\n\nADND().connect()\n","// lib\nimport React, { useMemo } from 'react'\nimport PropTypes from 'prop-types'\n\nimport ADND from '@aytm/lib/adnd/ADND'\n\n// components\nimport Popup from '@aytm/lib/rfd-ui/components/basic/popup'\n\nimport { default as ComponentContainer } from '@aytm/app/stats/page/question-views/components/Component'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/components/mapping/styles/Component.module.scss'\n\nexport const DataContext = React.createContext()\n\nconst Component = ({\n Controls,\n Footer,\n children,\n model,\n data,\n states,\n prefix,\n command,\n changed,\n disabled,\n dataContextValue,\n onFeaturesChange,\n onControlsChange,\n onUpdateData,\n ...rest\n}) => {\n const showMapping = useMemo(\n () =>\n (model.features == undefined || !model.features.insightsMapping) &&\n !model.disabled &&\n 'function' === typeof onFeaturesChange,\n [model.features, model.disabled, onFeaturesChange]\n )\n\n return (\n {items.length + 1}.
\n \n \n Add an attribute\n \n
\n \n {showMapping ? (\n {children} \n
\n {!disabled && (\n \n
\n ) : null}\n \n onFeaturesChange('insightsMapping', true)}>\n Convert to {prefix} Mapping\n \n
\n \n }\n content={() => (\n
\n \n Convert this {prefix} Lab into a {prefix} Mapping to send the data to the Insights Portal.\n
\n )}\n >\n \n \n \n onChange('source', event.value)}\n />\n
\n \n \n {disabled || 'advanced' == mode ? (\n
\n \n {showReset ? (\n <>\n
\n \n \n {items.length} {1 == items.length ? 'entity' : 'entities'}\n \n
\n \n \n reset\n \n
\n \n ) : (\n \n {items.length} {1 == items.length ? 'entity' : 'entities'}\n \n )}\n {textLabel}
\n ) : (\n <>\n Data source
\n {textLabel}
\n \n )}\n \n {items.map((item, index) => (\n
\n {disabled ? null : (\n \n
\n )}\n \n )\n}\n\nEntities.propTypes = {\n items: PropTypes.array,\n imagesDisabled: PropTypes.bool,\n onReset: PropTypes.func\n}\n\nEntities.displayName = 'Entities'\n\nexport default Entities\n\nADND().connect()\n","// lib\nimport React, { useContext, useRef, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\n\nimport ADND from '@aytm/lib/adnd/ADND'\nimport { DataContext } from '@aytm/app/stats/page/question-views/components/mapping/Component'\n\nimport { generateUID, encodeText, decodeText } from '@aytm/app/stats/lib/helpers'\n\n// components\nimport { InputText } from 'primereact/inputtext'\nimport { Dropdown } from 'primereact/dropdown'\n\n// hooks\nimport { useSingleAndDoubleClick } from '@aytm/app/stats/page/question-views/components/lib/hooks/useSingleAndDoubleClick'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/components/mapping/styles/Component.module.scss'\n\nconst Entity = ({ item, position, imagesDisabled, dndItemsList }) => {\n const { id, mode, data, disabled, dispatch } = useContext(DataContext)\n\n const dndListItemRef = useRef()\n const dndListItemHandleRef = useRef()\n\n const fetchData = useCallback(() => {\n return {\n id,\n item,\n position: position - 1,\n windowUID: data.windowUID,\n remove: () =>\n dispatch({\n type: 'DELETE_ENTITY',\n data: position - 1\n })\n }\n }, [item, position, id, data.windowUID, dispatch])\n\n const dndListItem = ADND.targets.itemsList.listItem({\n type: `dlq-entity-${data.windowUID}`,\n list: dndItemsList\n })\n const dndListItemHandle = ADND.sources\n .listItemHandle({\n type: `dlq-entity-${data.windowUID}`,\n item: dndListItem,\n cloneable: true\n })\n .fetchData(fetchData)\n\n const itemImageTemplate = option =>\n option ? (\n <>\n {option.src && {items.length + 1}.
\n \n \n Add an entity\n \n
\n \n
\n {renderLabel()}
\n const renderBasic = () => (\n <>\n \n
\n {renderLabel()}
\n \n )\n\n return (\n \n {disabled ? null : (\n \n \n \n )}\n \n {disabled || 'advanced' == mode ? renderAdvanced() : renderBasic()}\n
\n {disabled ? null : (\n {position}.
\n \n \n \n \n
\n )}\n \n )\n}\n\nEntity.propTypes = {\n item: PropTypes.object,\n position: PropTypes.number,\n imagesDisabled: PropTypes.bool,\n dndItemsList: PropTypes.any\n}\n\nEntity.displayName = 'Entity'\n\nexport default Entity\n","// lib\nimport React, { useState, useRef, useMemo, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport { AbortController as _abortControllerPolyfill } from 'abortcontroller-polyfill/dist/cjs-ponyfill'\n\nimport { sendJobJSONData } from '@aytm/app/stats/lib/fetch'\n\n// components\nimport { Button } from 'primereact/button'\nimport { Dropdown } from 'primereact/dropdown'\n\nimport Popup from '@aytm/lib/rfd-ui/components/basic/popup'\n\nimport { default as FooterContainer } from '@aytm/app/stats/page/question-views/components/component/Footer'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/components/mapping/styles/Component.module.scss'\n\nconst DEFAULT_FETCH_TIMEOUT = 1000\nconst FETCH_TIMEOUT_STEP = 500\n\n/* compat/compat disabled because polyfill is used */\n// eslint-disable-next-line compat/compat\nconst AbortController = window.AbortController || _abortControllerPolyfill\n\nconst Footer = ({\n model,\n data,\n states,\n prefix,\n command,\n updateTextPrefix,\n onChange,\n onUpdateData,\n onInvalidKey,\n onPublish,\n onPublished,\n onError\n}) => {\n const { id, key, group, portal, variables } = model\n\n const [processing, setProcessing] = useState(false)\n const [published, setPublished] = useState(states.publish.published)\n\n const abortController = useRef(null)\n\n const apiKey = useRef(null)\n\n const portalRef = useRef(null)\n portalRef.current = portal\n\n const error = useMemo(\n () =>\n states.loaded &&\n (variables.some(item => !item.text.trim().length || !item.pattern.trim().length) ||\n (0 < data.controls.portals.options.length && !portal) ||\n states.publish.error),\n [variables, portal, data.controls.portals.options, states.loaded, states.publish.error]\n )\n\n const publishText = useMemo(\n () => `${processing ? 'PUSHING' : published ? 'PUSHED' : 'PUSH'} TO PORTAL${null === portal ? 'S' : ''}`,\n [portal, processing, published]\n )\n const publishDisabled = useMemo(\n () =>\n variables.some(item => !item.text.trim().length || !item.pattern.trim().length) ||\n (0 < data.controls.portals.options.length && !portal) ||\n !states.loaded ||\n states.publish.error ||\n states.disabled.publish ||\n processing ||\n published,\n [\n variables,\n portal,\n data.controls.portals.options,\n states.loaded,\n states.publish.error,\n states.disabled.publish,\n processing,\n published\n ]\n )\n\n let fetchTimeout = DEFAULT_FETCH_TIMEOUT\n let fetchDebounceTimeout = 0\n let fetchTimer = null\n\n const itemTemplate = option => \n const valueTemplate = (option, _props) => (\n \n onChange('portal', event.value)}\n />\n
\n ) : (\n \n \n Enabled in all {prefix} Portals\n
\n under {data.account.name} account\n \n
\n )}\n \n under {data.account.name} account\n \n
\n (\n }\n content={() => (\n
\n \n )\n\n return (\n \n
\n ) : null\n}\n\nSources.propTypes = {\n source: PropTypes.string,\n data: PropTypes.object,\n entities: PropTypes.array,\n disabled: PropTypes.bool,\n dispatch: PropTypes.func\n}\n\nSources.displayName = 'Sources'\n\nexport default Sources\n","// lib\nimport React, { useContext, useState, useRef, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\n\nimport ADND from '@aytm/lib/adnd/ADND'\nimport { DataContext } from '@aytm/app/stats/page/question-views/components/mapping/Component'\n\nimport { generateUID, encodeText, decodeText } from '@aytm/app/stats/lib/helpers'\n\n// components\nimport { InputText } from 'primereact/inputtext'\nimport { Dropdown } from 'primereact/dropdown'\n\nimport {\n itemTemplate,\n valueTemplate,\n optionGroupTemplate\n} from '@aytm/app/stats/page/question-views/components/lib/templates'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/components/mapping/styles/Component.module.scss'\n\nconst Variable = ({ item, position, dndItemsList }) => {\n const { id, data, disabled, dispatch } = useContext(DataContext)\n\n const [selectedValue, setSelectedValue] = useState(null)\n\n const changedRef = useRef(false)\n\n const dndListItemRef = useRef()\n const dndListItemHandleRef = useRef()\n\n const selectedValueRef = useRef(null)\n selectedValueRef.current = selectedValue\n\n const fetchData = useCallback(() => {\n return {\n id,\n item,\n position: position - 1,\n windowUID: data.windowUID,\n remove: () =>\n dispatch({\n type: 'DELETE_VARIABLE',\n data: position - 1\n })\n }\n }, [item, position, id, data.windowUID, dispatch])\n\n const dndListItem = ADND.targets.itemsList.listItem({\n type: `dlq-variable-${data.windowUID}`,\n list: dndItemsList\n })\n const dndListItemHandle = ADND.sources\n .listItemHandle({\n type: `dlq-variable-${data.windowUID}`,\n item: dndListItem,\n cloneable: true\n })\n .fetchData(fetchData)\n\n const onSelectedChange = (value = null, _values) => {\n const group = data.filters.find(v => v.items.some(v => v.key == value)) || null\n if (null !== group && group.disabled) return\n\n const option = group.items.find(v => v.key == value) || null\n if (null !== option && option.disabled) return\n\n setSelectedValue(value)\n\n changedRef.current = true\n\n const options =\n null === option || option.options == undefined\n ? []\n : option.options.filter(_v => null !== _v.pattern && _v.pattern != undefined && 0 < _v.pattern.length)\n\n dispatch({\n type: 'UPDATE_VARIABLE',\n data: {\n item: {\n ...item,\n text: option.text,\n pattern: null === option ? '' : value,\n rules:\n null === option || option.options == undefined\n ? []\n : option.options.map(v =>\n v.other\n ? 0 < options.length\n ? `not (${options.map(_v => `(${_v.pattern})`).join(' or ')})`\n : ''\n : v.pattern\n )\n },\n position: position - 1\n }\n })\n }\n\n const onLabelChange = event => {\n dispatch({\n type: 'UPDATE_VARIABLE',\n data: {\n item: {\n ...item,\n text: encodeText(event.target.value)\n },\n position: position - 1\n }\n })\n }\n\n const onDeleteClick = () => {\n dispatch({\n type: 'DELETE_VARIABLE',\n data: position - 1\n })\n }\n\n const onHandleClick = event => {\n if (2 != event.detail) return\n\n dispatch({\n type: 'ADD_VARIABLE',\n data: {\n item: {\n ...item,\n key: generateUID()\n },\n position: position\n }\n })\n }\n\n useEffect(() => {\n if (dndListItem) dndListItem.connect(dndListItemRef.current)\n\n return () => {\n if (dndListItem) dndListItem.disconnect()\n }\n }, [dndListItem])\n\n useEffect(() => {\n if (dndListItemHandle) dndListItemHandle.connect(dndListItemHandleRef.current)\n\n return () => {\n if (dndListItemHandle) dndListItemHandle.disconnect()\n }\n }, [dndListItemHandle])\n\n useEffect(() => {\n const patternRefs = RegExp(/^(vq\\d+)/i).test(item.pattern) ? [item.pattern] : []\n\n dispatch({\n type: 'UPDATE_REFS',\n data: {\n id: `v${position}`,\n refs: [patternRefs, [], []]\n }\n })\n }, [item.pattern, position, dispatch])\n\n useEffect(() => {\n if (changedRef.current) {\n changedRef.current = false\n return\n }\n\n const option =\n data.filters\n .flatMap(v => v.items)\n .find(v => String(v.value || v.key).toLowerCase() == item.pattern.toLowerCase()) || null\n\n if (null === option) {\n setSelectedValue(null)\n } else {\n setSelectedValue(option.key)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [item.pattern])\n\n useEffect(\n () => {\n if (null !== selectedValueRef.current) {\n const option =\n data.filters\n .flatMap(v => v.items)\n .find(v => String(v.value || v.key).toLowerCase() == selectedValueRef.current.toLowerCase()) || null\n\n if (null === option || option.options == undefined) setSelectedValue(null)\n else {\n const options = option.options.filter(\n _v => null !== _v.pattern && _v.pattern != undefined && 0 < _v.pattern.length\n )\n\n dispatch({\n type: 'UPDATE_VARIABLE',\n data: {\n item: {\n ...item,\n rules: option.options.map(v =>\n v.other\n ? 0 < options.length\n ? `not (${options.map(_v => `(${_v.pattern})`).join(' or ')})`\n : ''\n : v.pattern\n )\n },\n position: position - 1\n }\n })\n }\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [data.filters]\n )\n\n const renderOptions = () => (\n \n onLabelsChange(event.value)}\n />\n {0 < imagesOptions.length ? (\n onImagesChange(event.value)}\n />\n ) : null}\n
\n \n {disabled ? null : (\n \n \n \n )}\n \n
\n {disabled ? null : (\n {position}.
\n {renderOptions()}
\n \n
\n \n \n \n \n
\n )}\n \n )\n}\n\nVariable.propTypes = {\n item: PropTypes.object,\n position: PropTypes.number,\n dndItemsList: PropTypes.any\n}\n\nVariable.displayName = 'Variable'\n\nexport default Variable\n","// lib\nimport React, { useContext, useRef, useEffect } from 'react'\nimport PropTypes from 'prop-types'\n\nimport ADND from '@aytm/lib/adnd/ADND'\nimport { DataContext } from '@aytm/app/stats/page/question-views/components/mapping/Component'\n\nimport { generateUID } from '@aytm/app/stats/lib/helpers'\n\n// components\nimport Variable from '@aytm/app/stats/page/question-views/components/mapping/Variable'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/components/mapping/styles/Component.module.scss'\n\nconst onDNDPositionChange = ({ newPosition, dragItemUpdater } = {}) =>\n dragItemUpdater(node => {\n const itemPositionNode = node.querySelector(`.stats-Concept-Item-index`)\n if (null !== itemPositionNode) {\n itemPositionNode.innerHTML = null === `${newPosition + 1}.` ? '' : `${newPosition + 1}.`\n }\n })\n\nconst getDefaultVariable = (item = {}) => {\n return {\n key: generateUID(),\n text: '',\n pattern: '',\n rules: [],\n ...item\n }\n}\n\nconst Variables = ({ items, note }) => {\n const { id, data, disabled, dispatch } = useContext(DataContext)\n\n const dndItemsListRef = useRef()\n\n const onDNDUpdateItemPositions = ({ hiddenItemIndex, placeholderIndex } = {}) => {\n const itemPositionNodes = dndItemsListRef.current.querySelectorAll(`.stats-Concept-Item .stats-Concept-Item-index`)\n\n for (const [i, itemPositionNode] of itemPositionNodes.entries()) {\n if (null !== itemPositionNode) {\n const visualItemIndex = i + (null !== hiddenItemIndex && hiddenItemIndex <= i ? -1 : 0)\n const newItemIndex =\n visualItemIndex + (null !== placeholderIndex && placeholderIndex <= visualItemIndex ? 1 : 0)\n itemPositionNode.innerHTML = null === `${newItemIndex + 1}` ? '' : `${newItemIndex + 1}.`\n }\n }\n }\n\n const onDNDDrop = res => {\n const { item, position, clone } = res\n\n if (clone) {\n dispatch({\n type: 'ADD_VARIABLE',\n data: {\n item: {\n ...getDefaultVariable(item.item),\n key: generateUID()\n },\n position\n }\n })\n } else if (item.id != id) {\n item.remove()\n dispatch({\n type: 'ADD_VARIABLE',\n data: {\n item: {\n ...getDefaultVariable(item.item),\n key: generateUID()\n },\n position\n }\n })\n } else if (item.position != position) {\n dispatch({\n type: 'REORDER_VARIABLES',\n data: {\n from: item.position,\n to: position\n }\n })\n }\n\n onDNDUpdateItemPositions()\n }\n\n const dndItemsList = ADND.targets\n .itemsList(\n {\n acceptTypes: [`dlq-variable-${data.windowUID}`],\n placeholderVMargin: 10\n },\n { capture: false }\n )\n .buildPlaceholder(() => {\n const placeholderNode = document.createElement('div')\n placeholderNode.className = `${style.placeholder}`\n return placeholderNode\n })\n .onPositionChange(onDNDPositionChange)\n .onUpdateItemPositions(onDNDUpdateItemPositions)\n .onEnter(onDNDUpdateItemPositions)\n .onLeave(onDNDUpdateItemPositions)\n .onDrop(onDNDDrop)\n\n const onAddClick = () => {\n dispatch({\n type: 'ADD_VARIABLE',\n data: {\n item: getDefaultVariable(),\n position: items.length\n }\n })\n }\n\n useEffect(() => {\n dndItemsList.connect(dndItemsListRef.current)\n\n return () => {\n dndItemsList.disconnect()\n }\n }, [dndItemsList])\n\n return (\n \n
\n \n \n {items.length} {1 == items.length ? 'variable' : 'variables'} {note}\n \n
\n \n {items.map((item, index) => (\n
\n {disabled ? null : (\n \n
\n )}\n \n )\n}\n\nVariables.propTypes = {\n items: PropTypes.array,\n note: PropTypes.string\n}\n\nVariables.displayName = 'Variables'\n\nexport default Variables\n\nADND().connect()\n","// eslint-disable-next-line unicorn/no-unsafe-regex\nconst REF_REG = new RegExp(/^(P?Q\\d+)(?:SQ(\\d+))?$/, 'i')\n\nexport const getItems = (refs = [], questions = {}) => {\n let type = null\n let subtype = null\n let items = []\n\n for (const ref of refs) {\n if ('NULL' === ref) continue\n\n if (!ref.trim().length) {\n items = []\n break\n }\n\n const m = ref.trim().match(REF_REG)\n if (null === m) {\n items = []\n break\n }\n\n const q = questions[m[1].toUpperCase()]\n if (q == undefined) {\n items = []\n break\n }\n\n type ||= q.variant || q.type\n subtype = q.subtype\n if (type != (q.variant || q.type)) {\n type = null\n subtype = null\n items = []\n break\n }\n\n if (m[2] != undefined) {\n const b = q.batches != undefined && q.batches[Number(m[2]) - 1]\n if (b != undefined && b.answerVariants != undefined) items.push(b)\n } else if (q.answerVariants != undefined) items.push(q)\n }\n\n return { type, subtype, items }\n}\n\nconst getMultiMethodsOptions = items => {\n const methods = []\n\n if (!items.slice(1).some((item, i) => item.answerVariants.length != items[i].answerVariants.length)) {\n const answerVariants = items[0].answerVariants.map(av => av.text)\n if (2 > answerVariants.length) return methods\n\n for (const [avi, answerVariant] of answerVariants.entries()) {\n const key = `a${avi + 1}`\n methods.push({\n key,\n text: `${answerVariant}{items.length + 1}.
\n \n \n Add a variable\n \n
\n ${key.toUpperCase()}`,\n label: key.toUpperCase()\n })\n }\n }\n\n return methods\n}\n\nconst getSingleMethodOptions = items => {\n const methods = []\n\n if (!items.slice(1).some((item, i) => item.answerVariants.length != items[i].answerVariants.length)) {\n const answerVariants = items[0].answerVariants.map(av => av.text)\n if (2 > answerVariants.length) return methods\n\n methods.push({\n key: 'top1',\n text: `A1: ${answerVariants[0]}`,\n label: 'A1'\n })\n\n if (2 < answerVariants.length) {\n for (const [avi, answerVariant] of answerVariants.slice(1, -1).entries()) {\n const key = `a${Number(avi) + 2}`\n methods.push({\n key,\n text: `${key.toUpperCase()}: ${answerVariant}`,\n label: key.toUpperCase()\n })\n }\n }\n\n methods.push({\n key: 'bottom1',\n text: `A${answerVariants.length}: ${answerVariants[answerVariants.length - 1]}`,\n label: `A${answerVariants.length}`\n })\n\n if (2 < answerVariants.length)\n methods.push({\n key: 'top2',\n text: `Top 2 Box (A1: ${answerVariants[0]}, A2: ${answerVariants[1]})`,\n label: 'Top 2 Box: A1-2'\n })\n if (3 < answerVariants.length)\n methods.push({\n key: 'top3',\n text: `Top 3 Box (A1: ${answerVariants[0]}, A2: ${answerVariants[1]}, A3: ${answerVariants[2]})`,\n label: 'Top 3 Box: A1-3'\n })\n if (2 < answerVariants.length)\n methods.push({\n key: 'top2w',\n text: `T-Weighted (100% A1: ${answerVariants[0]}, 50% A2: ${answerVariants[1]})`,\n label: 'T-Weighted: 100% A1 + 50% A2'\n })\n\n if (2 < answerVariants.length)\n methods.push({\n key: 'bottom2',\n text: `Top 2 Box (A${answerVariants.length - 1}: ${answerVariants[answerVariants.length - 2]}, A${\n answerVariants.length\n }: ${answerVariants[answerVariants.length - 1]})`,\n label: `Top 2 Box: A${answerVariants.length - 1}-${answerVariants.length}`\n })\n if (3 < answerVariants.length)\n methods.push({\n key: 'bottom3',\n text: `Top 3 Box (A${answerVariants.length - 2}: ${answerVariants[answerVariants.length - 3]}, A${\n answerVariants.length - 1\n }: ${answerVariants[answerVariants.length - 2]}, A${answerVariants.length}: ${\n answerVariants[answerVariants.length - 1]\n })`,\n label: `Top 3 Box: A${answerVariants.length - 2}-${answerVariants.length}`\n })\n if (2 < answerVariants.length)\n methods.push({\n key: 'bottom2w',\n text: `T-Weighted (50% A${answerVariants.length - 1}: ${answerVariants[answerVariants.length - 2]}, 100% A${\n answerVariants.length\n }: ${answerVariants[answerVariants.length - 1]})`,\n label: `T-Weighted: 50% A${answerVariants.length - 1} + 100% ${answerVariants.length}`\n })\n\n methods.push({\n key: 'means',\n text: 'Mean',\n label: 'Mean'\n })\n methods.push({\n key: 'meansReversed',\n text: 'Mean (reverse coded)',\n label: 'Mean (reverse coded)'\n })\n }\n\n return methods\n}\n\nexport const getMethodOptions = (refs = [], questions = {}) => {\n const { type, subtype, items } = getItems(refs, questions)\n\n const methods =\n 0 < items.length\n ? ['rb', 'mx', 'sr', 'se'].includes(type) || ('mp' == type && 'radios' == subtype)\n ? getSingleMethodOptions(items)\n : getMultiMethodsOptions(items)\n : []\n\n return { type, subtype, methods }\n}\n","export const dataReducer = (state = {}, action) => {\n switch (action.type) {\n case 'ADD_ENTITY': {\n const { entities } = state\n const { item, position } = action.data\n entities.splice(position, 0, item)\n\n return {\n ...state,\n entities: entities.slice()\n }\n }\n case 'UPDATE_ENTITY': {\n const { entities } = state\n const { item, position } = action.data\n entities[position] = item\n\n return {\n ...state,\n entities: entities.slice()\n }\n }\n case 'REORDER_ENTITIES': {\n const { entities, attributes } = state\n const { data } = action\n const { from, to } = data\n\n const broken = attributes.some(attr => attr.refs.split(',').length < entities.length)\n\n const item = entities.splice(from, 1)[0]\n entities.splice(to, 0, item)\n\n return {\n ...state,\n entities: entities.slice(),\n attributes: broken\n ? attributes\n : attributes.map(attr => {\n const refs = attr.refs.split(',').map(v => v.trim())\n\n const ref = refs.splice(from, 1)[0]\n refs.splice(to, 0, ref)\n\n return Object.assign(attr, {\n refs: refs.join(', ')\n })\n })\n }\n }\n case 'DELETE_ENTITY': {\n const { entities, attributes, errors } = state\n\n const broken = attributes.some(attr =>\n 0 < attr.refs.trim().length ? attr.refs.split(',').length < entities.length : true\n )\n\n entities.splice(action.data, 1)\n\n return {\n ...state,\n entities: entities.slice(),\n attributes: broken\n ? attributes\n : attributes.map(attr => {\n const refs = attr.refs.split(',').map(v => v.trim())\n refs.splice(action.data, 1)\n\n return Object.assign(attr, {\n refs: refs.join(', ')\n })\n }),\n errors: errors.filter(v => ('e' == v[0] && action.data >= Number(v.slice(1))) || 'a' == v[0] || 'v' == v[0])\n }\n }\n case 'ADD_ATTRIBUTE': {\n const { attributes } = state\n const { item, position } = action.data\n attributes.splice(position, 0, item)\n\n return {\n ...state,\n attributes: attributes.slice()\n }\n }\n case 'UPDATE_ATTRIBUTE': {\n const { attributes } = state\n const { item, position } = action.data\n attributes[position] = item\n\n return {\n ...state,\n attributes: attributes.slice()\n }\n }\n case 'UPDATE_ATTRIBUTES_METHOD': {\n const { attributes } = state\n const { method } = action.data\n\n return {\n ...state,\n attributes: attributes.map(attr =>\n Object.assign(attr, {\n method\n })\n )\n }\n }\n case 'REORDER_ATTRIBUTES': {\n const { attributes } = state\n const { from, to } = action.data\n const item = attributes.splice(from, 1)[0]\n attributes.splice(to, 0, item)\n\n return {\n ...state,\n attributes: attributes.slice()\n }\n }\n case 'DELETE_ATTRIBUTE': {\n const { attributes, errors } = state\n attributes.splice(action.data, 1)\n\n return {\n ...state,\n attributes: attributes.slice(),\n errors: errors.filter(v => 'e' == v[0] || ('a' == v[0] && action.data >= Number(v.slice(1))) || 'v' == v[0])\n }\n }\n case 'ADD_VARIABLE': {\n const { variables } = state\n const { item, position } = action.data\n variables.splice(position, 0, item)\n\n return {\n ...state,\n variables\n }\n }\n case 'UPDATE_VARIABLE': {\n const { variables } = state\n const { item, position } = action.data\n variables[position] = item\n\n return {\n ...state,\n variables\n }\n }\n case 'REORDER_VARIABLES': {\n const { variables } = state\n const { from, to } = action.data\n const item = variables.splice(from, 1)[0]\n variables.splice(to, 0, item)\n\n return {\n ...state,\n variables\n }\n }\n case 'DELETE_VARIABLE': {\n const { variables, errors } = state\n variables.splice(action.data, 1)\n\n return {\n ...state,\n variables,\n errors: errors.filter(v => 'e' == v[0] || 'a' == v[0] || ('v' == v[0] && action.data >= Number(v.slice(1))))\n }\n }\n case 'UPDATE_REFS': {\n const { refs } = state\n refs[action.data.id] = action.data.refs\n\n return {\n ...state,\n refs\n }\n }\n case 'UPDATE_ERRORS': {\n const { errors } = state\n const index = errors.indexOf(action.data.id)\n 0 <= index && errors.splice(index, 1)\n true == action.data.error && errors.push(action.data.id)\n\n return {\n ...state,\n errors\n }\n }\n case 'RESET': {\n return {\n ...state,\n ...action.data\n }\n }\n default:\n throw new Error('Unknown action type')\n }\n}\n","// lib\nimport React, { useContext, useState, useMemo, useEffect } from 'react'\nimport PropTypes from 'prop-types'\n\nimport SchemaRules from '@aytm/app/stats/lib/schema-rules'\nimport { DataContext } from '@aytm/app/stats/page/question-views/cq/Component'\nimport { convertTreeToValues } from '@aytm/app/stats/lib/converter'\n\n// components\nimport { Dropdown } from 'primereact/dropdown'\nimport { MultiSelect } from 'primereact/multiselect'\n\nimport MultiSelectHeader from 'primereact-raytm-theme/MultiSelectHeader'\nimport MultiSelectFooter from 'primereact-raytm-theme/MultiSelectFooter'\n\nimport {\n itemTemplate,\n valueTemplate,\n optionGroupTemplate\n} from '@aytm/app/stats/page/question-views/components/lib/templates'\n\nconst Batch = ({ item, position }) => {\n const { id, data, disabled, dispatch, basicFilters } = useContext(DataContext)\n\n const [changed, setChanged] = useState(false)\n\n const [selectedValue, setSelectedValue] = useState(null)\n const [selectedValues, setSelectedValues] = useState([])\n const [selectedOption, setSelectedOption] = useState(null)\n\n const options = useMemo(\n () =>\n data.options.map(option => {\n return {\n ...option,\n items: option.items.filter(item => !data.excluded[position - 1].includes(item.questionType))\n }\n }),\n [position, data.options, data.excluded]\n )\n\n const parserResultBasics = useMemo(\n () =>\n item.pattern == undefined || !item.pattern.length\n ? null\n : item.answerVariants.reduce((acc, av) => {\n const result = data.parser.analyzeString({\n id: id,\n filter: av.pattern,\n saveTokens: true\n })\n if (0 < result.expression.status.errors.length) return acc\n\n try {\n const resultBasic = basicFilters.convertToBasic(SchemaRules.flatten(result.expression.tree))\n if (!resultBasic) return acc\n\n acc.push(Object.values(resultBasic)[0])\n\n return acc\n } catch {\n return acc\n }\n }, []),\n [item.pattern, item.answerVariants, data.parser, id, basicFilters]\n )\n\n // eslint-disable-next-line unicorn/consistent-function-scoping\n const buttonLabelTemplate = event => {\n const text =\n 1 < event.options.length && event.options.length == event.value.length\n ? 'All'\n : 0 < event.value.length\n ? 1 == event.value.length\n ? event.options.find(o => o.key == event.value[0]).text\n : `Filtered to ${event.value.length}`\n : 'Select...'\n return \n }\n\n const onSelectedChange = (value = null, _values) => {\n const option = options.flatMap(v => v.items).find(v => v.key == value) || null\n const values = _values || (null !== option ? option.options.map(v => v.key) : [])\n values.sort((a, b) => option.options.findIndex(v => v.key == a) - option.options.findIndex(v => v.key == b))\n\n setSelectedValue(value)\n setSelectedValues(values)\n setSelectedOption(option)\n\n setChanged(true)\n\n dispatch({\n type: 'UPDATE_BATCH',\n data: {\n item: {\n ...item,\n pattern: null !== option ? option.key : '',\n answerVariants: values.map(v => {\n const o = option.options.find(_v => _v.key == v)\n return {\n pattern: o.pattern,\n logic: o.logic\n }\n })\n },\n position: position - 1\n }\n })\n }\n\n useEffect(() => {\n if (changed) {\n setChanged(false)\n return\n }\n\n if (null === parserResultBasics) {\n setSelectedValue(null)\n setSelectedValues([])\n setSelectedOption(null)\n } else {\n const keys = Object.keys(parserResultBasics || {})\n\n if (0 < keys.length) {\n const option =\n options.flatMap(v => v.items).find(v => String(v.key).toLowerCase() == item.pattern.toLowerCase()) || null\n\n if (null === option) {\n setSelectedValue(null)\n setSelectedValues([])\n setSelectedOption(null)\n } else {\n const value = option.key\n const values =\n 'multistatemultiselect' == option.type\n ? parserResultBasics.map(tree => convertTreeToValues(option, tree)[0].value)\n : parserResultBasics.map(tree => convertTreeToValues(option, tree)[0])\n values.sort((a, b) => option.options.findIndex(v => v.key == a) - option.options.findIndex(v => v.key == b))\n\n setSelectedValue(value)\n setSelectedValues(values)\n setSelectedOption(option)\n }\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [parserResultBasics])\n\n useEffect(() => {\n dispatch({\n type: 'UPDATE_ERRORS',\n data: {\n id: `b${position}`,\n error: !item.pattern.length || !item.answerVariants.length\n }\n })\n }, [item.pattern, item.answerVariants, position, dispatch])\n\n return (\n <>\n
\n onSelectedChange(event.value)}\n />\n
\n \n {null === selectedOption ? (\n onSelectedChange(selectedValue, event.value)}\n />\n )}\n
\n \n )\n}\n\nBatch.propTypes = {\n item: PropTypes.object,\n position: PropTypes.number\n}\n\nBatch.displayName = 'Batch'\n\nexport default Batch\n","// lib\nimport React, { useReducer, useState, useRef, useMemo, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport { isEqual } from 'lodash'\n\nimport BasicFilters from '@aytm/app/stats/lib/basic-filters'\nimport { dataReducer } from '@aytm/app/stats/page/question-views/cq/reducers'\n\n// components\nimport { default as ComponentContainer } from '@aytm/app/stats/page/question-views/components/Component'\n\nimport Batch from '@aytm/app/stats/page/question-views/cq/Batch'\n\nimport Controls from '@aytm/app/stats/page/question-views/cq/Controls'\nimport Footer from '@aytm/app/stats/page/question-views/components/component/Footer'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/cq/styles/Component.module.scss'\n\nconst MAX_COMBINATIONS = 500\n\nexport const DataContext = React.createContext()\n\nconst Component = ({ model, data, states, disabled, isAdmin, onChange, onControlsChange, onUpdateData }) => {\n const [state, dispatch] = useReducer(dataReducer, {\n batches: JSON.parse(JSON.stringify(model.batches)),\n errors: []\n })\n\n const [changed, setChanged] = useState(false)\n\n const timer = useRef(null)\n\n const stateRef = useRef()\n stateRef.current = state\n\n const basicFilters = useMemo(\n () =>\n new BasicFilters({\n surveySchema: data.surveySchema,\n sflag: true,\n isAdmin\n }),\n [data.surveySchema, isAdmin]\n )\n\n const checkModel = () => {\n const newData = {}\n if (!isEqual(state.batches, model.batches)) {\n newData.errors = JSON.parse(JSON.stringify(state.errors))\n for (const bi in state.batches) {\n const index = newData.errors.indexOf(`b${Number(bi) + 1}`)\n 0 <= index && newData.errors.splice(index, 1)\n }\n newData.batches = JSON.parse(JSON.stringify(model.batches))\n }\n return newData\n }\n const checkState = () => {\n const newData = {}\n if (!isEqual(state.batches, model.batches)) newData.batches = JSON.parse(JSON.stringify(state.batches))\n return newData\n }\n\n const checkError = () => {\n if (0 < state.errors.length || 2 != state.batches.length) return { error: true }\n if (state.batches.some(b => !b.answerVariants.length || b.answerVariants.some(av => !av.pattern.length)))\n return { error: true }\n if (MAX_COMBINATIONS < state.batches[0].answerVariants.length * state.batches[1].answerVariants.length)\n return {\n error: `Your selection exceeds the allowed number of combinations (${MAX_COMBINATIONS}). Please limit the answer choices for your banner and/or attribute, or choose a different banner/attribute combination.`\n }\n return {\n error: false\n }\n }\n\n const onReverse = () => {\n dispatch({\n type: 'REVERSE_BATCHES'\n })\n }\n\n useEffect(() => {\n if (changed) return\n\n dispatch({\n type: 'RESET',\n data: { ...checkModel() }\n })\n\n setChanged(!isEqual(stateRef.current.batches, model.batches))\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [model.batches])\n\n useEffect(() => {\n setChanged(true)\n\n const newData = {\n ...checkError(),\n ...checkState()\n }\n\n timer.current && clearTimeout(timer.current)\n timer.current = setTimeout(() => {\n onChange(newData)\n\n setChanged(false)\n }, 300)\n\n return () => timer.current && clearTimeout(timer.current)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state])\n\n const dataContextValue = useMemo(() => {\n return {\n id: model.id,\n data,\n disabled,\n dispatch,\n basicFilters\n }\n }, [model.id, data, disabled, dispatch, basicFilters])\n\n return (\n \n
\n {!disabled && }\n \n )\n}\n\nComponent.propTypes = {\n model: PropTypes.object,\n data: PropTypes.object,\n states: PropTypes.object,\n disabled: PropTypes.bool,\n isAdmin: PropTypes.bool,\n onChange: PropTypes.func,\n onControlsChange: PropTypes.func,\n onUpdateData: PropTypes.func\n}\n\nComponent.displayName = 'Component'\n\nexport default Component\n","// lib\nimport React from 'react'\nimport PropTypes from 'prop-types'\n\n// components\nimport { Dropdown } from 'primereact/dropdown'\n\nimport { default as ControlsContainer } from '@aytm/app/stats/page/question-views/components/component/Controls'\n\n// styles\n\nconst Controls = ({ model, data, collapsed, disabled, onToggle, onChange }) => {\n const itemTemplate = option => \n const valueTemplate = (option, _props) => (\n \n
\n \n 1. Choose a banner - answers to a certain question, traits\n
\n \n 2. Choose an attribute to check for correlations\n
\n \n \n \n
\n \n
\n \n \n \n \n \n \n
\n \n
\n \n onChange('mode', event.value)}\n />\n
\n \n {data.icon && (\n
\n )\n}\n\nControls.propTypes = {\n model: PropTypes.object,\n data: PropTypes.object,\n components: PropTypes.object,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n onFetch: PropTypes.func,\n onFilter: PropTypes.func\n}\n\nControls.displayName = 'Controls'\n\nexport default Controls\n","// lib\nimport React, { Fragment, useState, useRef, useMemo, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport { Transition } from 'react-transition-group'\n\nimport { stopEvent } from '@aytm/lib/common/func'\n\nimport useEventListener from '@aytm/app/stats/page/comments/lib/hooks/useEventListener'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/data-cleaning/styles/Responses.module.scss'\n\nconst Response = ({ model, uid, item, selected }) => {\n const [collapsed, setCollapsed] = useState(true)\n const [maxHeight, setMaxHeight] = useState(0)\n\n const [transitionDuration, setTransitionDuration] = useState(500)\n\n const componentRef = useRef(null)\n const componentContentRef = useRef(null)\n\n const collapsedRef = useRef()\n collapsedRef.current = collapsed\n\n const total = useMemo(() => Object.keys(item.vectors || {}).length, [item.vectors])\n\n const onToggle = () => {\n setCollapsed(!collapsedRef.current)\n setTransitionDuration(500)\n }\n\n useEffect(() => {\n if (selected) {\n setCollapsed(false)\n componentRef.current.scrollIntoView({ block: 'center' })\n }\n }, [selected])\n\n useEffect(() => {\n setMaxHeight(componentContentRef.current ? componentContentRef.current.getBoundingClientRect().height : 0)\n setTransitionDuration(collapsed ? 500 : 10)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [collapsed, componentContentRef.current])\n\n return (\n \n \n \n
\n )}\n \n {data.controls.suspiciousLevel && (\n
\n \n onChange('suspiciousLevel', event.value)\n }\n />\n
\n )}\n {data.controls.job && (\n \n
\n )}\n {data.controls.filter && (\n \n \n
\n )}\n \n \n {status => (\n \n
\n )}\n \n \n )\n}\n\nResponse.propTypes = {\n model: PropTypes.object,\n uid: PropTypes.number,\n item: PropTypes.object,\n selected: PropTypes.bool\n}\n\nconst Responses = ({ model, data }) => {\n const [selectedUID, setSelectedUID] = useState(null)\n\n const UIDs = useMemo(\n () =>\n data.scores.reduce((acc, [uid, ...scores]) => {\n const level = model.suspiciousLevels.find(l => l[1] <= data.suspiciousScores[uid])\n if (level == undefined) return acc\n\n const status =\n Object.hasOwn(data.responses, uid) &&\n data.suspiciousLevel <= data.suspiciousScores[uid] &&\n scores.some((v, i) => !data.disabledVectors.includes(data.vectors[i].id) && 0 < v)\n if (!status) return acc\n\n acc[level[1]] ||= []\n acc[level[1]].push(uid)\n\n return acc\n }, {}),\n [model.suspiciousLevels, data]\n )\n\n useEffect(() => {\n if (null !== selectedUID) {\n setSelectedUID(null)\n }\n }, [selectedUID])\n\n useEventListener(`reviewResponse`, event => {\n setSelectedUID(Number(event.detail.uid))\n })\n\n return (\n \n
\n \n \n {uid}\n \n
\n \n \n {total} vector{(1 != total && 's') || ''}\n \n
\n \n
\n \n \n
\n {Object.keys(item.vectors).map(key => (\n Vector
\n Details
\n \n
\n ))}\n \n \n
\n {model.vectors.titles[key]}
\n \n {model.suspiciousLevels.map(level => {\n const items = UIDs[level[1]]\n return items != undefined && 0 < items.length ? (\n \n \n ) : null\n })}\n
\n )\n}\n\nResponses.propTypes = {\n model: PropTypes.object,\n data: PropTypes.object\n}\n\nResponses.displayName = 'Responses'\n\nexport default Responses\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\n// components\nimport LightBox from '@aytm/lib/rfd-ui/components/basic/light-box'\nimport ImagePopup from '@aytm/lib/rfd-ui/components/basic/image-popup'\n\n// \n CONCERN LEVEL: {level[0]} ({items.length})\n
\n {items.map(uid => (\n \n \n
\n\n \n \n
\n )}\n {!loading && !loaded && (\n \n \n
\n )}\n \n \n {
\n )\n}\n\nControls.propTypes = {\n model: PropTypes.object,\n data: PropTypes.object,\n features: PropTypes.object,\n collapsed: PropTypes.bool,\n disabled: PropTypes.bool,\n isSurveyGuest: PropTypes.bool,\n onViewModeChange: PropTypes.func,\n onConfigChange: PropTypes.func,\n onPresetChange: PropTypes.func,\n onApplyToAll: PropTypes.func,\n onExport: PropTypes.func,\n onToggle: PropTypes.func\n}\n\nControls.displayName = 'Controls'\n\nexport default Controls\n","// lib\nimport React, { useMemo } from 'react'\nimport PropTypes from 'prop-types'\n\n// components\nimport { Dropdown } from 'primereact/dropdown'\n\nconst TagsControls = ({ model, onConfigChange }) => {\n const { config, codeBooks = [] } = model\n\n const codeBooksOptions = useMemo(\n () =>\n codeBooks.map(codebook => {\n return {\n key: codebook.title,\n text: codebook.title\n }\n }),\n [codeBooks]\n )\n\n const itemTemplate = option =>\n option.hidden ? null : \n const valueTemplate = option =>\n option ? : 'Please select...'\n\n return 0 < codeBooksOptions.length ? (\n \n onConfigChange('codebook', '*' == event.value ? null : event.value)}\n />\n
\n ) : null\n}\n\nTagsControls.propTypes = {\n model: PropTypes.object,\n onConfigChange: PropTypes.func\n}\n\nTagsControls.displayName = 'TagsControls'\n\nexport default TagsControls\n","// lib\nimport React from 'react'\nimport PropTypes from 'prop-types'\n\n// components\nimport { Dropdown } from 'primereact/dropdown'\n\nimport SearchInput from '@aytm/app/stats/page/components/SearchInput'\n\nconst VerbatimControls = ({ model, data, features, onConfigChange }) => {\n const { config, survey, tagsList } = model\n\n const itemTemplate = option =>\n option.hidden ? null : \n\n return (\n <>\n {data.controls.config != undefined && data.controls.config.verbatim != undefined\n ? Object.keys(data.controls.config.verbatim).map(key =>\n 'search' == key ? (\n \n onConfigChange('search', Object.assign({}, config.search, value))}\n />\n
\n ) : 0 < data.controls.config.verbatim[key].options.length ? (\n \n onConfigChange(key, event.value)\n }\n />\n
\n ) : null\n )\n : null}\n \n )\n}\n\nVerbatimControls.propTypes = {\n model: PropTypes.object,\n data: PropTypes.object,\n features: PropTypes.object,\n onConfigChange: PropTypes.func\n}\n\nVerbatimControls.displayName = 'VerbatimControls'\n\nexport default VerbatimControls\n","// lib\nimport React from 'react'\nimport PropTypes from 'prop-types'\n\n// components\nimport { Dropdown } from 'primereact/dropdown'\n\nconst ViewModes = ({ model, data, onViewModeChange }) => {\n const { viewMode } = model\n\n const itemTemplate = option =>\n option.hidden ? null : \n\n return 2 > data.controls.viewModes.options.length || data.controls.viewModes.disabled ? null : (\n \n onViewModeChange(event.value)}\n />\n
\n )\n}\n\nViewModes.propTypes = {\n model: PropTypes.object,\n data: PropTypes.object,\n onViewModeChange: PropTypes.func\n}\n\nViewModes.displayName = 'ViewModes'\n\nexport default ViewModes\n","// lib\nimport React, { useState, useRef, useCallback } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\n// components\nimport { Button } from 'primereact/button'\nimport { Dropdown } from 'primereact/dropdown'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/oe/styles/Controls.module.scss'\n\nconst WordcloudControls = ({\n model,\n data,\n features,\n applyToAllLabel,\n collapsed,\n isSurveyGuest,\n onPresetChange,\n onApplyToAll,\n onExport,\n onToggle\n}) => {\n const { preset } = model\n\n const [status, setStatus] = useState(null)\n\n const timer = useRef(null)\n\n const statusRef = useRef(null)\n statusRef.current = status\n\n const exportOptions = [\n { key: 'png', text: 'Download PNG image' },\n { key: 'pdf', text: 'Download PDF document' },\n { key: 'eps', text: 'Download EPS file' }\n ]\n window.Blob != undefined && exportOptions.push({ key: 'csv', text: 'Download CSV file' })\n\n const itemTemplate = option =>\n option.hidden ? null : \n const valueTemplate = (option, _props) =>\n option ? (\n \n ) : (\n \n )\n\n const valueExportTemplate = () => \n\n const onToggleClick = useCallback(() => {\n setStatus('toggling')\n 'function' === typeof onToggle && onToggle()\n\n timer.current && clearTimeout(timer.current)\n timer.current = setTimeout(() => 'toggling' == statusRef.current && setStatus(null), 500)\n\n return () => timer.current && clearTimeout(timer.current)\n }, [onToggle])\n\n return (\n <>\n {features.word_clouds.disabled ? null : (\n <>\n {data.controls.presets != undefined ? (\n \n onPresetChange(event.value)}\n />\n
\n ) : null}\n \n \n
\n \n )}\n \n {features.word_clouds.disabled ? null : (\n
\n \n )\n}\n\nWordcloudControls.propTypes = {\n model: PropTypes.object,\n data: PropTypes.object,\n features: PropTypes.object,\n applyToAllLabel: PropTypes.string,\n collapsed: PropTypes.bool,\n isSurveyGuest: PropTypes.bool,\n onPresetChange: PropTypes.func,\n onApplyToAll: PropTypes.func,\n onExport: PropTypes.func,\n onToggle: PropTypes.func\n}\n\nWordcloudControls.displayName = 'WordcloudControls'\n\nexport default WordcloudControls\n","// lib\nimport React, { useState, useRef, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport { linkifyText } from '@aytm/app/stats/lib/linkify-text'\nimport { getImageAssetPath, IMAGE_ASSET_PATH_FILTER_RESIZE_TO_LIMIT } from '@aytm/lib/common/assets'\nimport { configure as configureImageAssetUploadManager } from '@aytm/lib/rfd-ui/components/assets/jobs/image-asset-upload-manager'\n\n// components\nimport { Button } from 'primereact/button'\nimport { Image } from 'primereact/image'\n\nimport UploadAssetsButton from '@aytm/lib/rfd-ui/components/assets/upload-assets-button'\n\nimport QuestionHeader from '@aytm/app/stats/page/question-views/components/QuestionHeader'\nimport QuestionBody from '@aytm/app/stats/page/question-views/components/QuestionBody'\nimport TextEditor from '@aytm/app/stats/page/question-views/components/TextEditor'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/sn/styles/Component.module.scss'\nimport styleTextFormatting from '@aytm/app/stats/page/question-views/components/styles/TextFormatting.module.scss'\n\nconst Component = ({ model, features, isQuestionCollapsed, onChange, onImageLoad, ...rest }) => {\n const [title, setTitle] = useState(model.text)\n const [asset, setAsset] = useState(model.asset)\n const [note, setNote] = useState(model.note)\n\n const [collapsed, setCollapsed] = useState(isQuestionCollapsed)\n\n const [loaded, setLoaded] = useState(false)\n\n const [editing, setEditing] = useState(false)\n const [uploading, setUploading] = useState(false)\n\n const [errorText, setErrorText] = useState(null)\n\n const timer = useRef(null)\n\n const imageRef = useRef()\n const imagePlaceholderHeightRef = useRef(0)\n\n const savedValues = useRef(null)\n savedValues.current = { title: model.text, note: model.note, asset: model.asset }\n\n const hasImage = asset && Object.hasOwn(asset, 'path')\n const { disabled } = features\n\n configureImageAssetUploadManager({\n createAssetPath: 'report/image_asset/create'\n })\n\n const getAssetLink = () => {\n const generatePath = getImageAssetPath({\n path: asset.path,\n filter: IMAGE_ASSET_PATH_FILTER_RESIZE_TO_LIMIT,\n width: 1000,\n height: 1000\n })\n return generatePath\n }\n\n const onUploadAsset = res => {\n setUploading(false)\n\n if (res && res[0]) {\n const asset = res[0]\n const showError = asset && ['invalid', 'error', 'failed'].includes(asset.status)\n if (!showError) {\n const image = {\n uid: asset.assetUid,\n path: asset.imagePath,\n original: asset.original\n }\n\n if (imageRef.current) {\n const el = imageRef.current.getElement()\n const rect = el.getBoundingClientRect()\n imagePlaceholderHeightRef.current = rect.height\n }\n setErrorText(null)\n setAsset(image)\n } else {\n const error = asset.error?.length\n ? asset.error.join(' ')\n : \"We couldn't upload your file, please check your connection, file and try again. 30MB max.\"\n setErrorText(error)\n }\n }\n }\n\n const onDeleteAsset = () => {\n setAsset(null)\n }\n\n const onChangeText = html => {\n setNote(html)\n }\n\n const onStartEditing = () => {\n setEditing(true)\n }\n\n const onCancel = () => {\n setTitle(savedValues.current.title)\n setAsset(savedValues.current.asset)\n setNote(savedValues.current.note)\n setUploading(false)\n setErrorText(null)\n setEditing(false)\n }\n\n const onSetEditing = isEdit => {\n isEdit ? onStartEditing() : onCancel()\n }\n\n const onSave = () => {\n if (title !== savedValues.current.title || note !== model.note || asset !== savedValues.current.asset) {\n // eslint-disable-next-line unicorn/no-unsafe-regex\n const trimmedNote = note ? note.replace(/(\n \n
\n )}\n {isSurveyGuest ? null : (\n \n onExport(event.value)}\n />\n
\n )}\n \n {editing ? (\n
\n \n
\n ) : null}\n {hasImage && (\n \n
\n {errorText && }\n \n Type in/paste your executive summary below. It will be added as a slide on PPTX exports.\n
\n \n 'Uploading your image'}\n onFilesUpload={() => setUploading(true)}\n onFilesUploaded={onUploadAsset}\n />\n
\n \n {editing && !uploading ? (\n
\n )}\n {editing ? (\n <>\n \n \n
\n ) : null}\n \n
\n \n
\n \n
\n \n \n
\n \n ) : (\n \n
\n \n {note ? (\n
\n )}\n Add an executive summary/notes to your report.
\n )}\n ${option.key}`\n\n return option\n }),\n [data.options.entities, data.options.attributes, state.entities]\n )\n\n const itemTemplate = option => \n const valueTemplate = (option, _props) => (\n
\n onControlsChange('wave', Number(event.value))}\n />\n
\n ) : null}\n {'survey' === model.source ? (\n <>\n {showReset ? (\n \n
\n ) : null}\n \n \n reset\n \n
\n ${option.key}`\n\n return option\n }),\n [data.options.entities, data.options.attributes, state.entities]\n )\n\n const checkModel = () => {\n const newData = {}\n if (!isEqual(state.entities, model.entities)) {\n newData.errors ||= JSON.parse(JSON.stringify(state.errors))\n for (const i in state.entities) {\n const index = newData.errors.indexOf(`e${Number(i) + 1}`)\n 0 <= index && newData.errors.splice(index, 1)\n }\n newData.entities = JSON.parse(JSON.stringify(model.entities))\n }\n if (!isEqual(state.attributes, model.attributes)) {\n newData.errors ||= JSON.parse(JSON.stringify(state.errors))\n for (const i in state.attributes) {\n const index = newData.errors.indexOf(`a${Number(i) + 1}`)\n 0 <= index && newData.errors.splice(index, 1)\n }\n newData.attributes = JSON.parse(JSON.stringify(model.attributes))\n }\n return newData\n }\n const checkState = () => {\n const newData = {}\n if (!isEqual(state.entities, model.entities)) newData.entities = JSON.parse(JSON.stringify(state.entities))\n if (!isEqual(state.attributes, model.attributes)) newData.attributes = JSON.parse(JSON.stringify(state.attributes))\n return newData\n }\n\n const checkError = () => {\n if (0 < state.errors.length || ('custom' === model.source && !state.entities.length) || !state.attributes.length) {\n return { error: true }\n }\n if (\n 'custom' === model.source &&\n state.attributes.some(attr => attr.refs.split(',').length < state.entities.length)\n ) {\n return {\n error:\n 'For each attribute, please make sure there is a question number or subquestion number that corresponds to each entity.'\n }\n }\n if ('survey' === model.source && state.attributes.some(attr => attr.refs.split(',').length < 1)) {\n return {\n error: 'For each attribute, please make sure there is one question number or subquestion number.'\n }\n }\n return { error: false }\n }\n\n useEffect(() => {\n if (changed) return\n\n dispatch({\n type: 'RESET',\n data: { ...checkModel() }\n })\n\n setChanged(\n !isEqual(stateRef.current.entities, model.entities) || !isEqual(stateRef.current.attributes, model.attributes)\n )\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [model.entities, model.attributes])\n\n useEffect(() => {\n setChanged(true)\n\n const newData = {\n ...checkError(),\n ...checkState()\n }\n\n timer.current && clearTimeout(timer.current)\n timer.current = setTimeout(() => {\n onChange(newData)\n\n setChanged(false)\n }, 300)\n\n return () => timer.current && clearTimeout(timer.current)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state])\n\n const dataContextValue = useMemo(() => {\n return {\n id: model.id,\n mode: model.mode,\n group: model.group,\n original: model.original,\n data,\n disabled,\n attributesOptions,\n dispatch\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [model.id, model.mode, model.group, model.original, data, disabled, attributesOptions, dispatch])\n\n return (\n
\n setBasePattern(value)}\n />\n
\n onBaseChange('')} title=\"Clear\">\n \n \n \n
\n \n {disabled ? null : (\n \n \n \n )}\n \n
\n {disabled ? null : (\n A{position}.
\n \n {item.other ? (\n
\n \n Everyone else\n
\n ) : (\n <>\n \n
\n ) : (\n <>\n {renderOptions()}
\n {renderValues()}
\n \n )}\n \n )}\n {renderModes()}
\n \n \n \n \n
\n )}\n \n )\n}\n\nAnswerVariant.propTypes = {\n item: PropTypes.object,\n position: PropTypes.number,\n dndItemsList: PropTypes.any\n}\n\nAnswerVariant.displayName = 'AnswerVariant'\n\nexport default AnswerVariant\n","// lib\nimport React, { useContext, useState, useRef, useMemo, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\n\nimport ADND from '@aytm/lib/adnd/ADND'\nimport { DataContext } from '@aytm/app/stats/page/question-views/vq/Component'\n\nimport { generateUID, encodeText, decodeText } from '@aytm/app/stats/lib/helpers'\nimport { getLogicData, getRefs, getClustersRefs } from '@aytm/app/stats/lib/refs'\n\n// components\nimport { InputText } from 'primereact/inputtext'\nimport { Dropdown } from 'primereact/dropdown'\n\nimport TextPopup from '@aytm/lib/rfd-ui/components/basic/text-popup'\n\nimport AdvancedFilter from '@aytm/app/stats/page/components/AdvancedFilter'\nimport AnswerVariantOptions from '@aytm/app/stats/page/question-views/vq/AnswerVariantOptions'\n\n// hooks\nimport { useSingleAndDoubleClick } from '@aytm/app/stats/page/question-views/components/lib/hooks/useSingleAndDoubleClick'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/vq/styles/Component.module.scss'\n\nconst AnswerVariantMX = ({ item, position, dndItemsList }) => {\n const { id, data, disabled, dispatch, dropdownsRef, parserResultEof } = useContext(DataContext)\n\n const [baseMode, setBaseMode] = useState(false)\n\n const [basePattern, setBasePattern] = useState(item.base || '')\n\n const [selectedValue, setSelectedValue] = useState(null)\n\n const changedRef = useRef(false)\n\n const itemPatternRef = useRef(null)\n itemPatternRef.current = item.pattern\n\n const dndListItemRef = useRef()\n const dndListItemHandleRef = useRef()\n\n const parserResultPattern = useMemo(\n () =>\n data.parser.analyzeString({\n id: id,\n filter: item.pattern.trim(),\n clusters: data.clusters,\n saveTokens: true\n }),\n [item.pattern, id, data.parser, data.clusters]\n )\n const parserResultPatternError = useMemo(\n () => 0 < item.pattern.trim().length && 0 < parserResultPattern.expression.status.errors.length,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [parserResultPattern]\n )\n const parserResultPatternBasic = useMemo(() => {\n const tree = parserResultPatternError\n ? null\n : 0 < item.pattern.trim().length\n ? 0 < parserResultPattern.expression.status.errors.length\n ? null\n : { [item.pattern]: { x: true } }\n : {}\n return null === tree || 1 < Object.keys(tree).length ? null : tree\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [parserResultPattern, parserResultPatternError])\n\n const parserResultBase = useMemo(\n () =>\n data.parser.analyzeString({\n id: id,\n filter: basePattern,\n clusters: data.clusters,\n saveTokens: true,\n numberAllowed: true\n }),\n [id, data.parser, data.clusters, basePattern]\n )\n const parserResultBaseError = useMemo(\n () =>\n 0 < basePattern.length &&\n 0 < parserResultBase.expression.status.errors.length &&\n parserResultBase.expression.status.errors.some(v => !['ref', 'cluster'].includes(v.type)),\n [basePattern, parserResultBase]\n )\n\n const textBase = useMemo(\n () =>\n (30 < item.base.length && 'Base: ' + item.base.slice(0, 27) + '...') ||\n (0 < item.base.length && 'Base: ' + item.base) ||\n 'Base',\n [item.base]\n )\n\n const fetchData = useCallback(() => {\n return {\n id,\n item,\n position: position - 1,\n windowUID: data.windowUID,\n remove: () =>\n dispatch({\n type: 'DELETE_ANSWER_VARIANT',\n data: position - 1\n })\n }\n }, [item, position, id, data.windowUID, dispatch])\n\n const dndListItem = ADND.targets.itemsList.listItem({\n type: `dlq-answer-${data.windowUID}`,\n list: dndItemsList\n })\n const dndListItemHandle = ADND.sources\n .listItemHandle({\n type: `dlq-answer-${data.windowUID}`,\n item: dndListItem,\n cloneable: true\n })\n .fetchData(fetchData)\n\n const itemImageTemplate = option =>\n option ? (\n <>\n {option.src && \n setBasePattern(value)}\n />\n
\n onBaseChange('')} title=\"Clear\">\n \n \n \n
\n \n {disabled ? null : (\n \n \n \n )}\n \n <>\n
\n {disabled ? null : (\n SQ{position}.
\n {renderOptions()}
\n {renderModes()}
\n \n \n \n \n \n
\n )}\n \n )\n}\n\nAnswerVariantMX.propTypes = {\n item: PropTypes.object,\n position: PropTypes.number,\n dndItemsList: PropTypes.any\n}\n\nAnswerVariantMX.displayName = 'AnswerVariantMX'\n\nexport default AnswerVariantMX\n","// lib\nimport React, { useContext, useState, useRef, useMemo, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\n\nimport ADND from '@aytm/lib/adnd/ADND'\nimport SchemaRules from '@aytm/app/stats/lib/schema-rules'\nimport { DataContext } from '@aytm/app/stats/page/question-views/vq/Component'\nimport { convertValuesToTree, convertTreeToValues } from '@aytm/app/stats/lib/converter'\n\nimport { generateUID } from '@aytm/app/stats/lib/helpers'\nimport { getLogicData, getRefs, getClustersRefs } from '@aytm/app/stats/lib/refs'\n\n// components\nimport { Dropdown } from 'primereact/dropdown'\nimport { MultiSelect } from 'primereact/multiselect'\nimport { MultiStateMultiSelect } from 'primereact/multistatemultiselect'\n\nimport MultiSelectHeader from 'primereact-raytm-theme/MultiSelectHeader'\nimport MultiSelectFooter from 'primereact-raytm-theme/MultiSelectFooter'\n\nimport AdvancedFilter from '@aytm/app/stats/page/components/AdvancedFilter'\nimport ModeToggle from '@aytm/app/stats/page/question-views/vq/ModeToggle'\nimport AnswerVariantOptions from '@aytm/app/stats/page/question-views/vq/AnswerVariantOptions'\n\nimport { itemTemplate, valueTemplate } from '@aytm/app/stats/page/question-views/components/lib/templates'\n\n// hooks\nimport { useSingleAndDoubleClick } from '@aytm/app/stats/page/question-views/components/lib/hooks/useSingleAndDoubleClick'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/vq/styles/Component.module.scss'\n\nconst AnswerVariantOEX = ({ item, position, dndItemsList }) => {\n const { id, data, disabled, dispatch, dropdownsRef, parserResultPatternBasicsRef, basicFilters, parserResultEof } =\n useContext(DataContext)\n\n const [processing, setProcessing] = useState(false)\n\n const [selectedValue, setSelectedValue] = useState(null)\n const [selectedValues, setSelectedValues] = useState([])\n const [selectedOption, setSelectedOption] = useState(null)\n\n const changedRef = useRef(false)\n\n const dndListItemRef = useRef()\n const dndListItemHandleRef = useRef()\n\n const itemMode = useMemo(\n () =>\n 'advanced' == item.mode || !data.options.some(group => 0 < group.items.length) || disabled ? 'advanced' : 'basic',\n [item.mode, data.options, disabled]\n )\n\n const itemModeRef = useRef(null)\n itemModeRef.current = itemMode\n\n const parserResultPattern = useMemo(\n () =>\n data.parser.analyzeString({\n id: id,\n filter: item.pattern.trim(),\n clusters: data.clusters,\n saveTokens: true\n }),\n [item.pattern, id, data.parser, data.clusters]\n )\n const parserResultPatternError = useMemo(\n () =>\n 0 < item.pattern.trim().length &&\n 0 < parserResultPattern.expression.status.errors.length &&\n parserResultPattern.expression.status.errors.some(v => !['ref', 'cluster'].includes(v.type)),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [parserResultPattern]\n )\n const parserResultPatternBasic = useMemo(() => {\n try {\n const tree = parserResultPatternError\n ? null\n : 0 < item.pattern.trim().length\n ? 0 < parserResultPattern.expression.status.errors.length\n ? null\n : basicFilters.convertToBasic(SchemaRules.flatten(parserResultPattern.expression.tree)) || null\n : {}\n return null === tree || 1 < Object.keys(tree).length ? null : tree\n } catch {\n return null\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [basicFilters, parserResultPattern, parserResultPatternError])\n\n const fetchData = useCallback(() => {\n return {\n id,\n item,\n position: position - 1,\n windowUID: data.windowUID,\n remove: () =>\n dispatch({\n type: 'DELETE_ANSWER_VARIANT',\n data: position - 1\n })\n }\n }, [item, position, id, data.windowUID, dispatch])\n\n const dndListItem = ADND.targets.itemsList.listItem({\n type: `dlq-answer-${data.windowUID}`,\n list: dndItemsList\n })\n const dndListItemHandle = ADND.sources\n .listItemHandle({\n type: `dlq-answer-${data.windowUID}`,\n item: dndListItem,\n cloneable: true\n })\n .fetchData(fetchData)\n\n const buttonLabelTemplate = event => {\n const text =\n 1 < selectedOption.options.length &&\n selectedOption.options.length == event.value.length &&\n ('multistatemultiselect' !== selectedOption.type || !event.value.some(item => !item.state))\n ? 'All'\n : 0 < event.value.length\n ? 1 == event.value.length && ('multistatemultiselect' !== selectedOption.type || event.value[0].state)\n ? selectedOption.options.find(\n o => o.key == ('multistatemultiselect' == selectedOption.type ? event.value[0].value : event.value[0])\n ).text\n : `Filtered to ${event.value.length}`\n : 'Select...'\n return \n }\n\n const onModeChange = (mode, applyToAll = false) => {\n if (applyToAll)\n dispatch({\n type: 'UPDATE_ANSWER_VARIANTS_MODE',\n data: {\n positions: Object.keys(parserResultPatternBasicsRef.current).filter(\n k => null !== parserResultPatternBasicsRef.current[k]\n ),\n mode: mode\n }\n })\n else\n dispatch({\n type: 'UPDATE_ANSWER_VARIANT',\n data: {\n item: {\n ...item,\n mode: mode || ('basic' === item.mode ? 'advanced' : 'basic')\n },\n position: position - 1\n }\n })\n }\n\n const onResetValues = () => {\n setSelectedValue(null)\n setSelectedValues([])\n setSelectedOption(null)\n\n onModeChange('advanced')\n }\n\n const onSelectedChange = (value = null, _values) => {\n const group = data.options.find(v => v.items.some(v => v.key == value)) || null\n if (null !== group && group.disabled) return\n\n const option = group.items.find(v => v.key == value) || null\n if (null !== option && option.disabled) return\n\n const values = _values || []\n values.sort((a, b) =>\n 'multistatemultiselect' == option.type\n ? option.options.findIndex(v => v.key == a.value) - option.options.findIndex(v => v.key == b.value)\n : option.options.findIndex(v => v.key == a) - option.options.findIndex(v => v.key == b)\n )\n\n setSelectedValue(value)\n setSelectedValues(values)\n setSelectedOption(option)\n\n changedRef.current = true\n\n dispatch({\n type: 'UPDATE_ANSWER_VARIANT',\n data: {\n item: {\n ...item,\n pattern: null === option ? '' : basicFilters.convertToAdvanced(convertValuesToTree(option, value, values))\n },\n position: position - 1\n }\n })\n }\n\n const onPatternChange = value => {\n changedRef.current = true\n\n setProcessing(true)\n\n onResetValues()\n\n dispatch({\n type: 'UPDATE_ANSWER_VARIANT',\n data: {\n item: { ...item, pattern: value },\n position: position - 1\n }\n })\n }\n\n const onDeleteClick = () => {\n dispatch({\n type: 'DELETE_ANSWER_VARIANT',\n data: position - 1,\n variant: 'oex'\n })\n }\n\n const onHandleClick = useSingleAndDoubleClick(null, () => {\n dispatch({\n type: 'ADD_ANSWER_VARIANT',\n data: {\n item: {\n ...item,\n key: generateUID()\n },\n position: position\n }\n })\n })\n\n const onChange = event =>\n 'dropdown' == selectedOption.type\n ? onSelectedChange(selectedValue, [event.value])\n : onSelectedChange(selectedValue, event.value)\n\n useEffect(() => {\n null !== selectedOption && (dropdownsRef.current[position] = selectedOption.key)\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n delete dropdownsRef.current[position]\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [position, selectedOption]) // TODO\n\n useEffect(() => {\n const keys = Object.keys(parserResultPatternBasic || {})\n\n if (keys.length) {\n const option =\n data.options.flatMap(v => v.items).find(v => (v.value || v.key).toLowerCase() == keys[0].toLowerCase()) || null\n\n parserResultPatternBasicsRef.current[position] = null !== option ? parserResultPatternBasic : null\n } else parserResultPatternBasicsRef.current[position] = 0 < item.pattern.trim().length ? null : {}\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n delete parserResultPatternBasicsRef.current[position]\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [item.pattern, position, parserResultPatternBasic]) // TODO\n\n useEffect(() => {\n if (changedRef.current) {\n changedRef.current = false\n return\n }\n\n if (null === parserResultPatternBasic) {\n onResetValues()\n } else {\n const keys = Object.keys(parserResultPatternBasic || {})\n\n if (keys.length) {\n const option =\n data.options.flatMap(v => v.items).find(v => (v.value || v.key).toLowerCase() == keys[0].toLowerCase()) ||\n null\n\n if (null === option) {\n onResetValues()\n } else {\n const tree = Object.values(parserResultPatternBasic)[0]\n\n const values = convertTreeToValues(option, tree)\n\n values.sort((a, b) =>\n 'multistatemultiselect' == option.type\n ? option.options.findIndex(v => v.key == a.value) - option.options.findIndex(v => v.key == b.value)\n : option.options.findIndex(v => v.key == a) - option.options.findIndex(v => v.key == b)\n )\n\n setSelectedValue(option.key)\n setSelectedValues(values)\n setSelectedOption(option)\n }\n }\n }\n\n setProcessing(false)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [parserResultPatternBasic])\n\n useEffect(() => {\n if (dndListItem) dndListItem.connect(dndListItemRef.current)\n\n return () => {\n if (dndListItem) dndListItem.disconnect()\n }\n }, [dndListItem])\n\n useEffect(() => {\n if (dndListItemHandle) dndListItemHandle.connect(dndListItemHandleRef.current)\n\n return () => {\n if (dndListItemHandle) dndListItemHandle.disconnect()\n }\n }, [dndListItemHandle])\n\n useEffect(() => {\n dispatch({\n type: 'UPDATE_LOGIC_DATA',\n data: {\n id: `a${position}.pattern`,\n logicData: getLogicData(data.tags, data.codeBooks, parserResultPattern, parserResultPatternError)\n }\n })\n\n return () => {\n dispatch({\n type: 'UPDATE_LOGIC_DATA',\n data: {\n id: `a${position}.pattern`,\n logicData: null\n }\n })\n }\n }, [position, data.tags, data.codeBooks, dispatch, parserResultPattern, parserResultPatternError])\n useEffect(() => {\n const patternRefs = getRefs(parserResultPattern)\n const clustersRefs = getClustersRefs(data.modelClusters, parserResultPattern)\n\n dispatch({\n type: 'UPDATE_REFS',\n data: {\n id: `a${position}`,\n refs: [patternRefs, [], clustersRefs]\n }\n })\n\n return () => {\n dispatch({\n type: 'UPDATE_REFS',\n data: {\n id: `a${position}`,\n refs: null\n }\n })\n }\n }, [position, data.modelClusters, dispatch, parserResultPattern])\n useEffect(() => {\n dispatch({\n type: 'UPDATE_ERRORS',\n data: {\n id: `a${position}`,\n error: !item.pattern.trim().length || parserResultPatternError\n }\n })\n\n return () => {\n dispatch({\n type: 'UPDATE_ERRORS',\n data: {\n id: `a${position}`,\n error: null\n }\n })\n }\n }, [item, position, dispatch, parserResultPatternError])\n\n useEffect(\n () =>\n null !== selectedValue &&\n setSelectedOption(data.options.flatMap(v => v.items).find(v => v.key == selectedValue) || null),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [data.options]\n )\n\n useEffect(\n () => item.mode !== itemModeRef.current && onModeChange(itemModeRef.current),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [item.mode]\n )\n\n const renderValues = () => {\n if (null === selectedOption || 'none' == selectedOption.type) {\n return \n {disabled ? null : (\n \n \n \n )}\n \n
\n {disabled ? null : (\n Q{position}.
\n \n {'advanced' == itemMode ? (\n
\n \n
\n ) : (\n <>\n {renderOptions()}
\n {renderValues()}
\n \n )}\n \n \n \n \n
\n )}\n \n )\n}\n\nAnswerVariantOEX.propTypes = {\n item: PropTypes.object,\n position: PropTypes.number,\n dndItemsList: PropTypes.any\n}\n\nAnswerVariantOEX.displayName = 'AnswerVariantOEX'\n\nexport default AnswerVariantOEX\n","// lib\nimport React, { useContext, useState, useRef, useMemo, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\n\nimport ADND from '@aytm/lib/adnd/ADND'\nimport SchemaRules from '@aytm/app/stats/lib/schema-rules'\nimport { DataContext } from '@aytm/app/stats/page/question-views/vq/Component'\nimport { convertValuesToTree, convertTreeToValues } from '@aytm/app/stats/lib/converter'\n\nimport { generateUID, encodeText, decodeText } from '@aytm/app/stats/lib/helpers'\nimport { getLogicData, getRefs, getClustersRefs } from '@aytm/app/stats/lib/refs'\n\n// components\nimport { InputText } from 'primereact/inputtext'\nimport { Dropdown } from 'primereact/dropdown'\nimport { MultiSelect } from 'primereact/multiselect'\nimport { MultiStateMultiSelect } from 'primereact/multistatemultiselect'\n\nimport MultiSelectHeader from 'primereact-raytm-theme/MultiSelectHeader'\nimport MultiSelectFooter from 'primereact-raytm-theme/MultiSelectFooter'\n\nimport AdvancedFilter from '@aytm/app/stats/page/components/AdvancedFilter'\nimport ModeToggle from '@aytm/app/stats/page/question-views/vq/ModeToggle'\nimport AnswerVariantOptions from '@aytm/app/stats/page/question-views/vq/AnswerVariantOptions'\n\nimport { itemTemplate, valueTemplate } from '@aytm/app/stats/page/question-views/components/lib/templates'\n\n// hooks\nimport { useSingleAndDoubleClick } from '@aytm/app/stats/page/question-views/components/lib/hooks/useSingleAndDoubleClick'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/vq/styles/Component.module.scss'\n\nconst AnswerVariantOEX = ({ item, position, dndItemsList }) => {\n const {\n id,\n data,\n disabled,\n dispatch,\n dropdownsRef,\n parserResultPatternBasicsRef,\n basicFilters,\n parserResultEof,\n answerVariantAmount\n } = useContext(DataContext)\n\n const [processing, setProcessing] = useState(false)\n\n const [selectedValue, setSelectedValue] = useState(null)\n const [selectedValues, setSelectedValues] = useState([])\n const [selectedOption, setSelectedOption] = useState(null)\n\n const changedRef = useRef(false)\n\n const dndListItemRef = useRef()\n const dndListItemHandleRef = useRef()\n\n const itemMode = useMemo(\n () =>\n 'advanced' == item.mode || !data.options.some(group => 0 < group.items.length) || disabled ? 'advanced' : 'basic',\n [item.mode, data.options, disabled]\n )\n\n const itemModeRef = useRef(null)\n itemModeRef.current = itemMode\n\n const parserResultPattern = useMemo(\n () =>\n data.parser.analyzeString({\n id: id,\n filter: item.pattern.trim(),\n clusters: data.clusters,\n saveTokens: true\n }),\n [item.pattern, id, data.parser, data.clusters]\n )\n const parserResultPatternError = useMemo(\n () =>\n 0 < item.pattern.trim().length &&\n 0 < parserResultPattern.expression.status.errors.length &&\n parserResultPattern.expression.status.errors.some(v => !['ref', 'cluster'].includes(v.type)),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [parserResultPattern]\n )\n const parserResultPatternBasic = useMemo(() => {\n try {\n const tree = parserResultPatternError\n ? null\n : 0 < item.pattern.trim().length\n ? 0 < parserResultPattern.expression.status.errors.length\n ? null\n : basicFilters.convertToBasic(SchemaRules.flatten(parserResultPattern.expression.tree)) || null\n : {}\n return null === tree || 1 < Object.keys(tree).length ? null : tree\n } catch {\n return null\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [basicFilters, parserResultPattern, parserResultPatternError])\n\n const fetchData = useCallback(() => {\n return {\n id,\n item,\n position: position - 1,\n windowUID: data.windowUID,\n remove: () =>\n dispatch({\n type: 'DELETE_ANSWER_VARIANT',\n data: position - 1\n })\n }\n }, [item, position, id, data.windowUID, dispatch])\n\n const dndListItem = ADND.targets.itemsList.listItem({\n type: `dlq-answer-${data.windowUID}`,\n list: dndItemsList\n })\n const dndListItemHandle = ADND.sources\n .listItemHandle({\n type: `dlq-answer-${data.windowUID}`,\n item: dndListItem,\n cloneable: true\n })\n .fetchData(fetchData)\n\n const buttonLabelTemplate = event => {\n const text =\n 1 < selectedOption.options.length &&\n selectedOption.options.length == event.value.length &&\n ('multistatemultiselect' !== selectedOption.type || !event.value.some(item => !item.state))\n ? 'All'\n : 0 < event.value.length\n ? 1 == event.value.length && ('multistatemultiselect' !== selectedOption.type || event.value[0].state)\n ? selectedOption.options.find(\n o => o.key == ('multistatemultiselect' == selectedOption.type ? event.value[0].value : event.value[0])\n ).text\n : `Filtered to ${event.value.length}`\n : 'Select...'\n return \n }\n\n const onModeChange = (mode, applyToAll = false) => {\n if (applyToAll)\n dispatch({\n type: 'UPDATE_ANSWER_VARIANTS_MODE',\n data: {\n positions: Object.keys(parserResultPatternBasicsRef.current).filter(\n k => null !== parserResultPatternBasicsRef.current[k]\n ),\n mode: mode\n }\n })\n else\n dispatch({\n type: 'UPDATE_ANSWER_VARIANT',\n data: {\n item: {\n ...item,\n mode: mode || ('basic' === item.mode ? 'advanced' : 'basic')\n },\n position: position - 1\n }\n })\n }\n\n const onResetValues = () => {\n setSelectedValue(null)\n setSelectedValues([])\n setSelectedOption(null)\n\n onModeChange('advanced')\n }\n\n const onSelectedChange = (value = null, _values) => {\n const group = data.options.find(v => v.items.some(v => v.key == value)) || null\n if (null !== group && group.disabled) return\n\n const option = group.items.find(v => v.key == value) || null\n if (null !== option && option.disabled) return\n\n const values = _values || []\n values.sort((a, b) =>\n 'multistatemultiselect' == option.type\n ? option.options.findIndex(v => v.key == a.value) - option.options.findIndex(v => v.key == b.value)\n : option.options.findIndex(v => v.key == a) - option.options.findIndex(v => v.key == b)\n )\n\n setSelectedValue(value)\n setSelectedValues(values)\n setSelectedOption(option)\n\n changedRef.current = true\n\n dispatch({\n type: 'UPDATE_ANSWER_VARIANT',\n data: {\n item: {\n ...item,\n pattern: null === option ? '' : basicFilters.convertToAdvanced(convertValuesToTree(option, value, values))\n },\n position: position - 1\n }\n })\n }\n\n const onPatternChange = value => {\n changedRef.current = true\n\n setProcessing(true)\n\n onResetValues()\n\n dispatch({\n type: 'UPDATE_ANSWER_VARIANT',\n data: {\n item: { ...item, pattern: value },\n position: position - 1\n }\n })\n }\n\n const onLabelChange = event => {\n dispatch({\n type: 'UPDATE_ANSWER_VARIANT',\n data: {\n item: {\n ...item,\n text: encodeText(event.target.value)\n },\n position: position - 1\n }\n })\n }\n\n const onDeleteClick = () => {\n dispatch({\n type: 'DELETE_ANSWER_VARIANT',\n data: position - 1,\n variant: 'oex'\n })\n }\n\n const onHandleClick = useSingleAndDoubleClick(null, () => {\n dispatch({\n type: 'ADD_ANSWER_VARIANT',\n data: {\n item: {\n ...item,\n key: generateUID()\n },\n position: position\n }\n })\n })\n\n const onChange = event =>\n 'dropdown' == selectedOption.type\n ? onSelectedChange(selectedValue, [event.value])\n : onSelectedChange(selectedValue, event.value)\n\n useEffect(() => {\n null !== selectedOption && (dropdownsRef.current[position] = selectedOption.key)\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n delete dropdownsRef.current[position]\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [position, selectedOption]) // TODO\n\n useEffect(() => {\n const keys = Object.keys(parserResultPatternBasic || {})\n\n if (keys.length) {\n const option =\n data.options.flatMap(v => v.items).find(v => (v.value || v.key).toLowerCase() == keys[0].toLowerCase()) || null\n\n parserResultPatternBasicsRef.current[position] = null !== option ? parserResultPatternBasic : null\n } else parserResultPatternBasicsRef.current[position] = 0 < item.pattern.trim().length ? null : {}\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n delete parserResultPatternBasicsRef.current[position]\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [item.pattern, position, parserResultPatternBasic])\n\n useEffect(() => {\n if (changedRef.current) {\n changedRef.current = false\n return\n }\n\n if (null === parserResultPatternBasic) {\n onResetValues()\n } else {\n const keys = Object.keys(parserResultPatternBasic || {})\n\n if (keys.length) {\n const option =\n data.options.flatMap(v => v.items).find(v => (v.value || v.key).toLowerCase() == keys[0].toLowerCase()) ||\n null\n\n if (null === option) {\n onResetValues()\n } else {\n const tree = Object.values(parserResultPatternBasic)[0]\n\n const values = convertTreeToValues(option, tree)\n\n values.sort((a, b) =>\n 'multistatemultiselect' == option.type\n ? option.options.findIndex(v => v.key == a.value) - option.options.findIndex(v => v.key == b.value)\n : option.options.findIndex(v => v.key == a) - option.options.findIndex(v => v.key == b)\n )\n\n setSelectedValue(option.key)\n setSelectedValues(values)\n setSelectedOption(option)\n }\n }\n }\n\n setProcessing(false)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [parserResultPatternBasic])\n\n useEffect(() => {\n if (dndListItem) dndListItem.connect(dndListItemRef.current)\n\n return () => {\n if (dndListItem) dndListItem.disconnect()\n }\n }, [dndListItem])\n\n useEffect(() => {\n if (dndListItemHandle) dndListItemHandle.connect(dndListItemHandleRef.current)\n\n return () => {\n if (dndListItemHandle) dndListItemHandle.disconnect()\n }\n }, [dndListItemHandle])\n\n useEffect(() => {\n dispatch({\n type: 'UPDATE_LOGIC_DATA',\n data: {\n id: `a${position}.pattern`,\n logicData: getLogicData(data.tags, data.codeBooks, parserResultPattern, parserResultPatternError)\n }\n })\n\n return () => {\n dispatch({\n type: 'UPDATE_LOGIC_DATA',\n data: {\n id: `a${position}.pattern`,\n logicData: null\n }\n })\n }\n }, [position, data.tags, data.codeBooks, dispatch, parserResultPattern, parserResultPatternError])\n useEffect(() => {\n const patternRefs = getRefs(parserResultPattern)\n const clustersRefs = getClustersRefs(data.modelClusters, parserResultPattern)\n\n dispatch({\n type: 'UPDATE_REFS',\n data: {\n id: `a${position}`,\n refs: [patternRefs, [], clustersRefs]\n }\n })\n\n return () => {\n dispatch({\n type: 'UPDATE_REFS',\n data: {\n id: `a${position}`,\n refs: null\n }\n })\n }\n }, [position, data.modelClusters, dispatch, parserResultPattern])\n useEffect(() => {\n dispatch({\n type: 'UPDATE_ERRORS',\n data: {\n id: `a${position}`,\n error: !item.pattern.trim().length || parserResultPatternError\n }\n })\n\n return () => {\n dispatch({\n type: 'UPDATE_ERRORS',\n data: {\n id: `a${position}`,\n error: null\n }\n })\n }\n }, [item, position, dispatch, parserResultPatternError])\n\n useEffect(\n () =>\n null !== selectedValue &&\n setSelectedOption(data.options.flatMap(v => v.items).find(v => v.key == selectedValue) || null),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [data.options]\n )\n\n useEffect(\n () => item.mode !== itemModeRef.current && onModeChange(itemModeRef.current),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [item.mode]\n )\n\n const renderValues = () => {\n if (null === selectedOption || 'none' == selectedOption.type) {\n return \n {disabled ? null : (\n \n \n \n )}\n \n
\n {disabled ? null : (\n Q{position}.
\n \n
\n {1 < answerVariantAmount ? (\n \n
\n ) : (\n <>\n {renderOptions()}
\n {renderValues()}
\n \n )}\n \n
\n ) : null}\n \n \n \n \n
\n )}\n \n )\n}\n\nAnswerVariantOEX.propTypes = {\n item: PropTypes.object,\n position: PropTypes.number,\n dndItemsList: PropTypes.any\n}\n\nAnswerVariantOEX.displayName = 'AnswerVariantOEX'\n\nexport default AnswerVariantOEX\n","// lib\nimport React, { useContext, useRef, useCallback } from 'react'\nimport PropTypes from 'prop-types'\n\nimport { DataContext } from '@aytm/app/stats/page/question-views/vq/Component'\n\n// components\nimport { Dropdown } from 'primereact/dropdown'\n\nimport {\n itemTemplate,\n valueTemplate,\n optionGroupTemplate\n} from '@aytm/app/stats/page/question-views/components/lib/templates'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/vq/styles/Component.module.scss'\n\nconst AnswerVariantOptions = ({ position, value, options, dropdownsRef, onSelectedChange }) => {\n const { disabled } = useContext(DataContext)\n\n const timer = useRef(null)\n\n const optionsRef = useRef(null)\n\n const onShow = useCallback(() => {\n if (!disabled) {\n const overlay = optionsRef.current.getOverlay()\n\n if (1 < position && null === value) {\n const key = dropdownsRef.current[position - 1]\n if (key != undefined && null !== key) {\n const item = overlay.querySelector(`.p-item-${key}`)\n\n if (item != undefined) {\n const parent = item.parentNode.parentNode.parentNode\n\n const parentRect = parent.getBoundingClientRect()\n const itemRect = item.parentNode.getBoundingClientRect()\n\n parent.scrollTop = itemRect.y - parentRect.y + parent.scrollTop\n }\n }\n }\n\n timer.current && clearTimeout(timer.current)\n timer.current = setTimeout(() => {\n overlay.classList.add('p-rendered')\n })\n }\n\n return () => timer.current && clearTimeout(timer.current)\n }, [position, value, dropdownsRef, disabled])\n\n return (\n \n onPatternTypeChange(event.value)}\n />\n
\n \n {'number' == state.patternType && (\n onPatternChange(String(event.value || ''))}\n onBlur={disabled || 0 < state.pattern.trim().length ? null : () => onPatternTypeChange()}\n />\n )}\n {'expression' == state.patternType && (\n onPatternChange(value)}\n onBlur={disabled || 0 < state.pattern.trim().length ? null : () => onPatternTypeChange()}\n />\n )}\n
\n \n )}\n \n {null === mode || !data.options.some(group => 0 < group.items.length) || disabled ? null : (\n
\n {!disabled && }\n \n )\n}\n\nComponent.propTypes = {\n model: PropTypes.object,\n data: PropTypes.object,\n states: PropTypes.object,\n disabled: PropTypes.bool,\n isAdmin: PropTypes.bool,\n onChange: PropTypes.func,\n onControlsChange: PropTypes.func,\n onUpdateData: PropTypes.func,\n getTopsOptions: PropTypes.func,\n getLabelsOptions: PropTypes.func,\n getImagesOptions: PropTypes.func,\n getAnswerVariantsOptions: PropTypes.func\n}\n\nComponent.displayName = 'Component'\n\nexport default Component\n\nADND().connect()\n","// lib\nimport React, { useState, useRef, useMemo, useEffect } from 'react'\nimport PropTypes from 'prop-types'\n\n// components\nimport { Dropdown } from 'primereact/dropdown'\nimport { MultiSelect } from 'primereact/multiselect'\n\nimport MultiSelectHeader from 'primereact-raytm-theme/MultiSelectHeader'\nimport MultiSelectFooter from 'primereact-raytm-theme/MultiSelectFooter'\n\nimport { optionGroupTemplate } from '@aytm/app/stats/page/question-views/components/lib/templates'\n\nimport { default as ControlsContainer } from '@aytm/app/stats/page/question-views/components/component/Controls'\n\nconst Controls = ({\n model,\n data,\n collapsed,\n disabled,\n onToggle,\n onChange,\n getTopsOptions,\n getLabelsOptions,\n getImagesOptions,\n getAnswerVariantsOptions\n}) => {\n const [source, setSource] = useState(null)\n\n const [top, setTop] = useState(null)\n const [label, setLabel] = useState(null)\n const [image, setImage] = useState(null)\n\n const [answerVariants, setAnswerVariants] = useState(null)\n\n const sourceRef = useRef(null)\n const optionsRef = useRef(null)\n\n const sourceGroup = useMemo(() => (null !== source && source.split('.').slice(0, 2).join('.')) || null, [source])\n\n const sourceGroupRef = useRef(null)\n sourceGroupRef.current = sourceGroup\n\n const topsOptions = useMemo(() => (null !== source ? getTopsOptions(source) : []), [source, getTopsOptions])\n const labelsOptions = useMemo(() => (null !== source ? getLabelsOptions(source) : []), [source, getLabelsOptions])\n const imagesOptions = useMemo(() => (null !== source ? getImagesOptions(source) : []), [source, getImagesOptions])\n\n const answerVariantsOptions = useMemo(\n () => (null !== source ? getAnswerVariantsOptions(source) : []),\n [source, getAnswerVariantsOptions]\n )\n\n const itemTemplate = option =>\n option.disabled && option.icon == undefined ? (\n \n ) : (\n \n {option.icon ? : null}\n \n \n )\n const valueTemplate = (option, _props) =>\n option ? (\n <>\n {option.icon ? : null}\n \n \n ) : (\n \n )\n\n const buttonLabelTemplate = event => {\n const text =\n event != undefined && event.value != undefined && 0 < event.value.length\n ? event.options.length === event.value.length\n ? 'All'\n : answerVariantsOptions\n .filter(o => event.value.includes(o.key))\n .map(o => o.label)\n .join(', ')\n : 'Select...'\n return \n }\n\n useEffect(() => setTop(0 < topsOptions.length ? topsOptions[0].key : null), [topsOptions])\n useEffect(() => {\n const index = labelsOptions.findIndex(v => v != undefined && v.default)\n setLabel(0 < labelsOptions.length ? labelsOptions[(-1 < index && index) || 0].key : null)\n }, [labelsOptions])\n useEffect(() => {\n const index = imagesOptions.findIndex(v => v != undefined && v.default)\n setImage(0 < imagesOptions.length ? imagesOptions[(-1 < index && index) || 0].key : null)\n }, [imagesOptions])\n\n useEffect(\n () => setAnswerVariants(0 < answerVariantsOptions.length ? [answerVariantsOptions[0].key] : null),\n [answerVariantsOptions]\n )\n\n useEffect(\n () => null !== source && onChange('source', { top: null !== top ? top : source, label, image, answerVariants }),\n [source, top, label, image, answerVariants, onChange]\n )\n\n useEffect(() => {\n if (null === source) return\n\n const option = data.controls.source.options\n .flatMap(v => (v != undefined && v.items) || [])\n .find(v => source == v.key)\n\n if (option.variant === model.variant || (!option.variant && ['rb', 'cb'].includes(model.variant))) return\n\n setSource(null)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [model.variant, data.controls.source.options])\n\n return (\n \n \n switch ALL to {'basic' === mode ? 'advanced' : 'basic'} mode\n \n
\n )}\n \n \n {state.answerVariants.map((item, index) => (\n \n
\n {disabled &&\n ['mx', 'oe', 'oex'].includes(model.variant) &&\n !state.pattern.length &&\n 'sum' != state.patternType ? null : (\n \n {disabled ? null : (\n <>\n
\n )}\n \n {answerVariantPrefix}\n {state.answerVariants.length + 1}.\n
\n \n \n {answerVariantAddText}\n \n
\n \n av.other)}\n onChange={onOtherChange}\n />\n \n
\n \n )}\n {['mx', 'oe', 'oex'].includes(model.variant) ? null : renderPatternOptions()}\n \n setSource(event.value)}\n />\n {0 < topsOptions.length && (\n setTop(event.value)}\n />\n )}\n
\n ) : null}\n {0 < labelsOptions.length ? (\n \n setLabel(event.value)}\n />\n {0 < imagesOptions.length && (\n setImage(event.value)}\n />\n )}\n
\n ) : 0 < answerVariantsOptions.length ? (\n \n setAnswerVariants(event.value)}\n />\n
\n ) : (\n \n onChange('variant', event.value)}\n />\n {0 < data.controls.variant.note.length && }\n
\n )}\n \n {0 < scripts.length ? (\n <>\n
\n {!disabled && }\n \n
\n setTitle()}>\n {\n const description = scripts.find(v => event.value === v.value).description\n setTitle(description)\n onSelect(event.value)\n }\n }\n />\n
\n \n \n {script != undefined && script.args.map(item => renderScriptItem(script.manifest[item.id]))}\n \n
\n \n ) : (\n Loading scripts...
\n )}\n \n {disabled ? (\n
\n )\n}\n\nScriptItemSelect.propTypes = {\n item: PropTypes.object,\n value: PropTypes.any,\n multiple: PropTypes.bool\n}\n\nScriptItemSelect.displayName = 'ScriptItemSelect'\n\nexport default ScriptItemSelect\n","// lib\nimport React, { useContext, useState, useRef, useMemo, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nimport { DataContext } from '@aytm/app/stats/page/question-views/xq/Component'\n\nimport { encodeText, decodeText } from '@aytm/app/stats/lib/helpers'\n\n// components\nimport { InputTextarea } from 'primereact/inputtextarea'\nimport { Dropdown } from 'primereact/dropdown'\n\n// styles\nimport style from '@aytm/app/stats/page/question-views/xq/styles/ScriptItem.module.scss'\n\nconst MODE_TEXTS = {\n advanced: 'switch to basic mode',\n basic: 'switch to advanced mode',\n basicDisabled: 'simplify/clear logic to switch to the basic mode'\n}\nconst TEXT_WIDTH = 448\nconst TEXT_VPADDING = 9\nconst TEXT_FONT_SIZE = 14\nconst TEXT_LINE_HEIGHT = 16\nconst TEXT_MIN_HEIGHT = 34\nconst TEXT_MAX_HEIGHT = 80\n\nconst onScriptItemValueKeyDown = event => 13 === event.keyCode && event.preventDefault()\n\nconst ScriptItemText = ({ item, value, basic }) => {\n const { model, disabled, onChange } = useContext(DataContext)\n\n const [height, setHeight] = useState(TEXT_MIN_HEIGHT)\n const [minHeight, setMinHeight] = useState(TEXT_MIN_HEIGHT)\n\n const [mode, setMode] = useState('advanced')\n const [error, setError] = useState(false)\n const [basicDisabled, setBasicDisabled] = useState(false)\n\n const editRef = useRef(false)\n const callbackRef = useRef(null)\n\n const basicOptions = useMemo(\n () =>\n basic && 0 < basic.length\n ? basic.map(r => {\n return { text: r.text, key: r.value }\n })\n : null,\n [basic]\n )\n\n const onBasicChange = useCallback(\n option => {\n if (value == option) return\n\n model.args[item.id] = option\n onChange(model)\n },\n [item.id, value, model, onChange]\n )\n\n const onScriptItemValueChange = useCallback(\n event => {\n const text = encodeText(event.target.value)\n if (value == text) return\n\n model.args[item.id] = text\n onChange(model)\n },\n [item.id, value, model, onChange]\n )\n\n const onScriptItemValuePaste = useCallback(\n event => {\n event.preventDefault()\n\n let text =\n (event.clipboardData || window.clipboardData).getData('Text') || event.clipboardData.getData('text/plain')\n text = text.replace(/(\\r\\n|\\n|\\r)/gm, ' ')\n\n const el = event.currentTarget\n\n const l = text.length\n const start = el.selectionStart\n const end = el.selectionEnd\n\n const valueBefore = el.value.slice(0, start)\n const valueAfter = el.value.slice(end)\n text = encodeText(`${valueBefore}${text}${valueAfter}`)\n\n if (value != text) {\n model.args[item.id] = text\n onChange(model)\n }\n\n callbackRef.current = () => {\n el.setSelectionRange(start + l, start + l)\n el.blur()\n el.focus()\n }\n },\n [item.id, value, model, onChange]\n )\n\n const onScriptItemValueFocus = () => (editRef.current = true)\n\n const onScriptItemValueBlur = useCallback(() => {\n editRef.current = true\n\n setError(item.required && !value.trim().length)\n }, [item.required, value])\n\n useEffect(() => {\n if (null !== callbackRef.current && 'function' === typeof callbackRef.current) {\n callbackRef.current()\n callbackRef.current = null\n }\n }, [value])\n\n useEffect(() => {\n const basicDisabled = 0 < value.length && basic && 0 < basic.length && basic.findIndex(r => r.value == value) < 0\n\n setMode(basicDisabled || !basic || !basic.length ? 'advanced' : mode)\n setBasicDisabled(basicDisabled)\n\n editRef.current && setError(item.required && !value.trim().length)\n }, [item.required, value, basic, mode])\n\n useEffect(() => {\n const div = document.createElement('div')\n\n document.body.appendChild(div)\n\n div.style.position = 'absolute'\n div.style.left = '-1000px'\n div.style.top = '-1000px'\n div.style.width = `${TEXT_WIDTH}px`\n div.style.fontSize = `${TEXT_FONT_SIZE}px`\n div.style.lineHeight = `${TEXT_LINE_HEIGHT}px`\n\n div.style.overflow = 'hidden'\n div.style['overflow-wrap'] = 'break-word'\n\n div.innerHTML = value || ' '\n setHeight(Math.min(div.clientHeight + 2 * TEXT_VPADDING, TEXT_MAX_HEIGHT))\n\n div.innerHTML = item.default || item.placeholder || ' '\n setMinHeight(Math.min(div.clientHeight + 2 * TEXT_VPADDING, TEXT_MAX_HEIGHT))\n\n div.parentNode.removeChild(div)\n }, [item.default, item.placeholder, value])\n\n const renderAdvancedMode = () => (\n \n {multiple ? (\n onValueChange(event.value)}\n />\n ) : (\n onValueChange(event.value)}\n />\n )}\n
\n \n )}\n \n {disabled ? (\n \n ) : (\n <>\n
\n )\n}\n\nScriptItemText.propTypes = {\n item: PropTypes.object,\n value: PropTypes.any,\n basic: PropTypes.array\n}\n\nScriptItemText.displayName = 'ScriptItemText'\n\nexport default ScriptItemText\n","import React, { useContext, useState, useRef, useMemo, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport { Transition } from 'react-transition-group'\nimport { collator, encodeText } from '@aytm/app/stats/lib/helpers'\n\nimport ADND from '@aytm/lib/adnd/ADND'\nimport { DataContext } from '@aytm/app/stats/page/sidebar/coding/CodingPanel'\n\nimport {\n CODEBOOK_MIN_LENGTH,\n CODEBOOK_MAX_LENGTH,\n TAG_MIN_LENGTH,\n TAG_MAX_LENGTH,\n DEFAULT_SELECTED_QUESTION\n} from '@aytm/app/stats/page/comments/lib/constants'\n\nimport { Button } from 'primereact/button'\n\nimport CodingTag from '@aytm/app/stats/page/sidebar/coding/CodingTag'\nimport InputNew from '@aytm/app/stats/page/sidebar/coding/components/InputNew'\nimport InputUpdate from '@aytm/app/stats/page/sidebar/coding/components/InputUpdate'\nimport CodebookSettings from '@aytm/app/stats/page/sidebar/coding/components/CodebookSettings'\n\nimport style from '@aytm/app/stats/page/sidebar/coding/styles/CodingPanel.module.scss'\n\nlet dndTimer = null\n\nconst CodingCodebook = ({\n codebook,\n progress,\n error,\n newItem,\n editingItem,\n processingItem,\n processingTag,\n settingsItem,\n collapsedRefs,\n isEditing,\n isProcessing,\n isLoading,\n isCurrentLoading,\n isSkipperLoading,\n onDNDStart,\n onDNDEnd\n}) => {\n const {\n tagsList,\n tagsCodebooks,\n selectedQuestion,\n windowUID,\n isSkipperDisabled,\n isTagsManagementDisabled,\n isAiAssistantsOECodingDisabled,\n onError,\n onConfirm,\n onCloseDropdown,\n onCancelEditing,\n onToggleNew\n } = useContext(DataContext)\n\n const [collapsed, setCollapsed] = useState(\n Object.hasOwn(collapsedRefs.current, codebook.codebook) ? collapsedRefs.current[codebook.codebook] : true\n )\n\n const [maxHeight, setMaxHeight] = useState(0)\n\n const [transitionDuration, setTransitionDuration] = useState(500)\n\n const [dndDroppedTag, setDndDroppedTag] = useState(null)\n\n const dndComponentRef = useRef(null)\n const dndItemRef = useRef(null)\n\n const componentRef = useRef(null)\n\n const collapsedRef = useRef()\n collapsedRef.current = collapsed\n\n const inputValueRef = useRef(codebook.codebook)\n\n const isDragging = useRef(false)\n\n const tags = useMemo(() => {\n const _tags = codebook.tags.reduce((acc, cur) => {\n const _tag = tagsList.find(tag =>\n 'sentiment' == codebook.type\n ? cur == tag.tag\n : `${codebook.codebook}: ${cur}` == tag.tag && codebook.type == tag.type\n )\n return _tag && null !== _tag ? acc.concat(_tag) : acc\n }, [])\n if ('sentiment' != codebook.type) {\n _tags.sort((a, b) => collator.compare(a.label, b.label))\n }\n return _tags\n }, [codebook, tagsList])\n\n const onDNDStartTag = () => {\n isDragging.current = true\n dispatchEvent(new CustomEvent('dndStartTag'))\n }\n const onDNDEndTag = () => {\n if (dndTimer) clearTimeout(dndTimer)\n dndTimer = setTimeout(() => {\n isDragging.current = false\n }, 300)\n dispatchEvent(new CustomEvent('dndEndTag'))\n }\n\n const onDNDEnter = useCallback(() => {\n if (isDragging.current) return\n dndComponentRef.current.classList.add(style['component-active'])\n }, [isDragging])\n const onDNDLeave = useCallback(() => {\n if (isDragging.current) return\n dndComponentRef.current.classList.remove(style['component-active'])\n }, [isDragging])\n\n const onDNDDrop = useCallback(\n data => {\n if (isDragging.current) return\n\n const item = data.item || data.data\n if (null === item || (item.windowUID == windowUID && item.codebook == codebook.codebook)) return\n\n const newValue = 'sentiment' == codebook.type ? item.label : `${codebook.codebook}: ${item.label}`\n\n setCollapsed(false)\n\n if (item.windowUID == windowUID) {\n if (tagsList.some(tag => newValue.toLowerCase() == tag.tag.toLowerCase())) {\n onCloseDropdown()\n onCancelEditing()\n\n setDndDroppedTag(item)\n } else {\n onConfirm(\n {\n ...item,\n destination: {\n codebook: 'sentiment' == codebook.type ? null : codebook.codebook,\n type: codebook.type\n }\n },\n 'clone'\n )\n }\n } else {\n onConfirm(\n {\n tag: newValue,\n type: codebook.type,\n label: item.label,\n value: newValue,\n codebook: 'sentiment' == codebook.type ? null : codebook.codebook\n },\n 'create'\n )\n }\n\n setCollapsed(false)\n },\n [codebook, tagsList, windowUID, onConfirm, onCloseDropdown, onCancelEditing]\n )\n\n const onDNDStartCodebook = () => {\n onDNDStart(dndItemRef.current)\n !isSkipperDisabled &&\n !isAiAssistantsOECodingDisabled &&\n dispatchEvent(new CustomEvent('dndStartCodebook', { detail: { guided: !codebook.tags.length } }))\n }\n const onDNDEndCodebook = () => {\n onDNDEnd()\n !isSkipperDisabled && !isAiAssistantsOECodingDisabled && dispatchEvent(new CustomEvent('dndEndCodebook'))\n }\n\n const fetchData = useCallback(() => {\n return { ...codebook, windowUID }\n }, [codebook, windowUID])\n\n const dndComponent =\n !codebook.disabled && !isEditing && !isLoading && !isTagsManagementDisabled\n ? ADND.targets\n .data(\n {\n acceptTypes: ['sidebar-tag'],\n dynamicPosition: true\n },\n { capture: false }\n )\n .onEnter(onDNDEnter)\n .onLeave(onDNDLeave)\n .onDrop(onDNDDrop)\n : null\n\n const dndItem =\n !codebook.disabled && !isEditing && !isLoading && !isTagsManagementDisabled\n ? ADND.sources\n .data({\n type: 'sidebar-codebook',\n clearDragImage: false\n })\n .onStart(onDNDStartCodebook)\n .onEnd(onDNDEndCodebook)\n .fetchData(fetchData)\n : null\n\n const onToggle = () => {\n setCollapsed(!collapsedRef.current)\n setTransitionDuration(500)\n }\n\n const onActionConfirm = useCallback(\n action => {\n const _inputValue = inputValueRef.current.trim()\n const newValue = encodeText(_inputValue, false)\n\n if ('update' == action && newValue == codebook.codebook) {\n onCloseDropdown()\n onCancelEditing()\n } else if (\n 'update' == action &&\n (_inputValue.length < CODEBOOK_MIN_LENGTH || _inputValue.length > CODEBOOK_MAX_LENGTH)\n ) {\n onError({\n codebook: codebook.codebook,\n name: 'updateError',\n message: `A codebook length should be between ${CODEBOOK_MIN_LENGTH} and ${CODEBOOK_MAX_LENGTH} characters`\n })\n } else if (\n 'update' == action &&\n ('sentiments' == _inputValue.toLowerCase() ||\n tagsCodebooks.some(item => newValue.toLowerCase() == item.codebook.toLowerCase()))\n ) {\n onError({\n codebook: codebook.codebook,\n name: 'updateError',\n message: 'A codebook with the same name already exists'\n })\n } else {\n onConfirm(codebook, action, newValue)\n }\n },\n [codebook, tagsCodebooks, onError, onConfirm, onCloseDropdown, onCancelEditing]\n )\n\n const onMergeTag = useCallback(async () => {\n await onConfirm(\n {\n ...dndDroppedTag,\n destination: {\n codebook: 'sentiment' == codebook.type ? null : codebook.codebook,\n type: codebook.type\n }\n },\n 'merge',\n dndDroppedTag.update || dndDroppedTag.label\n )\n setDndDroppedTag(null)\n }, [codebook, dndDroppedTag, onConfirm])\n\n const onAddTag = useCallback(\n value => {\n const _value = value.trim()\n const newValue = 'sentiment' == codebook.type ? _value : `${codebook.codebook}: ${encodeText(_value, false)}`\n\n if (_value.length < TAG_MIN_LENGTH || _value.length > TAG_MAX_LENGTH) {\n onError({\n codebook: codebook.codebook,\n tag: newValue,\n name: 'createError',\n message: `A tag length should be between ${TAG_MIN_LENGTH} and ${TAG_MAX_LENGTH} characters`\n })\n } else if (tagsList.some(tag => newValue.toLowerCase() == tag.tag.toLowerCase())) {\n onError({\n codebook: codebook.codebook,\n tag: newValue,\n name: 'createError',\n message: 'A tag with the same name already exists'\n })\n } else {\n onConfirm(\n {\n tag: newValue,\n type: 'manual',\n label: encodeText(_value, false),\n value: newValue,\n codebook: 'sentiment' == codebook.type ? null : codebook.codebook\n },\n 'create'\n )\n }\n },\n [codebook, tagsList, onError, onConfirm]\n )\n\n useEffect(() => {\n if (dndComponent) dndComponent.connect(dndComponentRef.current)\n\n return () => {\n if (dndComponent) dndComponent.disconnect()\n }\n }, [dndComponent])\n\n useEffect(() => {\n if (dndItem) dndItem.connect(dndItemRef.current)\n\n return () => {\n if (dndItem) dndItem.disconnect()\n }\n }, [dndItem])\n\n useEffect(\n () => processingItem && tags.some(tag => processingItem.tag == tag.tag) && setCollapsed(false),\n [tags, processingItem]\n )\n\n useEffect(() => isProcessing && dndItemRef.current.scrollIntoView(), [isProcessing])\n\n useEffect(() => {\n collapsedRefs.current[codebook.codebook] = collapsed\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n delete collapsedRefs.current[codebook.codebook]\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [codebook.codebook, collapsed])\n\n useEffect(() => {\n setMaxHeight(componentRef.current ? componentRef.current.getBoundingClientRect().height : 0)\n setTransitionDuration(collapsed ? 500 : 10)\n\n collapsedRefs.current[codebook.codebook] = collapsed\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [tags, error, collapsed, dndDroppedTag, componentRef.current])\n\n return (\n \n Type: {item.type}\n {basic && 0 < basic.length ? (\n setMode('basic' == mode ? 'advanced' : 'basic')}\n >\n {MODE_TEXTS[basicDisabled ? 'basicDisabled' : mode]}\n \n ) : null}\n {'advanced' == mode ? renderAdvancedMode() : renderBasicMode()}\n
\n \n )}\n {error.message}
}\n\n \n {0 < tags.length ? (\n onToggleNew(value ? `${codebook.codebook} - tag` : null)}\n />\n )}\n
\n \n )}\n \n {tags.map((tag, index) => (\n
\n ) : null}\n\n {null !== dndDroppedTag ? (\n \n
\n ) : null}\n\n {codebook.disabled || isTagsManagementDisabled ? null : (\n A tag with the same name already exists
\n \n setDndDroppedTag(null)}\n />\n onMergeTag()}\n />\n
\n \n \n onToggleNew(value ? 'codebook' : null)}\n />\n\n {error &&\n error.message &&\n 'skipperError' != error.name &&\n !Object.hasOwn(error, 'codebook') &&\n !Object.hasOwn(error, 'tag') && \n
\n )\n}\n\nCodingPanel.propTypes = {\n survey: PropTypes.object,\n tagsData: PropTypes.object,\n question: PropTypes.object,\n reports: PropTypes.array,\n reportId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n reportParams: PropTypes.object,\n windowUID: PropTypes.string,\n isTagsManagementDisabled: PropTypes.bool,\n isSentimentsManagementDisabled: PropTypes.bool,\n isAiAssistantsOECodingDisabled: PropTypes.bool,\n onFetch: PropTypes.func,\n onCodeBooksFetch: PropTypes.func,\n onTagsFetch: PropTypes.func,\n onInvalidKey: PropTypes.func\n}\n\nCodingPanel.displayName = 'CodingPanel'\n\nexport default CodingPanel\n\nADND().connect()\n","import React, { useContext, useState, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nimport { DataContext } from '@aytm/app/stats/page/sidebar/coding/CodingPanel'\n\nimport { generateSurveySkipper } from '@aytm/app/stats/page/comments/actions'\n\nimport SidebarPopup from '@aytm/app/stats/page/sidebar/components/SidebarPopup'\n\nimport style from '@aytm/app/stats/page/sidebar/coding/styles/CodingPanel.module.scss'\n\nconst SKIPPER_ACTIVE_HELP =\n 'Leverage automatic topical analysis to categorize and quantify your unstructured data effortlessly. \"Skipper - auto code\" will read all verbatim responses under the selected question, create a codebook with relevant tags, and assign them accordingly. You\\'ll be able to review and edit the results, if needed.\n {0 < tagsCodebooks.length\n ? tagsCodebooks.map((codebook, index) => (\n
\n\n {isTagsManagementDisabled ? null : (\n <>\n {error.message}
}\n\n Pro tip: Need more control? Manually create a custom codebook and use the \"Skipper - apply\" command (found under the codebook\\'s gear icon) to automatically tag responses with your custom tags. You can also create a custom codebook, give it a meaningful name and click \"Skipper - clone, finalize, and apply\" to let Skipper clone your codebook, edit existing tags (if there are any), create new ones and assign them to responses.'\nconst SKIPPER_DISABLED_HELP =\n 'Start by selecting an open ended question on the right. Leverage automatic topical analysis to categorize and quantify your unstructured data effortlessly. \"Skipper - auto code\" will read all verbatim responses under the selected question, create a codebook with relevant tags, and assign them accordingly. You\\'ll be able to review and edit the results, if needed.
Pro tip: Need more control? Manually create a custom codebook and use the \"Skipper - apply\" command (found under the codebook\\'s gear icon) to automatically tag responses with your custom tags. You can also create a custom codebook, give it a meaningful name and click \"Skipper - clone, finalize, and apply\" to let Skipper clone your codebook, edit existing tags (if there are any), create new ones and assign them to responses.'\n\nconst CodingSkipper = ({\n root,\n error,\n progress,\n isLoading,\n isSkipperLoading,\n setIsLoading,\n setIsSkipperLoading,\n onProgress,\n onFetch,\n onInvalidKey\n}) => {\n const {\n selectedQuestion,\n isSkipperDisabled,\n isAiAssistantsOECodingDisabled,\n onError,\n onCloseDropdown,\n onCancelEditing\n } = useContext(DataContext)\n\n const [progressQuestion, setProgressQuestion] = useState(selectedQuestion)\n\n const onSkipperConfirm = useCallback(async () => {\n const params = {\n selectedQuestion,\n onFetch,\n onError,\n onProgress,\n setIsLoading: value => {\n if (!value) {\n onProgress(value)\n }\n\n setIsLoading(value)\n setIsSkipperLoading(value)\n },\n onInvalidKey\n }\n\n setProgressQuestion(selectedQuestion)\n\n onCloseDropdown()\n onCancelEditing()\n\n await generateSurveySkipper(params)\n }, [\n selectedQuestion,\n setIsLoading,\n setIsSkipperLoading,\n onError,\n onProgress,\n onFetch,\n onInvalidKey,\n onCloseDropdown,\n onCancelEditing\n ])\n\n useEffect(\n () => setProgressQuestion(isSkipperLoading ? progressQuestion : selectedQuestion),\n [selectedQuestion, progressQuestion, isSkipperLoading]\n )\n\n return (\n <>\n {isAiAssistantsOECodingDisabled ? null : (\n
\n \n {isSkipperLoading ? (\n \n ) : null}\n \n \n Skipper - auto code\n {isSkipperDisabled ? null : ` ${progressQuestion.toUpperCase()}`}\n \n
\n\n {error.message}
}\n \n )\n}\n\nCodingSkipper.propTypes = {\n root: PropTypes.any,\n error: PropTypes.any,\n progress: PropTypes.any,\n isLoading: PropTypes.bool,\n isSkipperLoading: PropTypes.bool,\n setIsLoading: PropTypes.func,\n setIsSkipperLoading: PropTypes.func,\n onProgress: PropTypes.func,\n onFetch: PropTypes.func,\n onInvalidKey: PropTypes.func\n}\n\nCodingSkipper.displayName = 'CodingSkipper'\n\nexport default CodingSkipper\n","import React, { memo, useContext, useRef, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport { encodeText } from '@aytm/app/stats/lib/helpers'\n\nimport ADND from '@aytm/lib/adnd/ADND'\nimport { DataContext } from '@aytm/app/stats/page/sidebar/coding/CodingPanel'\n\nimport { SENTIMENTS_ICON_HASH, TAG_MAX_LENGTH, TAG_MIN_LENGTH } from '@aytm/app/stats/page/comments/lib/constants'\n\nimport InputUpdate from '@aytm/app/stats/page/sidebar/coding/components/InputUpdate'\nimport TagSettings from '@aytm/app/stats/page/sidebar/coding/components/TagSettings'\n\nimport style from '@aytm/app/stats/page/sidebar/coding/styles/CodingPanel.module.scss'\n\nconst CodingTag = memo(\n ({\n tag,\n error,\n settingsItem,\n isEditing,\n isProcessing,\n isLoading,\n isCurrentLoading,\n onDNDStart,\n onDNDEnd,\n setDndDroppedTag\n }) => {\n const { tagsList, windowUID, isTagsManagementDisabled, onError, onConfirm, onCloseDropdown, onCancelEditing } =\n useContext(DataContext)\n\n const dndItemRef = useRef(null)\n\n const inputValueRef = useRef(tag.label)\n\n const fetchData = useCallback(() => {\n return { ...tag, windowUID }\n }, [tag, windowUID])\n\n const onActionConfirm = useCallback(\n action => {\n const _inputValue = inputValueRef.current.trim()\n const newValue =\n 'update' == action\n ? 'sentiment' == tag.type\n ? _inputValue\n : `${tag.codebook}: ${encodeText(_inputValue, false)}`\n : null\n\n if ('update' == action && newValue == tag.tag) {\n onCloseDropdown()\n onCancelEditing()\n } else if ('update' == action && (_inputValue.length < TAG_MIN_LENGTH || _inputValue.length > TAG_MAX_LENGTH)) {\n onError({\n codebook: tag.codebook,\n tag: tag.tag,\n name: 'updateError',\n message: `A tag length should be between ${TAG_MIN_LENGTH} and ${TAG_MAX_LENGTH} characters`\n })\n } else if ('update' == action && tagsList.some(tag => newValue.toLowerCase() == tag.tag.toLowerCase())) {\n onCloseDropdown()\n onCancelEditing()\n\n setDndDroppedTag({ ...tag, update: _inputValue })\n } else {\n onConfirm(\n {\n ...tag,\n destination:\n 'update' == action\n ? {\n codebook: 'sentiment' == tag.type ? null : tag.codebook,\n type: tag.type\n }\n : null\n },\n action,\n encodeText(_inputValue, false)\n )\n }\n },\n [tag, tagsList, onError, onConfirm, onCloseDropdown, onCancelEditing, setDndDroppedTag]\n )\n\n const dndItem =\n !isEditing && !isLoading && !isTagsManagementDisabled\n ? ADND.sources\n .data({\n type: 'sentiment' == tag.type ? 'sidebar-tag-sentiment' : 'sidebar-tag',\n clearDragImage: false\n })\n .onStart(onDNDStart)\n .onEnd(onDNDEnd)\n .fetchData(fetchData)\n : null\n\n useEffect(() => {\n if (dndItem) dndItem.connect(dndItemRef.current)\n\n return () => {\n if (dndItem) dndItem.disconnect()\n }\n }, [dndItem])\n\n useEffect(() => isProcessing && dndItemRef.current.scrollIntoView(), [isProcessing])\n\n return (\n <>\n \n (inputValueRef.current = inputValue)}\n onConfirm={() => onActionConfirm('update')}\n onCancel={onCancelEditing}\n />\n
\n \n {isEditing || isProcessing ? null : {tag.count}
}\n {isTagsManagementDisabled ? null : (\n {error.message}
}\n \n )\n }\n)\n\nCodingTag.propTypes = {\n tag: PropTypes.object,\n error: PropTypes.object,\n settingsItem: PropTypes.object,\n isEditing: PropTypes.bool,\n isProcessing: PropTypes.bool,\n isCurrentLoading: PropTypes.bool,\n isLoading: PropTypes.bool,\n onDNDStart: PropTypes.func,\n onDNDEnd: PropTypes.func,\n setDndDroppedTag: PropTypes.func\n}\n\nCodingTag.displayName = 'CodingTag'\n\nexport default CodingTag\n","import React, { useContext, useState, useMemo, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\n\nimport { DataContext } from '@aytm/app/stats/page/sidebar/coding/CodingPanel'\n\nimport { getCodebooksItemOptionsList } from '@aytm/app/stats/page/comments/lib/utils'\n\nimport SettingsButton from '@aytm/app/stats/page/sidebar/coding/components/SettingsButton'\n\nlet statusTimer = null\n\nconst CodebookSettings = ({\n codebookRef,\n codebook,\n opened = false,\n isEditing = false,\n isLoading = false,\n isCurrentLoading = false,\n isSkipperLoading = false,\n onConfirm\n}) => {\n const {\n reports,\n reportId,\n selectedQuestion,\n isSkipperDisabled,\n isAiAssistantsOECodingDisabled,\n onAction,\n onCancelEditing,\n onToggleSettings\n } = useContext(DataContext)\n\n const [selectedAction, setSelectedAction] = useState(null)\n const [selectedActionStatus, setSelectedActionStatus] = useState(null)\n const [usedReportsCount, setUsedReportsCount] = useState(0)\n\n const onActionCancel = useCallback(() => {\n setSelectedAction(null)\n if (isEditing) onCancelEditing()\n }, [isEditing, onCancelEditing])\n\n const onActionConfirm = useCallback(() => {\n onConfirm(selectedAction)\n }, [selectedAction, onConfirm])\n\n const onActionClick = useCallback(\n action => {\n if ('copy' == action) {\n if (statusTimer) clearTimeout(statusTimer)\n\n const text = [codebook.codebook].concat(codebook.tags).join('\\n')\n if (window.navigator?.clipboard) {\n const type = 'text/plain'\n const blob = new Blob([text], { type })\n const data = [new ClipboardItem({ [type]: blob })]\n window.navigator.clipboard.write(data)\n } else {\n const textarea = document.createElement('textarea')\n textarea.value = text\n textarea.style.position = 'fixed'\n textarea.style.left = '-999999px'\n document.body.appendChild(textarea)\n textarea.select()\n document.execCommand('copy')\n document.body.removeChild(textarea)\n }\n setSelectedActionStatus('copied')\n } else {\n if ('assign' != action) setSelectedAction(action)\n if (onAction) onAction(codebook, action)\n }\n },\n [codebook, onAction]\n )\n\n const onToggle = useCallback(() => onToggleSettings(codebook.codebook, codebook.type), [codebook, onToggleSettings])\n\n const options = useMemo(\n () =>\n getCodebooksItemOptionsList({\n codebook,\n selectedQuestion,\n selectedAction,\n selectedActionStatus,\n isSkipperDisabled,\n isAiAssistantsOECodingDisabled,\n onActionCancel,\n onActionConfirm,\n onActionClick\n }),\n [\n codebook,\n selectedQuestion,\n selectedAction,\n selectedActionStatus,\n isSkipperDisabled,\n isAiAssistantsOECodingDisabled,\n onActionCancel,\n onActionConfirm,\n onActionClick\n ]\n )\n\n useEffect(() => {\n if (statusTimer) clearTimeout(statusTimer)\n statusTimer = setTimeout(() => setSelectedActionStatus(null), 1500)\n\n return () => {\n if (statusTimer) clearTimeout(statusTimer)\n }\n }, [selectedActionStatus])\n\n useEffect(() => {\n if (['update', 'delete'].includes(selectedAction)) {\n const usedReports = reports\n .filter(\n report =>\n report.logicData &&\n report.logicData.some(\n item => Object.hasOwn(item, 'codebook') && item.codebook == codebook.codebook.toUpperCase()\n )\n )\n .map(report => report.id)\n .concat(\n codebook.tags.reduce(\n (acc, tag) =>\n acc.concat(\n reports\n .filter(\n report =>\n report.logicData &&\n report.logicData.some(\n item => Object.hasOwn(item, 'tag') && item.tag == `${codebook.codebook}: ${tag}`.toUpperCase()\n )\n )\n .map(report => report.id)\n ),\n []\n )\n )\n .filter((v, i, a) => i == a.indexOf(v))\n setUsedReportsCount(usedReports.length)\n } else setUsedReportsCount(0)\n }, [codebook.codebook, codebook.tags, reportId, reports, selectedAction])\n\n return 0 < options.length ? (\n \n {isAdding ? (\n <>\n onToggle(true)}\n >\n \n Add a {placeholder.toLowerCase()}\n \n )}\n
\n )\n}\n\nInputNew.propTypes = {\n placeholder: PropTypes.string,\n maxLength: PropTypes.number,\n error: PropTypes.object,\n multiline: PropTypes.bool,\n isAdding: PropTypes.bool,\n isLoading: PropTypes.bool,\n onAdd: PropTypes.func,\n onToggle: PropTypes.func\n}\n\nInputNew.displayName = 'InputNew'\n\nexport default InputNew\n","import React, { useState, useRef, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport { stopEvent } from '@aytm/lib/common/func'\nimport { decodeText } from '@aytm/app/stats/lib/helpers'\n\nimport { FORBIDDEN_SYMBOLS } from '@aytm/app/stats/page/sidebar/coding//lib/constants'\n\nimport { InputTextarea } from 'primereact/inputtextarea'\n\nimport style from '@aytm/app/stats/page/sidebar/coding/styles/CodingPanel.module.scss'\n\nconst onInputKeyDown = event => {\n if (13 == event.keyCode) stopEvent(event)\n}\n\nexport const DataContext = React.createContext()\n\nconst InputUpdate = ({ value, maxLength, isEditing, isLoading, onChange, onConfirm, onCancel }) => {\n const [inputValue, setInputValue] = useState(decodeText(value, false))\n\n const callbackRef = useRef(null)\n\n const onInputKeyUp = event => {\n if (13 == event.keyCode) onConfirm(inputValue)\n if (27 == event.keyCode) onCancel()\n }\n\n const onInputChange = event => setInputValue(event.target.value)\n\n const onInputPaste = useCallback(\n event => {\n event.preventDefault()\n\n let text =\n (event.clipboardData || window.clipboardData).getData('Text') || event.clipboardData.getData('text/plain')\n text = text\n .replace(new RegExp(`[${FORBIDDEN_SYMBOLS}]`, 'gi'), '')\n .replace(/(\\r\\n|\\n|\\r)/gm, ' ')\n .trim()\n\n const el = event.currentTarget\n\n const l = text.length\n const start = el.selectionStart\n const end = el.selectionEnd\n\n const valueBefore = el.value.slice(0, start)\n const valueAfter = el.value.slice(end)\n\n text = `${valueBefore}${text}${valueAfter}`.slice(0, maxLength)\n\n setInputValue(text)\n callbackRef.current = () => {\n el.setSelectionRange(start + l, start + l)\n el.blur()\n el.focus()\n }\n },\n [maxLength]\n )\n\n useEffect(() => {\n if (null !== callbackRef.current && 'function' === typeof callbackRef.current) {\n callbackRef.current()\n callbackRef.current = null\n }\n }, [inputValue])\n\n useEffect(() => {\n onChange(inputValue)\n }, [inputValue, onChange])\n\n useEffect(() => {\n !isEditing && setInputValue(decodeText(value, false))\n }, [value, isEditing])\n\n return isEditing ? (\n \n
\n\n {error && {error.message}
}\n\n \n onToggle(false)}\n />\n onAdd(inputValue)}\n />\n
\n \n ) : (\n \n
\n ) : (\n \n )\n}\n\nInputUpdate.propTypes = {\n value: PropTypes.string,\n maxLength: PropTypes.number,\n isEditing: PropTypes.bool,\n isLoading: PropTypes.bool,\n onChange: PropTypes.func,\n onConfirm: PropTypes.func,\n onCancel: PropTypes.func\n}\n\nInputUpdate.displayName = 'InputUpdate'\n\nexport default InputUpdate\n","import React, { useContext, useRef, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport useIsVisible from '@aytm/lib/hooks/useIsVisible'\n\nimport { DataContext } from '@aytm/app/stats/page/sidebar/coding/CodingPanel'\n\nimport SettingsDropdown from '@aytm/app/stats/page/sidebar/coding/components/SettingsDropdown'\n\nimport Portal from '@aytm/lib/rfd-ui/components/basic/portal'\nimport ClickOutside from '@aytm/lib/rfd-ui/components/basic/click-outside'\n\nimport style from '@aytm/app/stats/page/sidebar/coding/styles/CodingPanel.module.scss'\n\nconst SettingsButton = ({\n itemRef,\n options,\n warning,\n opened = false,\n isEditing = false,\n isLoading = false,\n isCurrentLoading = false,\n isSkipperLoading = false,\n onActionCancel,\n onToggle\n}) => {\n const { onClickOutside } = useContext(DataContext)\n\n const buttonRef = useRef(null)\n\n const isVisible = useIsVisible(opened && buttonRef && buttonRef.current ? buttonRef : null)\n\n useEffect(() => {\n if (!opened) onActionCancel()\n }, [opened, onActionCancel])\n\n useEffect(() => {\n if (!isEditing) onActionCancel()\n }, [isEditing, onActionCancel])\n\n return (\n \n {warning ?
\n )}\n {warning}
: null}\n - \n {options.map((option, idx) => (\n
\n {features[item.feature].available ? (\n (\n \n (\n
\n )\n}\n\nCustomQuestionButton.propTypes = {\n root: PropTypes.any,\n item: PropTypes.object,\n features: PropTypes.object,\n windowUID: PropTypes.string,\n addCustomQuestion: PropTypes.func,\n onDNDStart: PropTypes.func,\n onDNDEnd: PropTypes.func\n}\n\nCustomQuestionButton.displayName = 'CustomQuestionButton'\n\nexport default CustomQuestionButton\n\nADND().connect()\n","// lib\nimport React, { useRef, useEffect, useReducer } from 'react'\n// import ReactDOM from 'react-dom'\nimport PropTypes from 'prop-types'\n\nimport ADND from '@aytm/lib/adnd/ADND'\n\nimport useEventListener from '@aytm/app/stats/page/comments/lib/hooks/useEventListener'\n\nimport { dropTargetReducer } from '@aytm/app/stats/page/sidebar/components/reducers'\n\n// styles\nimport style from '@aytm/app/stats/page/sidebar/components/styles/DropTargetContainer.module.scss'\n\nconst DropTargetContainer = ({ children, root, acceptTypes, typesTitles, windowUID, onDNDDrop }) => {\n const [state, dispatch] = useReducer(dropTargetReducer, {\n showDropTarget: false,\n dropTargetHTML: ''\n })\n\n const dndDropTargetRef = useRef(null)\n\n const dndDropTarget = state.showDropTarget\n ? ADND.targets\n .data({\n acceptTypes,\n dynamicPosition: true\n })\n .onDrop(data => {\n if (windowUID != data.data.windowUID) return\n onDNDDrop(data.data)\n })\n : null\n\n useEffect(() => {\n if (state.showDropTarget && null === dndDropTargetRef.current) {\n dndDropTargetRef.current = document.createElement('div')\n dndDropTargetRef.current.className = style['drop-target']\n root.appendChild(dndDropTargetRef.current)\n }\n\n if (dndDropTarget) dndDropTarget.connect(dndDropTargetRef.current)\n\n return () => {\n if (dndDropTarget) dndDropTarget.disconnect()\n\n if (root.contains(dndDropTargetRef.current)) {\n root.removeChild(dndDropTargetRef.current)\n }\n dndDropTargetRef.current = null\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [dndDropTarget])\n\n useEventListener('showDropTarget', event => {\n if (Object.hasOwn(event.detail, 'type') && acceptTypes.includes(event.detail.type)) {\n if (event.detail.show) {\n const type = typesTitles[event.detail.type]\n const html = `Drop your ${type} here\n
\n )}\n >\n \n \n \n \n Upgrade to {features[item.feature].onPackage.name} plan to\n use this functionality\n
\n\n {item.icon ? : null}\n \n
\n \n \n \n \n \n ) : features[item.feature].disabled ? (\n \n
\n )}\n >\n \n PLEASE LOGIN/JOIN THE TEAM TO UNLOCK ALL FEATURES
\n OF THE STAT REPORT\n
\n
\n \n ) : (\n \n {item.icon ? : null}\n {item.text}\n
\n \n \n \n \n
\n )}\n {0 < item.help.length ? \n {item.icon ? : null}\n {item.text}\n
\n \n \n \n if you want to use it's clone in a different report of this survey.
Original ${type} will remain in the report on the right and its clone will be temporary saved in this tab and available for some time in your browser.`\n\n dispatch({ type: 'SHOW_DROP_TARGET', request: { html } })\n } else dispatch({ type: 'HIDE_DROP_TARGET' })\n } else dispatch({ type: 'HIDE_DROP_TARGET' })\n })\n\n return state.showDropTarget ? (\n \n ) : (\n <>{children}\n )\n}\n\nDropTargetContainer.propTypes = {\n children: PropTypes.any,\n root: PropTypes.any,\n acceptTypes: PropTypes.array,\n typesTitles: PropTypes.object,\n windowUID: PropTypes.string,\n onDNDDrop: PropTypes.func\n}\n\nDropTargetContainer.displayName = 'DropTargetContainer'\n\nexport default DropTargetContainer\n\nADND().connect()\n","// lib\nimport React, { useState, useRef, useEffect, useCallback } from 'react'\nimport PropTypes from 'prop-types'\n\nimport ADND from '@aytm/lib/adnd/ADND'\n\n// components\n\n// styles\nimport style from '@aytm/app/stats/page/sidebar/components/styles/CustomQuestion.module.scss'\n\nconst PinnedCustomQuestion = ({ item, addCustomQuestion, removePinnedQuestion, onDNDStart, onDNDEnd }) => {\n const [disabled, setDisabled] = useState(false)\n\n const timer = useRef(null)\n\n const dndListItemRef = useRef()\n\n const createCustomQuestion = useCallback(() => Object.assign({}, item.data), [item])\n\n const onClick = useCallback(() => {\n setDisabled(true)\n\n const question = createCustomQuestion()\n addCustomQuestion(question)\n\n timer.current && clearTimeout(timer.current)\n timer.current = setTimeout(() => setDisabled(false), 1000)\n\n return () => timer.current && clearTimeout(timer.current)\n }, [addCustomQuestion, createCustomQuestion])\n\n const dndListItem = ADND.sources\n .data({\n type: 'pinned-question-custom',\n clearDragImage: false\n })\n .onStart(onDNDStart)\n .onEnd(onDNDEnd)\n .fetchData(createCustomQuestion)\n\n useEffect(() => {\n if (dndListItem) dndListItem.connect(dndListItemRef.current)\n\n return () => {\n if (dndListItem) dndListItem.disconnect()\n }\n }, [dndListItem])\n\n return (\n
\n {'function' == typeof removePinnedQuestion ? (\n removePinnedQuestion(item.index)}>\n \n \n ) : null}\n
\n )\n}\n\nPinnedCustomQuestion.propTypes = {\n item: PropTypes.object,\n addCustomQuestion: PropTypes.func,\n removePinnedQuestion: PropTypes.func,\n onDNDStart: PropTypes.func,\n onDNDEnd: PropTypes.func\n}\n\nPinnedCustomQuestion.displayName = 'PinnedCustomQuestion'\n\nexport default PinnedCustomQuestion\n\nADND().connect()\n","// lib\nimport React, { useState, useRef, useCallback } from 'react'\nimport PropTypes from 'prop-types'\n\n// components\nimport Popup from '@aytm/lib/rfd-ui/components/basic/popup'\n\nimport ClickOutside from '@aytm/lib/rfd-ui/components/basic/click-outside'\n\n// styles\n\nconst SidebarPopup = ({ id, root, width, help }) => {\n const [show, setShow] = useState(false)\n const [offset, setOffset] = useState(0)\n\n const popupRef = useRef(null)\n\n const scrollCallback = useCallback(() => {\n setShow(false)\n }, [setShow])\n\n const countOffset = () => {\n if (!popupRef.current || !popupRef.current.refPopup) {\n setOffset(0)\n return\n }\n const rect = popupRef.current.refPopup.refPopup.getBoundingClientRect()\n const clientHeight = document.documentElement.clientHeight\n setOffset(Math.max(0, rect.bottom - clientHeight + 10))\n }\n\n return (\n \n
\n \n {item.icon ? : null}\n \n
\n \n \n \n \n onBannerRemove(banner.key)}>\n \n \n {banner.icon ? : null}\n \n {'question' == banner.type ? getQuestionId(banner.value).toUpperCase() : banner.text}\n \n
\n )\n\n const renderBannersGroup = () => (\n \n
\n )\n\n const renderDataFormat = () => (\n \n Banner Groups\n
\n {banners.map(banner => (\n \n {renderBanner(banner)}\n
\n ))}\n \n
\n \n onBannerSelect(event.value)}\n onShow={disabled || overLimit ? null : onBannerShow}\n onHide={disabled || overLimit ? null : onBannerHide}\n />\n
\n \n
\n )\n\n const renderSignificanceTesting = () => (\n <>\n \n Data Format\n
\n \n onDataFormatChange(true, false)}\n />\n onDataFormatChange(true, false)}\n >\n Show counts\n \n
\n \n onDataFormatChange(false, true)}\n />\n onDataFormatChange(false, true)}\n >\n Show percentages\n \n
\n \n onDataFormatChange(true, true)}\n />\n onDataFormatChange(true, true)}\n >\n Show both\n \n
\n \n
\n \n Significance Testing\n
\n \n
\n \n v[0] == confidenceLevel)}\n labelTemplate={value => levels[value][1]}\n disabled={disabled}\n onChange={disabled ? null : event => setConfidenceLevel(levels[event.value][0])}\n />\n
\n \n Confidence level\n
\n \n
\n \n v[0] == significanceLevel)}\n labelTemplate={value => levels[value][1]}\n disabled={disabled}\n onChange={disabled ? null : event => setSignificanceLevel(levels[event.value][0])}\n />\n
\n \n Secondary Confidence level\n
\n \n
\n \n )\n\n const renderSummaryMetrics = () => (\n \n setShowTesting(!showTesting)}\n onKeyDown={disabled ? null : event => toggleCheckbox(event, () => setShowTesting(!showTesting))}\n />\n \n
\n \n
\n )\n\n return (\n \n Summary Metrics\n
\n \n setTop2Box(!top2Box)}\n onKeyDown={disabled ? null : event => toggleCheckbox(event, () => setTop2Box(!top2Box))}\n />\n \n
\n \n setTop3Box(!top3Box)}\n onKeyDown={disabled ? null : event => toggleCheckbox(event, () => setTop3Box(!top3Box))}\n />\n \n
\n \n setTop15Box(!top15Box)}\n onKeyDown={disabled ? null : event => toggleCheckbox(event, () => setTop15Box(!top15Box))}\n />\n \n
\n \n setShowMean(!showMean)}\n onKeyDown={disabled ? null : event => toggleCheckbox(event, () => setShowMean(!showMean))}\n />\n \n
\n \n {renderBannersGroup()}\n {renderDataFormat()}\n {renderSignificanceTesting()}\n {renderSummaryMetrics()}\n\n
\n )\n}\n\nCrosstabPanel.propTypes = {\n root: PropTypes.any,\n model: PropTypes.object,\n data: PropTypes.object,\n features: PropTypes.object,\n disabled: PropTypes.bool,\n onBannersSelect: PropTypes.func,\n onLevelsChange: PropTypes.func,\n onExport: PropTypes.func\n}\n\nCrosstabPanel.displayName = 'CrosstabPanel'\n\nexport default CrosstabPanel\n","// lib\nimport React from 'react'\nimport PropTypes from 'prop-types'\n\n// components\nimport { Checkbox } from 'primereact/checkbox'\n\n// styles\nimport style from '@aytm/app/stats/page/sidebar/data-cleaning/styles/DataCleaningPanel.module.scss'\n\nconst DataCleaningPanel = ({ mode, total, scores, vectors, onCheck, onSelect }) => (\n \n
\n \n
\n\n {failed ? (\n \n An error occurred while performing selected analysis operation. If the problem is reproducible please\n contact Support team.\n
\n ) : overLimit ? (\n \n Please reduce the number of banners selected in order to run and download banner tables.\n
\n ) : responses < unlockNumber ? (\n \n You need at least {unlockNumber} respondent{1 == unlockNumber ? '' : 's'} to create banner tables. Current\n filter settings show {responses} respondent{1 == responses ? '' : 's'}. Remove some filters or order more\n respondents to proceed.\n
\n ) : totalRespondents < unlockNumber ? (\n \n You need at least {unlockNumber} respondent{1 == unlockNumber ? '' : 's'} to create banner tables. This\n survey currently contains only {totalRespondents} complete{1 == totalRespondents ? '' : 's'}.\n
\n ) : !questions.length ? (\n \n You need at least 1 question in order to run and download banner tables.\n
\n ) : null}\n \n
\n ))}\n \n)\n\nDataCleaningPanel.propTypes = {\n mode: PropTypes.string,\n total: PropTypes.number,\n scores: PropTypes.array,\n vectors: PropTypes.array,\n onCheck: PropTypes.func,\n onSelect: PropTypes.func\n}\n\nDataCleaningPanel.displayName = 'DataCleaningPanel'\n\nexport default DataCleaningPanel\n","// lib\nimport React, { useMemo } from 'react'\nimport PropTypes from 'prop-types'\n\n// components\nimport DropTargetContainer from '@aytm/app/stats/page/sidebar/components/DropTargetContainer'\n\nimport CustomQuestionButton from '@aytm/app/stats/page/sidebar/components/CustomQuestionButton'\nimport PinnedCustomQuestion from '@aytm/app/stats/page/sidebar/components/PinnedCustomQuestion'\n\n// styles\nimport style from '@aytm/app/stats/page/sidebar/data-lab/styles/DataLabPanel.module.scss'\n\nconst DataLabPanel = ({\n sidebar,\n root,\n model,\n features,\n buttons,\n questions,\n addCustomQuestion,\n addPinnedQuestion,\n removePinnedQuestion,\n onDNDStart,\n onDNDEnd\n}) => {\n const acceptTypes = useMemo(\n () =>\n buttons.reduce((acc, cur) => {\n if (!features[cur.feature].disabled) acc.push(cur.adndType)\n return acc\n }, []),\n [buttons, features]\n )\n\n const typesTitles = useMemo(\n () =>\n buttons.reduce((acc, cur) => {\n if (!features[cur.feature].disabled) acc[cur.adndType] = cur.text\n return acc\n }, {}),\n [buttons, features]\n )\n\n return (\n \n {'cleaning' == mode &&\n `During aytm patent-pending automatic data cleaning process we have identified ${scores.length} questionable and low quality responses.`}\n {'centrifuge' == mode &&\n `During aytm proprietary Data Centrifuge process we have identified ${scores.length} questionable responses.`}\n
\n Data centrifuge vectors
\n \n
\n {vectors.map(vector => (\n \n
\n onSelect('all')}>\n ALL VECTORS\n {total}\n
\n \n
\n \n onCheck(vector.id, !vector.checked)}\n />\n
\n \n onSelect(vector.id)}\n >\n {vector.text}\n {vector.total}\n
\n \n \n {buttons.map(item =>\n features[item.feature].hidden ? null : (\n
\n )\n}\n\nDataLabPanel.propTypes = {\n sidebar: PropTypes.any,\n root: PropTypes.any,\n model: PropTypes.object,\n features: PropTypes.object,\n buttons: PropTypes.array,\n questions: PropTypes.array,\n addCustomQuestion: PropTypes.func,\n addPinnedQuestion: PropTypes.func,\n removePinnedQuestion: PropTypes.func,\n onDNDStart: PropTypes.func,\n onDNDEnd: PropTypes.func\n}\n\nDataLabPanel.displayName = 'DataLabPanel'\n\nexport default DataLabPanel\n","// lib\nimport React, { useState, useRef, useMemo, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport { Transition } from 'react-transition-group'\nimport { DOMchildOf } from '@aytm/lib/common/func'\n\nimport useEventListener from '@aytm/app/stats/page/comments/lib/hooks/useEventListener'\n\n// components\nimport { RadioButton } from 'primereact/radiobutton'\nimport { Slider } from 'primereact/slider'\nimport { Dropdown } from 'primereact/dropdown'\n\nimport Popup from '@aytm/lib/rfd-ui/components/basic/popup'\nimport SidebarPopup from '@aytm/app/stats/page/sidebar/components/SidebarPopup'\n\n// styles\nimport style from '@aytm/app/stats/page/sidebar/export/styles/ExportPanel.module.scss'\n\nconst BUTTON_TEXTS = {\n turf: 'TURF',\n emd: 'Impression Dial',\n concept_lab: 'Concept Lab',\n concept_mapping: 'Concept Mapping',\n tracker_lab: 'Tracker Lab',\n tracker_mapping: 'Tracker Mapping'\n}\n\nconst THRESHOLD_OPTIONS = [\n { key: '0.2', text: '20%' },\n { key: '0.25', text: '25%' },\n { key: '0.333', text: '33.3%' },\n { key: '0.5', text: '50%' },\n { key: '0.6', text: '60%' },\n { key: '0.7', text: '70%' },\n { key: '0.8', text: '80%' }\n]\nconst DEFAULT_THRESHOLD_OPTION = '0.7'\n\nconst DEFAULT_ITEMS_PER_SET = 4\n\nconst ExportSpecificButton = ({ item, processing, disabled, onExport }) => {\n const onClick = useCallback(() => {\n 'function' == typeof onExport && onExport({ method: item.key, methodText: item.xlsxText, ...item.exportOptions })\n }, [item, onExport])\n\n return (\n \n Click the button or drag it to the right to add your new chart exactly where you want it.\n
\n {0 < questions.length && (\n <>\n Pinned questions
\n {questions.map(item => (\n \n \n
\n \n )\n}\n\nExportSpecificButton.propTypes = {\n item: PropTypes.object,\n processing: PropTypes.bool,\n disabled: PropTypes.bool,\n onExport: PropTypes.func\n}\n\nconst ExportSpecificMdOptions = ({ root, model, question, options, processing, disabled, onExport }) => {\n const [collapsed, setCollapsed] = useState(true)\n\n const [method, setMethod] = useState(model.turf.default)\n const [threshold, setThreshold] = useState(null)\n\n const gearRef = useRef(null)\n const panelRef = useRef(null)\n\n const thresholdRef = useRef(null)\n thresholdRef.current = threshold\n\n const methodObj = useMemo(() => options.find(option => option.key == method) || null, [method, options])\n\n const hideOnGlobalClick = event => {\n if (\n (!gearRef.current || !DOMchildOf(event.target, gearRef.current)) &&\n (!panelRef.current || !DOMchildOf(event.target, panelRef.current))\n ) {\n setCollapsed(true)\n }\n }\n\n const onClick = useCallback(\n event => {\n if (\n (!gearRef.current || !DOMchildOf(event.target, gearRef.current)) &&\n (!panelRef.current || !DOMchildOf(event.target, panelRef.current))\n ) {\n setCollapsed(true)\n 'function' == typeof onExport &&\n onExport({ method, methodText: methodObj.xlsxText, threshold, ...methodObj.exportOptions })\n }\n },\n [methodObj, method, threshold, onExport]\n )\n\n useEffect(() => {\n collapsed\n ? document.removeEventListener('click', hideOnGlobalClick, true)\n : document.addEventListener('click', hideOnGlobalClick, true)\n\n return () => {\n document.removeEventListener('click', hideOnGlobalClick, true)\n }\n }, [collapsed])\n\n useEffect(\n () =>\n methodObj.threshold\n ? setThreshold(null === thresholdRef.current ? DEFAULT_THRESHOLD_OPTION : thresholdRef.current)\n : setThreshold(null),\n [methodObj]\n )\n\n useEffect(() => setCollapsed(true), [question.key, processing])\n\n return (\n <>\n {BUTTON_TEXTS[item.key]}
\n \n \n \n \n \n \n {status => (\n \n
\n )}\n \n \n {null !== methodObj ? methodObj.text : ' '}
\n \n \n \n \n
\n - \n {options.map((item, index) => (\n
- \n
\n
\n ) : null}\n \n )\n}\n\nExportSpecificMdOptions.propTypes = {\n root: PropTypes.any,\n model: PropTypes.object,\n question: PropTypes.object,\n options: PropTypes.array,\n processing: PropTypes.bool,\n disabled: PropTypes.bool,\n onExport: PropTypes.func\n}\n\nconst ExportSpecificTurfOptions = ({ question, options, processing, disabled, onExport }) => {\n const [collapsed, setCollapsed] = useState(true)\n\n const gearRef = useRef(null)\n const panelRef = useRef(null)\n\n const hideOnGlobalClick = event => {\n if (\n (!gearRef.current || !DOMchildOf(event.target, gearRef.current)) &&\n (!panelRef.current || !DOMchildOf(event.target, panelRef.current))\n ) {\n setCollapsed(true)\n }\n }\n\n const onClick = useCallback(\n item => {\n setCollapsed(true)\n 'function' == typeof onExport && onExport({ method: item.key, methodText: item.xlsxText, ...item.exportOptions })\n },\n [onExport]\n )\n\n useEffect(() => {\n collapsed\n ? document.removeEventListener('click', hideOnGlobalClick, true)\n : document.addEventListener('click', hideOnGlobalClick, true)\n\n return () => {\n document.removeEventListener('click', hideOnGlobalClick, true)\n }\n }, [collapsed])\n\n useEffect(() => setCollapsed(true), [question.key, processing])\n\n return (\n \n value.key == threshold) || 0}\n labelTemplate={value => THRESHOLD_OPTIONS[value].text}\n disabled={processing || disabled}\n onChange={processing || disabled ? null : event => setThreshold(THRESHOLD_OPTIONS[event.value].key)}\n />\n
\n \n setCollapsed(!collapsed)}\n >\n \n {status => (\n \n
\n )}\n \n \n \n )\n}\n\nExportSpecificTurfOptions.propTypes = {\n question: PropTypes.object,\n options: PropTypes.array,\n processing: PropTypes.bool,\n disabled: PropTypes.bool,\n onExport: PropTypes.func\n}\n\nconst ExportSpecific = ({ root, model, data, features, disabled, onExport }) => {\n const [processing, setProcessing] = useState(false)\n\n const [exportType, setExportType] = useState(null)\n const [exportQuestion, setExportQuestion] = useState(null)\n\n const exportTypeRef = useRef(null)\n exportTypeRef.current = exportType\n\n const exportQuestionRef = useRef(null)\n exportQuestionRef.current = exportQuestion\n\n const isTurfEnabled = useMemo(\n () => 0 < data.turf.length && !features.turf.disabled && !disabled,\n [data.turf, features.turf.disabled, disabled]\n )\n const isCjExportEnabled = useMemo(() => 0 < data.conjoint.length && !disabled, [data.conjoint, disabled])\n const isEmdExportEnabled = useMemo(\n () => 0 < data.emd.length && !features.authorized_exports.disabled && !disabled,\n [data.emd, features.authorized_exports.disabled, disabled]\n )\n const isCLExportEnabled = useMemo(\n () => 0 < data.concept_lab.length && !features.authorized_exports.disabled && !disabled,\n [data.concept_lab, features.authorized_exports.disabled, disabled]\n )\n const isCLMappingExportEnabled = useMemo(\n () => 0 < data.concept_mapping.length && !features.authorized_exports.disabled && !disabled,\n [data.concept_mapping, features.authorized_exports.disabled, disabled]\n )\n const isTLExportEnabled = useMemo(\n () => 0 < data.tracker_lab.length && !features.authorized_exports.disabled && !disabled,\n [data.tracker_lab, features.authorized_exports.disabled, disabled]\n )\n const isTLMappingExportEnabled = useMemo(\n () => 0 < data.tracker_mapping.length && !features.authorized_exports.disabled && !disabled,\n [data.tracker_mapping, features.authorized_exports.disabled, disabled]\n )\n\n const exportTypeOptions = useMemo(() => {\n const options = []\n isTurfEnabled && options.push({ text: 'TURF ANALYSES', key: 'turf', exportType: 'turf' })\n isCjExportEnabled && options.push({ text: 'CONJOINT ANALYSES', key: 'conjoint', exportType: 'conjoint' })\n isEmdExportEnabled && options.push({ text: 'IMPRESSION DIAL ANALYSES', key: 'emd', exportType: 'emd' })\n isCLExportEnabled && options.push({ text: 'CONCEPT LAB', key: 'concept_lab', exportType: 'concept_lab' })\n isCLMappingExportEnabled &&\n options.push({ text: 'CONCEPT MAPPING', key: 'concept_mapping', exportType: 'concept_lab' })\n isTLExportEnabled && options.push({ text: 'TRACKER LAB', key: 'tracker_lab', exportType: 'tracker_lab' })\n isTLMappingExportEnabled &&\n options.push({ text: 'TRACKER MAPPING', key: 'tracker_mapping', exportType: 'tracker_lab' })\n return options\n }, [\n isTurfEnabled,\n isCjExportEnabled,\n isEmdExportEnabled,\n isCLExportEnabled,\n isCLMappingExportEnabled,\n isTLExportEnabled,\n isTLMappingExportEnabled\n ])\n\n const defaultExportType = useMemo(\n () => (0 < exportTypeOptions.length ? exportTypeOptions[0].key : null),\n [exportTypeOptions]\n )\n\n const exportTypeObj = useMemo(() => {\n const option = exportTypeOptions.find(option => option.key == exportType)\n if (option == undefined) return null\n\n return option\n }, [exportType, exportTypeOptions])\n\n const exportQuestionsOptions = useMemo(() => data[exportType] || [], [data, exportType])\n\n const exportQuestionObj = useMemo(() => {\n const option = exportQuestionsOptions.find(option => option.key == exportQuestion)\n if (option == undefined) return null\n\n return option\n }, [exportQuestion, exportQuestionsOptions])\n\n const exportQuestionOptions = useMemo(() => {\n if (null === exportQuestionObj) return null\n\n const exportOptionsDefaults = {\n key: exportQuestionObj.key,\n link: exportQuestionObj.link || null,\n position: exportQuestionObj.position\n }\n\n if (['cb', 'emd', 'cl', 'tl'].includes(exportQuestionObj.type)) {\n if (null === exportTypeObj) return null\n\n return {\n key: exportTypeObj.key,\n exportOptions: {\n ...exportOptionsDefaults,\n ...('cb' == exportQuestionObj.type\n ? {\n fileType: 'binary',\n exportType: 'turf',\n turfType: 'answers'\n }\n : {\n fileType: 'emd' == exportQuestionObj.type ? 'csv' : 'xlsx',\n exportType: exportTypeObj.exportType\n })\n }\n }\n }\n\n if ('cjc' == exportQuestionObj.type) {\n const exportOptions = {\n ...exportOptionsDefaults,\n fileType: 'csv'\n }\n return [\n {\n key: 'conjointPkgs',\n text: 'Ranked List of Packages',\n exportOptions: { exportType: 'conjointPkgs', ...exportOptions }\n },\n {\n key: 'conjointDesign',\n text: 'Design Sheet by aytm',\n exportOptions: { exportType: 'conjointDesign', ...exportOptions }\n }\n ]\n }\n\n if ('cjd' == exportQuestionObj.type) {\n const exportOptions = {\n ...exportOptionsDefaults,\n fileType: 'csv'\n }\n return [\n {\n key: 'conjoint',\n text: 'Raw Utility Scores',\n exportOptions: { exportType: 'conjoint', ...exportOptions }\n },\n {\n key: 'conjointPkgs',\n text: 'Ranked List of Packages',\n exportOptions: { exportType: 'conjointPkgs', ...exportOptions }\n },\n {\n key: 'conjointDesign',\n text: 'Design Sheet by aytm',\n exportOptions: { exportType: 'conjointDesign', ...exportOptions }\n }\n ]\n }\n\n if ('md' == exportQuestionObj.type) {\n const exportOptions = {\n ...exportOptionsDefaults,\n exportType: 'turf'\n }\n return Object.entries(model.turf.available).map(([key, value]) => {\n return {\n key,\n text: value.text.replace('{{itemsPerSet}}', exportQuestionObj.items_per_set || DEFAULT_ITEMS_PER_SET),\n xlsxText: value.xlsxText.replace('{{itemsPerSet}}', exportQuestionObj.items_per_set || DEFAULT_ITEMS_PER_SET),\n threshold: value.threshold || false,\n exportOptions: { fileType: value.fileType, ...exportOptions }\n }\n })\n }\n\n const options = []\n const exportOptions = {\n ...exportOptionsDefaults,\n fileType: 'binary',\n exportType: 'turf',\n turfType: 'batches'\n }\n const answerVariants = exportQuestionObj.batches[0].answerVariants\n\n options.push({\n key: 'bottom1',\n text: `TURF TOP 1 box (A${answerVariants.length})`,\n exportOptions: { method: 'top1', positive: [answerVariants.length], ...exportOptions }\n })\n if (3 < answerVariants.length) {\n options.push({\n key: 'bottom2',\n text: `TURF TOP 2 box (A${answerVariants.length - 1} & A${answerVariants.length})`,\n exportOptions: {\n method: 'top2',\n positive: [answerVariants.length - 1, answerVariants.length],\n ...exportOptions\n }\n })\n options.push({\n key: 'top2',\n text: `TURF TOP 2 box (A1 & A2)`,\n exportOptions: { method: 'top2', positive: [1, 2], ...exportOptions }\n })\n }\n options.push({\n key: 'top1',\n text: `TURF TOP 1 box (A1)`,\n exportOptions: { method: 'top1', positive: [1], ...exportOptions }\n })\n\n return options\n }, [model.turf, exportTypeObj, exportQuestionObj])\n\n const itemTemplate = option =>\n option.disabled && option.icon == undefined ? (\n \n ) : (\n \n {option.icon ? : null}\n \n \n )\n const valueTemplate = (option, _props) =>\n option ? (\n <>\n {option.icon && }\n \n \n ) : (\n \n )\n\n const onExportClick = params => {\n setProcessing(true)\n\n 'function' == typeof onExport && onExport(params)\n }\n\n useEffect(\n () =>\n setExportType(\n exportTypeOptions.some(option => option.key == exportTypeRef.current)\n ? exportTypeRef.current\n : defaultExportType\n ),\n [exportTypeOptions, defaultExportType]\n )\n\n useEffect(() => setExportQuestion(null), [exportType])\n\n useEventListener('exportSpecificStopped', () => setProcessing(false))\n\n return 0 < exportTypeOptions.length ? (\n Select available options
\n \n \n \n \n
\n - \n {options.map((item, index) => (\n
\n {1 < exportTypeOptions.length ? (\n <>\n (\n (\n
\n ) : null\n}\n\nExportSpecific.propTypes = {\n root: PropTypes.any,\n model: PropTypes.object,\n data: PropTypes.object,\n features: PropTypes.object,\n disabled: PropTypes.bool,\n onExport: PropTypes.func\n}\n\nExportSpecific.displayName = 'ExportSpecific'\n\nexport default ExportSpecific\n","// lib\nimport React, { useContext } from 'react'\nimport PropTypes from 'prop-types'\nimport { Map } from 'immutable'\n\nimport { DataContext } from '@aytm/app/stats/page/sidebar/filters/FiltersPanel'\n\n// components\nimport SidebarPopup from '@aytm/app/stats/page/sidebar/components/SidebarPopup'\n\nimport AdvancedFilter from '@aytm/app/stats/page/components/AdvancedFilter'\n\n// styles\nimport style from '@aytm/app/stats/page/sidebar/filters/styles/FiltersPanel.module.scss'\n\nconst FiltersAdvanced = ({ locale, surveySchema, parserResultEof, parserResultPattern }) => {\n const { root, features, state, disabled, onChangeAdvancedFilter } = useContext(DataContext)\n\n return (\n Research Analyses
\n \n
\n \n ) : (\n \n setExportType(event.value)}\n />\n
\n {exportTypeOptions[0].text}
\n )}\n\n {0 < exportQuestionsOptions.length ? (\n 'turf' == exportType && features.turf.available ? (\n \n
\n )}\n >\n \n \n \n \n \n Upgrade to {features.turf.onPackage.name} plan to use this\n functionality\n
\nSelect a question
\n \n \n \n \n \n ) : 'turf' == exportType && features.turf.locked ? (\n \n
\n )}\n >\n \n PLEASE LOGIN/JOIN THE TEAM TO UNLOCK ALL FEATURES
\n OF THE STAT REPORT\n
\n
\n \n ) : (\n Select a question
\n \n \n \n \n
\n )\n ) : null}\n\n {null !== exportQuestionObj ? (\n ['cb', 'emd', 'cl', 'tl'].includes(exportQuestionObj.type) ? (\n \n setExportQuestion(event.value)}\n />\n
\n \n
\n )\n}\n\nFiltersAdvanced.propTypes = {\n locale: PropTypes.instanceOf(Map),\n surveySchema: PropTypes.object,\n parserResultEof: PropTypes.object.isRequired,\n parserResultPattern: PropTypes.object.isRequired\n}\n\nFiltersAdvanced.displayName = 'FiltersAdvanced'\n\nexport default FiltersAdvanced\n","// lib\nimport React, { useContext, useState, useRef, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport { Transition } from 'react-transition-group'\n\nimport ADND from '@aytm/lib/adnd/ADND'\nimport { DataContext } from '@aytm/app/stats/page/sidebar/filters/FiltersPanel'\nimport { convertTreeToValues } from '@aytm/app/stats/lib/converter'\n\n// components\nimport FiltersRow from '@aytm/app/stats/page/sidebar/filters/FiltersRow'\nimport SidebarPopup from '@aytm/app/stats/page/sidebar/components/SidebarPopup'\n\nimport AssetFileUploader from '@aytm/app/stats/page/assets/index'\nimport AssetDeleteJob from '@aytm/app/stats/page/assets/jobs/AssetDeleteJob'\n\n// styles\nimport style from '@aytm/app/stats/page/sidebar/filters/styles/FiltersPanel.module.scss'\nconst FiltersGroup = ({ group }) => {\n const { root, state, externalData, onShowHiddenGroup, onDNDStart, onDNDEnd, getApiKey } = useContext(DataContext)\n\n const [hidden, setHidden] = useState(group.hidden || false)\n const [collapsed, setCollapsed] = useState(group.toggle || false)\n const [maxHeight, setMaxHeight] = useState(0)\n\n const [errorList, setErrorList] = useState([])\n const [processingList, setProcessingList] = useState([])\n\n const groupRef = useRef()\n const groupUploaderRef = useRef()\n\n const uploadQueue = useRef([])\n const uploadQueueCallbacks = useRef({})\n\n const getFilterValues = useCallback(\n (filter, index) => {\n const value = filter.disabled\n ? null\n : group.external\n ? externalData.some(data => data.key == group.key) && externalData.find(data => data.key == group.key).values\n ? externalData.find(data => data.key == group.key).values[index]\n : null\n : null !== state.basic &&\n state.basic[filter.key.toUpperCase()] != undefined &&\n 0 < Object.keys(state.basic[filter.key.toUpperCase()]).length\n ? convertTreeToValues(filter, state.basic[filter.key.toUpperCase()], 'value')\n : 'sliderselect' == filter.type\n ? [1, filter.options.length]\n : null\n\n return null !== value ? JSON.stringify(value) : value\n },\n [group.key, group.external, externalData, state.basic]\n )\n\n const getFilterOptions = useCallback(\n filter => {\n if (filter.parent) {\n const vals = filter.parent.map(v => state.basic && state.basic[filter.key] && state.basic[filter.key][v])\n const keys = filter.parent.reduce((acc, cur, i) => {\n const value =\n vals[i] != undefined && null !== vals[i] ? (Array.isArray(vals[i].v) ? vals[i].v[0] : vals[i].v) : null\n const parent = group.values.find(v => v.key == filter.key && v.subkey == cur)\n const options = Array.isArray(parent.options)\n ? ['multistatemultiselect', 'multiselect'].includes(parent.type) && parent.group\n ? parent.options.flatMap(option => option.items)\n : parent.options\n : parent.options[acc.join('-')]\n const item = (options != undefined && options.find(opt => opt.value == value)) || null\n acc.push(null !== item ? item.position : null)\n return acc\n }, [])\n return filter.options[keys.join('-')] || []\n }\n return filter.options\n },\n [group.values, state.basic]\n )\n\n const getFilterError = useCallback(\n filter =>\n Object.hasOwn(filter, 'derived')\n ? errorList.some(key => 0 <= filter.derived.indexOf(key))\n : errorList.includes(filter.key),\n [errorList]\n )\n const getFilterProcessing = useCallback(\n filter =>\n Object.hasOwn(filter, 'derived')\n ? processingList.some(key => 0 <= filter.derived.indexOf(key))\n : processingList.includes(filter.key),\n [processingList]\n )\n\n const checkQueueCallbacks = () => {\n if (!uploadQueue.current.length) return\n\n if (uploadQueue.current.length == Object.keys(uploadQueueCallbacks.current).length) {\n let i = 0\n while (!uploadQueueCallbacks.current[uploadQueue.current[i]]) i++\n\n uploadQueueCallbacks.current[uploadQueue.current[i]]()\n delete uploadQueueCallbacks.current[uploadQueue.current[i]]\n }\n }\n\n const checkApiKey = async (variable, callback) => {\n if (!variable || 'function' != typeof callback) return false\n\n const apiKey = await getApiKey()\n\n uploadQueue.current.push(variable)\n uploadQueueCallbacks.current[variable] = callback\n\n checkQueueCallbacks()\n\n return apiKey\n }\n\n const checkUploadQueue = variable => {\n const index = uploadQueue.current.indexOf(variable)\n uploadQueue.current.splice(index, 1)\n\n if (0 < uploadQueue.current.length) {\n checkQueueCallbacks()\n } else {\n group.onSuccess()\n }\n }\n const checkUploadQueueError = variable => {\n const index = uploadQueue.current.indexOf(variable)\n uploadQueue.current.splice(index, 1)\n\n setErrorList([...errorList, variable].filter((v, i, a) => a.indexOf(v) == i))\n setProcessingList(processingList.filter(v => v == variable))\n\n checkQueueCallbacks()\n }\n\n const onDeleteFilter = variable => {\n if (0 <= uploadQueue.current.indexOf(variable)) return false\n\n setErrorList(errorList.filter(v => v == variable))\n setProcessingList([...processingList, variable].filter((v, i, a) => a.indexOf(v) == i))\n\n checkApiKey(variable, async () => {\n const apiKey = await getApiKey()\n\n AssetDeleteJob({\n variable,\n ...group.remove,\n params: {\n key: apiKey\n }\n })\n .then(() => {\n if ('function' == typeof group.remove.onVariableRemoved) {\n group.remove.onVariableRemoved(variable)\n }\n\n checkUploadQueue(variable)\n })\n .catch(() => checkUploadQueueError(variable))\n })\n\n return true\n }\n\n useEffect(() => setProcessingList([]), [group.values])\n\n useEffect(() => {\n setMaxHeight(groupRef.current ? groupRef.current.getBoundingClientRect().height : 0)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [group.upload, collapsed, groupRef.current])\n\n return 0 < group.values.length || group.upload ? (\n hidden ? (\n \n CUSTOM FILTERS\n
\n \n {group.title}\n {group.help &&
\n \n {group.values.map((filter, index) => (\n
\n \n )}\n \n await checkApiKey('upload', async () => await getApiKey())}\n onFileUploaded={async (asset, warnings) => {\n checkUploadQueue('upload')\n if ('function' == typeof group.upload.onFileUploaded) {\n await group.upload.onFileUploaded(asset, warnings)\n groupUploaderRef.current.scrollIntoView(false)\n }\n }}\n onFileError={errors => {\n checkUploadQueue('upload', () => {\n if ('function' == typeof group.upload.onFileError) {\n group.upload.onFileError(errors)\n groupUploaderRef.current.scrollIntoView(false)\n }\n })\n }}\n />\n
\n )}\n \n Simplify/clear logic to switch to the basic mode\n
\n ) : (\n \n {filtersChanged && !filtersReleasing ? (\n
\n )}\n \n \n {filterSelected && (\n onResetBasicFilter(filter)}\n >\n \n \n )}\n
\n )\n}\n\nFiltersRow.propTypes = {\n mode: PropTypes.string,\n group: PropTypes.object,\n filter: PropTypes.object,\n filterValues: PropTypes.any,\n filterOptions: PropTypes.any,\n error: PropTypes.bool,\n processing: PropTypes.bool,\n onDeleteFilter: PropTypes.func,\n onDNDStart: PropTypes.func,\n onDNDEnd: PropTypes.func\n}\n\nFiltersRow.displayName = 'FiltersRow'\n\nexport default FiltersRow\n\nADND().connect()\n","export const switchMode = (dispatch, mode = 'basic') => {\n dispatch({\n type: 'SWITCH_MODE',\n request: {\n mode\n }\n })\n}\n\nexport const setHelpPopup = (dispatch, helpPopup = null) => {\n dispatch({\n type: 'SET_HELP_POPUP',\n request: {\n helpPopup\n }\n })\n}\n\nexport const setAdvancedValue = (dispatch, value = '') => {\n dispatch({\n type: 'SET_ADVANCED_VALUE',\n request: {\n value\n }\n })\n}\nexport const setBasicValue = (dispatch, value = {}) => {\n dispatch({\n type: 'SET_BASIC_VALUE',\n request: {\n value\n }\n })\n}\n\nexport const changeBasicValue = (dispatch, value = {}) => {\n dispatch({\n type: 'CHANGE_BASIC_VALUE',\n request: {\n value\n }\n })\n}\n\nexport const updateCascadeBasicValue = (dispatch, key, subkey, value = {}) => {\n dispatch({\n type: 'UPDATE_CASCADE_BASIC_VALUE',\n request: {\n key,\n subkey,\n value\n }\n })\n}\n\nexport const deleteCascadeBasicValue = (dispatch, key, subkey) => {\n dispatch({\n type: 'DELETE_CASCADE_BASIC_VALUE',\n request: {\n key,\n subkey\n }\n })\n}\n\nexport const deleteBasicValue = (dispatch, keys) => {\n dispatch({\n type: 'DELETE_BASIC_VALUE',\n request: {\n keys\n }\n })\n}\n\nexport const resetFilters = dispatch => {\n dispatch({\n type: 'RESET_FILTERS'\n })\n}\n","import { cloneDeep } from 'lodash'\n\nconst DEFAULT_STATE = {\n mode: 'basic',\n basic: {},\n advanced: ''\n}\nexport const filtersReducer = (state = DEFAULT_STATE, action) => {\n switch (action.type) {\n case 'SWITCH_MODE': {\n return {\n ...state,\n mode: action.request.mode\n }\n }\n case 'SET_HELP_POPUP': {\n return {\n ...state,\n helpPopup: action.request.helpPopup\n }\n }\n case 'SET_ADVANCED_VALUE': {\n return {\n ...state,\n advanced: action.request.value\n }\n }\n case 'SET_BASIC_VALUE': {\n return {\n ...state,\n basic: action.request.value\n }\n }\n case 'CHANGE_BASIC_VALUE': {\n const basic = { ...state.basic, ...action.request.value }\n\n return {\n ...state,\n basic: Object.fromEntries(Object.entries(basic).filter(([_, value]) => null !== value))\n }\n }\n case 'UPDATE_CASCADE_BASIC_VALUE': {\n const result = {\n ...state,\n basic: {\n ...state.basic,\n [action.request.key]: {\n ...(state.basic[action.request.key] || {}),\n ...action.request.value[action.request.key]\n }\n }\n }\n if (action.request.subkey[1]) {\n const level = Number(action.request.subkey[1])\n Object.keys(result.basic[action.request.key]).forEach(subkey => {\n if (Number(subkey[1]) > level) {\n delete result.basic[action.request.key][subkey]\n }\n })\n }\n return result\n }\n\n case 'DELETE_CASCADE_BASIC_VALUE': {\n const basic = cloneDeep(state.basic)\n if (basic[action.request.key] && basic[action.request.key][action.request.subkey])\n delete basic[action.request.key][action.request.subkey]\n const level = Number(action.request.subkey[1])\n Object.keys(basic[action.request.key]).forEach(subkey => {\n if (Number(subkey[1]) > level) {\n delete basic[action.request.key][subkey]\n }\n })\n return {\n ...state,\n basic\n }\n }\n\n case 'DELETE_BASIC_VALUE': {\n const basic = { ...state.basic }\n\n const keys = Array.isArray(action.request.keys) ? action.request.keys : [action.request.keys]\n for (const key of keys) delete basic[key.toUpperCase()]\n\n return {\n ...state,\n basic\n }\n }\n case 'RESET_FILTERS': {\n return {\n ...state,\n basic: {}\n }\n }\n default:\n throw new Error('Unknown action type')\n }\n}\n","// lib\nimport React, { useMemo } from 'react'\nimport PropTypes from 'prop-types'\n\n// components\nimport DropTargetContainer from '@aytm/app/stats/page/sidebar/components/DropTargetContainer'\n\nimport CustomQuestionButton from '@aytm/app/stats/page/sidebar/components/CustomQuestionButton'\nimport PinnedCustomQuestion from '@aytm/app/stats/page/sidebar/components/PinnedCustomQuestion'\n\n// styles\nimport style from '@aytm/app/stats/page/sidebar/mapping/styles/MappingPanel.module.scss'\n\nconst MappingPanel = ({\n sidebar,\n root,\n model,\n features,\n buttons,\n mappings,\n questions,\n addCustomQuestion,\n addPinnedQuestion,\n removePinnedQuestion,\n onDNDStart,\n onDNDEnd\n}) => {\n const acceptTypes = useMemo(\n () =>\n buttons.reduce((acc, cur) => {\n if (!features[cur.feature].disabled) acc.push(cur.adndType)\n return acc\n }, []),\n [buttons, features]\n )\n\n const typesTitles = useMemo(\n () =>\n buttons.reduce((acc, cur) => {\n if (!features[cur.feature].disabled) acc[cur.adndType] = cur.text\n return acc\n }, {}),\n [buttons, features]\n )\n\n return (\n \n {'basic' == mode || group.external ? (\n renderComponent()\n ) : (\n
\n {!disabled && filter.hasHandle && (\n \n )}\n {filter.hasScrollTo && (\n onScrollToQuestion(filter.id)} />\n )}\n {error && \n {filter.icon ? : null}\n \n
\n )}\n {group.remove && !group.remove.disabled && !filterDisabled && (\n \n \n \n )}\n {!disabled && filter.hasHandle && (\n \n \n \n )}\n There was some problem during deletion
}\n \n \n
\n )\n}\n\nMappingPanel.propTypes = {\n sidebar: PropTypes.any,\n root: PropTypes.any,\n model: PropTypes.object,\n features: PropTypes.object,\n buttons: PropTypes.array,\n mappings: PropTypes.array,\n questions: PropTypes.array,\n addCustomQuestion: PropTypes.func,\n addPinnedQuestion: PropTypes.func,\n removePinnedQuestion: PropTypes.func,\n onDNDStart: PropTypes.func,\n onDNDEnd: PropTypes.func\n}\n\nMappingPanel.displayName = 'MappingPanel'\n\nexport default MappingPanel\n","import React, { useMemo } from 'react'\nimport PropTypes from 'prop-types'\nimport { fromJS, List, Map } from 'immutable'\n\nimport RadioButton from '@aytm/lib/rfd-ui/components/basic/radio-button'\n\nimport style from '@aytm/app/stats/page/sidebar/palettes/styles/PalettesPanel.module.scss'\n\nconst ColorThemes = ({\n disabled,\n colorThemes,\n reportColorTheme,\n palettes,\n reportPalette,\n isAdmin,\n isSurveyOwner,\n onSelect,\n onPaletteAdd\n}) => {\n const copyAvailable = useMemo(\n () => !disabled && (isAdmin || isSurveyOwner) && 3 > palettes.size,\n [disabled, palettes, isAdmin, isSurveyOwner]\n )\n\n const showReportPalette = useMemo(\n () => null !== reportPalette && !palettes.some(palette => reportPalette.equals(palette.get('data'))),\n [palettes, reportPalette]\n )\n\n const onColorThemeSelect = value => {\n if ('number' == typeof value) onSelect(value, null)\n else onSelect(null, value)\n }\n\n const onColorThemeCopy = value => {\n if ('number' == typeof value) {\n const palette = fromJS({\n colors: colorThemes.get(value).slice(0, 7),\n saturation: 10,\n luminosity: 15\n })\n onPaletteAdd(palette)\n } else {\n onPaletteAdd(value)\n }\n }\n\n return (\n \n Add data from this survey to Insights Portal by creating a new mapping or editing an existing mapping. You can\n send concepts, attributes, and variables to your portals.\n
\n Create new mapping
\n {buttons.map(item =>\n features[item.feature].hidden ? null : (\n Saved mappings
\n \n Note: if a mapping is deleted from the report it's saved in, it will also be permanently removed from\n this list of saved mappings.\n
\n {mappings.map(item => (\n Pinned mappings
\n {questions.map(item => (\n \n {colorThemes.map((colorTheme, index) => (\n
\n ))}\n {showReportPalette && (\n \n onColorThemeSelect(index)}\n />\n onColorThemeSelect(index)}\n >\n {colorTheme.map((color, colorIndex) =>\n 7 > colorIndex ? (\n \n ) : null\n )}\n
\n {copyAvailable && (\n onColorThemeCopy(index)}>\n copy\n \n )}\n \n onColorThemeSelect(reportPalette)}\n />\n onColorThemeSelect(reportPalette)}\n >\n {reportPalette.get('colors').map((color, colorIndex) => (\n \n ))}\n
\n {copyAvailable && (\n onColorThemeCopy(reportPalette)}>\n copy\n \n )}\n \n )}\n \n )\n}\n\nColorThemes.propTypes = {\n disabled: PropTypes.bool,\n colorThemes: PropTypes.instanceOf(List),\n reportColorTheme: PropTypes.number,\n palettes: PropTypes.instanceOf(List),\n reportPalette: PropTypes.instanceOf(Map),\n isAdmin: PropTypes.bool,\n isSurveyOwner: PropTypes.bool,\n isSurveyGuest: PropTypes.bool,\n onSelect: PropTypes.func,\n onPaletteAdd: PropTypes.func\n}\n\nColorThemes.displayName = 'ColorThemes'\n\nexport default ColorThemes\n","import React, { createRef, useState, useRef, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport { Map } from 'immutable'\nimport { DOMElementRect } from '@aytm/lib/common/func'\nimport { calculate } from '@aytm/app/stats/lib/colors'\nimport { COLORS_TOTAL, COLOR_METHOD_OPTIONS } from '@aytm/app/stats/page/sidebar/palettes/lib/constants'\n\nimport Select from '@aytm/lib/rfd-ui/components/basic/select'\nimport ColorPickerPopup from 'lib/rfd-ui/components/advanced/color-picker-popup'\n\nimport style from '@aytm/app/stats/page/sidebar/palettes/styles/PalettePicker.module.scss'\n\nconst PalettePicker = ({ palette = [], container, onChange }) => {\n const [colors, setColors] = useState(palette.get('colors'))\n const [colorsRefs, setColorsRefs] = useState([])\n const [currentColor, setCurrentColor] = useState(null)\n const [currentColorId, setCurrentColorId] = useState(null)\n const [currentColorMethod, setCurrentColorMethod] = useState('*')\n\n const pickerRef = useRef(null)\n const colorPickerRef = useRef(null)\n\n const pickerTopRef = useRef()\n pickerTopRef.current = 0\n\n const onColorMethodChangeRef = useRef()\n onColorMethodChangeRef.current = event => {\n const value = event.get('value')\n\n if (currentColorMethod != value) {\n setCurrentColorMethod(value)\n if ('*' !== value) onChange(calculate(colors.get(0), value, COLORS_TOTAL))\n }\n }\n const onColorsRandomRef = useRef()\n onColorsRandomRef.current = () => {\n onChange(\n calculate(\n '*' === currentColorMethod ? null : colors.get(0),\n '*' === currentColorMethod ? 'random' : currentColorMethod,\n COLORS_TOTAL\n )\n )\n }\n const onColorChangeRef = useRef()\n onColorChangeRef.current = value => {\n setCurrentColor(value.hex)\n if (0 === currentColorId && '*' !== currentColorMethod) {\n onChange(calculate(value.hex.toUpperCase(), currentColorMethod, COLORS_TOTAL))\n } else {\n setCurrentColorMethod('*')\n onChange(colors.set(currentColorId, value.hex.toUpperCase()))\n }\n }\n\n const onClose = () => {\n setCurrentColor(null)\n setCurrentColorId(null)\n }\n\n const clickHandler = useCallback(() => {\n if (!container) return\n\n if (pickerRef.current && null === pickerRef.current.offsetParent) {\n onClose()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [container, pickerRef.current])\n\n const scrollHandler = useCallback(() => {\n if (!container) return\n\n const pickerRect = DOMElementRect(pickerRef.current)\n if (pickerRect.top != pickerTopRef.current) {\n const containerRect = DOMElementRect(container)\n const popupRect = DOMElementRect(colorPickerRef.current.popup)\n\n colorPickerRef.current.popup.style.top = `${Math.min(\n containerRect.height - popupRect.height,\n Math.max(0, popupRect.top + (pickerRect.top - pickerTopRef.current))\n )}px`\n }\n\n pickerTopRef.current = pickerRect.top\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [container, pickerRef.current, pickerTopRef.current, colorPickerRef.current])\n\n const onColorSelect = value => {\n setCurrentColor(colors.get(value))\n setCurrentColorId(value)\n }\n\n useEffect(() => setColors(palette.get('colors')), [palette])\n useEffect(() => {\n setColorsRefs(ref =>\n Array(colors.size)\n .fill()\n .map((_, i) => ref[i] || createRef())\n )\n if (null !== currentColorId) {\n setCurrentColor(colors.get(currentColorId))\n }\n }, [colors, currentColorId])\n\n useEffect(() => {\n if (null !== pickerRef.current) {\n const pickerRect = DOMElementRect(pickerRef.current)\n pickerTopRef.current = pickerRect.top\n }\n\n document.removeEventListener('click', clickHandler)\n document.removeEventListener('scroll', scrollHandler)\n\n if (null !== colorPickerRef.current) {\n document.addEventListener('click', clickHandler)\n document.addEventListener('scroll', scrollHandler)\n }\n\n return () => {\n document.removeEventListener('click', clickHandler)\n document.removeEventListener('scroll', scrollHandler)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [pickerRef.current, pickerTopRef.current, colorPickerRef.current])\n\n return (\n \n
\n )\n}\n\nPalettePicker.propTypes = {\n palette: PropTypes.instanceOf(Map),\n container: PropTypes.any,\n onChange: PropTypes.func\n}\n\nPalettePicker.displayName = 'PalettePicker'\n\nexport default PalettePicker\n","import React, { useState, useMemo, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport { List, Map } from 'immutable'\nimport { wrappedPostFetch } from '@aytm/app/stats/page/sidebar/palettes/lib/func'\nimport { DEFAULT_PALETTE } from '@aytm/app/stats/page/sidebar/palettes/lib/constants'\n\nimport RadioButton from '@aytm/lib/rfd-ui/components/basic/radio-button'\n\nimport ColorThemes from '@aytm/app/stats/page/sidebar/palettes/ColorThemes'\nimport PalettePicker from '@aytm/app/stats/page/sidebar/palettes/PalettePicker'\n\nimport style from '@aytm/app/stats/page/sidebar/palettes/styles/PalettesPanel.module.scss'\n\nconst PalettesPanel = ({\n disabled,\n colorThemes,\n reportColorTheme,\n palettes,\n reportPalette,\n palettesUrl,\n container,\n isAdmin,\n isSurveyOwner,\n isSurveyGuest,\n onSelect,\n onUpdate,\n onError\n}) => {\n const [currentStatus, setCurrentStatus] = useState(new Map())\n const [currentPalette, setCurrentPalette] = useState(null)\n const [currentPaletteId, setCurrentPaletteId] = useState(null)\n\n const reportPaletteId = useMemo(() => {\n const palette =\n (null !== reportPalette && palettes.find(palette => reportPalette.equals(palette.get('data')))) || null\n return null !== palette ? palette.get('id') : null\n }, [palettes, reportPalette])\n\n const paletteListAvailable = useMemo(\n () => 0 < palettes.size || isAdmin || isSurveyOwner,\n [palettes, isAdmin, isSurveyOwner]\n )\n const editAvailable = useMemo(() => !disabled && (isAdmin || isSurveyOwner), [disabled, isAdmin, isSurveyOwner])\n const addAvailable = useMemo(\n () => !disabled && (isAdmin || isSurveyOwner) && 7 > palettes.size && null === currentPaletteId,\n [disabled, palettes, isAdmin, isSurveyOwner, currentPaletteId]\n )\n const saveAvailable = useMemo(\n () =>\n (isAdmin || isSurveyOwner) &&\n null !== currentPalette &&\n !colorThemes.some(colorTheme => currentPalette.get('colors').equals(colorTheme.slice(0, 7))) &&\n !palettes.some(palette => currentPalette.equals(palette.get('data'))),\n [colorThemes, palettes, isAdmin, isSurveyOwner, currentPalette]\n )\n\n const updateCurrentStatus = (status, type, id, value) => {\n setCurrentStatus(null === value ? status.deleteIn([type, id]) : status.setIn([type, id], value))\n }\n\n const fetchSaveData = useCallback(() => {\n updateCurrentStatus(currentStatus, 'update', currentPaletteId, 'update')\n try {\n wrappedPostFetch(palettesUrl, { data: currentPalette.toJS() }).then(data => {\n updateCurrentStatus(currentStatus, 'update', currentPaletteId, null)\n switch (data.status) {\n case 'OK': {\n onUpdate(data.palettes)\n\n setCurrentPalette(null)\n setCurrentPaletteId(null)\n\n break\n }\n default: {\n onError(data.palettes)\n break\n }\n }\n })\n } catch {\n updateCurrentStatus(currentStatus, 'update', currentPaletteId, null)\n onError()\n }\n }, [palettesUrl, currentStatus, currentPalette, currentPaletteId, onUpdate, onError])\n const fetchUpdateData = useCallback(() => {\n updateCurrentStatus(currentStatus, 'update', currentPaletteId, 'update')\n try {\n wrappedPostFetch(`${palettesUrl}/${currentPaletteId}/update`, { data: currentPalette.toJS() }).then(data => {\n updateCurrentStatus(currentStatus, 'update', currentPaletteId, null)\n switch (data.status) {\n case 'OK': {\n if (currentPaletteId == reportPaletteId) {\n onSelect(null, currentPalette)\n }\n\n onUpdate(data.palettes)\n\n setCurrentPalette(null)\n setCurrentPaletteId(null)\n\n break\n }\n default: {\n onError(data.palettes)\n break\n }\n }\n })\n } catch {\n updateCurrentStatus(currentStatus, 'update', currentPaletteId, null)\n onError()\n }\n }, [palettesUrl, currentStatus, currentPalette, currentPaletteId, reportPaletteId, onSelect, onUpdate, onError])\n const fetchRemoveData = useCallback(\n paletteId => {\n updateCurrentStatus(currentStatus, 'remove', paletteId, 'remove')\n try {\n wrappedPostFetch(`${palettesUrl}/${paletteId}/remove`).then(data => {\n updateCurrentStatus(currentStatus, 'remove', paletteId, null)\n switch (data.status) {\n case 'OK': {\n onUpdate(data.palettes)\n\n if (paletteId == currentPaletteId) {\n setCurrentPalette(null)\n setCurrentPaletteId(null)\n }\n\n break\n }\n default: {\n onError(data.palettes)\n break\n }\n }\n })\n } catch {\n updateCurrentStatus(currentStatus, 'remove', paletteId, null)\n onError()\n }\n },\n [palettesUrl, currentStatus, currentPaletteId, onUpdate, onError]\n )\n\n const onPaletteAdd = value => {\n setCurrentPalette(value || DEFAULT_PALETTE)\n setCurrentPaletteId(-1)\n }\n const onPaletteEdit = value => {\n setCurrentPalette(value.get('data'))\n setCurrentPaletteId(value.get('id'))\n }\n const onPaletteChange = value => {\n setCurrentPalette(currentPalette.set('colors', value))\n }\n const onPaletteSave = value => {\n if (0 < value) fetchUpdateData()\n else fetchSaveData()\n }\n const onPaletteRemove = value => {\n fetchRemoveData(value)\n }\n const onPaletteCancel = () => {\n setCurrentPalette(null)\n setCurrentPaletteId(null)\n }\n\n useEffect(() => {\n if (\n disabled ||\n (null !== currentPaletteId &&\n 0 < currentPaletteId &&\n !palettes.some(palette => currentPaletteId == palette.get('id')))\n ) {\n setCurrentPalette(null)\n setCurrentPaletteId(null)\n }\n }, [disabled, palettes, currentPaletteId])\n\n return (\n <>\n \n {colors.map((color, index) => (\n onColorSelect(index)}\n >\n ))}\n
\n\n {0 === currentColorId && (\n \n
\n )}\n\n {null !== currentColor && null !== currentColorId && (\n \n updateCurrentStatus(currentStatus, 'remove', palette.get('id'), 'confirm')}\n >\n \n \n \n ))}\n {'confirm' == currentStatus.getIn(['remove', palette.get('id')]) && (\n
\n ))}\n\n {addAvailable && (\n Custom Colors
\n {palettes.map(palette => (\n \n onSelect(null, palette.get('data'))}\n />\n onSelect(null, palette.get('data'))}\n >\n {palette.getIn(['data', 'colors']).map((color, index) => (\n \n ))}\n
\n {editAvailable &&\n ('remove' == currentStatus.getIn(['remove', palette.get('id')]) ? (\n \n \n \n ) : (\n <>\n onPaletteEdit(palette)}>\n edit\n \n \n onPaletteRemove(palette.get('id'))}\n >\n delete forever?\n \n updateCurrentStatus(currentStatus, 'remove', palette.get('id'), null)}\n >\n nevermind\n \n
\n )}\n \n onPaletteAdd(null)}>\n add new\n \n
\n )}\n\n {null !== currentPalette && (\n \n \n \n \n onPaletteSave(currentPaletteId) : null}\n >\n {0 < currentPaletteId ? 'update' : 'save'}\n \n )}\n
\n )}\n \n ) : null}\n \n )\n}\n\nPalettesPanel.propTypes = {\n disabled: PropTypes.bool,\n colorThemes: PropTypes.instanceOf(List),\n reportColorTheme: PropTypes.number,\n palettes: PropTypes.instanceOf(List),\n defaultPalette: PropTypes.instanceOf(Map),\n reportPalette: PropTypes.instanceOf(Map),\n palettesUrl: PropTypes.string,\n container: PropTypes.any,\n isAdmin: PropTypes.bool,\n isSurveyOwner: PropTypes.bool,\n isSurveyGuest: PropTypes.bool,\n onSelect: PropTypes.func,\n onUpdate: PropTypes.func,\n onError: PropTypes.func\n}\n\nPalettesPanel.displayName = 'PalettesPanel'\n\nexport default PalettesPanel\n","import { fromJS } from 'immutable'\n\nexport const COLORS_TOTAL = 7\n\nexport const COLOR_METHOD_OPTIONS = fromJS([\n { text: 'auto', listText: 'auto', value: '*' },\n { text: 'monochromatic', listText: 'monochromatic', value: 'monochromatic' },\n { text: 'complementary', listText: 'complementary', value: 'complementary' },\n { text: 'color zebra', listText: 'color zebra', value: 'split_complementary' },\n // { text: 'triadic', listText: 'triadic (modified)', value: 'triadic' },\n // { text: 'tetradic', listText: 'tetradic (modified)', value: 'tetradic' },\n { text: 'rainbow', listText: 'rainbow', value: 'analogous' },\n // { text: 'hue', listText: 'hue', value: 'analogous_hue' },\n { text: 'analogous', listText: 'analogous', value: 'analogous_random' }\n])\n\nexport const DEFAULT_PALETTE = fromJS({\n colors: ['#CCCCCC', '#B2B2B2', '#999999', '#808080', '#666666', '#4D4D4D', '#333333'],\n saturation: 10,\n luminosity: 15\n})\n","import { Storage } from '@aytm/lib/storage'\nimport railsPostFetch from '@aytm/lib/common/rails-post-fetch'\n\nexport const wrappedPostFetch = (url, data = {}) =>\n Storage.Encode(data)\n .then(_bsfz =>\n railsPostFetch(url, {\n body: JSON.stringify({ _bsfz })\n })\n )\n .then(response => response.json())\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport autobind from 'autobind-decorator'\nimport { Map } from 'immutable'\nimport ContextSubscriber from '@aytm/lib/common/components/decorators/ContextSubscriber'\nimport ContextProvider from '@aytm/lib/common/components/decorators/ContextProvider'\nimport ManagedRenderComponent from '@aytm/lib/common/components/ManagedRenderComponent'\nimport ADND from '@aytm/lib/adnd/ADND'\nimport { updateListState } from '@aytm/app/stats/page/sidebar/reports/actions-state'\n\n// components\nimport ReportPopup from '@aytm/app/stats/page/sidebar/reports/ReportPopup'\n\n// styles\nimport style from '@aytm/app/stats/page/sidebar/reports/styles/Report.module.scss'\n\n// \n \n
\n )}\n \n \n
\n )}\n \n )\n }\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport autobind from 'autobind-decorator'\nimport { Map } from 'immutable'\nimport ContextSubscriber from '@aytm/lib/common/components/decorators/ContextSubscriber'\nimport ManagedRenderComponent from '@aytm/lib/common/components/ManagedRenderComponent'\nimport { addListItem, revertListItem, updateListItem } from '@aytm/app/stats/page/sidebar/reports/actions'\n\n// components\nimport Button from '@aytm/lib/rfd-ui/components/basic/button'\n\n// styles\nimport style from '@aytm/app/stats/page/sidebar/reports/styles/ReportControls.module.scss'\n\n// \n {isCompact ? (\n isChanged ? (\n <>\n ${\n isSaving ? 'Saving' : 'SAVE CHANGES'\n }`}\n icon={isSaving ? 'icon-aytmfd-spin afd-spin' : null}\n compact={true}\n theme=\"small\"\n disabled={disabled || isEmpty || isLocked}\n onClick={disabled || isEmpty || isLocked ? null : this.onReportUpdate}\n />\n )}\n \n ) : (\n
\n )\n }\n}\n\nexport default ReportControlsWithContext()\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport autobind from 'autobind-decorator'\nimport { Map } from 'immutable'\nimport { Transition } from 'react-transition-group'\nimport { Modifier, EditorState, SelectionState } from 'draft-js'\nimport ContextSubscriber from '@aytm/lib/common/components/decorators/ContextSubscriber'\nimport ManagedRenderComponent from '@aytm/lib/common/components/ManagedRenderComponent'\nimport { deleteListItem, updateItemModel, updateItemShareLink } from '@aytm/app/stats/page/sidebar/reports/actions'\nimport { updateListState } from '@aytm/app/stats/page/sidebar/reports/actions-state'\nimport copyToClipboard from '@aytm/lib/common/copy-to-clipboard'\nimport { decodeText } from '@aytm/app/stats/lib/helpers'\n\n// components\nimport ReportPopupDescription from '@aytm/app/stats/page/sidebar/reports/ReportPopupComponents/ReportPopupDescription'\nimport ReportPopupSharing from '@aytm/app/stats/page/sidebar/reports/ReportPopupComponents/ReportPopupSharing'\nimport ReportControlsWithContext from '@aytm/app/stats/page/sidebar/reports/ReportControls'\nimport RichTextCounter from '@aytm/lib/rfd-ui/components/advanced/rich-text-counter'\nimport ClickOutside from '@aytm/lib/rfd-ui/components/basic/click-outside'\nimport Portal from '@aytm/lib/rfd-ui/components/basic/portal'\nimport TextField from '@aytm/lib/rfd-ui/components/basic/text-field'\nimport Button from '@aytm/lib/rfd-ui/components/basic/button'\n\n// styles\nimport reportStyle from '@aytm/app/stats/page/sidebar/reports/styles/Report.module.scss'\nimport style from '@aytm/app/stats/page/sidebar/reports/styles/ReportPopup.module.scss'\n\nconst PORTAL_ID = 'report-popup-portal'\n\nconst TITLE_MAX = 250\n\n// \n
\n \n
\n DELETE REPORT?
\n \n \n
\n \n You are about to delete this report. This operation can not be undone. Anyone with the share link,\n associated with this report will be redirected to aytm home page or dashboard if they are logged in users\n next time they try to access it or refresh their browser window.\n
\n
\n Do you still want to delete this report and associated share link?\n
\n \n
\n Do you still want to delete this report and associated share link?\n
\n \n \n
\n \n \n
\n \n
\n \n \n
\n \n )\n }\n\n @autobind\n renderCurrentReportVersion() {\n const { state, model, virtualReportsIds, isSurveyGuest, isSurveyViewer } = this.props\n const schema = model.get('schema')\n const isEditable =\n state.get('editable') && !['original', 'xpert', 'widget', ...virtualReportsIds].includes(model.get('type'))\n const isDisabled = !['xpert', 'xpert_custom'].includes(model.get('type')) && null !== schema && !schema.size\n\n return (\n \n Alternatively - if you want to block access to this report but don't wish to delete the report\n itself, click "x" in the field below to delete the share link. You'll be able to generate a\n new share link at any time.\n
\n \n
\n \n )\n }\n\n @autobind\n renderSharingOptions() {\n return (\n \n
\n REPORT VERSIONS
\n \n \n
\n \n {isSurveyGuest || isSurveyViewer ? (\n <>\n Please note: your copy of the report may be outdated, comparing to the latest copy, we have\n online. Your version is stored locally for now in this browser.\n {isEditable && (\n <>\n
\n
\n Click "REVERT" to replace your version with the latest one.\n \n )}\n \n ) : !isEditable && !['original', 'xpert', 'widget', ...virtualReportsIds].includes(model.get('type')) ? (\n <>\n Please note: your copy of the report may be outdated, comparing to the latest copy, we have\n online. Your version is stored locally for now in this browser.\n
\n
\n Click "UPDATE" to replace your version with the latest one. Click "SAVE AS A NEW\n REPORT" to save your version as a clone.\n \n ) : (\n <>\n Please note: you have modified this report, comparing to the copy, we have online. Your changes\n are stored locally for now in this browser. The latest version of the report is your current view of the\n stats page.\n {isEditable && !isSurveyGuest && !isSurveyViewer && (\n <>\n
\n
\n If you click "SAVE FOR EVERYONE" below, anyone with the existing share link will be able\n to see your current view next time they open the link or refresh their page.\n \n )}\n \n )}\n {isDisabled && (\n <>\n
\n
\n Please add at least one question in order to save this report.\n \n )}\n
\n \n
\n Click "REVERT" to replace your version with the latest one.\n \n )}\n \n ) : !isEditable && !['original', 'xpert', 'widget', ...virtualReportsIds].includes(model.get('type')) ? (\n <>\n Please note: your copy of the report may be outdated, comparing to the latest copy, we have\n online. Your version is stored locally for now in this browser.\n
\n
\n Click "UPDATE" to replace your version with the latest one. Click "SAVE AS A NEW\n REPORT" to save your version as a clone.\n \n ) : (\n <>\n Please note: you have modified this report, comparing to the copy, we have online. Your changes\n are stored locally for now in this browser. The latest version of the report is your current view of the\n stats page.\n {isEditable && !isSurveyGuest && !isSurveyViewer && (\n <>\n
\n
\n If you click "SAVE FOR EVERYONE" below, anyone with the existing share link will be able\n to see your current view next time they open the link or refresh their page.\n \n )}\n \n )}\n {isDisabled && (\n <>\n
\n
\n Please add at least one question in order to save this report.\n \n )}\n
\n \n \n
\n \n
\n \n
\n )\n }\n\n render() {\n const { model, disabled } = this.props\n const { hidden, opened } = this.state\n\n return [\n \n
\n {isDeleting\n ? this.renderDeleteReport()\n : isChanged\n ? this.renderCurrentReportVersion()\n : this.renderSharingOptions()}\n REPORT TITLE
\n \n
\n \n
\n \n
\n \n
\n \n REPORT LINK (Anyone with the link can view this report)\n
\n \n
\n \n \n
\n \n this.updateShareLink(false) : null\n }\n onFocus={event => this.selectValue(event, 'link')}\n onBlur={this.blurMe}\n />\n {!(shareLinkExist || isSurveyGuest || isSurveyViewer) && (\n this.updateShareLink(true)\n }\n />\n )}\n {shareLinkExist && (\n
\n \n \n
\n \n )}\n \n \n
\n {this.renderDescription()}\n {this.renderContent()}\n \n
\n )\n }\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport autobind from 'autobind-decorator'\nimport { Map } from 'immutable'\nimport { EMAIL_REGEX } from '@aytm/app/lib/regex'\nimport { updateListState } from '@aytm/app/stats/page/sidebar/reports/actions-state'\nimport railsPostFetch from '@aytm/lib/common/rails-post-fetch'\nimport ContextSubscriber from '@aytm/lib/common/components/decorators/ContextSubscriber'\nimport ManagedRenderComponent from '@aytm/lib/common/components/ManagedRenderComponent'\n\n// components\nimport TextField from '@aytm/lib/rfd-ui/components/basic/text-field'\nimport Button from '@aytm/lib/rfd-ui/components/basic/button'\n\n// styles\nimport style from '@aytm/app/stats/page/sidebar/reports/styles/ReportPopup.module.scss'\n\nconst EMAILS_MAX = 10\n\n// \n {!['original', 'xpert', 'widget', ...virtualReportsIds].includes(model.get('type')) &&\n 'number' === typeof model.get('created') && (\n
\n \n Created{' '}\n {!isSurveyGuest &&\n !isSurveyViewer &&\n 'string' === typeof creator &&\n 0 < creator.length &&\n `by ${creator} `}\n {this.getDateApproximation(model.get('created'))}\n
\n )}\n {!['original', 'xpert', 'widget', ...virtualReportsIds].includes(model.get('type')) &&\n 'number' === typeof model.get('edited') && (\n \n Modified{' '}\n {!isSurveyGuest &&\n !isSurveyViewer &&\n 'string' === typeof editor &&\n 0 < editor.length &&\n `by ${editor} `}\n {this.getDateApproximation(model.get('edited'))}\n
\n )}\n \n
\n {isAdmin && (\n \n APPLIED FILTERS, CUSTOMIZATIONS\n
\n \n
\n \n {0 < filters.size\n ? (() =>\n filters\n .map((filter, index) =>\n filter.get('value') ? (\n
\n \n {filter.get('title')}:\n
\n \n
\n ) : (\n \n \n
\n {filter.get('title')}\n
\n )\n )\n .toArray())()\n : 'None'}\n \n
\n )}\n \n \n Something went wrong, please try again later\n
\n \n \n )\n }\n}\n","// lib\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport autobind from 'autobind-decorator'\nimport { List, Map, fromJS } from 'immutable'\nimport ContextSubscriber from '@aytm/lib/common/components/decorators/ContextSubscriber'\nimport ContextProvider from '@aytm/lib/common/components/decorators/ContextProvider'\nimport ManagedRenderComponent from '@aytm/lib/common/components/ManagedRenderComponent'\nimport ADND from '@aytm/lib/adnd/ADND'\nimport { updateListState } from '@aytm/app/stats/page/sidebar/reports/actions-state'\nimport { dropListItem, addListItem } from '@aytm/app/stats/page/sidebar/reports/actions'\nimport { generateUID } from '@aytm/app/stats/lib/helpers'\n\n// components\nimport { Button } from 'primereact/button'\n\nimport Report from '@aytm/app/stats/page/sidebar/reports/Report'\n\n// styles\nimport '@aytm/app/stats/page/styles/globals.scss'\n\nimport style from '@aytm/app/stats/page/sidebar/reports/styles/ReportsPanel.module.scss'\n\n// \n
\n \n REPORT SHARING OPTIONS\n
\n \n
\n \n SHARE REPORT BY EMAIL (Enter up to 10 emails below)\n
\n \n
\n \n \n
\n \n {\n this.onFocus('email')\n }}\n onBlur={this.onBlur}\n />\n
\n \n
\n \n \n \n {0 == emailsSentCount && 'No emails sent'}\n {1 == emailsSentCount && 'Email was sent'}\n {emailsSentCount > 1 && 'Emails were sent'}\n {emailsInvalid != '' && emailsSentCount > 0 && ', except'}\n {emailsInvalid != '' && emailsSentCount > 0 && (\n {emailsInvalid} \n )}\n
\n \n Default Report\n
,\n this.renderItemsList(defaultItemSeq, 1),\n 0 < virtualItemSeqLength\n ? [\n \n Automated Term Report\n
,\n this.renderItemsList(virtualItemSeq, 2)\n ]\n : null,\n (!isSurveyGuest || isSurveyViewer) && 0 < otherItemSeqLength\n ? [\n \n Other Reports\n
,\n this.renderItemsList(otherItemSeq, virtualItemSeqLength + 2)\n ]\n : null\n ]\n }\n\n @autobind\n renderAddItem() {\n const { state, statePath, model, modelPath, currentReportId } = this.props\n const position = model.get('items').findIndex(item => item.get('id') == currentReportId)\n const itemModel = model.getIn(['items', position])\n const itemStatePath = this.itemStatePath(statePath, itemModel)\n\n return (\n \n {0 < model.get('items').size && (\n <>\n {!isSurveyGuest && !isSurveyViewer && this.renderAddItem()}\n {this.renderList()}\n \n )}\n
\n )\n }\n}\n\n// \n
\n )\n }\n}\n\nADND().connect()\n","export const updateListState = ({ updates, listState, actions } = {}) => {\n const newListState = listState.withMutations(map => {\n updates.forEach(x => {\n null !== x.value ? map.setIn([...x.path], x.value) : map.deleteIn([...x.path])\n })\n })\n actions.updateState(newListState)\n\n return newListState\n}\n","import { List, Map, fromJS } from 'immutable'\nimport railsPostFetch from '@aytm/lib/common/rails-post-fetch'\nimport { Storage } from '@aytm/lib/storage'\n\nimport { updateListState } from '@aytm/app/stats/page/sidebar/reports/actions-state'\n\nconst ERROR = 'we are having a hard time completing your request.'\n\nconst VIRTUAL_REPORTS_IDS = ['term-report']\n\nconst wrappedPostFetch = (url, data = {}) =>\n Storage.Encode(data)\n .then(_bsfz =>\n railsPostFetch(url, {\n body: JSON.stringify({\n _bsfz\n })\n })\n )\n .then(response => response.json())\n\nconst getModelData = model => {\n const params = model.get('params')\n const config = model.get('config')\n const virtual = model.get('virtual')\n const schema = model.get('schema')\n const storytellings = model.get('storytellings')\n const storytellingNotes = model.get('storytellingNotes')\n const logicTags = model.get('logicTags')\n\n const _virtual = Object.entries(null !== virtual ? virtual.toJS() : {}).reduce((acc, [key, value]) => {\n delete value.preset\n acc[key] = value\n return acc\n }, {})\n\n const data = {\n reportId: model.get('id'),\n params: params.toJS(),\n config: config != undefined && null !== config ? config.toJS() : null,\n virtual: _virtual != undefined && null !== _virtual ? _virtual : null,\n schema: schema != undefined && null !== schema ? schema.toJS() : null,\n storytellings: storytellings != undefined && null !== storytellings ? storytellings.toJS() : {},\n storytellingNotes: storytellingNotes != undefined && null !== storytellingNotes ? storytellingNotes.toJS() : {},\n logicTags: logicTags != undefined && null !== logicTags ? logicTags.toJS() : null\n }\n\n const scripts = model.get('scripts')\n scripts && 0 < scripts.size && (data.scripts = scripts.toJS())\n\n return data\n}\n\nconst setModelData = (state, listModel, modelPath) => {\n const initials = state.get('initials')\n return listModel.withMutations(map => {\n if (initials != undefined) {\n map\n .setIn([...modelPath, 'params'], fromJS(initials.get('params')))\n .setIn([...modelPath, 'config'], fromJS(initials.get('config')))\n .setIn([...modelPath, 'virtual'], fromJS(initials.get('virtual')))\n .setIn([...modelPath, 'schema'], fromJS(initials.get('schema')))\n .setIn([...modelPath, 'logicTags'], fromJS(initials.get('logicTags')))\n\n const scripts = fromJS(initials.get('scripts') || {})\n scripts && 0 < scripts.size && map.setIn([...modelPath, 'scripts'], scripts)\n }\n })\n}\n\nconst decodeModelData = listModel =>\n listModel.withMutations(map => {\n map.update('items', List(), items => items.filter(r => !VIRTUAL_REPORTS_IDS.includes(r.get('type'))))\n })\nconst encodeModelData = (listModel, newListModel) => {\n const virtualReports = listModel.get('items').filter(r => VIRTUAL_REPORTS_IDS.includes(r.get('type')))\n return newListModel.withMutations(map => {\n for (const virtualReport of virtualReports) {\n map.update('items', List(), items => items.insert(virtualReport.get('visual_position') - 1, Map(virtualReport)))\n }\n })\n}\n\nexport const dropListItem = (props = {}) => {\n const { url, listIndex, listState, listStatePath, listModel, model, modelPath, actions } = props\n\n updateListState({\n updates: [\n { path: [...listStatePath, 'reorder'], value: null },\n { path: [...listStatePath, 'scrolling'], value: null }\n ],\n listState,\n actions\n })\n\n const newListModel = listModel.withMutations(map => {\n map.deleteIn([...modelPath]).update('items', List(), items => items.insert(listIndex, fromJS(model)))\n })\n actions.updateModel(newListModel, { type: 'reorder', ids: [] })\n\n const order = decodeModelData(newListModel)\n .get('items')\n .map(item => item.get('id'))\n .toJS()\n\n wrappedPostFetch(url, {\n do: 'reorder',\n order\n })\n .then(data => {\n if (data.order) {\n const order = data.order.filter((item, pos, self) => self.indexOf(item) == pos)\n const newListModel = encodeModelData(\n listModel,\n decodeModelData(listModel).withMutations(map => {\n order.forEach((id, index) => {\n const itemIndex = map.get('items').findIndex(item => item.get('id') == id)\n if (itemIndex < 0) {\n const newListItem = fromJS(data.reports.find(x => x.id == id))\n map.update('items', List(), items => items.insert(index, newListItem))\n } else if (itemIndex != index) {\n const listItem = fromJS(map.getIn(['items', itemIndex]))\n map.deleteIn(['items', itemIndex]).update('items', List(), items => items.insert(index, listItem))\n }\n })\n\n map.update('items', List(), items => items.setSize(data.order.length))\n })\n )\n actions.updateModel(newListModel, { type: 'reorder' })\n }\n if (!data.status) {\n actions.error(data.error || ERROR)\n }\n })\n .catch(() => actions.error(ERROR))\n}\n\nexport const addListItem = (props = {}) => {\n const { url, listState, listStatePath, listModel, state, statePath, model, modelPath, actions } = props\n\n updateListState({\n updates:\n statePath != undefined\n ? [\n { path: [...listStatePath, 'add'], value: true },\n { path: [...statePath, 'process'], value: 'add' }\n ]\n : [{ path: [...listStatePath, 'add'], value: true }],\n listState,\n actions\n })\n\n const data = getModelData(model)\n\n wrappedPostFetch(url, {\n do: 'add',\n share: data\n })\n .then(data => {\n if (!Number.isNaN(Number(data.id)) && 0 < Number(data.id)) {\n const newListItem = fromJS(data)\n const newListModel = encodeModelData(\n listModel,\n decodeModelData(modelPath != undefined ? setModelData(state, listModel, modelPath) : listModel).update(\n 'items',\n List(),\n items => items.insert(1, newListItem)\n )\n )\n\n actions.updateModel(newListModel, {\n type: 'add',\n id: newListItem.get('id'),\n siblingId: modelPath != undefined ? model.get('id') : null\n })\n } else {\n actions.error(data.error || ERROR)\n }\n })\n .catch(() => actions.error(ERROR))\n}\n\nexport const updateListItem = (props = {}) => {\n const { url, listState, listModel, statePath, model, modelPath, actions } = props\n\n updateListState({ updates: [{ path: [...statePath, 'process'], value: 'save' }], listState, actions })\n\n const data = getModelData(model)\n data.edited = model.get('edited') || model.get('created')\n\n wrappedPostFetch(url, {\n do: 'update',\n id: model.get('id'),\n share: data\n })\n .then(data => {\n if (!Number.isNaN(Number(data.id)) && 0 < Number(data.id)) {\n const newListModel = listModel.withMutations(map => {\n map.setIn([...modelPath, 'edited'], data.edited).setIn([...modelPath, 'editor'], data.editor)\n })\n actions.updateModel(newListModel, { type: 'update', id: model.get('id') })\n } else {\n actions.error(data.error || ERROR, model.get('id'), {\n report: data.report\n })\n }\n })\n .catch(() => actions.error(ERROR, model.get('id')))\n}\n\nexport const deleteListItem = (props = {}) => {\n const { url, listState, listModel, statePath, model, modelPath, actions } = props\n\n const newListState = updateListState({\n updates: [{ path: [...statePath, 'process'], value: 'delete' }],\n listState,\n actions\n })\n\n wrappedPostFetch(url, {\n do: 'delete',\n id: model.get('id')\n })\n .then(data => {\n if (data.status) {\n updateListState({\n updates: [\n { path: [...statePath, 'deleted'], value: true },\n { path: [...statePath, 'active'], value: false }\n ],\n listState: newListState,\n actions\n })\n\n setTimeout(() => {\n const newListModel = listModel.deleteIn([...modelPath])\n actions.updateModel(newListModel, { type: 'delete', id: model.get('id') })\n }, 500)\n } else {\n if (data.report) {\n const listItem = fromJS(data.report)\n const newListModel = listModel.withMutations(map => {\n const itemIndex = map.get('items').findIndex(item => item.get('id') == listItem.get('id'))\n map.deleteIn(['items', itemIndex]).update('items', List(), items => items.insert(itemIndex, listItem))\n })\n actions.updateModel(newListModel, { type: 'update', id: listItem.get('id') })\n }\n\n actions.error(data.error || ERROR, model.get('id'))\n }\n })\n .catch(() => actions.error(ERROR, model.get('id')))\n}\n\nexport const updateItemModel = (props = {}) => {\n const { url, data, updates, listState, listModel, statePath, model, modelPath, actions } = props\n\n updateListState({ updates: [{ path: [...statePath, 'process'], value: 'update' }], listState, actions })\n\n data.edited = model.get('edited') || model.get('created')\n\n wrappedPostFetch(url, data)\n .then(data => {\n if (data.status) {\n const newListModel = listModel.withMutations(map => {\n updates.forEach(x => {\n map.setIn([...x.path], x.value)\n })\n map.setIn([...modelPath, 'edited'], data.edited).setIn([...modelPath, 'editor'], data.editor)\n })\n actions.updateModel(newListModel, { type: 'update_props', id: model.get('id') })\n } else {\n actions.error(data.error || ERROR, model.get('id'), {\n report: data.report\n })\n }\n })\n .catch(() => actions.error(ERROR, model.get('id')))\n}\n\nexport const updateItemShareLink = (props = {}) => {\n const { url, share, listState, listModel, statePath, model, modelPath, actions } = props\n\n const process = share ? 'share' : 'unshare'\n\n updateListState({ updates: [{ path: [...statePath, 'process'], value: process }], listState, actions })\n\n wrappedPostFetch(url, { do: process, id: model.get('id'), edited: model.get('edited') || model.get('created') })\n .then(data => {\n if (data.status) {\n const newListModel = listModel.withMutations(map => {\n map\n .setIn([...modelPath, 'shareLink'], data.shareLink)\n .setIn([...modelPath, 'edited'], data.edited)\n .setIn([...modelPath, 'editor'], data.editor)\n })\n actions.updateModel(newListModel, { type: 'update_props', id: model.get('id') })\n } else {\n actions.error(data.error || ERROR, model.get('id'), {\n report: data.report\n })\n }\n })\n .catch(() => actions.error(ERROR, model.get('id')))\n}\n\nexport const revertListItem = (props = {}) => {\n const { listState, listModel, state, statePath, model, modelPath, actions } = props\n\n updateListState({ updates: [{ path: [...statePath, 'process'], value: 'revert' }], listState, actions })\n\n const newListModel = setModelData(state, listModel, modelPath)\n actions.updateModel(newListModel, { type: 'revert', id: model.get('id') })\n}\n\nexport const RenameAllCodebooks = (url, codebook, tags, reports, callback) => {\n wrappedPostFetch(url, {\n do: 'rename_codebook',\n from: codebook.from,\n to: codebook.to,\n tags,\n reports\n })\n .then(data => callback(data))\n .catch(() => callback())\n}\n\nexport const RenameAllTags = (url, tag, reports, callback) => {\n wrappedPostFetch(url, {\n do: 'rename_tag',\n from: tag.from,\n to: tag.to,\n reports\n })\n .then(data => callback(data))\n .catch(() => callback())\n}\n","// lib\nimport React, { createRef, useState, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport { Map, fromJS } from 'immutable'\n\n// import { encodeText, decodeText } from '@aytm/app/stats/lib/helpers'\n\n// components\nimport { Dropdown } from 'primereact/dropdown'\n\n// import TextField from '@aytm/lib/rfd-ui/components/basic/text-field'\n\n// styles\nimport style from '@aytm/app/stats/page/sidebar/weighting/styles/WeightingItem.module.scss'\n\nconst setInputFilter = (textbox, inputFilter) => {\n const events = ['input', 'keydown', 'keyup', 'mousedown', 'mouseup', 'select', 'contextmenu', 'drop']\n events.forEach(event => {\n textbox.addEventListener(event, () => {\n if (inputFilter(textbox.value)) {\n textbox.oldValue = textbox.value\n textbox.oldSelectionStart = textbox.selectionStart\n textbox.oldSelectionEnd = textbox.selectionEnd\n } else if (textbox.oldValue) {\n textbox.value = textbox.oldValue\n textbox.setSelectionRange(textbox.oldSelectionStart, textbox.oldSelectionEnd)\n } else {\n textbox.value = ''\n }\n })\n })\n}\n\n// \n
\n {isBlankAllowed && (\n \n
\n )}\n \n //
\n // ))\n // }\n\n return (\n \n //
\n // {item.get('text')}
\n // \n //
\n // %
\n // {item.get('actual')}%
\n // {item.get('final')}%
\n // \n
\n )\n}\n\nWeightingItem.propTypes = {\n index: PropTypes.number.isRequired,\n model: PropTypes.instanceOf(Map),\n options: PropTypes.array,\n surveyData: PropTypes.object,\n disabled: PropTypes.bool,\n onUpdate: PropTypes.func,\n onRemove: PropTypes.func\n}\n\nWeightingItem.displayName = 'WeightingItem'\n\nexport default WeightingItem\n","// lib\nimport React, { useMemo } from 'react'\nimport PropTypes from 'prop-types'\nimport { List, fromJS } from 'immutable'\n\n// components\nimport WeightingItem from '@aytm/app/stats/page/sidebar/weighting/WeightingItem'\n\n// styles\nimport style from '@aytm/app/stats/page/sidebar/weighting/styles/WeightingList.module.scss'\n\n// \n
\n \n onRemove(index)}>\n \n \n onSelect(event.value)}\n />\n
\n \n {items.map((itemModel, itemIndex) => (\n
\n )\n}\n\nWeightingList.propTypes = {\n items: PropTypes.instanceOf(List),\n surveyData: PropTypes.object,\n disabled: PropTypes.bool,\n onAdd: PropTypes.func,\n onUpdate: PropTypes.func,\n onRemove: PropTypes.func\n}\n\nWeightingList.displayName = 'WeightingList'\n\nexport default WeightingList\n","// lib\nimport React, { useState, useRef, useMemo, useCallback, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport { collator } from '@aytm/app/stats/lib/helpers'\n\n// components\nimport { Button } from 'primereact/button'\nimport { Dropdown } from 'primereact/dropdown'\nimport { InputSwitch } from 'primereact/inputswitch'\n\nimport containerExpander from '@aytm/lib/layout/container-expander'\n\n// import WeightingList from '@aytm/app/stats/page/sidebar/weighting/WeightingList'\n\n// styles\nimport style from '@aytm/app/stats/page/sidebar/weighting/styles/WeightingPanel.module.scss'\n\nconst Weighting = ({ weighting, appliedWeighting, surveyData, disabled, onChange, onUpdate, onLoad }) => {\n const [weightingDisabled, setWeightingDisabled] = useState(true)\n const [isProcessing, setIsProcessing] = useState(false)\n\n const componentRef = useRef(null)\n const containerExpanderRef = useRef(null)\n\n const dropdownsRef = useRef({})\n\n const weighted = useMemo(\n () =>\n weighting.type === appliedWeighting.type &&\n JSON.stringify(weighting.items) === JSON.stringify(appliedWeighting.items),\n [weighting, appliedWeighting]\n )\n\n const weightingOptions = useMemo(() => {\n const options = [\n { value: '*', text: 'Choose weighting variable' },\n { value: 'var', text: 'Weight by Custom variable' }\n // { value: 'custom', text: 'Custom / Advanced' }\n ]\n if (0 < surveyData.census.length) {\n return options.splice(1, 0, {\n value: 'census',\n text: `Weight by US Census`\n })\n }\n return options\n }, [surveyData.census])\n\n const censusOptions = useMemo(\n () =>\n surveyData.census\n .map(value => {\n if (value == undefined) return null\n return {\n value: value.join('+'),\n text: value.join(', ')\n }\n })\n .filter(v => null !== v),\n [surveyData.census]\n )\n\n const varOptions = useMemo(() => {\n const options = []\n surveyData.customVariables.forEach(value => {\n options.push({\n value: value,\n text: value\n })\n })\n if (\n 'var' == weighting.type &&\n 'var' == appliedWeighting.type &&\n 0 < appliedWeighting.items.length &&\n weighting.items[0] == appliedWeighting.items[0] &&\n 0 > surveyData.customVariables.indexOf(appliedWeighting.items[0])\n ) {\n options.push({\n value: appliedWeighting.items[0],\n text: appliedWeighting.items[0]\n })\n }\n options.sort((a, b) => collator.compare(a.text, b.text))\n return options\n }, [weighting, appliedWeighting, surveyData.customVariables])\n\n const onShowDropdown = useCallback(\n key => {\n if (\n null !== containerExpanderRef.current &&\n null !== dropdownsRef.current &&\n dropdownsRef.current[key] != undefined\n ) {\n containerExpanderRef.current.expand(dropdownsRef.current[key].getOverlay())\n }\n },\n [containerExpanderRef, dropdownsRef]\n )\n const onHideDropdown = useCallback(\n key => {\n if (\n null !== containerExpanderRef.current &&\n null !== dropdownsRef.current &&\n dropdownsRef.current[key] != undefined\n ) {\n containerExpanderRef.current.unexpand(dropdownsRef.current[key].getOverlay())\n }\n },\n [containerExpanderRef, dropdownsRef]\n )\n\n // const onAddItem = useCallback(() => {\n // const items = weighting.items.push({ key: '', items: [] })\n // onChange(weighting.active, weighting.type, items)\n // }, [weighting])\n // const onUpdateItem = useCallback(\n // (index, value) => {\n // const items = weighting.items.slice(index, 0, value)\n // onChange(weighting.active, weighting.type, items)\n // },\n // [weighting]\n // )\n // const onRemoveItem = useCallback(\n // index => {\n // const items = weighting.items.slice(index, 1)\n // onChange(weighting.active, weighting.type, items)\n // },\n // [weighting]\n // )\n\n useEffect(() => {\n setIsProcessing(false)\n }, [weighted])\n\n useEffect(() => {\n if (null !== componentRef.current) {\n containerExpanderRef.current = containerExpander(componentRef.current, { margin: 20 })\n }\n }, [componentRef])\n\n useEffect(() => {\n if (null !== dropdownsRef.current) {\n delete dropdownsRef.current['census']\n delete dropdownsRef.current['var']\n delete dropdownsRef.current['custom']\n }\n }, [weighting.type])\n\n useEffect(() => {\n setWeightingDisabled(disabled || '*' == weighting.type || !weighting.items.length)\n }, [disabled, weighting])\n\n useEffect(() => {\n if (onLoad && 'function' === typeof onLoad) {\n onLoad()\n }\n }, [weighting, onLoad])\n\n const onSelect = value => {\n switch (value) {\n case 'census':\n onChange(\n weighting.active,\n value,\n ('census' == appliedWeighting.type\n ? appliedWeighting.items\n : 0 < censusOptions.length && censusOptions[0]['value']) || []\n )\n break\n case 'var':\n onChange(\n weighting.active,\n value,\n ('var' == appliedWeighting.type\n ? appliedWeighting.items\n : 0 < varOptions.length && [varOptions[0]['value']]) || []\n )\n break\n case 'custom':\n onChange(weighting.active, value, 'custom' == appliedWeighting.type ? appliedWeighting.items || [] : [])\n break\n default:\n onChange(false, value, [])\n break\n }\n\n setIsProcessing(false)\n }\n\n const onCensusSelect = value => {\n onChange(weighting.active, weighting.type, value.split('+'))\n\n setIsProcessing(false)\n }\n const onVariableSelect = value => {\n onChange(weighting.active, weighting.type, value.split('+'))\n\n setIsProcessing(false)\n }\n\n const onApply = () => {\n setIsProcessing(true)\n onUpdate()\n }\n const onCancel = () => {\n onChange(appliedWeighting.active || false, appliedWeighting.type || '*', appliedWeighting.items || [])\n }\n\n const renderButtons = (type = 'all') =>\n !weighted && appliedWeighting.active && 0 < appliedWeighting.items.length ? (\n \n onAdd()}>\n Add Dimension\n \n
\n \n {('all' == type || 'cancel' == type) && (\n
\n ) : null\n\n return (\n \n
\n )}\n {('all' == type || 'apply' == type) && (\n \n
\n )}\n \n {!weightingDisabled && (\n <>\n
\n )\n}\n\nWeighting.propTypes = {\n weighting: PropTypes.object.isRequired,\n appliedWeighting: PropTypes.object.isRequired,\n surveyData: PropTypes.object.isRequired,\n undefs: PropTypes.number,\n disabled: PropTypes.bool,\n onChange: PropTypes.func.isRequired,\n onUpdate: PropTypes.func.isRequired,\n onLoad: PropTypes.func\n}\n\nWeighting.displayName = 'Weighting'\n\nexport default Weighting\n","// lib\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport autobind from 'autobind-decorator'\nimport ADND from '@aytm/lib/adnd/ADND'\n\n// styles\nimport style from '@aytm/app/stats/page/xperts-debug/JsonFileUpload.module.scss'\n\nconst processUploadedFile = async files =>\n new Promise((resolve, reject) => {\n const file = files[0]\n const reader = new FileReader()\n reader.onload = event => {\n let data\n try {\n data = JSON.parse(event.target.result)\n } catch (error) {\n return reject(error)\n }\n return resolve([data])\n }\n reader.readAsText(file)\n })\n\nexport default class JsonFileUpload extends Component {\n static propTypes = {\n onFilesUploaded: PropTypes.func.isRequired,\n maxItems: PropTypes.number,\n sortFiles: PropTypes.oneOf(['asis', 'asc', 'desc']),\n selectOnClick: PropTypes.bool,\n content: PropTypes.func.isRequired\n }\n\n state = {\n dragOver: false,\n acceptFiles: true,\n progress: null\n }\n\n inputRef = React.createRef()\n\n dropAssetFileTarget = ADND.targets\n .files()\n .onDrop(this.onAssetFileDrop)\n .onEnter(this.onAssetFileDragEnter)\n .onLeave(this.onAssetFileDragLeave)\n .acceptDrop(this.acceptAssetFileDrop)\n\n @autobind\n connectDropTarget(ref) {\n this.dropAssetFileTarget.connect(ref)\n }\n\n componentDidMount() {\n this.mounted = true\n }\n\n componentWillUnmount() {\n this.mounted = false\n this.dropAssetFileTarget.disconnect()\n }\n\n @autobind\n onAssetFileDragEnter() {\n this.setState(state => {\n return {\n ...state,\n dragOver: true\n }\n })\n }\n\n @autobind\n onAssetFileDragLeave() {\n this.setState(state => {\n return {\n ...state,\n dragOver: false\n }\n })\n }\n\n @autobind\n acceptAssetFileDrop() {\n const { acceptFiles = true } = this.state\n return acceptFiles\n }\n\n @autobind\n onAssetFileDrop(...files) {\n if (files.length) {\n this.onDropFiles([files[0]])\n }\n }\n\n @autobind\n inputFilesSelected() {\n if (this.inputRef.current && this.inputRef.current.files && this.inputRef.current.files.length) {\n this.onDropFiles([this.inputRef.current.files[0]])\n }\n }\n\n @autobind\n onDropFiles(selectedFiles) {\n const { onFilesUploaded, sortFiles = 'asis' } = this.props\n\n const files =\n 'asc' === sortFiles\n ? sortFilesByFilenames(selectedFiles, 1)\n : 'desc' === sortFiles\n ? sortFilesByFilenames(selectedFiles, -1)\n : selectedFiles\n\n if ('function' === typeof onFilesUploaded) {\n this.setState(\n state => {\n return {\n ...state,\n acceptFiles: false\n }\n },\n () => {\n processUploadedFile(files).then(files => {\n if (this.mounted) {\n this.setState(\n state => {\n return {\n ...state,\n acceptFiles: true,\n progress: null\n }\n },\n () => {\n onFilesUploaded(files)\n }\n )\n }\n })\n }\n )\n }\n }\n\n render() {\n const { content, selectOnClick = true } = this.props\n const { acceptFiles = true, dragOver, progress } = this.state\n return (\n \n
\n \n )}\n \n onUpdate(event.value)}\n />\n \n
\n \n
\n {'census' == weighting.type && (\n <>\n \n (dropdownsRef.current['type'] = element)}\n placeholder=\"Choose weighting options\"\n value={weighting.type}\n options={weightingOptions}\n optionValue=\"value\"\n optionLabel=\"text\"\n fixedDropdownDir=\"bottom\"\n data-testid=\"weighting-type\"\n disabled={disabled}\n onChange={disabled ? null : event => onSelect(event.value)}\n onShow={disabled ? null : () => onShowDropdown('type')}\n onHide={disabled ? null : () => onHideDropdown('type')}\n />\n
\n \n
\n {renderButtons()}\n {appliedWeighting.active && 0 < appliedWeighting.items.length && (\n \n (dropdownsRef.current['census'] = element)}\n placeholder=\"Choose census options\"\n value={weighting.items.join('+')}\n options={censusOptions}\n optionValue=\"value\"\n optionLabel=\"text\"\n fixedDropdownDir=\"bottom\"\n data-testid=\"weighting-census\"\n disabled={disabled}\n onChange={disabled ? null : event => onCensusSelect(event.value)}\n onShow={disabled ? null : () => onShowDropdown('census')}\n onHide={disabled ? null : () => onHideDropdown('census')}\n />\n
\n \n
\n )}\n \n )}\n {'var' == weighting.type &&\n (0 < varOptions.length ? (\n <>\n \n \n Weighted by {appliedWeighting.items.slice(0, -1).join(', ')}\n {1 < appliedWeighting.items.length ? ' and ' : ''}\n {appliedWeighting.items[appliedWeighting.items.length - 1]}\n \n
\n Maximum Amplification of 1 response: x5\n
\n Minimum Effective Sample Size: 50%\n
\n To exceed these safe settings please{' '}\n \n contact us\n \n .\n
\n \n Maximum Amplification of 1 response: x5\n
\n Minimum Effective Sample Size: 50%\n
\n To exceed these safe settings please{' '}\n \n contact us\n \n .\n
\n
\n {renderButtons()}\n {0 < appliedWeighting.items.length && 0 > surveyData.customVariables.indexOf(appliedWeighting.items[0]) && (\n \n (dropdownsRef.current['var'] = element)}\n placeholder=\"Choose custom variable options\"\n value={weighting.items.join('+')}\n options={varOptions}\n optionValue=\"value\"\n optionLabel=\"text\"\n fixedDropdownDir=\"bottom\"\n data-testid=\"weighting-var\"\n disabled={disabled}\n onChange={disabled ? null : event => onVariableSelect(event.value)}\n onShow={disabled ? null : () => onShowDropdown('var')}\n onHide={disabled ? null : () => onHideDropdown('var')}\n />\n
\n \n
\n )}\n {weighted && 0 < surveyData.undefs && appliedWeighting.active && 0 < appliedWeighting.items.length && (\n Weighting wasn't applied
\n \n
\n )}\n \n ) : (\n <>\n {renderButtons('cancel')}\n \n Warning: some respondents don't have weights assigned. Weight of 1.0 was assumed for them.\n
\n \n
\n \n ))}\n {/* {'custom' == weighting.type && (\n <>\n \n You don't seem to have any custom variables. In order to weight by custom variables, please upload\n it first to this Results page.\n
\n\n Learn more »\n \n
\n \n
\n {uploading && progress ? (\n
\n ),\n [text, renderProgressText]\n )\n\n return (\n \n
\n )\n}\n\nProgressPanel.propTypes = {\n renderProgressText: PropTypes.func,\n progress: PropTypes.object.isRequired\n}\nexport function ProgressPanel(props) {\n const { progress = {}, renderProgressText } = props\n const { percents = 0, loadedFiles = 0, totalFiles = 1 } = progress || {}\n return (\n \n \n
\n {text || ''}
\n \n
\n )\n}\n","/* eslint-disable unicorn/no-unsafe-regex */\n\nconst labelMatch =\n /([^?@]|^)\\b((p?q)(\\d+[:-]\\d+|(\\d+\\.)+\\d+|(\\d+,)+\\d+|\\d+)([a-z]+(\\d+[:-]\\d+|(\\d+\\.)+\\d+|(\\d+,)+\\d+|\\d+))*([a-z])*)\\b/gi\nexport const errorLabelMatch =\n /(\\?\\b(p?q)(\\d+[:-]\\d+|(\\d+\\.)+\\d+|(\\d+,)+\\d+|\\d+)([a-z]+(\\d+[:-]\\d+|(\\d+\\.)+\\d+|(\\d+,)+\\d+|\\d+))*([a-z])*)\\b/gi\nexport default labelMatch\n","// lib\nimport labelMatch, { errorLabelMatch } from '@aytm/app/survey/editor/lib/logic/labels/labelMatch'\n\n// constants\n// eslint-disable-next-line unicorn/no-unsafe-regex\nexport const AYTM_LOGIC_STATEMENT_MATCH = /\\[(([^[\\]]+|\\[([^\\]]*][^[\\]]+))(\\[[^\\]]*][^[\\]]*)*)](?!])/gm\nexport const AYTM_LOGIC_ESCAPE_BRACKET_MATCH = /(\\[\\[+)[^[\\]]*(]]+)/gm\nexport const AYTM_LOGIC_ESCAPE_BRACKET_REGEXP = new RegExp(AYTM_LOGIC_ESCAPE_BRACKET_MATCH, 'm')\nexport const AYTM_LOGIC_STATEMENT_STRING_MATCH = /\"([^\"[\\]]*)\"/gm\nexport const AYTM_LOGIC_TOKEN_MATCH = /[a-z]\\w*/i\n\nexport function extractLogicStatementsFromText(text = '') {\n const statements = text.match(AYTM_LOGIC_STATEMENT_MATCH) || []\n return (\n statements\n // filter escaped bracket statement\n .filter(statement => !AYTM_LOGIC_ESCAPE_BRACKET_REGEXP.test(statement))\n // remove [ and ] from statements\n .map(statement => statement.slice(1, -1))\n )\n}\n\nexport function replaceLogicStatementsInText(text = '', replacer) {\n return text.replace(AYTM_LOGIC_STATEMENT_MATCH, statement =>\n AYTM_LOGIC_ESCAPE_BRACKET_REGEXP.test(statement) ? statement : `[${replacer(statement.slice(1, -1))}]`\n )\n}\n\nexport function extractRefsFromLogicStatement(statement = '') {\n const refs = []\n let match\n while (null !== (match = labelMatch.exec(statement))) {\n refs.push(match[2])\n }\n return refs\n}\n\nexport function extractErrorRefsFromLogicStatement(statement = '') {\n const refs = []\n let match\n while (null !== (match = errorLabelMatch.exec(statement))) {\n refs.push(match[1])\n }\n return refs\n}\n","// lib\nimport {\n AYTM_LOGIC_STATEMENT_MATCH,\n AYTM_LOGIC_ESCAPE_BRACKET_MATCH\n} from '@aytm/app/survey/editor/lib/logic/statements'\n\nexport default function countText(text = '') {\n return text\n .replace(AYTM_LOGIC_STATEMENT_MATCH, '')\n .replace(AYTM_LOGIC_ESCAPE_BRACKET_MATCH, match => match.slice(1, -1)).length\n}\n","// lib\nimport { Map } from 'immutable'\n\n// features\nconst featuresStore = {\n //editorUID: features: Map()\n}\n\nexport function getFeatures(editorUID) {\n return featuresStore[editorUID] || Map()\n}\nexport function getFeature(editorUID, featureUID) {\n return getFeatures(editorUID).get(featureUID) || Map({ status: 'on' })\n}\nexport function getFeatureUpgradePackage(editorUID, featureUID) {\n return featureUID ? getFeatures(editorUID).getIn([featureUID, 'onPackage'], null) : null\n}\nexport function getFeatureStatus(editorUID, featureUID) {\n return getFeatures(editorUID).getIn([featureUID, 'status']) || 'off'\n}\nexport function hasFeatureStatus(editorUID, featureUID, ...statuses) {\n const feature = getFeature(editorUID, featureUID)\n return feature && feature.has('status') && statuses.includes(feature.get('status'))\n}\nexport function isFeatureOn(editorUID, featureUID) {\n return hasFeatureStatus(editorUID, featureUID, 'on')\n}\nexport function isFeatureOff(editorUID, featureUID) {\n return hasFeatureStatus(editorUID, featureUID, 'off')\n}\nexport function setFeatures(editorUID, features) {\n featuresStore[editorUID] = features\n}\n\nfunction questionTypeFeature(editorUID, questionType, questionMode = '') {\n switch (questionType) {\n case 'va': {\n return getFeature(editorUID, 'video_response')\n }\n case 'ir': {\n return getFeature(editorUID, 'image_response')\n }\n case 'cjc': {\n return getFeature(editorUID, 'conjoint_lite')\n }\n case 'cjd': {\n return getFeature(editorUID, 'conjoint_deep')\n }\n case 'md': {\n return 'express' == questionMode ? getFeature(editorUID, 'maxdiff') : getFeature(editorUID, 'maxdiff_hd')\n }\n default: {\n return getFeature(editorUID, questionType)\n }\n }\n}\nexport function getQuestionTypeStatus(editorUID, questionType, questionMode) {\n return questionTypeFeature(editorUID, questionType, questionMode).get('status', 'on')\n}\nexport function getQuestionTypeUpgradePackage(editorUID, questionType, questionMode) {\n return questionTypeFeature(editorUID, questionType, questionMode).get('onPackage')\n}\nexport function isQuestionTypeAvailable(editorUID, questionType, questionMode) {\n return ['on', 'available'].includes(getQuestionTypeStatus(editorUID, questionType, questionMode))\n}\n","export function base(projectUID) {\n return projectUID ? `/surveys/${projectUID}` : '/surveys'\n}\n\nexport function checkout(projectUID) {\n return `/surveys/${projectUID}/checkout`\n}\n\nexport function validate(projectUID) {\n return `/surveys/${projectUID}/validate_structure`\n}\n\nexport function requestAccessToken(projectUID) {\n return `/surveys/${projectUID}/request_access`\n}\n\nexport function transferControl(projectUID) {\n return `/surveys/${projectUID}/transfer_control`\n}\n\nexport const editAction = 'edit'\n\nexport const viewAction = 'view'\n\nexport const correctAction = 'correct'\n\nexport const versionAction = 'version'\n\nexport const checkoutAction = 'launch_checkout'\n\nexport const newTargetMarketAction = 'new'\n\nexport const translateAction = 'translate'\n\nexport const editTargetMarketAction = 'tm'\n\nexport const graphQLEndPoint = '/graphql'\n\nimport {\n getImageAssetPath,\n IMAGE_ASSET_PATH_FILTER_RESIZE_TO_FIT,\n IMAGE_ASSET_PATH_GRAVITY_CENTER\n} from '@aytm/lib/common/assets'\nexport function imageAsset(\n path,\n {\n width = 250,\n height = 250,\n filter = IMAGE_ASSET_PATH_FILTER_RESIZE_TO_FIT,\n backgroundColor = 'white',\n unsharp = false,\n gravity = IMAGE_ASSET_PATH_GRAVITY_CENTER,\n animated = false,\n trim = false\n } = {}\n) {\n return getImageAssetPath({\n path,\n filter,\n width,\n height,\n backgroundColor,\n unsharp,\n gravity,\n animated,\n trim\n })\n}\n\nexport function getMultilingualRoute(researcherLanguage, languageUID = '', base = '/') {\n return !researcherLanguage && !languageUID\n ? `${base}${translateAction}`\n : languageUID === researcherLanguage\n ? `${base}${editAction}`\n : `${base}${translateAction}/${viewAction}/${languageUID}`\n}\n","import ProgressivePromise from '@aytm/lib/AsyncJobManager/ProgressivePromise'\nimport railsPostFetch, { getCSRFToken } from '@aytm/lib/common/rails-post-fetch'\nimport fetch from 'isomorphic-fetch'\nimport uploadWithProgress from '@aytm/lib/common/upload-with-progress'\nimport { headersFromGoogleUploadUrl } from '@aytm/lib/common/google-cloud-url'\n\nexport default function ImageAssetUploadJob({ createAssetPath, file, params = {} } = {}) {\n return () =>\n new ProgressivePromise((resolve, reject, progress) => {\n const totalProgress = file.size\n // CREATE ASSET\n\n progress(0, totalProgress) // set progress to 0\n\n const createParams = Object.assign({}, params, {\n filename: file.name,\n content_type: file.type,\n filesize: file.size\n })\n const asset = {}\n\n railsPostFetch(createAssetPath, {\n body: JSON.stringify(createParams)\n })\n .then(response => (response.ok ? response.json() : {}))\n\n // UPLOAD IMAGE\n .then(createdAsset => {\n Object.assign(asset, createdAsset)\n\n if (\n !asset.uid ||\n 'uploading' !== asset.status ||\n !asset.upload_urls ||\n !asset.upload_urls.binary_upload_url ||\n !asset.upload_urls.finish_upload_url ||\n !asset.upload_urls.status_upload_url\n ) {\n return Promise.reject(new Error('createAsset - invalid response data'))\n }\n\n return uploadWithProgress(\n asset.upload_urls.binary_upload_url,\n {\n method: 'PUT',\n headers: {\n 'Content-Type': file.type,\n ...headersFromGoogleUploadUrl(asset.upload_urls.binary_upload_url)\n },\n body: file\n },\n progressEvent => {\n progress(Math.round(progressEvent.loaded * 0.9), totalProgress) // set progress for uploaded bytes with correction 100% -> 90%\n }\n )\n })\n\n // FINISH UPLOAD\n .then(() =>\n fetch(asset.upload_urls.finish_upload_url, {\n method: 'POST',\n headers: {\n 'X-CSRF-Token': getCSRFToken()\n },\n mode: 'cors'\n })\n )\n\n // CHECK STATUS\n .then(finishResponse => {\n if (finishResponse.ok) {\n progress(Math.round(file.size * 0.95), totalProgress) // set progress to 95%\n return new Promise((resolve, reject) => {\n const checkStatus = () => {\n fetch(asset.upload_urls.status_upload_url, {\n method: 'POST',\n mode: 'cors',\n headers: {\n 'X-CSRF-Token': getCSRFToken()\n },\n Accept: 'application/json'\n })\n .then(response => (response.ok ? response.json() : {}))\n .then(assetStatus => {\n switch (assetStatus.status) {\n case 'ready':\n case 'source_valid': {\n progress(totalProgress, totalProgress) // set progress to 100%\n resolve(\n Object.assign({}, asset, assetStatus, {\n status: 'ready',\n fileName: file.name,\n contentType: file.type,\n fileSize: file.size\n })\n )\n break\n }\n case 'processing': {\n setTimeout(checkStatus, 1000)\n break\n }\n default: {\n reject(assetStatus)\n break\n }\n }\n })\n .catch(_error => {\n setTimeout(checkStatus, 1000)\n })\n }\n setTimeout(checkStatus, 500)\n })\n } else {\n return Promise.reject(new Error('unable to finish upload'))\n }\n })\n .then(resolve, reject)\n .catch(error => reject(error))\n })\n}\n","import ProgressivePromise from '@aytm/lib/AsyncJobManager/ProgressivePromise'\nimport railsPostFetch, { getCSRFToken } from '@aytm/lib/common/rails-post-fetch'\nimport fetch from 'isomorphic-fetch'\nimport uploadWithProgress from '@aytm/lib/common/upload-with-progress'\nimport { headersFromGoogleUploadUrl } from '@aytm/lib/common/google-cloud-url'\n\nexport default function VideoAssetUploadJob({ createAssetPath, file, params = {} } = {}) {\n return () =>\n new ProgressivePromise((resolve, reject, progress) => {\n const totalProgress = file.size\n // CREATE ASSET\n\n progress(0, totalProgress) // set progress to 0\n\n const createParams = Object.assign({}, params, {\n filename: file.name,\n content_type: file.type,\n filesize: file.size\n })\n const asset = {}\n\n railsPostFetch(createAssetPath, {\n body: JSON.stringify(createParams)\n })\n .then(response => (response.ok ? response.json() : {}))\n\n // UPLOAD VIDEO\n .then(createdAsset => {\n Object.assign(asset, createdAsset)\n\n if (\n !asset.uid ||\n 'uploading' !== asset.status ||\n !asset.upload_urls ||\n !asset.upload_urls.binary_upload_url ||\n !asset.upload_urls.finish_upload_url ||\n !asset.upload_urls.status_upload_url\n ) {\n return Promise.reject(new Error('createAsset - invalid response data'))\n }\n\n return uploadWithProgress(\n asset.upload_urls.binary_upload_url,\n {\n method: 'PUT',\n headers: {\n 'Content-Type': file.type,\n ...headersFromGoogleUploadUrl(asset.upload_urls.binary_upload_url)\n },\n body: file\n },\n progressEvent => {\n progress(Math.round(progressEvent.loaded * 0.5), totalProgress) // set progress for uploaded bytes with correction 100% -> 50%\n }\n )\n })\n\n // FINISH UPLOAD\n .then(() =>\n fetch(asset.upload_urls.finish_upload_url, {\n method: 'POST',\n mode: 'cors',\n headers: {\n 'X-CSRF-Token': getCSRFToken()\n }\n })\n )\n\n // CHECK STATUS\n .then(finishResponse => {\n if (finishResponse.ok) {\n let processingVirtualProgress = 0.55\n progress(Math.round(totalProgress * processingVirtualProgress), totalProgress) // set progress to 55%\n return new Promise((resolve, reject) => {\n const checkStatus = () => {\n fetch(asset.upload_urls.status_upload_url, {\n method: 'POST',\n mode: 'cors',\n headers: {\n 'X-CSRF-Token': getCSRFToken()\n },\n Accept: 'application/json'\n })\n .then(response => (response.ok ? response.json() : {}))\n .then(assetStatus => {\n switch (assetStatus.status) {\n case 'ready':\n case 'source_valid': {\n progress(totalProgress, totalProgress) // set progress to 100%\n resolve(\n Object.assign({}, asset, assetStatus, {\n status: 'ready',\n fileName: file.name,\n contentType: file.type,\n fileSize: file.size\n })\n )\n break\n }\n case 'processing': {\n processingVirtualProgress = Math.min(processingVirtualProgress + 0.05, 0.9)\n progress(totalProgress * processingVirtualProgress, totalProgress) // set progress to processingVirtualProgress%\n setTimeout(checkStatus, 2000)\n break\n }\n default: {\n reject(assetStatus)\n break\n }\n }\n })\n .catch(_error => {\n setTimeout(checkStatus, 2000)\n })\n }\n setTimeout(checkStatus, 2000)\n })\n } else {\n return Promise.reject(new Error('unable to finish upload'))\n }\n })\n .then(resolve, reject)\n .catch(error => reject(error))\n })\n}\n","import { IImageAsset } from '@aytm/app/swidget/base/modules/images/types'\n\nexport const IMAGE_ASSET_PATH_FILTER_RESIZE_TO_STRETCH = 'resizest'\nexport const IMAGE_ASSET_PATH_FILTER_RESIZE_TO_LIMIT = 'resizelm'\nexport const IMAGE_ASSET_PATH_FILTER_RESIZE_TO_FIT = 'resizeft'\nexport const IMAGE_ASSET_PATH_FILTER_RESIZE_TO_FILL = 'resizefl'\nexport const IMAGE_ASSET_PATH_FILTER_RESIZE_AND_PAD = 'resizepd'\nexport const IMAGE_ASSET_PATH_FILTER_SMART_CROP = 'smart_crop'\n\nexport const IMAGE_ASSET_SIZE_SMALL = 150\nexport const IMAGE_ASSET_SIZE_MIDDLE = 600\nexport const IMAGE_ASSET_SIZE_BIG = 1920\nexport const OLD_IMAGE_ASSET_WIDTH = 150\nexport const OLD_IMAGE_ASSET_HEIGHT = 68\nexport const OLD_IMAGE_ASSET_WIDTH_MEDIUM = 120\nexport const OLD_IMAGE_ASSET_HEIGHT_MEDIUM = 120\n\nexport const IMAGE_ASSET_PATH_GRAVITY_CENTER = 'c'\n\n// ON CHANGES: please also update this function in public/javascripts/_ui/js/image_resizer.js (legacy code support)\nexport function getImageAssetPath({\n host = (window as { assets_host?: string }).assets_host || '/',\n width,\n height,\n pathPrefix = 'media/cache',\n path = 'no_image',\n filter = '',\n backgroundColor = 'transparent',\n unsharp = false,\n gravity,\n animated = false,\n trim = false,\n json = false\n}: {\n host?: string\n width?: number\n height?: number\n pathPrefix?: string\n path?: string\n filter?: string\n backgroundColor?: string\n unsharp?: boolean\n gravity?: string\n animated?: boolean\n trim?: boolean\n json?: boolean\n} = {}): string {\n return `${\n // host\n '/' === host[host.length - 1] ? host : host + '/'\n }${\n // prefix\n pathPrefix\n }/${json ? 'json' : 'resolve'}/${\n // filter\n filter\n }${\n // dimensions\n width && height ? `_${width}x${height}` : ''\n }${\n // backgroundColor\n 'none' === backgroundColor ? '' : 'string' === typeof backgroundColor ? `_${backgroundColor.toLowerCase()}` : ''\n }${\n // gravity\n gravity && (IMAGE_ASSET_PATH_FILTER_RESIZE_TO_FILL === filter || IMAGE_ASSET_PATH_FILTER_RESIZE_AND_PAD === filter)\n ? `_${gravity}`\n : ''\n }${\n // unsharp\n unsharp ? '_us' : ''\n }${\n // animated\n animated ? '_an' : ''\n }${\n // trim\n trim ? '_trim' : ''\n }/${\n // path\n path\n }`\n}\n\nexport function getSmallAssetPath(asset: IImageAsset, fill?: boolean): string {\n return getImageAssetPath({\n width: IMAGE_ASSET_SIZE_SMALL,\n height: IMAGE_ASSET_SIZE_SMALL,\n filter: fill ? IMAGE_ASSET_PATH_FILTER_RESIZE_TO_FILL : IMAGE_ASSET_PATH_FILTER_RESIZE_TO_LIMIT,\n path: asset?.original_path,\n backgroundColor: 'white'\n })\n}\n\nexport function getOldSmallAssetPath(asset: IImageAsset): string {\n return getImageAssetPath({\n width: OLD_IMAGE_ASSET_WIDTH,\n height: OLD_IMAGE_ASSET_HEIGHT,\n filter: IMAGE_ASSET_PATH_FILTER_RESIZE_AND_PAD,\n backgroundColor: 'white',\n animated: true,\n path: asset?.original_path\n })\n}\n\nexport function getOldMediumAssetPath(asset: IImageAsset): string {\n return getImageAssetPath({\n width: OLD_IMAGE_ASSET_WIDTH_MEDIUM,\n height: OLD_IMAGE_ASSET_HEIGHT_MEDIUM,\n filter: IMAGE_ASSET_PATH_FILTER_RESIZE_AND_PAD,\n backgroundColor: 'white',\n animated: true,\n path: asset?.original_path\n })\n}\n\nexport function getOldLargeAssetPath(asset: IImageAsset): string {\n return getImageAssetPath({\n width: IMAGE_ASSET_SIZE_MIDDLE,\n height: IMAGE_ASSET_SIZE_MIDDLE,\n filter: IMAGE_ASSET_PATH_FILTER_RESIZE_TO_LIMIT,\n backgroundColor: 'white',\n animated: true,\n path: asset?.original_path\n })\n}\n\nexport function getMediumAssetPath(asset: IImageAsset, background?: string): string {\n return getImageAssetPath({\n width: IMAGE_ASSET_SIZE_MIDDLE,\n height: IMAGE_ASSET_SIZE_MIDDLE,\n filter: IMAGE_ASSET_PATH_FILTER_RESIZE_TO_LIMIT,\n path: asset?.original_path,\n animated: true,\n backgroundColor: background || 'white'\n })\n}\n\nexport function getBigAssetPath(asset: IImageAsset, background?: string): string {\n return getImageAssetPath({\n width: IMAGE_ASSET_SIZE_BIG,\n height: IMAGE_ASSET_SIZE_BIG,\n filter: IMAGE_ASSET_PATH_FILTER_RESIZE_TO_LIMIT,\n path: asset?.original_path,\n animated: true,\n backgroundColor: background || 'white'\n })\n}\n","import React, { Component } from 'react'\nimport hoistNonReactStatics from 'hoist-non-react-statics'\nimport PropTypes from 'prop-types'\n\nexport function nameContextProvider(name) {\n return `${name}ContextProvider`\n}\n\n// provider subscriptions class\nexport class ContextProviderSubscriptions {\n constructor({ onSubscribe, onUnsubscribe, onUnsubscribeAll, onProviderUnmount } = {}) {\n this.listeners = []\n this.values = {}\n this.subscribe = this.subscribe.bind(this)\n this.unsubscribe = this.unsubscribe.bind(this)\n this.onSubscribe = onSubscribe\n this.onUnsubscribe = onUnsubscribe\n this.onUnsubscribeAll = onUnsubscribeAll\n this.onProviderUnmount = onProviderUnmount\n }\n updateValues(newValues) {\n // notify listeners\n if (this.listeners.length) {\n for (let i = 0; i < this.listeners.length; i++) {\n const listener = this.listeners[i]\n if (listener.subscribeOn) {\n const subscribedValues = {}\n let updated = false\n for (let i = 0; i < listener.subscribeOn.length; i++) {\n const key = listener.subscribeOn[i]\n if (!updated && newValues[key] != this.values[key]) {\n updated = true\n }\n subscribedValues[key] = newValues[key]\n }\n if (updated) {\n listener(subscribedValues)\n }\n } else {\n listener(newValues)\n }\n }\n }\n // set values\n this.values = newValues\n }\n subscribe(listener) {\n // add listener if it is not exists in listeners list\n if (!this.listeners.includes(listener)) {\n this.listeners.push(listener)\n }\n // send last values to listener\n listener(this.values)\n // create bound unsubscribe function\n const unsubscribe = function () {\n return this.unsubscribe(listener)\n }.bind(this)\n // notify onSubscribe callback\n if (this.onSubscribe) {\n this.onSubscribe({ listener, unsubscribe, listeners: this.listeners })\n }\n // return unsubscribe function\n return unsubscribe\n }\n unsubscribe(listener) {\n let unsubscribed = false\n const listenerIndex = this.listeners.indexOf(listener)\n if (listenerIndex >= 0) {\n this.listeners.splice(listenerIndex, 1)\n unsubscribed = true\n }\n // notify onUnsubscribe callback\n if (this.onUnsubscribe) {\n this.onUnsubscribe({ listener, unsubscribed, listeners: this.listeners })\n }\n // notify onUnsubscribeAll callback\n if (this.onUnsubscribeAll && !this.listeners.length) {\n this.onUnsubscribeAll()\n }\n // return unsubscribed status\n return unsubscribed\n }\n providerUnmount() {\n // unsubscribe all listeners\n this.listeners.forEach(this.unsubscribe)\n // notify onProviderUnmount callback\n if (this.onProviderUnmount) {\n this.onProviderUnmount()\n }\n }\n}\n\nexport default function ContextProvider(options = {}) {\n const { name, propTypes, contextTypes, values, shouldUpdate, mapToProps } = options\n\n const propsMapper =\n 'all' == mapToProps\n ? function (values) {\n return values\n }\n : Array.isArray(mapToProps)\n ? function (values) {\n return mapToProps.reduce(function (props, key) {\n props[key] = values[key]\n return props\n }, {})\n }\n : 'object' == typeof mapToProps\n ? function (values) {\n return Object.keys(mapToProps).reduce(function (props, key) {\n props[mapToProps[key]] = values[key]\n return props\n }, {})\n }\n : 'function' == typeof mapToProps\n ? mapToProps\n : null\n\n return function (ProviderComponent) {\n if (null == values || null == name) {\n // nothing to provide\n return ProviderComponent\n }\n\n // ProviderComponent display name\n const providerComponentDisplayName = ProviderComponent.displayName || ProviderComponent.name || 'Component'\n\n // ${name}ContextProvider\n const thisNameContextProvider = nameContextProvider(name)\n\n // HOC class\n class ContextProviderComponent extends Component {\n // context propTypes\n static propTypes = propTypes\n\n // ref to wrapped component\n static WrappedComponent = ProviderComponent\n\n // display name\n static displayName = `ContextProvider[${name}](${providerComponentDisplayName})`\n\n // ref to context provider options\n static ContextProviderOptions = options\n\n // put context subscriptions into context\n static childContextTypes = {\n [thisNameContextProvider]: PropTypes.instanceOf(ContextProviderSubscriptions)\n }\n getChildContext() {\n return {\n [thisNameContextProvider]: this.subscriptions\n }\n }\n\n // fetch context values in constructor\n constructor(props) {\n super(props)\n this.fetchContextValues = this.fetchContextValues.bind(this)\n this.saveWrappedRef = this.saveWrappedRef.bind(this)\n this.saveWrappedComponentRef = this.saveWrappedComponentRef.bind(this)\n this.subscriptions = new ContextProviderSubscriptions()\n this.fetchContextValues(props)\n }\n\n // fetch context values and (optionaly) map it to props\n fetchContextValues(props) {\n // fetch values\n const fetchedValues = values.call(this, props) || {}\n // notify subscriptions\n this.subscriptions.updateValues(fetchedValues)\n // check context types\n if ('development' == process.env.NODE_ENV && contextTypes) {\n PropTypes.checkPropTypes(\n contextTypes,\n fetchedValues,\n `ContextProvider[${name}]`,\n providerComponentDisplayName\n )\n }\n // map values to props\n if (propsMapper) {\n this.contextProps = propsMapper.call(this, fetchedValues)\n }\n }\n\n // update context on props update if needed\n shouldComponentUpdate(nextProps) {\n if (shouldUpdate) {\n if (shouldUpdate.call(this, nextProps, this.props)) {\n this.fetchContextValues(nextProps)\n }\n } else {\n this.fetchContextValues(nextProps)\n }\n return true\n }\n\n // unsubscribe on unmount\n componentWillUnmount() {\n this.subscriptions.providerUnmount()\n }\n\n // save references from ManagedRenderComponent\n saveWrappedRef(name, element) {\n this[`ref${name}`] = element\n if (this.props.saveRef) {\n this.props.saveRef(name, element)\n }\n }\n\n // save wrapped component ref\n saveWrappedComponentRef(component) {\n this.refWrappedComponent = component\n }\n\n // render ProviderComponent with component props and context props\n render() {\n return (\n \n
\n \n
\n {'function' === typeof renderProgressText ? (\n {renderProgressText({ loadedFiles, totalFiles })}
\n ) : null}\n \n Color Picker\n
\n \n \n
\n \n
\n \n \n \n \n
\n )\n }\n}\n\nclass ColorPicker extends Component {\n static propTypes = {\n color: PropTypes.string.isRequired,\n readOnly: PropTypes.bool,\n onChange: PropTypes.func.isRequired\n }\n\n @autobind\n onInputChange(value) {\n const { onChange } = this.props\n if (value.hex) {\n colorHelper.isValidHex(value.hex) && onChange(value)\n }\n }\n\n render() {\n const { color, readOnly, onChange } = this.props\n\n return (\n \n
\n )\n }\n}\n\nexport default CustomPicker(ColorPicker)\n","// lib\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { Map, List } from 'immutable'\nimport { capitalize } from '@aytm/lib/common/func'\n\n// resources\nimport { getFeatureUpgradePackage } from '@aytm/app/survey/editor/resources/features'\n\n// components\nimport { CompositeDecorator } from 'draft-js'\nimport Popup, { PopupCloseButton } from '@aytm/lib/rfd-ui/components/basic/popup'\n\n// styles\nimport style from '@aytm/lib/rfd-ui/styles/advanced/draft-js-decorators.module.scss'\n\n// constants\nexport const ERROR_TYPES = {\n ref: {\n text: 'questionDoesntExist',\n type: 'warning',\n color: '#F7931E',\n style: style.textWarning\n },\n alias: {\n text: 'aliasError',\n type: 'warning',\n color: '#F7931E',\n style: style.textWarning\n },\n cluster: {\n text: 'clusterDoesntExist',\n type: 'warning',\n color: '#F7931E',\n style: style.textWarning\n },\n trait: {\n text: 'traitDoesntExist',\n type: 'error',\n color: '#9D0000',\n style: style.textError\n },\n sref: {\n text: 'serverReferenceError',\n type: 'warning',\n color: '#F7931E',\n style: style.textWarning\n },\n parse: {\n text: 'notValidRule',\n type: 'error',\n color: '#9D0000',\n style: style.textError\n },\n aytm_logic_required: {\n text: 'upgradeRequiredText',\n type: 'warning',\n color: '#F7931E',\n style: style.textWarning\n },\n old: {\n text: 'referenceIsOutdated',\n type: 'warning-special',\n color: '#d05817',\n style: style.textOld\n },\n invalid_logic: {\n color: '#9D0000',\n text: 'notValidRule',\n type: 'error',\n style: style.textError\n },\n old_translate: {\n color: '#17d0d0',\n text: 'oldTranslate',\n type: 'error',\n style: style.textOld\n }\n}\nconst templateVariablesRegex = /{([A-Z_a-z]*)}/g\n\n// \n
\n \n
\n \n
\n \n
\n \n \n \n \n
\n )}\n className={`rfd-ui-popup-notification rfd-ui-popup-notification-${errorTypes[errorType]?.type}`}\n direction=\"topleft\"\n >\n {textProps.children}\n \n ) : (\n {textProps.children}\n )\n }\n}\n\nfunction extractErrorObject(errors, errorText) {\n return errors.find(error => {\n const text = error.get('text')\n const type = error.get('type')\n if (!text) {\n return false\n }\n if ('old_translate' === type) {\n return true\n }\n\n const errorTextCI = errorText.toUpperCase()\n const errorTextTrimmed = errorTextCI.trim()\n const normalizedText = text\n .replace(/</gi, '<')\n .replace(/>/gi, '>')\n .replace(/&/gi, '&')\n .toUpperCase()\n .toUpperCase()\n const normalizedTextTrimmed = normalizedText.trim()\n\n if (normalizedTextTrimmed == errorTextTrimmed) {\n return true\n }\n\n return 'parse' === type\n ? '[' + normalizedText + ']' === errorText.toUpperCase()\n : 'cluster' === type\n ? '\"' + normalizedText + '\"' === errorText.toUpperCase() || \"'\" + normalizedText + \"'\" === errorText.toUpperCase()\n : false\n })\n}\nfunction extractErrorHint(errorObj, errorKey) {\n return errorObj\n ? 0 <= ['index', 'rule'].indexOf(errorKey)\n ? `${errorObj.get('text')}${errorObj.get('subText') ? ` (${errorObj.get('subText')})` : ''}`\n : errorObj.get(errorKey)\n : ''\n}\nfunction extractErrorTypeText(locale, errorObj, errorType, errorTypes = ERROR_TYPES) {\n const errorString =\n (errorObj && errorObj.get('desc')) || locale.get(errorTypes[errorType].text) || locale.get('notValidRule')\n\n if ('aytm_logic_required' === errorType) {\n const upgradePackage = getFeatureUpgradePackage('main', 'aytm_logic') || Map()\n const packageName = capitalize(upgradePackage.get('name', '*upgrade package name*'))\n const packageURL = upgradePackage.get('upgradeURL', '*upgrade url*')\n return (\n \n {'aytm_logic_required' === errorType ? (\n {errorTypeText}\n ) : (\n \n )}\n {'old' === errorType && (\n \n
\n
\n updateOldRefs(errorObj)}>{locale.get('okHere')}\n | \n updateOldRefs(errorObj, true)}>{locale.get('okHereAndElsewhere')}\n \n )}\n {'old_translate' === errorType && (\n \n
\n
\n disableValidation(errorObj)}>{locale.get('okHere')}\n | \n disableValidation(errorObj, true)}>{locale.get('okHereAndOtherLanguages')}\n \n )}\n
\n \n
\n updateOldRefs(errorObj)}>{locale.get('okHere')}\n | \n updateOldRefs(errorObj, true)}>{locale.get('okHereAndElsewhere')}\n \n )}\n {'old_translate' === errorType && (\n \n
\n
\n disableValidation(errorObj)}>{locale.get('okHere')}\n | \n disableValidation(errorObj, true)}>{locale.get('okHereAndOtherLanguages')}\n \n )}\n
\n {upgradePackage && (\n \n \n \n )}\n
\n )\n } else {\n const replacements = {}\n let matchArr\n while (null !== (matchArr = templateVariablesRegex.exec(errorString))) {\n replacements[matchArr[0]] = extractErrorHint(errorObj, matchArr[1])\n }\n return Object.keys(replacements)\n .reduce((str, key) => str.replace(new RegExp(key, 'g'), replacements[key].toUpperCase()), errorString)\n .replace(/</gi, '<')\n .replace(/>/gi, '>')\n }\n}\n\nconst createErrorsDecoratorComponent = (store, errorTypes = ERROR_TYPES) => {\n const ErrorsDecoratorComponent = props => {\n const errors = store.getErrors()\n return errors ? (\n \n
\n \n)\n\nSuggestionItem.propTypes = {\n index: PropTypes.number,\n suggestion: PropTypes.object,\n selectSuggestion: PropTypes.func,\n selectedIndex: PropTypes.number\n}\n\nexport default SuggestionItem\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport autobind from 'autobind-decorator'\nimport Portal from '@aytm/lib/rfd-ui/components/basic/portal'\nimport styles from '@aytm/lib/rfd-ui/styles/SuggestionsComponent.module.scss'\nimport getSelectionCoords from '@aytm/lib/rfd-ui/components/advanced/lib/draft-js/suggestionsPlugin/lib/get-selection-coords'\nimport SuggestionItem from '@aytm/lib/rfd-ui/components/advanced/lib/draft-js/suggestionsPlugin/components/SuggestionItem'\n\nconst KEY_UP = 'ArrowUp'\nconst KEY_DOWN = 'ArrowDown'\nconst KEY_ENTER = 'Enter'\nconst KEY_PAGE_UP = 'PageUp'\nconst KEY_PAGE_DOWN = 'PageDown'\n\nconst DROPDOWN_OFFSET_X_DEFAULT = 10\nconst DROPDOWN_OFFSET_Y = 24\n\nexport default class SuggestionsComponent extends React.PureComponent {\n static propTypes = {\n items: PropTypes.array,\n selectSuggestion: PropTypes.func,\n SuggestionsItemComponent: PropTypes.node,\n visibility: PropTypes.bool\n }\n\n constructor(props) {\n super(props)\n const { items = [], visibility } = props\n this.refItems = React.createRef()\n this.timeoutId = null\n this.state = {\n selectedIndex: 0,\n portalStyles: this.calculatePortalStyles(items, props),\n items,\n visibility,\n pageX: 0,\n pageY: 0\n }\n }\n\n // @NOTICE: method for external usage\n @autobind\n updateItems(items, visibility) {\n const preselectedIndex = items.map(({ selected }) => selected).indexOf(true)\n const index = -1 === preselectedIndex ? 0 : preselectedIndex\n\n this.setState({ selectedIndex: index, items, visibility }, () => {\n this.timeoutId = setTimeout(() => {\n this.scrollToItem({ index, force: true })\n this.updatePosition(items)\n this.timeoutId = null\n\n clearTimeout(this.timeoutId)\n })\n })\n }\n\n // @NOTICE: method for external usage\n @autobind\n updatePosition() {\n setTimeout(() => {\n this.setState({\n portalStyles: this.calculatePortalStyles(this.state.items, this.props)\n })\n })\n }\n\n @autobind\n calculateDropdownOffsetTop() {\n return DROPDOWN_OFFSET_Y\n }\n\n @autobind\n extractDropdownOffsetText(items) {\n return items && items[0] && items[0].offsetText\n }\n\n @autobind\n calculateDropdownTextOffsetLeft(items, cursorTextStyle) {\n const offsetText = this.extractDropdownOffsetText(items)\n\n if (offsetText && cursorTextStyle) {\n const element = document.createElement('div')\n\n element.textContent = offsetText.replace(' ', '\\u00A0')\n element.style.font = cursorTextStyle\n element.style.position = 'absolute'\n element.style.visibility = 'hidden'\n element.style.opacity = '0'\n element.style.zIndex = -1\n\n document.body.appendChild(element)\n\n const rects = element.getClientRects()\n\n document.body.removeChild(element)\n\n if (rects && rects[0] && rects[0].width) {\n return Math.ceil(rects[0].width)\n }\n }\n return 0\n }\n\n @autobind\n calculateDropdownOffsetLeft({ items, itemsElementRects, selectionCoords, props }) {\n const itemsWidth = itemsElementRects[0].width\n const textOffsetLeft = this.calculateDropdownTextOffsetLeft(items, props.cursorTextStyle)\n const offset = selectionCoords.x + itemsWidth - DROPDOWN_OFFSET_X_DEFAULT\n\n return offset < 0 ? offset - textOffsetLeft : -textOffsetLeft\n }\n\n @autobind\n calculatePortalStyles(items = [], props) {\n if (this.refItems.current) {\n const itemsElement = this.refItems.current\n const itemsElementRects = itemsElement.getClientRects()\n\n if (itemsElementRects && itemsElementRects[0]) {\n const selectionCoords = getSelectionCoords()\n const elementOffsetTop = window.scrollY || document.documentElement.scrollTop\n const elementOffsetLeft = window.scrollX || document.documentElement.scrollLeft\n const dropdownOffsetLeft = this.calculateDropdownOffsetLeft({\n items,\n itemsElementRects,\n selectionCoords,\n props\n })\n const dropdownOffsetTop = this.calculateDropdownOffsetTop()\n\n return {\n top: Math.floor(selectionCoords.y + dropdownOffsetTop + elementOffsetTop),\n left: Math.floor(selectionCoords.x + elementOffsetLeft + dropdownOffsetLeft)\n }\n }\n }\n\n return {\n visibility: 'hidden',\n x: 0,\n y: 0\n }\n }\n\n @autobind\n calculateItemIndexByHeightLimit(heightLimit) {\n const items = this.state.items\n\n if (!items || !items.length) {\n return 0\n }\n\n let index = 0\n let height = 0\n\n while (index < items.length && height < heightLimit) {\n const element = document.querySelector(`#suggestion-item-${index}`)\n\n height += element.clientHeight\n index++\n }\n\n return index\n }\n\n @autobind\n calculatePageDownItemIndex() {\n const itemsElement = this.refItems.current\n const heightLimit = itemsElement.scrollTop + itemsElement.clientHeight\n\n if (!itemsElement) {\n return 0\n }\n\n return this.calculateItemIndexByHeightLimit(heightLimit)\n }\n\n @autobind\n calculatePageUpItemIndex() {\n const itemsElement = this.refItems.current\n const heightLimit = itemsElement.scrollTop - itemsElement.clientHeight\n\n if (!itemsElement) {\n return 0\n }\n\n return this.calculateItemIndexByHeightLimit(Math.max(0, heightLimit))\n }\n\n @autobind\n createSuggestionMouseHandler(selectedIndex) {\n return event => {\n const { pageX, pageY } = event\n const { selectedIndex: prevSelectedIndex, pageX: prevPageX, pageY: prevPageY } = this.state\n if (prevPageX !== pageX && prevPageY !== pageY) {\n if (prevSelectedIndex !== selectedIndex) {\n this.setState({ pageX, pageY, selectedIndex })\n } else {\n this.setState({ pageX, pageY })\n }\n }\n }\n }\n\n componentDidUpdate(_, prevState) {\n if (prevState.visibility !== this.state.visibility) {\n if (this.state.visibility) {\n window.addEventListener('keydown', this.handleKeyDown)\n } else {\n window.removeEventListener('keydown', this.handleKeyDown)\n }\n }\n }\n\n componentDidMount() {\n if (this.state.visibility) {\n window.addEventListener('keydown', this.handleKeyDown)\n }\n }\n\n componentWillUnmount() {\n if (this.timeoutId) {\n clearTimeout(this.timeoutId)\n }\n window.removeEventListener('keydown', this.handleKeyDown, true)\n }\n\n @autobind\n scrollToItem({ index, force = false } = {}) {\n const { items, selectedIndex } = this.state\n const itemIndex = Math.max(0, Math.min(items.length - 1, index))\n const itemElement = document.querySelector(`#suggestion-item-${itemIndex}`)\n const itemsElement = this.refItems.current\n\n if (selectedIndex === itemIndex || !itemElement || !itemsElement) {\n return\n }\n\n this.setState({ selectedIndex: itemIndex }, () => {\n const itemOffsetTop = itemElement.offsetTop\n if (force) {\n this.refItems.current.scrollTop = itemOffsetTop\n } else {\n if (itemsElement.scrollTop >= itemOffsetTop) {\n this.refItems.current.scrollTop = itemOffsetTop\n }\n if (itemsElement.scrollTop + itemsElement.clientHeight <= itemOffsetTop + itemElement.clientHeight) {\n this.refItems.current.scrollTop = itemOffsetTop - itemsElement.clientHeight + itemElement.clientHeight\n }\n }\n })\n }\n\n @autobind\n handleKeyDown(event) {\n const { selectedIndex, items } = this.state\n if (event.key === KEY_UP) {\n this.scrollToItem({ index: selectedIndex - 1 })\n if (selectedIndex > 0) {\n event.preventDefault()\n }\n }\n if (event.key === KEY_DOWN) {\n this.scrollToItem({ index: selectedIndex + 1 })\n if (selectedIndex < items.length - 1) {\n event.preventDefault()\n }\n }\n if (event.key === KEY_PAGE_UP) {\n this.scrollToItem({ index: this.calculatePageUpItemIndex(), force: true })\n event.preventDefault()\n }\n if (event.key === KEY_PAGE_DOWN) {\n this.scrollToItem({ index: this.calculatePageDownItemIndex(), force: true })\n event.preventDefault()\n }\n if (event.key === KEY_ENTER && items[selectedIndex]) {\n this.selectSuggestion(items[selectedIndex])\n event.preventDefault()\n }\n }\n\n @autobind\n renderDropdown() {\n return (\n \n {suggestion.label}\n
\n \n {this.state.items.map((suggestion, index) => (\n \n
\n ))}\n \n )\n }\n\n @autobind\n selectSuggestion(suggestion) {\n const { selectSuggestion } = this.props\n\n selectSuggestion(suggestion)\n }\n\n render() {\n const { visibility, portalStyles } = this.state\n\n if (!visibility) {\n return null\n }\n\n return (\n \n
\n {this.renderDropdown()}
\n \n {total > 1 && (\n \n \n \n \n \n {' '}\n {prefix}\n {page + separator + total}{' '}\n \n \n \n \n \n )}\n
\n )\n }\n}\n","import GeneralVideoAssetUploadJob from '@aytm/lib/AsyncJobManager/jobs/assets/VideoAssetUploadJob'\nimport AsyncJobManager from '@aytm/lib/AsyncJobManager/AsyncJobManager'\n\nexport const VideoAssetUploadManager = AsyncJobManager({ concurrency: 2 })\n\nconst config = {\n createAssetPath: null,\n templateID: null,\n srcSurveyID: null\n}\n\nexport function configure({ createAssetPath, templateID, srcSurveyID } = {}) {\n config.createAssetPath = createAssetPath\n config.templateID = templateID\n config.srcSurveyID = srcSurveyID\n}\n\nexport function VideoAssetUploadJob(file) {\n return config.createAssetPath\n ? GeneralVideoAssetUploadJob({\n createAssetPath: config.createAssetPath,\n file,\n params: { template_id: config.templateID, src_survey_id: config.srcSurveyID }\n })\n : Promise.reject(new Error('VideoAssetUploadManager - createAssetPath not configured'))\n}\n\nexport default function upload(droppedFiles, onProgress) {\n const files = droppedFiles.slice(0, 100) // protect from mass upload\n return new Promise(resolve => {\n const uploadJobs = [...files].map(file => VideoAssetUploadJob(file))\n const fileTotalSizes = files.map(file => file.size || 0)\n const progress = {\n fileTotalSizes,\n fileLoadedSizes: Array.from({ length: files.length }),\n totalSize: fileTotalSizes.reduce((totalSize, fileSize) => totalSize + fileSize, 0),\n loadedSize: 0,\n totalFiles: files.length,\n loadedFiles: 0\n }\n VideoAssetUploadManager.queue(...uploadJobs).then(\n jobResults => {\n resolve(jobResults.map(result => ('done' === result.status ? result.result : null)).filter(x => x))\n },\n null,\n onProgress\n ? (type, fileIndex, loaded, total) => {\n // calculate progress\n switch (type) {\n case 'done': {\n progress.totalFiles = total\n progress.loadedFiles = loaded\n onProgress({\n percents: Math.round((progress.loadedSize * 100) / progress.totalSize),\n totalFiles: progress.totalFiles,\n loadedFiles: progress.loadedFiles,\n totalSize: progress.totalSize,\n loadedSize: progress.loadedSize\n })\n break\n }\n case 'progress': {\n progress.fileLoadedSizes[fileIndex] = loaded\n progress.fileTotalSizes[fileIndex] = total\n progress.totalSize = progress.fileTotalSizes.reduce(\n (fileSize, totalSize) => (totalSize ? fileSize + totalSize : fileSize),\n 0\n )\n progress.loadedSize = progress.fileLoadedSizes.reduce(\n (loadedSize, fileLoadedSize) => (fileLoadedSize ? loadedSize + fileLoadedSize : loadedSize),\n 0\n )\n onProgress({\n percents: Math.round((progress.loadedSize * 100) / progress.totalSize),\n totalFiles: progress.totalFiles,\n loadedFiles: progress.loadedFiles,\n totalSize: progress.totalSize,\n loadedSize: progress.loadedSize\n })\n break\n }\n default: {\n break\n }\n }\n }\n : null\n )\n })\n}\n","// extracted by mini-css-extract-plugin\nexport default {\"component\":\"asset-files-uploader-module__component___1wV8z\",\"selectOnClick\":\"asset-files-uploader-module__selectOnClick___3Mia7\",\"input\":\"asset-files-uploader-module__input___12VWQ\"};","// lib\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport autobind from 'autobind-decorator'\nimport ADND from '@aytm/lib/adnd/ADND'\nimport uploadImageAssets from '@aytm/lib/rfd-ui/components/assets/jobs/image-asset-upload-manager'\nimport uploadVideoAssets from '@aytm/lib/rfd-ui/components/assets/jobs/video-asset-upload-manager'\n\n// styles\nimport style from '@aytm/lib/rfd-ui/styles/assets/asset-files-uploader.module.scss'\n\nexport default class AssetFilesUploader extends Component {\n static propTypes = {\n type: PropTypes.oneOf(['image', 'video']),\n onFilesUploaded: PropTypes.func.isRequired,\n onFilesUpload: PropTypes.func,\n watchProgress: PropTypes.bool,\n multiple: PropTypes.bool,\n withOriginal: PropTypes.bool,\n withErrors: PropTypes.bool,\n maxItems: PropTypes.number,\n selectOnClick: PropTypes.bool,\n content: PropTypes.func.isRequired\n }\n\n state = {\n dragOver: false,\n acceptFiles: true,\n progress: null\n }\n\n inputRef = React.createRef()\n\n dropAssetFileTarget = ADND.targets\n .files()\n .onDrop(this.onAssetFileDrop)\n .onEnter(this.onAssetFileDragEnter)\n .onLeave(this.onAssetFileDragLeave)\n .acceptDrop(this.acceptAssetFileDrop)\n\n @autobind\n connectDropTarget(ref) {\n this.dropAssetFileTarget.connect(ref)\n }\n\n componentDidMount() {\n this.mounted = true\n }\n\n componentWillUnmount() {\n this.mounted = false\n this.dropAssetFileTarget.disconnect()\n }\n\n @autobind\n onAssetFileDragEnter() {\n this.setState(state => {\n return {\n ...state,\n dragOver: true\n }\n })\n }\n\n @autobind\n onAssetFileDragLeave() {\n this.setState(state => {\n return {\n ...state,\n dragOver: false\n }\n })\n }\n\n @autobind\n acceptAssetFileDrop() {\n const { acceptFiles = true } = this.state\n return acceptFiles\n }\n\n @autobind\n onAssetFileDrop(...files) {\n const { multiple = false, maxItems = null } = this.props\n\n if (files.length) {\n this.onDropFiles(multiple ? (maxItems ? Array.prototype.slice.call(files, 0, maxItems) : files) : [files[0]])\n }\n }\n\n @autobind\n inputFilesSelected() {\n if (this.inputRef.current && this.inputRef.current.files && this.inputRef.current.files.length) {\n const { multiple = false, maxItems = null } = this.props\n this.onDropFiles(\n multiple\n ? Array.apply(\n null,\n maxItems\n ? Array.prototype.slice.call(this.inputRef.current.files, 0, maxItems)\n : this.inputRef.current.files\n )\n : [this.inputRef.current.files[0]]\n )\n }\n }\n\n @autobind\n onDropFiles(files) {\n const { type, watchProgress = true, withErrors = false, onFilesUpload, onFilesUploaded } = this.props\n\n if ('function' === typeof onFilesUploaded) {\n this.setState(\n state => {\n return {\n ...state,\n acceptFiles: false,\n progress: watchProgress\n ? {\n percents: 0,\n totalFiles: files.length,\n loadedFiles: 0,\n totalSize: files.reduce((totalSize, file) => totalSize + (file.size || 0), 0),\n loadedSize: 0\n }\n : null\n }\n },\n () => {\n const uploadAsset = 'video' === type ? uploadVideoAssets : uploadImageAssets\n if ('function' === typeof onFilesUpload) {\n onFilesUpload()\n }\n uploadAsset(\n files,\n watchProgress\n ? progress => {\n if (this.mounted) {\n this.setState(state => {\n return {\n ...state,\n progress\n }\n })\n }\n }\n : null,\n withErrors\n ).then(assets => {\n const { withOriginal = false } = this.props\n if (this.mounted) {\n this.setState(\n state => {\n return {\n ...state,\n acceptFiles: true,\n progress: null\n }\n },\n () => {\n onFilesUploaded(\n assets.map(asset => {\n if ('video' === type) {\n const videoAsset = {\n assetUid: asset.uid,\n videoPath: asset.original ? asset.original.mp4 : null,\n thumbnailPath: asset.original ? asset.original.thumbnail : null\n }\n withOriginal && (videoAsset.original = asset.original || null)\n return videoAsset\n } else {\n const imageAsset = {\n assetUid: asset.uid,\n imagePath: asset.original ? asset.original.path : null\n }\n withOriginal && (imageAsset.original = asset.original || null)\n withErrors && asset.error && (imageAsset.error = asset.error)\n withErrors && asset.status && (imageAsset.status = asset.status)\n return imageAsset\n }\n })\n )\n }\n )\n }\n })\n }\n )\n }\n }\n\n render() {\n const { type, multiple = false, content, selectOnClick = true } = this.props\n const { acceptFiles = true, dragOver, progress } = this.state\n return (\n \n {uploading && progress ? (\n
\n ),\n [type, text, renderProgressText]\n )\n\n return (\n \n
\n )\n}\n\nProgressPanel.propTypes = {\n renderProgressText: PropTypes.func,\n progress: PropTypes.object.isRequired\n}\nexport function ProgressPanel(props) {\n const { progress = {}, renderProgressText } = props\n const { percents = 0, loadedFiles = 0, totalFiles = 1 } = progress || {}\n return (\n \n \n
\n {text || ''}
\n \n
\n )\n}\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport autobind from 'autobind-decorator'\nimport { PureDataComponent } from '@aytm/lib/common/components/pure-component'\n\nimport '@aytm/lib/rfd-ui/styles/basic/button.scss'\n\nexport default class Button extends PureDataComponent {\n static propTypes = {\n /**\n * Button label\n */\n label: PropTypes.string,\n /**\n * is Button disabled\n */\n disabled: PropTypes.bool,\n /**\n * show icon (prop is className)\n */\n icon: PropTypes.string,\n /**\n * icon position: `left` or `right`\n */\n iconPosition: PropTypes.string,\n /**\n * fixed Button width in pixels\n */\n width: PropTypes.number,\n /**\n * Hides left/right paddings\n */\n compact: PropTypes.bool,\n /**\n * string that will be passed to `onAction(action)`\n */\n action: PropTypes.string,\n /**\n * fires when Button is `clicked` and `not disabled`\n */\n onAction: PropTypes.func,\n /**\n * fires when Button is `clicked` (disabled or not)\n */\n onClick: PropTypes.func,\n /**\n * Use `` instead of `\n
\n \n
\n {'function' === typeof renderProgressText ? (\n {renderProgressText({ loadedFiles, totalFiles })}
\n ) : null}\n