{"version":3,"file":"index-ZNcAQhUL.cjs","sources":["../src/app/components/forms/Action.jsx","../src/app/components/forms/NodeNameField.jsx","../node_modules/react-select/dist/useAsync-9eb532f6.esm.js","../node_modules/react-select/async/dist/react-select-async.esm.js","../src/app/pages/CubeBuilderPage/MetricsSelect.jsx","../src/app/pages/CubeBuilderPage/DimensionsSelect.jsx","../src/app/pages/CubeBuilderPage/CubePreviewPanel.jsx","../src/app/pages/CubeBuilderPage/index.jsx"],"sourcesContent":["export class Action {\n static Add = new Action('add');\n static Edit = new Action('edit');\n\n constructor(name) {\n this.name = name;\n }\n}\n","import { ErrorMessage, Field } from 'formik';\nimport { FormikSelect } from '../../pages/AddEditNodePage/FormikSelect';\nimport { FullNameField } from '../../pages/AddEditNodePage/FullNameField';\nimport React, { useContext, useEffect, useState } from 'react';\nimport DJClientContext from '../../providers/djclient';\nimport { useParams } from 'react-router-dom';\n\n/*\n * This component creates the namespace selector, display name input, and\n * derived name fields in a form. It can be reused any time we need to create\n * a new node.\n */\n\nexport default function NodeNameField() {\n const [namespaces, setNamespaces] = useState([]);\n const djClient = useContext(DJClientContext).DataJunctionAPI;\n let { initialNamespace } = useParams();\n\n useEffect(() => {\n const fetchData = async () => {\n const namespaces = await djClient.namespaces();\n setNamespaces(\n namespaces.map(m => ({\n value: m['namespace'],\n label: m['namespace'],\n })),\n );\n };\n fetchData().catch(console.error);\n }, [djClient, djClient.metrics]);\n\n return (\n <>\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n \n );\n}\n","import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';\nimport _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';\nimport _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';\nimport _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';\nimport { useRef, useState, useEffect, useCallback } from 'react';\nimport { L as handleInputChange } from './index-6ea50319.esm.js';\n\nvar _excluded = [\"defaultOptions\", \"cacheOptions\", \"loadOptions\", \"options\", \"isLoading\", \"onInputChange\", \"filterOption\"];\nfunction useAsync(_ref) {\n var _ref$defaultOptions = _ref.defaultOptions,\n propsDefaultOptions = _ref$defaultOptions === void 0 ? false : _ref$defaultOptions,\n _ref$cacheOptions = _ref.cacheOptions,\n cacheOptions = _ref$cacheOptions === void 0 ? false : _ref$cacheOptions,\n propsLoadOptions = _ref.loadOptions;\n _ref.options;\n var _ref$isLoading = _ref.isLoading,\n propsIsLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,\n propsOnInputChange = _ref.onInputChange,\n _ref$filterOption = _ref.filterOption,\n filterOption = _ref$filterOption === void 0 ? null : _ref$filterOption,\n restSelectProps = _objectWithoutProperties(_ref, _excluded);\n var propsInputValue = restSelectProps.inputValue;\n var lastRequest = useRef(undefined);\n var mounted = useRef(false);\n var _useState = useState(Array.isArray(propsDefaultOptions) ? propsDefaultOptions : undefined),\n _useState2 = _slicedToArray(_useState, 2),\n defaultOptions = _useState2[0],\n setDefaultOptions = _useState2[1];\n var _useState3 = useState(typeof propsInputValue !== 'undefined' ? propsInputValue : ''),\n _useState4 = _slicedToArray(_useState3, 2),\n stateInputValue = _useState4[0],\n setStateInputValue = _useState4[1];\n var _useState5 = useState(propsDefaultOptions === true),\n _useState6 = _slicedToArray(_useState5, 2),\n isLoading = _useState6[0],\n setIsLoading = _useState6[1];\n var _useState7 = useState(undefined),\n _useState8 = _slicedToArray(_useState7, 2),\n loadedInputValue = _useState8[0],\n setLoadedInputValue = _useState8[1];\n var _useState9 = useState([]),\n _useState10 = _slicedToArray(_useState9, 2),\n loadedOptions = _useState10[0],\n setLoadedOptions = _useState10[1];\n var _useState11 = useState(false),\n _useState12 = _slicedToArray(_useState11, 2),\n passEmptyOptions = _useState12[0],\n setPassEmptyOptions = _useState12[1];\n var _useState13 = useState({}),\n _useState14 = _slicedToArray(_useState13, 2),\n optionsCache = _useState14[0],\n setOptionsCache = _useState14[1];\n var _useState15 = useState(undefined),\n _useState16 = _slicedToArray(_useState15, 2),\n prevDefaultOptions = _useState16[0],\n setPrevDefaultOptions = _useState16[1];\n var _useState17 = useState(undefined),\n _useState18 = _slicedToArray(_useState17, 2),\n prevCacheOptions = _useState18[0],\n setPrevCacheOptions = _useState18[1];\n if (cacheOptions !== prevCacheOptions) {\n setOptionsCache({});\n setPrevCacheOptions(cacheOptions);\n }\n if (propsDefaultOptions !== prevDefaultOptions) {\n setDefaultOptions(Array.isArray(propsDefaultOptions) ? propsDefaultOptions : undefined);\n setPrevDefaultOptions(propsDefaultOptions);\n }\n useEffect(function () {\n mounted.current = true;\n return function () {\n mounted.current = false;\n };\n }, []);\n var loadOptions = useCallback(function (inputValue, callback) {\n if (!propsLoadOptions) return callback();\n var loader = propsLoadOptions(inputValue, callback);\n if (loader && typeof loader.then === 'function') {\n loader.then(callback, function () {\n return callback();\n });\n }\n }, [propsLoadOptions]);\n useEffect(function () {\n if (propsDefaultOptions === true) {\n loadOptions(stateInputValue, function (options) {\n if (!mounted.current) return;\n setDefaultOptions(options || []);\n setIsLoading(!!lastRequest.current);\n });\n }\n // NOTE: this effect is designed to only run when the component mounts,\n // so we don't want to include any hook dependencies\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n var onInputChange = useCallback(function (newValue, actionMeta) {\n var inputValue = handleInputChange(newValue, actionMeta, propsOnInputChange);\n if (!inputValue) {\n lastRequest.current = undefined;\n setStateInputValue('');\n setLoadedInputValue('');\n setLoadedOptions([]);\n setIsLoading(false);\n setPassEmptyOptions(false);\n return;\n }\n if (cacheOptions && optionsCache[inputValue]) {\n setStateInputValue(inputValue);\n setLoadedInputValue(inputValue);\n setLoadedOptions(optionsCache[inputValue]);\n setIsLoading(false);\n setPassEmptyOptions(false);\n } else {\n var request = lastRequest.current = {};\n setStateInputValue(inputValue);\n setIsLoading(true);\n setPassEmptyOptions(!loadedInputValue);\n loadOptions(inputValue, function (options) {\n if (!mounted) return;\n if (request !== lastRequest.current) return;\n lastRequest.current = undefined;\n setIsLoading(false);\n setLoadedInputValue(inputValue);\n setLoadedOptions(options || []);\n setPassEmptyOptions(false);\n setOptionsCache(options ? _objectSpread(_objectSpread({}, optionsCache), {}, _defineProperty({}, inputValue, options)) : optionsCache);\n });\n }\n }, [cacheOptions, loadOptions, loadedInputValue, optionsCache, propsOnInputChange]);\n var options = passEmptyOptions ? [] : stateInputValue && loadedInputValue ? loadedOptions : defaultOptions || [];\n return _objectSpread(_objectSpread({}, restSelectProps), {}, {\n options: options,\n isLoading: isLoading || propsIsLoading,\n onInputChange: onInputChange,\n filterOption: filterOption\n });\n}\n\nexport { useAsync as u };\n","import _extends from '@babel/runtime/helpers/esm/extends';\nimport * as React from 'react';\nimport { forwardRef } from 'react';\nimport { S as Select } from '../../dist/Select-ce3716e1.esm.js';\nimport { u as useStateManager } from '../../dist/useStateManager-7e1e8489.esm.js';\nimport { u as useAsync } from '../../dist/useAsync-9eb532f6.esm.js';\nexport { u as useAsync } from '../../dist/useAsync-9eb532f6.esm.js';\nimport '@babel/runtime/helpers/objectSpread2';\nimport '@babel/runtime/helpers/classCallCheck';\nimport '@babel/runtime/helpers/createClass';\nimport '@babel/runtime/helpers/inherits';\nimport '@babel/runtime/helpers/createSuper';\nimport '@babel/runtime/helpers/toConsumableArray';\nimport '../../dist/index-6ea50319.esm.js';\nimport '@emotion/react';\nimport '@babel/runtime/helpers/slicedToArray';\nimport '@babel/runtime/helpers/objectWithoutProperties';\nimport '@babel/runtime/helpers/typeof';\nimport '@babel/runtime/helpers/taggedTemplateLiteral';\nimport '@babel/runtime/helpers/defineProperty';\nimport 'react-dom';\nimport '@floating-ui/dom';\nimport 'use-isomorphic-layout-effect';\nimport 'memoize-one';\n\nvar AsyncSelect = /*#__PURE__*/forwardRef(function (props, ref) {\n var stateManagedProps = useAsync(props);\n var selectProps = useStateManager(stateManagedProps);\n return /*#__PURE__*/React.createElement(Select, _extends({\n ref: ref\n }, selectProps));\n});\nvar AsyncSelect$1 = AsyncSelect;\n\nexport { AsyncSelect$1 as default };\n","/**\n * A select component for picking metrics.\n * Uses async search to efficiently handle large numbers of metrics.\n * Results are grouped by namespace for easier navigation.\n */\nimport AsyncSelect from 'react-select/async';\n// `components` is exported from the main `react-select` entry, not from\n// `react-select/async`. CRA's webpack was lenient about this; Vite's\n// stricter ESM resolution rejects the named import on the subpath.\nimport { components } from 'react-select';\nimport React, { useContext, useEffect, useState, useCallback } from 'react';\nimport DJClientContext from '../../providers/djclient';\n\n// Debounce helper\nconst debounce = (fn, ms) => {\n let timer;\n return (...args) => {\n clearTimeout(timer);\n return new Promise(resolve => {\n timer = setTimeout(() => resolve(fn(...args)), ms);\n });\n };\n};\n\n/**\n * Extract namespace from a fully qualified metric name.\n * e.g., \"finance.total_revenue\" -> \"finance\"\n */\nconst getNamespace = metricName => {\n if (!metricName) return 'default';\n const parts = metricName.split('.');\n return parts.slice(0, -1).join('.') || 'default';\n};\n\n/**\n * Git branch icon SVG component\n */\nconst GitBranchIcon = () => (\n \n \n \n \n \n \n);\n\n/**\n * Custom Group heading component matching Explorer styling.\n */\nconst GroupHeading = props => {\n const { data } = props;\n const { namespace, gitInfo, count } = data;\n\n return (\n \n {namespace}\n {gitInfo?.branch && (\n \n \n {gitInfo.branch}\n \n )}\n \n ({count})\n \n \n );\n};\n\n/**\n * Group flat metrics array into react-select grouped format.\n * Includes branch info for styled group headers.\n */\nconst groupMetricsByNamespace = metrics => {\n const grouped = {};\n const gitInfoByNamespace = {};\n\n metrics.forEach(metric => {\n const namespace = getNamespace(metric.value);\n if (!grouped[namespace]) {\n grouped[namespace] = [];\n gitInfoByNamespace[namespace] = metric.gitInfo;\n }\n grouped[namespace].push(metric);\n });\n\n // Sort namespaces alphabetically and build grouped options\n return Object.keys(grouped)\n .sort()\n .map(namespace => {\n const gitInfo = gitInfoByNamespace[namespace];\n const count = grouped[namespace].length;\n\n return {\n label: namespace,\n namespace,\n gitInfo,\n count,\n options: grouped[namespace],\n };\n });\n};\n\n/**\n * Custom option component that shows display name and full node name.\n */\nconst formatOptionLabel = (option, { context }) => {\n if (context === 'menu') {\n const displayName = option.label;\n const nodeName = option.value;\n const isDifferent = displayName !== nodeName;\n\n return (\n
\n
{displayName}
\n {isDifferent && (\n
\n {nodeName}\n
\n )}\n
\n );\n }\n // For selected chips: show display name with tooltip and optional branch badge\n const displayName = option.label || option.value;\n const gitInfo = option.gitInfo;\n const showBranch = gitInfo?.branch && !gitInfo?.isDefaultBranch;\n\n return (\n \n {displayName}\n {showBranch && (\n \n ⎇ {gitInfo.branch}\n \n )}\n \n );\n};\n\nexport const MetricsSelect = React.memo(function MetricsSelect({\n cube,\n onChange,\n}) {\n const djClient = useContext(DJClientContext).DataJunctionAPI;\n\n // Currently selected metrics (for controlled component)\n const [selectedMetrics, setSelectedMetrics] = useState([]);\n\n // Load existing cube metrics when editing\n useEffect(() => {\n if (cube?.current?.cubeMetrics) {\n const cubeMetrics = cube.current.cubeMetrics.map(metric => ({\n value: metric.name,\n label: metric.displayName || metric.name,\n }));\n setSelectedMetrics(cubeMetrics);\n onChange(cubeMetrics.map(m => m.value));\n\n // Fetch gitInfo for existing metrics so we can display branch badges\n const names = cubeMetrics.map(m => m.value);\n djClient.getMetricsInfo(names).then(enriched => {\n if (enriched.length > 0) {\n const infoByName = Object.fromEntries(\n enriched.map(e => [e.value, e]),\n );\n setSelectedMetrics(prev =>\n prev.map(m => (infoByName[m.value] ? infoByName[m.value] : m)),\n );\n }\n });\n }\n }, [cube, onChange, djClient]);\n\n // Async load options - searches metrics via GraphQL, grouped by namespace\n const loadOptions = useCallback(\n debounce(async inputValue => {\n if (!inputValue || inputValue.length < 2) {\n return [];\n }\n try {\n const results = await djClient.searchMetrics(inputValue, 50);\n return groupMetricsByNamespace(results);\n } catch (error) {\n console.error('Error searching metrics:', error);\n return [];\n }\n }, 300),\n [djClient],\n );\n\n const handleChange = selected => {\n setSelectedMetrics(selected || []);\n onChange((selected || []).map(option => option.value));\n };\n\n // Custom styles to color-code metric tags (matching Query Planner exactly)\n const metricStyles = {\n multiValue: base => ({\n ...base,\n backgroundColor: '#fad7dd',\n border: '1px solid rgba(162, 40, 62, 0.3)',\n borderRadius: '3px',\n margin: '2px',\n }),\n multiValueLabel: base => ({\n ...base,\n color: '#a2283e',\n fontSize: '10px',\n fontWeight: 500,\n padding: '2px 4px 2px 6px',\n }),\n multiValueRemove: base => ({\n ...base,\n color: '#a2283e',\n padding: '0 4px',\n ':hover': {\n backgroundColor: '#f5c4cd',\n color: '#a2283e',\n },\n }),\n };\n\n return (\n \n inputValue.length < 2\n ? 'Type at least 2 characters to search'\n : 'No metrics found'\n }\n loadingMessage={() => 'Searching...'}\n formatOptionLabel={formatOptionLabel}\n components={{ GroupHeading }}\n styles={metricStyles}\n isMulti\n isClearable\n closeMenuOnSelect={false}\n cacheOptions\n defaultOptions={false}\n />\n );\n});\n","/**\n * A select component for picking dimensions.\n * Dimensions are grouped by hop distance (how many joins away from the metrics).\n */\nimport Select from 'react-select';\nimport React, { useContext, useEffect, useState } from 'react';\nimport DJClientContext from '../../providers/djclient';\nimport { labelize } from '../../../utils/form';\n\n/**\n * Calculate hop distance from path length.\n * path.length represents how many joins away the dimension is.\n */\nconst getHopDistance = path => {\n if (!path || path.length === 0) return 0;\n return path.length;\n};\n\n/**\n * Render role information as a label suffix when a dimension is reached\n * via a named role (e.g. \"[birth_country]\"). Stored role values can be raw\n * (e.g. \"birth_country\") or already bracketed; normalize either form to\n * \" [role]\". Returns \"\" when there is no role.\n */\nconst formatRoleSuffix = role => {\n if (!role) return '';\n const stripped = role.replace(/^\\[|\\]$/g, '');\n return stripped ? ` [${stripped}]` : '';\n};\n\n/**\n * Parse a role suffix off the end of a dimension's full name.\n * \"default.user_dim.country_code[birth_country]\" → [\"default.user_dim.country_code\", \"birth_country\"]\n * \"default.user_dim.country_code\" → [\"default.user_dim.country_code\", \"\"]\n */\nconst splitRole = fullName => {\n if (!fullName) return [fullName, ''];\n const match = fullName.match(/^(.+?)\\[([^\\]]+)\\]$/);\n return match ? [match[1], match[2]] : [fullName, ''];\n};\n\n/**\n * Get human-readable label for hop distance.\n */\nconst getHopLabel = hopDistance => {\n if (hopDistance === 0) return 'Direct Dimensions';\n if (hopDistance === 1) return '1 Hop Away';\n return `${hopDistance} Hops Away`;\n};\n\nexport const DimensionsSelect = React.memo(function DimensionsSelect({\n cube,\n metrics,\n onChange,\n}) {\n const djClient = useContext(DJClientContext).DataJunctionAPI;\n\n // Dimensions grouped by hop distance, then by node+path\n const [dimensionsByHop, setDimensionsByHop] = useState({});\n\n // The selected dimensions, grouped by dimension node and path\n const [selectedDimensionsByGroup, setSelectedDimensionsByGroup] = useState(\n {},\n );\n\n // The existing cube node's dimensions, if editing a cube\n const [defaultDimensions, setDefaultDimensions] = useState([]);\n\n useEffect(() => {\n const fetchData = async () => {\n let cubeDimensions = undefined;\n // `cube` may be the bare cube object or a ref-like { current: ... }.\n // Either shape can also arrive partially populated while data is in\n // flight, so guard before touching `.cubeDimensions` to avoid the\n // Suspense boundary surfacing a TypeError to the user.\n const cubeData = cube?.current ?? cube;\n if (cubeData?.cubeDimensions) {\n cubeDimensions = cubeData.cubeDimensions.map(cubeDim => {\n return {\n value: cubeDim.name,\n label:\n labelize(cubeDim.attribute) +\n formatRoleSuffix(cubeDim.role) +\n (cubeDim.properties?.includes('primary_key') ? ' (PK)' : ''),\n };\n });\n setDefaultDimensions(cubeDimensions);\n onChange(cubeDimensions.map(m => m.value));\n }\n\n if (metrics && metrics.length > 0) {\n // Populate the common dimensions list based on the selected metrics\n const commonDimensions = await djClient.commonDimensions(metrics);\n\n // First group by node_name + path (original grouping)\n const groupedByNodePath = commonDimensions.reduce(\n (group, dimension) => {\n const key = dimension.node_name + JSON.stringify(dimension.path);\n group[key] = group[key] ?? [];\n group[key].push(dimension);\n return group;\n },\n {},\n );\n\n // Then organize by hop distance\n const byHop = {};\n Object.values(groupedByNodePath).forEach(dimensionsInGroup => {\n const hopDistance = getHopDistance(dimensionsInGroup[0].path);\n byHop[hopDistance] = byHop[hopDistance] ?? [];\n byHop[hopDistance].push(dimensionsInGroup);\n });\n\n setDimensionsByHop(byHop);\n\n // Set the selected cube dimensions if an existing cube is being edited.\n // Only run when we actually have the cube's dimensions in hand — the\n // outer guard leaves `cubeDimensions` undefined when the cube data\n // hasn't loaded yet.\n if (cube && cubeDimensions) {\n const currentSelectedDimensionsByGroup = {};\n Object.values(groupedByNodePath).forEach(dimensionsInGroup => {\n const groupKey =\n dimensionsInGroup[0].node_name +\n JSON.stringify(dimensionsInGroup[0].path);\n currentSelectedDimensionsByGroup[groupKey] = getValue(\n cubeDimensions.filter(\n dim =>\n dimensionsInGroup.filter(x => dim.value === x.name).length >\n 0,\n ),\n );\n });\n setSelectedDimensionsByGroup(currentSelectedDimensionsByGroup);\n onChange(Object.values(currentSelectedDimensionsByGroup).flat(2));\n }\n } else {\n setDimensionsByHop({});\n }\n };\n fetchData().catch(console.error);\n }, [djClient, onChange, metrics, cube]);\n\n // Retrieves the selected values as a list (since it is a multi-select)\n const getValue = options => {\n if (options) {\n return options.map(option => option.value);\n } else {\n return [];\n }\n };\n\n // Sort hop distances numerically\n const sortedHops = Object.keys(dimensionsByHop)\n .map(Number)\n .sort((a, b) => a - b);\n\n // Custom styles to color-code dimension tags (matching Query Planner exactly)\n const dimensionStyles = {\n multiValue: base => ({\n ...base,\n backgroundColor: '#ffefd0',\n border: '1px solid rgba(169, 102, 33, 0.3)',\n borderRadius: '3px',\n margin: '2px',\n }),\n multiValueLabel: base => ({\n ...base,\n color: '#a96621',\n fontSize: '10px',\n fontWeight: 500,\n padding: '2px 4px 2px 6px',\n }),\n multiValueRemove: base => ({\n ...base,\n color: '#a96621',\n padding: '0 4px',\n ':hover': {\n backgroundColor: '#ffe4b3',\n color: '#a96621',\n },\n }),\n };\n\n if (sortedHops.length === 0) {\n return null;\n }\n\n return (\n