@unovis/ts 1.5.1-xplg.5 → 1.5.1-xplg.7

package/components/annotations/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/annotations/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\n\n// Utils\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nconst cssVarDefaults = {\n  '--vis-annotations-text-color': '#282C34',\n\n  '--vis-annotations-connector-stroke-color': '#444',\n  '--vis-annotations-connector-stroke-width': '1px',\n  '--vis-annotations-connector-stroke-dasharray': 'none',\n\n  '--vis-annotations-subject-stroke-color': '#444',\n  '--vis-annotations-subject-fill-color': 'none',\n  '--vis-annotations-subject-stroke-dasharray': 'none',\n\n  '--vis-dark-annotations-text-color': '#e8e9ef',\n  '--vis-dark-annotations-connector-stroke-color': '#fff',\n  '--vis-dark-annotations-subject-stroke-color': '#fff',\n}\n\nexport const root = css`\n  label: annotations-component;\n`\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const annotation = css`\n  label: annotation;\n`\n\nexport const annotationSubject = css`\n  label: annotationSubject;\n\n  line {\n    stroke: var(${variables.annotationsConnectorStrokeColor});\n    stroke-width: var(${variables.annotationsConnectorStrokeWidth});\n    stroke-dasharray: var(${variables.annotationsConnectorStrokeDasharray});\n  }\n\n  circle {\n    stroke: var(${variables.annotationsSubjectStrokeColor});\n    fill: var(${variables.annotationsSubjectFillColor});\n    stroke-dasharray: var(${variables.annotationsSubjectStrokeDasharray});\n  }\n`\n\nexport const annotationContent = css`\n  label: annotationContent;\n  > text {\n    fill: var(--vis-annotations-text-color);\n  }\n`\n"],"names":[],"mappings":";;;AAKA,MAAM,cAAc,GAAG;AACrB,IAAA,8BAA8B,EAAE,SAAS;AAEzC,IAAA,0CAA0C,EAAE,MAAM;AAClD,IAAA,0CAA0C,EAAE,KAAK;AACjD,IAAA,8CAA8C,EAAE,MAAM;AAEtD,IAAA,wCAAwC,EAAE,MAAM;AAChD,IAAA,sCAAsC,EAAE,MAAM;AAC9C,IAAA,4CAA4C,EAAE,MAAM;AAEpD,IAAA,mCAAmC,EAAE,SAAS;AAC9C,IAAA,+CAA+C,EAAE,MAAM;AACvD,IAAA,6CAA6C,EAAE,MAAM;CACtD,CAAA;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;MACY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,UAAU,GAAG,GAAG,CAAA;;EAE5B;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;AAIlB,gBAAA,EAAA,SAAS,CAAC,+BAA+B,CAAA;AACnC,sBAAA,EAAA,SAAS,CAAC,+BAA+B,CAAA;AACrC,0BAAA,EAAA,SAAS,CAAC,mCAAmC,CAAA;;;;AAIvD,gBAAA,EAAA,SAAS,CAAC,6BAA6B,CAAA;AACzC,cAAA,EAAA,SAAS,CAAC,2BAA2B,CAAA;AACzB,0BAAA,EAAA,SAAS,CAAC,iCAAiC,CAAA;;EAEtE;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/annotations/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\n\n// Utils\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nconst cssVarDefaults = {\n  '--vis-annotations-text-color': '#282C34',\n\n  '--vis-annotations-connector-stroke-color': '#444',\n  '--vis-annotations-connector-stroke-width': '1px',\n  '--vis-annotations-connector-stroke-dasharray': 'none',\n\n  '--vis-annotations-subject-stroke-color': '#444',\n  '--vis-annotations-subject-fill-color': 'none',\n  '--vis-annotations-subject-stroke-dasharray': 'none',\n\n  '--vis-dark-annotations-text-color': '#e8e9ef',\n  '--vis-dark-annotations-connector-stroke-color': '#fff',\n  '--vis-dark-annotations-subject-stroke-color': '#fff',\n}\n\nexport const root = css`\n  label: annotations-component;\n`\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const annotation = css`\n  label: annotation;\n`\n\nexport const annotationSubject = css`\n  label: annotationSubject;\n\n  line {\n    stroke: var(${variables.annotationsConnectorStrokeColor});\n    stroke-width: var(${variables.annotationsConnectorStrokeWidth});\n    stroke-dasharray: var(${variables.annotationsConnectorStrokeDasharray});\n  }\n\n  circle {\n    stroke: var(${variables.annotationsSubjectStrokeColor});\n    fill: var(${variables.annotationsSubjectFillColor});\n    stroke-dasharray: var(${variables.annotationsSubjectStrokeDasharray});\n  }\n`\n\nexport const annotationContent = css`\n  label: annotationContent;\n  > text {\n    fill: var(--vis-annotations-text-color);\n  }\n`\n"],"names":[],"mappings":";;;AAKA,MAAM,cAAc,GAAG;AACrB,IAAA,8BAA8B,EAAE,SAAS;AAEzC,IAAA,0CAA0C,EAAE,MAAM;AAClD,IAAA,0CAA0C,EAAE,KAAK;AACjD,IAAA,8CAA8C,EAAE,MAAM;AAEtD,IAAA,wCAAwC,EAAE,MAAM;AAChD,IAAA,sCAAsC,EAAE,MAAM;AAC9C,IAAA,4CAA4C,EAAE,MAAM;AAEpD,IAAA,mCAAmC,EAAE,SAAS;AAC9C,IAAA,+CAA+C,EAAE,MAAM;AACvD,IAAA,6CAA6C,EAAE,MAAM;CACtD,CAAA;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;MACY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA,CAAA;;;;AAIlB,gBAAA,EAAA,SAAS,CAAC,+BAA+B,CAAA;AACnC,sBAAA,EAAA,SAAS,CAAC,+BAA+B,CAAA;AACrC,0BAAA,EAAA,SAAS,CAAC,mCAAmC,CAAA;;;;AAIvD,gBAAA,EAAA,SAAS,CAAC,6BAA6B,CAAA;AACzC,cAAA,EAAA,SAAS,CAAC,2BAA2B,CAAA;AACzB,0BAAA,EAAA,SAAS,CAAC,iCAAiC,CAAA;;EAEtE;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA,CAAA;;;;;;;;;"}

package/components/area/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/area/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\n\nexport const root = css`\n  label: area-component;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-area-cursor: default;\n    --vis-area-fill-opacity: 1;\n    --vis-area-stroke-color: none;\n    --vis-area-stroke-width: 0px;\n    --vis-area-stroke-dasharray: none;\n    --vis-area-stroke-opacity: 1;\n    --vis-area-hover-fill-opacity: none;\n    --vis-area-hover-stroke-width: none;\n\n    /* Dark Theme */\n    --vis-dark-area-stroke-color: none;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-area-stroke-color: var(--vis-dark-area-stroke-color);\n  }\n\n`\nexport const area = css`\n  label: area;\n  cursor: var(--vis-area-cursor);\n  fill-opacity: var(--vis-area-fill-opacity);\n  stroke-width: var(--vis-area-stroke-width);\n  stroke-dasharray: var(--vis-area-stroke-dasharray);\n  stroke: var(--vis-area-stroke-color);\n  stroke-opacity: var(--vis-area-stroke-opacity);\n\n  &:hover {\n    fill-opacity: var(--vis-area-hover-fill-opacity);\n    stroke-width: var(--vis-area-hover-stroke-width);\n  }\n`\n"],"names":[],"mappings":";;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA;;;;;;;;;;;;;;;AAepB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;EAI7B;AACM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/area/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\n\nexport const root = css`\n  label: area-component;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-area-cursor: default;\n    --vis-area-fill-opacity: 1;\n    --vis-area-stroke-color: none;\n    --vis-area-stroke-width: 0px;\n    --vis-area-stroke-dasharray: none;\n    --vis-area-stroke-opacity: 1;\n    --vis-area-hover-fill-opacity: none;\n    --vis-area-hover-stroke-width: none;\n\n    /* Dark Theme */\n    --vis-dark-area-stroke-color: none;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-area-stroke-color: var(--vis-dark-area-stroke-color);\n  }\n\n`\nexport const area = css`\n  label: area;\n  cursor: var(--vis-area-cursor);\n  fill-opacity: var(--vis-area-fill-opacity);\n  stroke-width: var(--vis-area-stroke-width);\n  stroke-dasharray: var(--vis-area-stroke-dasharray);\n  stroke: var(--vis-area-stroke-color);\n  stroke-opacity: var(--vis-area-stroke-opacity);\n\n  &:hover {\n    fill-opacity: var(--vis-area-hover-fill-opacity);\n    stroke-width: var(--vis-area-hover-stroke-width);\n  }\n`\n"],"names":[],"mappings":";;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;AAepB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;EAI7B;AACM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;"}

package/components/axis/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/axis/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: axis-component;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-axis-font-family: */\n    --vis-axis-tick-color: #e8e9ef;\n    /* --vis-axis-domain-color: // Undefined by default to allow fallback to var(--vis-axis-tick-color) */\n    --vis-axis-grid-color: #e8e9ef;\n    --vis-axis-label-color: #6c778c;\n    --vis-axis-tick-label-color: #6c778c;\n    --vis-axis-tick-label-font-size: 12px;\n    --vis-axis-tick-label-cursor: default;\n    --vis-axis-tick-label-text-decoration: none;\n    --vis-axis-label-font-size: 14px;\n    --vis-axis-tick-line-width: 1px;\n    --vis-axis-tick-label-hide-transition: opacity 400ms ease-in-out;\n    --vis-axis-grid-line-width: 1px;\n    /* --vis-axis-domain-line-width: // Undefined by default to allow fallback to var(--vis-axis-grid-line-width) */\n\n    --vis-dark-axis-tick-color: #6c778c;\n    /* --vis-dark-axis-domain-color: // Undefined by default to allow fallback to var(--vis-dark-axis-tick-color) */\n    --vis-dark-axis-tick-label-color: #e8e9ef;\n    --vis-dark-axis-grid-color: #6c778c;\n    --vis-dark-axis-label-color: #fefefe;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-axis-tick-color: var(--vis-dark-axis-tick-color);\n    --vis-axis-domain-color: var(--vis-dark-axis-domain-color);\n    --vis-axis-tick-label-color: var(--vis-dark-axis-tick-label-color);\n    --vis-axis-grid-color: var(--vis-dark-axis-grid-color);\n    --vis-axis-label-color: var(--vis-dark-axis-label-color);\n  }\n`\n\nexport const hideTickLine = css`\n  label: hide-tick-line;\n`\n\nexport const hideDomain = css`\n  label: hide-domain;\n`\n\nexport const axis = css`\n  label: axis;\n\n  user-select: none;\n\n  .domain {\n    stroke: var(--vis-axis-domain-color, var(--vis-axis-tick-color));\n    stroke-width: var(--vis-axis-domain-line-width, var(--vis-axis-grid-line-width));\n  }\n\n  &${`.${hideTickLine}`} {\n    .tick > line {\n      opacity: 0;\n    }\n  }\n\n  &${`.${hideDomain}`} {\n    .domain {\n      opacity: 0;\n    }\n  }\n`\n\nexport const grid = css`\n  label: grid;\n\n  .domain {\n    opacity: 0;\n  }\n\n  line {\n    stroke: var(--vis-axis-grid-color);\n    stroke-width: var(--vis-axis-grid-line-width);\n  }\n`\n\nexport const tick = css`\n  label: tick;\n\n  stroke: none;\n  font-size: var(--vis-axis-tick-label-font-size);\n\n  line {\n    stroke: var(--vis-axis-tick-color);\n    stroke-width: var(--vis-axis-tick-line-width);\n  }\n\n  text {\n    fill: var(--vis-axis-tick-label-color);\n    cursor: var(--vis-axis-tick-label-cursor);\n    font-family: var(--vis-axis-font-family, var(--vis-font-family));\n    text-decoration: var(--vis-axis-tick-label-text-decoration);\n    stroke: none;\n  }\n`\n\nexport const label = css`\n  label: label;\n  fill: var(--vis-axis-label-color);\n  font-size: var(--vis-axis-label-font-size);\n  font-family: var(--vis-axis-font-family, var(--vis-font-family));\n  text-anchor: middle;\n`\n\nexport const tickLabel = css`\n  label: tick-label;\n`\n\nexport const tickLabelHideable = css`\n  label: tick-label-hideable;\n  opacity: 0;\n  transition: var(--vis-axis-tick-label-hide-transition);\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBpB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;EAO7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA;;EAE9B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA;;EAE5B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;;;AAUlB,GAAA,EAAA,CAAA,CAAA,EAAI,YAAY,CAAE,CAAA,CAAA;;;;;;AAMlB,GAAA,EAAA,CAAA,CAAA,EAAI,UAAU,CAAE,CAAA,CAAA;;;;;EAKpB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;;;;EAWtB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;EAkBtB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;EAMvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA;;EAE3B;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/axis/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: axis-component;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-axis-font-family: */\n    --vis-axis-tick-color: #e8e9ef;\n    /* --vis-axis-domain-color: // Undefined by default to allow fallback to var(--vis-axis-tick-color) */\n    --vis-axis-grid-color: #e8e9ef;\n    --vis-axis-label-color: #6c778c;\n    --vis-axis-tick-label-color: #6c778c;\n    --vis-axis-tick-label-font-size: 12px;\n    --vis-axis-tick-label-cursor: default;\n    --vis-axis-tick-label-text-decoration: none;\n    --vis-axis-label-font-size: 14px;\n    --vis-axis-tick-line-width: 1px;\n    --vis-axis-tick-label-hide-transition: opacity 400ms ease-in-out;\n    --vis-axis-grid-line-width: 1px;\n    /* --vis-axis-domain-line-width: // Undefined by default to allow fallback to var(--vis-axis-grid-line-width) */\n\n    --vis-dark-axis-tick-color: #6c778c;\n    /* --vis-dark-axis-domain-color: // Undefined by default to allow fallback to var(--vis-dark-axis-tick-color) */\n    --vis-dark-axis-tick-label-color: #e8e9ef;\n    --vis-dark-axis-grid-color: #6c778c;\n    --vis-dark-axis-label-color: #fefefe;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-axis-tick-color: var(--vis-dark-axis-tick-color);\n    --vis-axis-domain-color: var(--vis-dark-axis-domain-color);\n    --vis-axis-tick-label-color: var(--vis-dark-axis-tick-label-color);\n    --vis-axis-grid-color: var(--vis-dark-axis-grid-color);\n    --vis-axis-label-color: var(--vis-dark-axis-label-color);\n  }\n`\n\nexport const hideTickLine = css`\n  label: hide-tick-line;\n`\n\nexport const hideDomain = css`\n  label: hide-domain;\n`\n\nexport const axis = css`\n  label: axis;\n\n  user-select: none;\n\n  .domain {\n    stroke: var(--vis-axis-domain-color, var(--vis-axis-tick-color));\n    stroke-width: var(--vis-axis-domain-line-width, var(--vis-axis-grid-line-width));\n  }\n\n  &${`.${hideTickLine}`} {\n    .tick > line {\n      opacity: 0;\n    }\n  }\n\n  &${`.${hideDomain}`} {\n    .domain {\n      opacity: 0;\n    }\n  }\n`\n\nexport const grid = css`\n  label: grid;\n\n  .domain {\n    opacity: 0;\n  }\n\n  line {\n    stroke: var(--vis-axis-grid-color);\n    stroke-width: var(--vis-axis-grid-line-width);\n  }\n`\n\nexport const tick = css`\n  label: tick;\n\n  stroke: none;\n  font-size: var(--vis-axis-tick-label-font-size);\n\n  line {\n    stroke: var(--vis-axis-tick-color);\n    stroke-width: var(--vis-axis-tick-line-width);\n  }\n\n  text {\n    fill: var(--vis-axis-tick-label-color);\n    cursor: var(--vis-axis-tick-label-cursor);\n    font-family: var(--vis-axis-font-family, var(--vis-font-family));\n    text-decoration: var(--vis-axis-tick-label-text-decoration);\n    stroke: none;\n  }\n`\n\nexport const label = css`\n  label: label;\n  fill: var(--vis-axis-label-color);\n  font-size: var(--vis-axis-label-font-size);\n  font-family: var(--vis-axis-font-family, var(--vis-font-family));\n  text-anchor: middle;\n`\n\nexport const tickLabel = css`\n  label: tick-label;\n`\n\nexport const tickLabelHideable = css`\n  label: tick-label-hideable;\n  opacity: 0;\n  transition: var(--vis-axis-tick-label-hide-transition);\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBpB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;EAO7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;EAE9B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;AAUlB,GAAA,EAAA,CAAA,CAAA,EAAI,YAAY,CAAE,CAAA,CAAA;;;;;;AAMlB,GAAA,EAAA,CAAA,CAAA,EAAI,UAAU,CAAE,CAAA,CAAA;;;;;EAKpB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWtB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;EAkBtB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;EAMvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA,CAAA;;;;;;;;"}

package/components/brush/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/brush/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nexport const root = css`\n  label: brush-component;\n`\n\nexport const cssVarDefaults = {\n  '--vis-brush-selection-fill-color': 'none',\n  '--vis-brush-selection-stroke-color': 'none',\n  '--vis-brush-selection-stroke-width': '0',\n  '--vis-brush-selection-opacity': '0',\n  '--vis-brush-unselected-fill-color': '#0b1640',\n  '--vis-brush-unselected-stroke-color': '#acb2b9',\n  '--vis-brush-unselected-stroke-width': '0',\n  '--vis-brush-unselected-opacity': '0.4',\n  '--vis-brush-handle-fill-color': '#6d778c',\n  '--vis-brush-handle-stroke-color': '#eee',\n\n  /* Dark Theme */\n  '--vis-dark-brush-selection-fill-color': 'none',\n  '--vis-dark-brush-selection-stroke-color': 'none',\n  '--vis-dark-brush-selection-stroke-width': '0',\n  '--vis-dark-brush-selection-opacity': '0',\n  '--vis-dark-brush-unselected-fill-color': '#acb2b9',\n  '--vis-dark-brush-unselected-stroke-color': '#0b1640',\n  '--vis-dark-brush-unselected-stroke-width': '0',\n  '--vis-dark-brush-unselected-opacity': '0.4',\n  '--vis-dark-brush-handle-fill-color': '#acb2b9',\n  '--vis-dark-brush-handle-stroke-color': 'var(--vis-color-grey)',\n}\n\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const brush = css`\n  label: brush;\n\n  .selection {\n    fill: var(${variables.brushSelectionFillColor});\n    stroke: var(${variables.brushSelectionStrokeColor});\n    stroke-width: var(${variables.brushSelectionStrokeWidth});\n    opacity: var(${variables.brushSelectionOpacity});\n  }\n\n  .handle {\n    fill: var(${variables.brushHandleFillColor});\n  }\n\n  &.non-draggable {\n    .selection, .overlay {\n      pointer-events: none;\n    }\n  }\n`\n\nexport const unselected = css`\n  label: unselected;\n  fill: var(${variables.brushUnselectedFillColor});\n  stroke: var(${variables.brushUnselectedStrokeColor});\n  stroke-width: var(${variables.brushUnselectedStrokeWidth});\n  stroke-opacity: var(${variables.brushUnselectedOpacity});\n  opacity: var(${variables.brushUnselectedOpacity});\n  pointer-events: none;\n`\n\nexport const handleLine = css`\n  label: handle-line;\n  stroke: var(${variables.brushHandleStrokeColor});\n  stroke-width: 1;\n  fill: none;\n  pointer-events: none;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEY,MAAA,cAAc,GAAG;AAC5B,IAAA,kCAAkC,EAAE,MAAM;AAC1C,IAAA,oCAAoC,EAAE,MAAM;AAC5C,IAAA,oCAAoC,EAAE,GAAG;AACzC,IAAA,+BAA+B,EAAE,GAAG;AACpC,IAAA,mCAAmC,EAAE,SAAS;AAC9C,IAAA,qCAAqC,EAAE,SAAS;AAChD,IAAA,qCAAqC,EAAE,GAAG;AAC1C,IAAA,gCAAgC,EAAE,KAAK;AACvC,IAAA,+BAA+B,EAAE,SAAS;AAC1C,IAAA,iCAAiC,EAAE,MAAM;;AAGzC,IAAA,uCAAuC,EAAE,MAAM;AAC/C,IAAA,yCAAyC,EAAE,MAAM;AACjD,IAAA,yCAAyC,EAAE,GAAG;AAC9C,IAAA,oCAAoC,EAAE,GAAG;AACzC,IAAA,wCAAwC,EAAE,SAAS;AACnD,IAAA,0CAA0C,EAAE,SAAS;AACrD,IAAA,0CAA0C,EAAE,GAAG;AAC/C,IAAA,qCAAqC,EAAE,KAAK;AAC5C,IAAA,oCAAoC,EAAE,SAAS;AAC/C,IAAA,sCAAsC,EAAE,uBAAuB;EAChE;MAEY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;AAIR,cAAA,EAAA,SAAS,CAAC,uBAAuB,CAAA;AAC/B,gBAAA,EAAA,SAAS,CAAC,yBAAyB,CAAA;AAC7B,sBAAA,EAAA,SAAS,CAAC,yBAAyB,CAAA;AACxC,iBAAA,EAAA,SAAS,CAAC,qBAAqB,CAAA;;;;AAIlC,cAAA,EAAA,SAAS,CAAC,oBAAoB,CAAA;;;;;;;;EAQ7C;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA;;AAEf,YAAA,EAAA,SAAS,CAAC,wBAAwB,CAAA;AAChC,cAAA,EAAA,SAAS,CAAC,0BAA0B,CAAA;AAC9B,oBAAA,EAAA,SAAS,CAAC,0BAA0B,CAAA;AAClC,sBAAA,EAAA,SAAS,CAAC,sBAAsB,CAAA;AACvC,eAAA,EAAA,SAAS,CAAC,sBAAsB,CAAA;;EAEhD;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA;;AAEb,cAAA,EAAA,SAAS,CAAC,sBAAsB,CAAA;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/brush/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nexport const root = css`\n  label: brush-component;\n`\n\nexport const cssVarDefaults = {\n  '--vis-brush-selection-fill-color': 'none',\n  '--vis-brush-selection-stroke-color': 'none',\n  '--vis-brush-selection-stroke-width': '0',\n  '--vis-brush-selection-opacity': '0',\n  '--vis-brush-unselected-fill-color': '#0b1640',\n  '--vis-brush-unselected-stroke-color': '#acb2b9',\n  '--vis-brush-unselected-stroke-width': '0',\n  '--vis-brush-unselected-opacity': '0.4',\n  '--vis-brush-handle-fill-color': '#6d778c',\n  '--vis-brush-handle-stroke-color': '#eee',\n\n  /* Dark Theme */\n  '--vis-dark-brush-selection-fill-color': 'none',\n  '--vis-dark-brush-selection-stroke-color': 'none',\n  '--vis-dark-brush-selection-stroke-width': '0',\n  '--vis-dark-brush-selection-opacity': '0',\n  '--vis-dark-brush-unselected-fill-color': '#acb2b9',\n  '--vis-dark-brush-unselected-stroke-color': '#0b1640',\n  '--vis-dark-brush-unselected-stroke-width': '0',\n  '--vis-dark-brush-unselected-opacity': '0.4',\n  '--vis-dark-brush-handle-fill-color': '#acb2b9',\n  '--vis-dark-brush-handle-stroke-color': 'var(--vis-color-grey)',\n}\n\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const brush = css`\n  label: brush;\n\n  .selection {\n    fill: var(${variables.brushSelectionFillColor});\n    stroke: var(${variables.brushSelectionStrokeColor});\n    stroke-width: var(${variables.brushSelectionStrokeWidth});\n    opacity: var(${variables.brushSelectionOpacity});\n  }\n\n  .handle {\n    fill: var(${variables.brushHandleFillColor});\n  }\n\n  &.non-draggable {\n    .selection, .overlay {\n      pointer-events: none;\n    }\n  }\n`\n\nexport const unselected = css`\n  label: unselected;\n  fill: var(${variables.brushUnselectedFillColor});\n  stroke: var(${variables.brushUnselectedStrokeColor});\n  stroke-width: var(${variables.brushUnselectedStrokeWidth});\n  stroke-opacity: var(${variables.brushUnselectedOpacity});\n  opacity: var(${variables.brushUnselectedOpacity});\n  pointer-events: none;\n`\n\nexport const handleLine = css`\n  label: handle-line;\n  stroke: var(${variables.brushHandleStrokeColor});\n  stroke-width: 1;\n  fill: none;\n  pointer-events: none;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEY,MAAA,cAAc,GAAG;AAC5B,IAAA,kCAAkC,EAAE,MAAM;AAC1C,IAAA,oCAAoC,EAAE,MAAM;AAC5C,IAAA,oCAAoC,EAAE,GAAG;AACzC,IAAA,+BAA+B,EAAE,GAAG;AACpC,IAAA,mCAAmC,EAAE,SAAS;AAC9C,IAAA,qCAAqC,EAAE,SAAS;AAChD,IAAA,qCAAqC,EAAE,GAAG;AAC1C,IAAA,gCAAgC,EAAE,KAAK;AACvC,IAAA,+BAA+B,EAAE,SAAS;AAC1C,IAAA,iCAAiC,EAAE,MAAM;;AAGzC,IAAA,uCAAuC,EAAE,MAAM;AAC/C,IAAA,yCAAyC,EAAE,MAAM;AACjD,IAAA,yCAAyC,EAAE,GAAG;AAC9C,IAAA,oCAAoC,EAAE,GAAG;AACzC,IAAA,wCAAwC,EAAE,SAAS;AACnD,IAAA,0CAA0C,EAAE,SAAS;AACrD,IAAA,0CAA0C,EAAE,GAAG;AAC/C,IAAA,qCAAqC,EAAE,KAAK;AAC5C,IAAA,oCAAoC,EAAE,SAAS;AAC/C,IAAA,sCAAsC,EAAE,uBAAuB;EAChE;MAEY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;AAIR,cAAA,EAAA,SAAS,CAAC,uBAAuB,CAAA;AAC/B,gBAAA,EAAA,SAAS,CAAC,yBAAyB,CAAA;AAC7B,sBAAA,EAAA,SAAS,CAAC,yBAAyB,CAAA;AACxC,iBAAA,EAAA,SAAS,CAAC,qBAAqB,CAAA;;;;AAIlC,cAAA,EAAA,SAAS,CAAC,oBAAoB,CAAA;;;;;;;;EAQ7C;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;AAEf,YAAA,EAAA,SAAS,CAAC,wBAAwB,CAAA;AAChC,cAAA,EAAA,SAAS,CAAC,0BAA0B,CAAA;AAC9B,oBAAA,EAAA,SAAS,CAAC,0BAA0B,CAAA;AAClC,sBAAA,EAAA,SAAS,CAAC,sBAAsB,CAAA;AACvC,eAAA,EAAA,SAAS,CAAC,sBAAsB,CAAA;;EAEhD;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;AAEb,cAAA,EAAA,SAAS,CAAC,sBAAsB,CAAA;;;;;;;;"}

package/components/bullet-legend/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/bullet-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: bullet-legend-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-legend-font-family: */\n\n    --vis-legend-label-color: #6c778c;\n    --vis-legend-label-max-width: 300px;\n    --vis-legend-label-font-size: 12px;\n    --vis-legend-bullet-size: 9px;\n    --vis-legend-bullet-inactive-opacity: 0.15;\n    --vis-legend-item-spacing: 20px;\n    --vis-legend-vertical-item-spacing: 5px;\n    --vis-legend-bullet-label-spacing: 8px;\n\n    --vis-dark-legend-label-color: #eee;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-legend-label-color: var(--vis-dark-legend-label-color);\n  }\n\n  body.theme-patterns {\n    --vis-legend-bullet-size: 14px;\n  }\n`\n\nexport const item = css`\n  label: legendItem;\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--vis-legend-font-family, var(--vis-font-family));\n  margin-right: var(--vis-legend-item-spacing);\n  white-space: nowrap;\n  cursor: default;\n  user-select: none;\n  max-width: min-content;\n`\n\nexport const itemVertical = css`\n  label: legendItemVertical;\n  display: flex;\n  margin-top: var(--vis-legend-vertical-item-spacing);\n`\n\nexport const clickable = css`\n  cursor: pointer;\n`\n\nexport const label = css`\n  label: legendItemLabel;\n  font-size: var(--vis-legend-label-font-size);\n  display: inline-block;\n  vertical-align: middle;\n  color: var(--vis-legend-label-color);\n  max-width: var(--vis-legend-label-max-width);\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n`\n\nexport const bullet = css`\n  flex: 0 0 auto;\n  label: legendItemBullet;\n  margin-right: var(--vis-legend-bullet-label-spacing);\n  height: var(--vis-legend-bullet-size);\n  width: var(--vis-legend-bullet-size);\n\n  svg {\n    display: block;\n  }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA;;;;;;;;;;;;;;;;;AAiBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;EAO7B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;;;EAUtB;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA;;;;EAI9B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA;;EAE3B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;EAUvB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/bullet-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: bullet-legend-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-legend-font-family: */\n\n    --vis-legend-label-color: #6c778c;\n    --vis-legend-label-max-width: 300px;\n    --vis-legend-label-font-size: 12px;\n    --vis-legend-bullet-size: 9px;\n    --vis-legend-bullet-inactive-opacity: 0.15;\n    --vis-legend-item-spacing: 20px;\n    --vis-legend-vertical-item-spacing: 5px;\n    --vis-legend-bullet-label-spacing: 8px;\n\n    --vis-dark-legend-label-color: #eee;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-legend-label-color: var(--vis-dark-legend-label-color);\n  }\n\n  body.theme-patterns {\n    --vis-legend-bullet-size: 14px;\n  }\n`\n\nexport const item = css`\n  label: legendItem;\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--vis-legend-font-family, var(--vis-font-family));\n  margin-right: var(--vis-legend-item-spacing);\n  white-space: nowrap;\n  cursor: default;\n  user-select: none;\n  max-width: min-content;\n`\n\nexport const itemVertical = css`\n  label: legendItemVertical;\n  display: flex;\n  margin-top: var(--vis-legend-vertical-item-spacing);\n`\n\nexport const clickable = css`\n  cursor: pointer;\n`\n\nexport const label = css`\n  label: legendItemLabel;\n  font-size: var(--vis-legend-label-font-size);\n  display: inline-block;\n  vertical-align: middle;\n  color: var(--vis-legend-label-color);\n  max-width: var(--vis-legend-label-max-width);\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n`\n\nexport const bullet = css`\n  flex: 0 0 auto;\n  label: legendItemBullet;\n  margin-right: var(--vis-legend-bullet-label-spacing);\n  height: var(--vis-legend-bullet-size);\n  width: var(--vis-legend-bullet-size);\n\n  svg {\n    display: block;\n  }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;AAiBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;EAO7B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUtB;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;EAI9B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUvB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;"}

package/components/chord-diagram/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/chord-diagram/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: chord-diagram-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-chord-diagram-link-fill-color: #cad5f6;\n    --vis-chord-diagram-link-stroke-color: #777777;\n    --vis-chord-diagram-link-opacity: 0.5;\n    --vis-chord-diagram-link-stroke-opacity: 0.15;\n    --vis-chord-diagram-link-highlighted-opacity: 0.9;\n    --vis-chord-diagram-link-dimmed-opacity: 0.25;\n\n    --vis-chord-diagram-node-highlighted-opacity: 0.9;\n    --vis-chord-diagram-node-dimmed-opacity: 0.25;\n\n    --vis-chord-diagram-label-text-fill-color-bright: #ffffff;\n    --vis-chord-diagram-label-text-fill-color-dark: #a5abb2;\n    --vis-chord-diagram-label-text-font-size: 1em;\n\n    --vis-dark-chord-diagram-link-fill-color: #575c65;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-chord-diagram-link-fill-color: var(--vis-dark-chord-diagram-link-fill-color);\n  }\n`\n\nexport const background = css`\n  label: background;\n`\n\nexport const nodes = css`\n  label: nodes;\n`\n\nexport const links = css`\n  label: links;\n`\n\nexport const labels = css`\n  label: labels;\n`\n\nexport const node = css`\n  label: node;\n  stroke-width: 0;\n  fill: var(--vis-color-main);\n  stroke: var(--vis-color-main);\n  transition: .1s fill-opacity;\n`\n\nexport const highlightedNode = css`\n  label: highlighted;\n  fill-opacity: var(--vis-chord-diagram-node-highlighted-opacity);\n  stroke-width: 1.5;\n`\n\nexport const label = css`\n  label: label;\n`\n\nexport const labelText = css`\n  label: label-text;\n\n  dominant-baseline: middle;\n  user-select: none;\n  font-size: var(--vis-chord-diagram-label-text-font-size);\n  \n  > textPath {\n    dominant-baseline: central;\n  }\n`\n\nexport const labelExit = css`\n  label: label-exit;\n`\n\nexport const link = css`\n  label: link;\n\n  fill: var(--vis-chord-diagram-link-fill-color);\n  fill-opacity: var(--vis-chord-diagram-link-opacity);\n  stroke: var(--vis-chord-diagram-link-stroke-color);\n  stroke-opacity:  var(--vis-chord-diagram-link-stroke-opacity);\n  transition: .1s fill-opacity;\n`\nexport const highlightedLink = css`\n  label: highlighted;\n  fill-opacity: var(--vis-chord-diagram-link-highlighted-opacity);\n`\n\nexport const transparent = css`\n  label: transparent;\n\n  ${`.${link}`}:not(${`.${highlightedLink}`}) {\n    fill-opacity: var(--vis-chord-diagram-link-dimmed-opacity);\n  }\n\n  ${`.${node}`}:not(${`.${highlightedNode}`}) {\n    fill-opacity: var(--vis-chord-diagram-node-dimmed-opacity);\n  }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA;;;;;;;;;;;;;;;;;;;AAmBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;EAG7B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA;;EAE5B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA;;EAEvB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA;;EAEvB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA;;EAExB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;EAMtB;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA;;;;EAIjC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;EAU3B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA;;EAE3B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;EAQtB;AACM,MAAM,eAAe,GAAG,GAAG,CAAA;;;EAGjC;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA;;;AAG1B,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE,CAAQ,KAAA,EAAA,CAAA,CAAA,EAAI,eAAe,CAAE,CAAA,CAAA;;;;AAIvC,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE,CAAQ,KAAA,EAAA,CAAA,CAAA,EAAI,eAAe,CAAE,CAAA,CAAA;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/chord-diagram/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: chord-diagram-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-chord-diagram-link-fill-color: #cad5f6;\n    --vis-chord-diagram-link-stroke-color: #777777;\n    --vis-chord-diagram-link-opacity: 0.5;\n    --vis-chord-diagram-link-stroke-opacity: 0.15;\n    --vis-chord-diagram-link-highlighted-opacity: 0.9;\n    --vis-chord-diagram-link-dimmed-opacity: 0.25;\n\n    --vis-chord-diagram-node-highlighted-opacity: 0.9;\n    --vis-chord-diagram-node-dimmed-opacity: 0.25;\n\n    --vis-chord-diagram-label-text-fill-color-bright: #ffffff;\n    --vis-chord-diagram-label-text-fill-color-dark: #a5abb2;\n    --vis-chord-diagram-label-text-font-size: 1em;\n\n    --vis-dark-chord-diagram-link-fill-color: #575c65;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-chord-diagram-link-fill-color: var(--vis-dark-chord-diagram-link-fill-color);\n  }\n`\n\nexport const background = css`\n  label: background;\n`\n\nexport const nodes = css`\n  label: nodes;\n`\n\nexport const links = css`\n  label: links;\n`\n\nexport const labels = css`\n  label: labels;\n`\n\nexport const node = css`\n  label: node;\n  stroke-width: 0;\n  fill: var(--vis-color-main);\n  stroke: var(--vis-color-main);\n  transition: .1s fill-opacity;\n`\n\nexport const highlightedNode = css`\n  label: highlighted;\n  fill-opacity: var(--vis-chord-diagram-node-highlighted-opacity);\n  stroke-width: 1.5;\n`\n\nexport const label = css`\n  label: label;\n`\n\nexport const labelText = css`\n  label: label-text;\n\n  dominant-baseline: middle;\n  user-select: none;\n  font-size: var(--vis-chord-diagram-label-text-font-size);\n  \n  > textPath {\n    dominant-baseline: central;\n  }\n`\n\nexport const labelExit = css`\n  label: label-exit;\n`\n\nexport const link = css`\n  label: link;\n\n  fill: var(--vis-chord-diagram-link-fill-color);\n  fill-opacity: var(--vis-chord-diagram-link-opacity);\n  stroke: var(--vis-chord-diagram-link-stroke-color);\n  stroke-opacity:  var(--vis-chord-diagram-link-stroke-opacity);\n  transition: .1s fill-opacity;\n`\nexport const highlightedLink = css`\n  label: highlighted;\n  fill-opacity: var(--vis-chord-diagram-link-highlighted-opacity);\n`\n\nexport const transparent = css`\n  label: transparent;\n\n  ${`.${link}`}:not(${`.${highlightedLink}`}) {\n    fill-opacity: var(--vis-chord-diagram-link-dimmed-opacity);\n  }\n\n  ${`.${node}`}:not(${`.${highlightedNode}`}) {\n    fill-opacity: var(--vis-chord-diagram-node-dimmed-opacity);\n  }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;AAmBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;EAG7B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;EAMtB;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;EAIjC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAU3B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQtB;AACM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;EAGjC;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;AAG1B,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE,CAAQ,KAAA,EAAA,CAAA,CAAA,EAAI,eAAe,CAAE,CAAA,CAAA;;;;AAIvC,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE,CAAQ,KAAA,EAAA,CAAA,CAAA,EAAI,eAAe,CAAE,CAAA,CAAA;;;;;;;"}

package/components/crosshair/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/crosshair/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-crosshair-line-stroke-color: #888;\n    --vis-crosshair-line-stroke-width: 1px;\n    --vis-crosshair-line-stroke-opacity: 1;\n    --vis-crosshair-circle-stroke-color: #fff;\n    --vis-crosshair-circle-stroke-width: 1px;\n    --vis-crosshair-circle-stroke-opacity: 0.75;\n  }\n`\n\nexport const root = css`\n  label: crosshair-component;\n`\n\nexport const line = css`\n  stroke: var(--vis-crosshair-line-stroke-color);\n  stroke-width: var(--vis-crosshair-line-stroke-width);\n  stroke-opacity: var(--vis-crosshair-line-stroke-opacity);\n  pointer-events: none;\n`\n\nexport const circle = css`\n  stroke: var(--vis-crosshair-circle-stroke-color);\n  stroke-width: var(--vis-crosshair-circle-stroke-width);\n  stroke-opacity: var(--vis-crosshair-circle-stroke-opacity);\n  pointer-events: none;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,YAAY,GAAG,YAAY,CAAA;;;;;;;;;EASvC;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;EAKtB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/crosshair/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-crosshair-line-stroke-color: #888;\n    --vis-crosshair-line-stroke-width: 1px;\n    --vis-crosshair-line-stroke-opacity: 1;\n    --vis-crosshair-circle-stroke-color: #fff;\n    --vis-crosshair-circle-stroke-width: 1px;\n    --vis-crosshair-circle-stroke-opacity: 0.75;\n  }\n`\n\nexport const root = css`\n  label: crosshair-component;\n`\n\nexport const line = css`\n  stroke: var(--vis-crosshair-line-stroke-color);\n  stroke-width: var(--vis-crosshair-line-stroke-width);\n  stroke-opacity: var(--vis-crosshair-line-stroke-opacity);\n  pointer-events: none;\n`\n\nexport const circle = css`\n  stroke: var(--vis-crosshair-circle-stroke-color);\n  stroke-width: var(--vis-crosshair-circle-stroke-width);\n  stroke-opacity: var(--vis-crosshair-circle-stroke-opacity);\n  pointer-events: none;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;EASvC;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;EAKtB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;;;;;;;"}

package/components/donut/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/donut/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: donut-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-donut-central-label-font-size: 16px;\n    --vis-donut-central-label-text-color: #5b5f6d;\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-donut-central-label-font-family: */\n    --vis-donut-central-label-font-weight: 600;\n\n    --vis-donut-central-sub-label-font-size: 12px;\n    --vis-donut-central-sub-label-text-color: #5b5f6d;\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-donut-central-sub-label-font-family: */\n    --vis-donut-central-sub-label-font-weight: 500;\n\n    --vis-donut-background-color: #E7E9F3;\n    --vis-donut-segment-stroke-width: 0;\n    // The line segment color variable is not defined by default\n    // to allow it to fallback to the donut background color\n    /* --vis-donut-segment-stroke-color: none; */\n\n    --vis-dark-donut-central-label-text-color: #C2BECE;\n    --vis-dark-donut-central-sub-label-text-color: #C2BECE;\n    --vis-dark-donut-background-color: #18160C;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-donut-central-label-text-color: var(--vis-dark-donut-central-label-text-color);\n    --vis-donut-central-sub-label-text-color: var(--vis-dark-donut-central-sub-label-text-color);\n    --vis-donut-background-color: var(--vis-dark-donut-background-color);\n  }\n`\nexport const background = css`\n  label: background;\n  fill: var(--vis-donut-background-color);\n`\n\nexport const segment = css`\n  label: segment;\n  stroke-width: var(--vis-donut-segment-stroke-width);\n  stroke: var(--vis-donut-segment-stroke-color, var(--vis-donut-background-color));\n`\n\nexport const segmentExit = css`\n  label: segment-exit;\n`\n\nexport const centralLabel = css`\n  label: central-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-donut-central-label-font-size);\n  font-family: var(--vis-donut-central-label-font-family, var(--vis-font-family));\n  font-weight: var(--vis-donut-central-label-font-weight);\n  fill: var(--vis-donut-central-label-text-color);\n`\n\nexport const centralSubLabel = css`\n  label: central-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-donut-central-sub-label-font-size);\n  font-family: var(--vis-donut-central-sub-label-font-family, var(--vis-font-family));\n  font-weight: var(--vis-donut-central-sub-label-font-weight);\n  fill: var(--vis-donut-central-sub-label-text-color);\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;EAK7B;AACM,MAAM,UAAU,GAAG,GAAG,CAAA;;;EAG5B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA;;;;EAIzB;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA;;EAE7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;EAQ9B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/donut/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: donut-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-donut-central-label-font-size: 16px;\n    --vis-donut-central-label-text-color: #5b5f6d;\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-donut-central-label-font-family: */\n    --vis-donut-central-label-font-weight: 600;\n\n    --vis-donut-central-sub-label-font-size: 12px;\n    --vis-donut-central-sub-label-text-color: #5b5f6d;\n    // Undefined by default to allow proper fallback to var(--vis-font-family)\n    /* --vis-donut-central-sub-label-font-family: */\n    --vis-donut-central-sub-label-font-weight: 500;\n\n    --vis-donut-background-color: #E7E9F3;\n    --vis-donut-segment-stroke-width: 0;\n    // The line segment color variable is not defined by default\n    // to allow it to fallback to the donut background color\n    /* --vis-donut-segment-stroke-color: none; */\n\n    --vis-dark-donut-central-label-text-color: #C2BECE;\n    --vis-dark-donut-central-sub-label-text-color: #C2BECE;\n    --vis-dark-donut-background-color: #18160C;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-donut-central-label-text-color: var(--vis-dark-donut-central-label-text-color);\n    --vis-donut-central-sub-label-text-color: var(--vis-dark-donut-central-sub-label-text-color);\n    --vis-donut-background-color: var(--vis-dark-donut-background-color);\n  }\n`\nexport const background = css`\n  label: background;\n  fill: var(--vis-donut-background-color);\n`\n\nexport const segment = css`\n  label: segment;\n  stroke-width: var(--vis-donut-segment-stroke-width);\n  stroke: var(--vis-donut-segment-stroke-color, var(--vis-donut-background-color));\n`\n\nexport const segmentExit = css`\n  label: segment-exit;\n`\n\nexport const centralLabel = css`\n  label: central-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-donut-central-label-font-size);\n  font-family: var(--vis-donut-central-label-font-family, var(--vis-font-family));\n  font-weight: var(--vis-donut-central-label-font-weight);\n  fill: var(--vis-donut-central-label-text-color);\n`\n\nexport const centralSubLabel = css`\n  label: central-label;\n  text-anchor: middle;\n  dominant-baseline: middle;\n  font-size: var(--vis-donut-central-sub-label-font-size);\n  font-family: var(--vis-donut-central-sub-label-font-family, var(--vis-font-family));\n  font-weight: var(--vis-donut-central-sub-label-font-weight);\n  fill: var(--vis-donut-central-sub-label-text-color);\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;EAK7B;AACM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;EAG5B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;;;EAIzB;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;EAE7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ9B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;"}

package/components/flow-legend/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/flow-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'\n\nexport const root = css`\n  label: flow-legend-component;\n\n  position: relative;\n  user-select: none;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-flow-legend-label-background: #ffffff;\n    --vis-flow-legend-label-color: #71788a;\n    --vis-flow-legend-link-color: #E5E9F7;\n    --vis-flow-legend-arrow-color: #E5E9F7;\n    --vis-flow-legend-label-padding: 5px 15px;\n    --vis-flow-legend-arrow-padding: 0 10px;\n    /* --vis-flow-legend-arrow-font-family: Undefined by default to allow proper fallback to var(DEFAULT_ICON_FONT_FAMILY)*/\n\n    --vis-dark-flow-legend-label-background: #292b34;\n    --vis-dark-flow-legend-label-color: #E5E9F7;\n    --vis-dark-flow-legend-link-color: #71788a;\n    --vis-dark-flow-legend-arrow-color: #71788a;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-flow-legend-label-background: var(--vis-dark-flow-legend-label-background);\n    --vis-flow-legend-label-color: var(--vis-dark-flow-legend-label-color);\n    --vis-flow-legend-link-color: var(--vis-dark-flow-legend-link-color);\n    --vis-flow-legend-arrow-color: var(--vis-dark-flow-legend-arrow-color);\n  }\n`\n\nexport const line = (lineColor: string): string => css`\n  label: line;\n\n  height: 2px;\n  width: 100%;\n  background-color: ${lineColor || 'var(--vis-flow-legend-link-color)'};\n  position: absolute;\n  top: 50%;\n`\n\nexport const labels = css`\n  label: labels;\n\n  position: relative;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n`\n\nexport const item = css`\n  label: item;\n\n  position: relative;\n  max-width: 50px;\n\n  padding: 10px;\n`\n\nexport const clickable = css`\n  cursor: pointer;\n\n  &:hover {\n    text-decoration: underline;\n  }\n`\n\nexport const label = (labelFontSize: number, labelColor: string): string => css`\n  label: label;\n\n  transform: translate(-50%, 0%);\n  margin-left: 7px;\n  background-color: var(--vis-flow-legend-label-background);\n  padding: var(--vis-flow-legend-label-padding);\n  font-size: ${labelFontSize}px;\n  color: ${labelColor || 'var(--vis-flow-legend-label-color)'};\n  display: inline-table;\n  text-align: center;\n`\n\nexport const arrow = (arrowColor: string): string => css`\n  label: arrow;\n\n  font-family: var(--vis-flow-legend-arrow-font-family, ${UNOVIS_ICON_FONT_FAMILY_DEFAULT});\n  font-size: 9px;\n  vertical-align: middle;\n  color: ${arrowColor || 'var(--vis-flow-legend-arrow-color)'};\n  background-color: var(--vis-flow-legend-label-background);\n  padding: var(--vis-flow-legend-arrow-padding);\n  transform: translate(-25%, 0%);\n  display: inline-table;\n  text-align: center;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;EAKtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA;;;;;;;;;;;;;;;;AAgBpB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;EAM7B;AAEY,MAAA,IAAI,GAAG,CAAC,SAAiB,KAAa,GAAG,CAAA;;;;;AAKhC,oBAAA,EAAA,SAAS,IAAI,mCAAmC,CAAA;;;EAGrE;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;EAQxB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;EAOtB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;EAM3B;AAEM,MAAM,KAAK,GAAG,CAAC,aAAqB,EAAE,UAAkB,KAAa,GAAG,CAAA;;;;;;;eAOhE,aAAa,CAAA;AACjB,SAAA,EAAA,UAAU,IAAI,oCAAoC,CAAA;;;EAG5D;AAEY,MAAA,KAAK,GAAG,CAAC,UAAkB,KAAa,GAAG,CAAA;;;0DAGE,+BAA+B,CAAA;;;AAG9E,SAAA,EAAA,UAAU,IAAI,oCAAoC,CAAA;;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/flow-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'\n\nexport const root = css`\n  label: flow-legend-component;\n\n  position: relative;\n  user-select: none;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-flow-legend-label-background: #ffffff;\n    --vis-flow-legend-label-color: #71788a;\n    --vis-flow-legend-link-color: #E5E9F7;\n    --vis-flow-legend-arrow-color: #E5E9F7;\n    --vis-flow-legend-label-padding: 5px 15px;\n    --vis-flow-legend-arrow-padding: 0 10px;\n    /* --vis-flow-legend-arrow-font-family: Undefined by default to allow proper fallback to var(DEFAULT_ICON_FONT_FAMILY)*/\n\n    --vis-dark-flow-legend-label-background: #292b34;\n    --vis-dark-flow-legend-label-color: #E5E9F7;\n    --vis-dark-flow-legend-link-color: #71788a;\n    --vis-dark-flow-legend-arrow-color: #71788a;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-flow-legend-label-background: var(--vis-dark-flow-legend-label-background);\n    --vis-flow-legend-label-color: var(--vis-dark-flow-legend-label-color);\n    --vis-flow-legend-link-color: var(--vis-dark-flow-legend-link-color);\n    --vis-flow-legend-arrow-color: var(--vis-dark-flow-legend-arrow-color);\n  }\n`\n\nexport const line = (lineColor: string): string => css`\n  label: line;\n\n  height: 2px;\n  width: 100%;\n  background-color: ${lineColor || 'var(--vis-flow-legend-link-color)'};\n  position: absolute;\n  top: 50%;\n`\n\nexport const labels = css`\n  label: labels;\n\n  position: relative;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n`\n\nexport const item = css`\n  label: item;\n\n  position: relative;\n  max-width: 50px;\n\n  padding: 10px;\n`\n\nexport const clickable = css`\n  cursor: pointer;\n\n  &:hover {\n    text-decoration: underline;\n  }\n`\n\nexport const label = (labelFontSize: number, labelColor: string): string => css`\n  label: label;\n\n  transform: translate(-50%, 0%);\n  margin-left: 7px;\n  background-color: var(--vis-flow-legend-label-background);\n  padding: var(--vis-flow-legend-label-padding);\n  font-size: ${labelFontSize}px;\n  color: ${labelColor || 'var(--vis-flow-legend-label-color)'};\n  display: inline-table;\n  text-align: center;\n`\n\nexport const arrow = (arrowColor: string): string => css`\n  label: arrow;\n\n  font-family: var(--vis-flow-legend-arrow-font-family, ${UNOVIS_ICON_FONT_FAMILY_DEFAULT});\n  font-size: 9px;\n  vertical-align: middle;\n  color: ${arrowColor || 'var(--vis-flow-legend-arrow-color)'};\n  background-color: var(--vis-flow-legend-label-background);\n  padding: var(--vis-flow-legend-arrow-padding);\n  transform: translate(-25%, 0%);\n  display: inline-table;\n  text-align: center;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;EAKtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;AAgBpB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;EAM7B;AAEY,MAAA,IAAI,GAAG,CAAC,SAAiB,KAAa,GAAG,CAAA,CAAA;;;;;AAKhC,oBAAA,EAAA,SAAS,IAAI,mCAAmC,CAAA;;;EAGrE;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQxB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;EAOtB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;EAM3B;AAEM,MAAM,KAAK,GAAG,CAAC,aAAqB,EAAE,UAAkB,KAAa,GAAG,CAAA,CAAA;;;;;;;eAOhE,aAAa,CAAA;AACjB,SAAA,EAAA,UAAU,IAAI,oCAAoC,CAAA;;;EAG5D;AAEY,MAAA,KAAK,GAAG,CAAC,UAAkB,KAAa,GAAG,CAAA,CAAA;;;0DAGE,+BAA+B,CAAA;;;AAG9E,SAAA,EAAA,UAAU,IAAI,oCAAoC,CAAA;;;;;;;;;;"}

package/components/free-brush/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../src/components/free-brush/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: free-brush-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-free-brush-selection-fill-color: #0b1640;\n    --vis-free-brush-selection-fill-opacity: 0.4;\n    --vis-free-brush-selection-stroke-color: #acb2b9;\n    --vis-free-brush-handle-fill-color: #6d778c;\n    --vis-free-brush-handle-stroke-color: none;\n\n    --vis-dark-free-brush-selection-fill-color: #344174;\n    --vis-dark-free-brush-selection-stroke-color: #0b1640;\n    --vis-dark-free-brush-handle-fill-color: #6d778c;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-free-brush-selection-fill-color: var(--vis-dark-free-brush-selection-fill-color);\n    --vis-free-brush-selection-stroke-color: var(--vis-dark-free-brush-selection-stroke-color);\n    --vis-free-brush-handle-fill-color: var(--vis-dark-free-brush-selection-fill-color);\n  }\n`\n\nexport const brush = css`\n  label: brush;\n  fill: none;\n  stroke: none;\n\n  .selection {\n    fill: var(--vis-free-brush-selection-fill-color);\n    fill-opacity: var(--vis-free-brush-selection-fill-opacity);\n    stroke: var(--vis-free-brush-selection-stroke-color);\n    stroke-width: 0;\n    stroke-opacity: 0;\n  }\n\n  .handle {\n    fill: var(--vis-free-brush-handle-fill-color);\n    stroke: var(--vis-free-brush-handle-stroke-color);\n  }\n`\n\nexport const hide = css`\n  .selection, .handle {\n    display: none;\n  }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA;;;;;;;;;;;;;AAajB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;EAK7B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;EAiBvB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/free-brush/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: free-brush-component;\n`\n\nexport const variables = injectGlobal`\n  :root {\n    --vis-free-brush-selection-fill-color: #0b1640;\n    --vis-free-brush-selection-fill-opacity: 0.4;\n    --vis-free-brush-selection-stroke-color: #acb2b9;\n    --vis-free-brush-handle-fill-color: #6d778c;\n    --vis-free-brush-handle-stroke-color: none;\n\n    --vis-dark-free-brush-selection-fill-color: #344174;\n    --vis-dark-free-brush-selection-stroke-color: #0b1640;\n    --vis-dark-free-brush-handle-fill-color: #6d778c;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-free-brush-selection-fill-color: var(--vis-dark-free-brush-selection-fill-color);\n    --vis-free-brush-selection-stroke-color: var(--vis-dark-free-brush-selection-stroke-color);\n    --vis-free-brush-handle-fill-color: var(--vis-dark-free-brush-selection-fill-color);\n  }\n`\n\nexport const brush = css`\n  label: brush;\n  fill: none;\n  stroke: none;\n\n  .selection {\n    fill: var(--vis-free-brush-selection-fill-color);\n    fill-opacity: var(--vis-free-brush-selection-fill-opacity);\n    stroke: var(--vis-free-brush-selection-stroke-color);\n    stroke-width: 0;\n    stroke-opacity: 0;\n  }\n\n  .handle {\n    fill: var(--vis-free-brush-handle-fill-color);\n    stroke: var(--vis-free-brush-handle-stroke-color);\n  }\n`\n\nexport const hide = css`\n  .selection, .handle {\n    display: none;\n  }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;AAajB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;EAK7B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;EAiBvB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;"}

package/components/graph/config.d.ts

@@ -62,6 +62,14 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
      * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.
      * Default: `1` */
     layoutParallelSubGroupsPerRow?: number;
+    /** Spacing between nodes, dynamic by default.
+     * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.
+     * Default: `undefined` */
+    layoutParallelNodeSpacing?: number | [number, number];
+    /** Spacing between sub-groups.
+     * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.
+     * Default: `40` */
+    layoutParallelSubGroupSpacing?: number;
     /** Spacing between groups.
      * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.
      * Default: `undefined` */

package/components/graph/config.js

@@ -4,7 +4,7 @@ import { TrimMode } from '../../types/text.js';
 import { GraphLayoutType, GraphFitViewAlignment, GraphLinkStyle, GraphNodeShape, GraphNodeSelectionHighlightMode } from './types.js';
 
 // Utils
-const GraphDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfig), { duration: 1000, zoomScaleExtent: [0.35, 1.25], disableZoom: false, zoomEventFilter: undefined, disableDrag: false, disableBrush: false, zoomThrottledUpdateNodeThreshold: 100, layoutType: GraphLayoutType.Force, layoutAutofit: true, layoutAutofitTolerance: 8.0, layoutNonConnectedAside: false, fitViewPadding: 50, fitViewAlign: GraphFitViewAlignment.Center, layoutGroupOrder: [], layoutParallelSubGroupsPerRow: 1, layoutParallelNodesPerColumn: 6, layoutParallelGroupSpacing: undefined, layoutParallelSortConnectionsByGroup: undefined, layoutNodeGroup: (n) => n.group, layoutParallelNodeSubGroup: (n) => n.subgroup, forceLayoutSettings: {
+const GraphDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfig), { duration: 1000, zoomScaleExtent: [0.35, 1.25], disableZoom: false, zoomEventFilter: undefined, disableDrag: false, disableBrush: false, zoomThrottledUpdateNodeThreshold: 100, layoutType: GraphLayoutType.Force, layoutAutofit: true, layoutAutofitTolerance: 8.0, layoutNonConnectedAside: false, fitViewPadding: 50, fitViewAlign: GraphFitViewAlignment.Center, layoutGroupOrder: [], layoutParallelNodeSpacing: undefined, layoutParallelSubGroupsPerRow: 1, layoutParallelNodesPerColumn: 6, layoutParallelGroupSpacing: undefined, layoutParallelSubGroupSpacing: 40, layoutParallelSortConnectionsByGroup: undefined, layoutNodeGroup: (n) => n.group, layoutParallelNodeSubGroup: (n) => n.subgroup, forceLayoutSettings: {
         linkDistance: 60,
         linkStrength: 0.45,
         charge: -500,

package/components/graph/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/graph/config.ts"],"sourcesContent":["import { D3BrushEvent } from 'd3-brush'\nimport { D3DragEvent } from 'd3-drag'\nimport { D3ZoomEvent, ZoomTransform } from 'd3-zoom'\nimport { Selection } from 'd3-selection'\nimport { ElkShape } from 'elkjs'\n\n// Core\nimport type { GraphDataModel } from 'data-models/graph'\n\n// Utils\nimport { isEqual } from 'utils/data'\n\n// Config\nimport { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\n\n// Types\nimport { TrimMode } from 'types/text'\nimport { Spacing } from 'types/spacing'\nimport { GraphInputLink, GraphInputNode, GraphInputData } from 'types/graph'\nimport { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from 'types/accessor'\n\n// Local Types\nimport {\n  GraphLayoutType,\n  GraphCircleLabel,\n  GraphLinkStyle,\n  GraphLinkArrowStyle,\n  GraphPanelConfig,\n  GraphForceLayoutSettings,\n  GraphElkLayoutSettings,\n  GraphNodeShape,\n  GraphDagreLayoutSetting,\n  GraphNode,\n  GraphLink,\n  GraphNodeSelectionHighlightMode,\n  GraphFitViewAlignment,\n} from './types'\n\nexport interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {\n  // Zoom and drag\n  /** Zoom level constraints. Default: [0.35, 1.25] */\n  zoomScaleExtent?: [number, number];\n  /** Disable zooming. Default: `false` */\n  disableZoom?: boolean;\n  /** Custom Zoom event filter to better control which actions should trigger zooming.\n   * Learn more: https://d3js.org/d3-zoom#zoom_filter.\n   * Default: `undefined` */\n  zoomEventFilter?: (event: PointerEvent) => boolean;\n  /** Disable node dragging. Default: `false` */\n  disableDrag?: boolean;\n  /** Disable brush for multiple node selection. Default: `false` */\n  disableBrush?: boolean;\n  /** Interval to re-render the graph when zooming. Default: `100` */\n  zoomThrottledUpdateNodeThreshold?: number;\n  /** Padding for the graph when fitting to container. Default: `50` */\n  fitViewPadding?: Spacing | number;\n  /** Default alignment when fitting the graph view. Default: `GraphFitViewAlignment.Center` */\n  fitViewAlign?: GraphFitViewAlignment;\n\n  // Layout general settings\n  /** Type of the graph layout. Default: `GraphLayoutType.Force` */\n  layoutType?: GraphLayoutType | string;\n  /** Fit the graph to container on data or config updates, or on container resize. Default: `true` */\n  layoutAutofit?: boolean;\n  /** Tolerance constant defining whether the graph should be fitted to container\n   * (on data or config update, or container resize) after a zoom / pan interaction or not.\n   * `0` — Stop fitting after any pan or zoom\n   * `Number.POSITIVE_INFINITY` — Always fit\n   * Default: `8.0` */\n  layoutAutofitTolerance?: number;\n  /** Place non-connected nodes at the bottom of the graph. Default: `false` */\n  layoutNonConnectedAside?: boolean;\n\n  // Settings for Parallel and Concentric layouts\n  /** Node group accessor function.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `node => node.group` */\n  layoutNodeGroup?: StringAccessor<N>;\n  /** Order of the layout groups.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `[]` */\n  layoutGroupOrder?: string[];\n\n  // Setting for Parallel layouts only\n  /** Sets the number of nodes in a sub-group after which they'll continue on the next column (or row if `layoutType` is\n   * `GraphLayoutType.ParallelHorizontal`).\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `6` */\n  layoutParallelNodesPerColumn?: number;\n  /** Node sub-group accessor function.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `node => node.subgroup` */\n  layoutParallelNodeSubGroup?: StringAccessor<N>;\n  /** Number of sub-groups per row (or column if `layoutType` is `GraphLayoutType.ParallelHorizontal`) in a group.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `1` */\n  layoutParallelSubGroupsPerRow?: number;\n  /** Spacing between groups.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelGroupSpacing?: number;\n  /** Set a group by name to have priority in sorting the graph links.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelSortConnectionsByGroup?: string;\n\n  // Force layout\n  /** Force Layout settings, see the `d3-force` package for more details */\n  forceLayoutSettings?: GraphForceLayoutSettings<N, L>;\n\n  // Dagre layout\n  /** Darge Layout settings, see the `dagrejs` package\n   * for more details: https://github.com/dagrejs/dagre/wiki#configuring-the-layout\n  */\n  dagreLayoutSettings?: GraphDagreLayoutSetting;\n\n  // ELK layout\n  /** ELK layout options, see the `elkjs` package for more details: https://github.com/kieler/elkjs.\n   * If you want to specify custom layout option for each node group, you can provide an accessor function that\n   * receives group name ('root' for the top-level configuration) as the first argument and returns an object containing\n   * layout options. Default: `undefined`\n  */\n  layoutElkSettings?: GenericAccessor<GraphElkLayoutSettings, string> | undefined;\n  /** Array of accessor functions to define nested node groups for the ELK Layered layout.\n   * E.g.: `[n => n.group, n => n.subGroup]`.\n   * Default: `undefined` */\n  layoutElkNodeGroups?: StringAccessor<N>[];\n  /** A function to be called per graph node to get the ELK shape object.\n   * This enables you to provide custom node dimensions (through the `width` and `height` properties)\n   * and coordinates (through the `x` and `y` properties) if needed.\n   * Default: `undefined`\n  */\n  layoutElkGetNodeShape?: (d: GraphNode<N, L>, i: number) => ElkShape;\n\n  // Links\n  /** Link width accessor function ot constant value. Default: `1` */\n  linkWidth?: NumericAccessor<L>;\n  /** Link style accessor function or constant value. Default: `GraphLinkStyle.Solid`  */\n  linkStyle?: GenericAccessor<GraphLinkStyle, L>;\n  /** Link band width accessor function or constant value. Default: `0` */\n  linkBandWidth?: NumericAccessor<L>;\n  /** Link arrow accessor function or constant value. Default: `undefined` */\n  linkArrow?: GenericAccessor<GraphLinkArrowStyle | string | boolean, L> | undefined;\n  /** Link stroke color accessor function or constant value. Default: `undefined` */\n  linkStroke?: ColorAccessor<L>;\n  /** Link disabled state accessor function or constant value. Default: `false` */\n  linkDisabled?: BooleanAccessor<L>;\n  /** Link flow animation accessor function or constant value. Default: `false` */\n  linkFlow?: BooleanAccessor<L>;\n  /** Animation duration of the flow (traffic) circles in milliseconds. If `linkFlowParticleSpeed` is provided,\n   * this duration will be calculated based on the link length and particle speed. Default: `20000` */\n  linkFlowAnimDuration?: NumericAccessor<L>;\n  /** Size of the moving particles that represent traffic flow. Default: `2` */\n  linkFlowParticleSize?: NumericAccessor<L>;\n  /** Speed of the moving particles in pixels per second. This property takes precedence over `linkFlowAnimDuration`. Default: `undefined` */\n  linkFlowParticleSpeed?: NumericAccessor<L>;\n  /** Link label accessor function or constant value. Default: `undefined` */\n  linkLabel?: GenericAccessor<GraphCircleLabel | GraphCircleLabel[], L> | undefined;\n  /** Shift label along the link center a little bit to avoid overlap with the link arrow. Default: `true` */\n  linkLabelShiftFromCenter?: BooleanAccessor<L>;\n  /** Spacing between neighboring links. Default: `8` */\n  linkNeighborSpacing?: number;\n  /** Curvature of the link. Recommended value range: [0:1.5].\n   * `0` - straight line,\n   * `1` - nice curvature,\n   * `1.5` - very curve.\n   * Default: `0` */\n  linkCurvature?: NumericAccessor<L>;\n  /** Highlight links on hover. Default: `true` */\n  linkHighlightOnHover?: boolean;\n  /** Offset [x,y] in pixels from the source node's center point where the link should start. Default: `undefined` */\n  linkSourcePointOffset?: GenericAccessor<[number, number], GraphLink<N, L>>;\n  /** Offset [x,y] in pixels from the target node's center point where the link should end. Default: `undefined` */\n  linkTargetPointOffset?: GenericAccessor<[number, number], GraphLink<N, L>>;\n  /** Set selected link by its unique id. Default: `undefined` */\n  selectedLinkId?: number | string;\n\n  // Nodes\n  /** Node size accessor function or constant value. Default: `30` */\n  nodeSize?: NumericAccessor<N>;\n  /** Node stroke width accessor function or constant value. Default: `3` */\n  nodeStrokeWidth?: NumericAccessor<N>;\n  /** Node shape accessor function or constant value. Default: `GraphNodeShape.Circle` */\n  nodeShape?: GenericAccessor<GraphNodeShape | string, N>;\n  /** Node gauge outline accessor function or constant value in the range [0,100]. Default: `0` */\n  nodeGaugeValue?: NumericAccessor<N>;\n  /** Node gauge outline fill color accessor function or constant value. Default: `undefined` */\n  nodeGaugeFill?: ColorAccessor<N>;\n  /** Animation duration of the node gauge outline. Default: `1500` */\n  nodeGaugeAnimDuration?: number;\n  /** Node central icon accessor function or constant value. Default: `node => node.icon` */\n  nodeIcon?: StringAccessor<N>;\n  /** Node central icon size accessor function or constant value. Default: `undefined` */\n  nodeIconSize?: NumericAccessor<N>;\n  /** Node label accessor function or constant value. Default: `node => node.label` */\n  nodeLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node labels or not. Default: `true` */\n  nodeLabelTrim?: BooleanAccessor<N>;\n  /** Node label trimming mode. Default: `TrimMode.Middle` */\n  nodeLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeLabelTrimLength?: NumericAccessor<N>;\n  /** Node sub-label accessor function or constant value: Default: `''` */\n  nodeSubLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node sub-labels or not. Default: `true` */\n  nodeSubLabelTrim?: BooleanAccessor<N>;\n  /** Node sub-label trimming mode. Default: `TrimMode.Middle` */\n  nodeSubLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node sub-label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeSubLabelTrimLength?: NumericAccessor<N>;\n  /** Node circular side labels accessor function. The function should return an array of GraphCircleLabel objects. Default: `undefined` */\n  nodeSideLabels?: GenericAccessor<GraphCircleLabel[], N>;\n  /** Node bottom icon accessor function. Default: `undefined` */\n  nodeBottomIcon?: StringAccessor<N>;\n  /** Node disabled state accessor function or constant value. Default: `false` */\n  nodeDisabled?: BooleanAccessor<N>;\n  /** Node fill color accessor function or constant value. Default: `node => node.fill` */\n  nodeFill?: ColorAccessor<N>;\n  /** Node stroke color accessor function or constant value. Default: `node => node.stroke` */\n  nodeStroke?: ColorAccessor<N>;\n  /** Sorting function to determine node placement. Default: `undefined` */\n  nodeSort?: ((a: N, b: N) => number);\n  /** Specify the initial position for entering nodes as [x, y]. Default: `undefined` */\n  nodeEnterPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the initial scale for entering nodes in the range [0,1]. Default: `0.75` */\n  nodeEnterScale?: NumericAccessor<N> | undefined;\n  /** Specify the destination position for exiting nodes as [x, y]. Default: `undefined` */\n  nodeExitPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the destination scale for exiting nodes in the range [0,1]. Default: `0.75` */\n  nodeExitScale?: NumericAccessor<N> | undefined;\n  /** Custom \"enter\" function for node rendering. Default: `undefined` */\n  nodeEnterCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom \"update\" function for node rendering. Default: `undefined` */\n  nodeUpdateCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom partial \"update\" function for node rendering which will be triggered after the following events:\n   * - Full node update (`nodeUpdateCustomRenderFunction`);\n   * - Background click;\n   * - Node and Link mouseover and mouseout;\n   * - Node brushing,\n   * Default: `undefined` */\n  nodePartialUpdateCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom \"exit\" function for node rendering. Default: `undefined` */\n  nodeExitCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom render function that will be called while zooming / panning the graph. Default: `undefined` */\n  nodeOnZoomCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, zoomLevel: number) => void;\n  /** Define the mode for highlighting selected nodes in the graph. Default: `GraphNodeSelectionHighlightMode.GreyoutNonConnected` */\n  nodeSelectionHighlightMode?: GraphNodeSelectionHighlightMode;\n  /** Set selected node by unique id. Default: `undefined` */\n  selectedNodeId?: number | string;\n  /** Set selected nodes by unique id. Default: `undefined` */\n  selectedNodeIds?: number[] | string[];\n\n  /** Panels configuration. An array of `GraphPanelConfig` objects. Default: `[]` */\n  panels?: GraphPanelConfig[] | undefined;\n\n  // Events\n  /** Graph node drag start callback function. Default: `undefined` */\n  onNodeDragStart?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Graph node drag callback function. Default: `undefined` */\n  onNodeDrag?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Graph node drag end callback function. Default: `undefined` */\n  onNodeDragEnd?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Zoom event callback. Default: `undefined` */\n  onZoom?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n  /** Zoom start event callback. Default: `undefined` */\n  onZoomStart?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n  /** Zoom end event callback. Default: `undefined` */\n  onZoomEnd?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n  /** Callback function to be called when the graph layout is calculated. Default: `undefined` */\n  onLayoutCalculated?: (nodes: GraphNode<N, L>[], links: GraphLink<N, L>[]) => void;\n  /** Graph node selection brush callback function. Default: `undefined` */\n  onNodeSelectionBrush?: (selectedNodes: GraphNode<N, L>[], event: D3BrushEvent<SVGGElement> | undefined) => void;\n  /** Graph multiple node drag callback function. Default: `undefined` */\n  onNodeSelectionDrag?: (selectedNodes: GraphNode<N, L>[], event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void;\n  /** Callback function to be called when the graph rendering is complete. Default: `undefined` */\n  onRenderComplete?: (\n    g: Selection<SVGGElement, unknown, null, undefined>,\n    nodes: GraphNode<N, L>[],\n    links: GraphLink<N, L>[],\n    config: GraphConfigInterface<N, L>,\n    duration: number,\n    zoomLevel: number,\n    width: number,\n    height: number\n  ) => void;\n\n  /** Determines whether the component should update when new data is provided.\n   * This function takes the previous and new data as parameters and returns a boolean\n   * indicating whether the update should proceed. Useful for fine-grained control over\n   * update behavior when your data has a complex nested structure.\n   * By default the `isEqual` function from Unovis will be used to do the comparison.\n   */\n  shouldDataUpdate?: (\n    prevData: GraphInputData<N, L>,\n    nextData: GraphInputData<N, L>,\n    datamodel: GraphDataModel<N, L, GraphNode<N, L>, GraphLink<N, L>>\n  ) => boolean;\n}\n\nexport const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInputLink> = {\n  ...ComponentDefaultConfig,\n  duration: 1000,\n  zoomScaleExtent: [0.35, 1.25],\n  disableZoom: false,\n  zoomEventFilter: undefined,\n  disableDrag: false,\n  disableBrush: false,\n  zoomThrottledUpdateNodeThreshold: 100,\n  layoutType: GraphLayoutType.Force,\n  layoutAutofit: true,\n  layoutAutofitTolerance: 8.0,\n  layoutNonConnectedAside: false,\n  fitViewPadding: 50,\n  fitViewAlign: GraphFitViewAlignment.Center,\n\n  layoutGroupOrder: [],\n  layoutParallelSubGroupsPerRow: 1,\n  layoutParallelNodesPerColumn: 6,\n  layoutParallelGroupSpacing: undefined,\n  layoutParallelSortConnectionsByGroup: undefined,\n  layoutNodeGroup: (n: GraphInputNode): string => (n as { group: string }).group,\n  layoutParallelNodeSubGroup: (n: GraphInputNode): string => (n as { subgroup: string }).subgroup,\n\n  forceLayoutSettings: {\n    linkDistance: 60,\n    linkStrength: 0.45,\n    charge: -500,\n    forceXStrength: 0.15,\n    forceYStrength: 0.25,\n    numIterations: undefined,\n    fixNodePositionAfterSimulation: false,\n  },\n\n  dagreLayoutSettings: {\n    rankdir: 'BT',\n    ranker: 'longest-path',\n  },\n\n  layoutElkSettings: undefined,\n  layoutElkNodeGroups: undefined,\n  layoutElkGetNodeShape: undefined,\n\n  linkFlowAnimDuration: 20000,\n  linkFlowParticleSize: 2,\n  linkFlowParticleSpeed: undefined,\n  linkWidth: 1,\n  linkStyle: GraphLinkStyle.Solid,\n  linkBandWidth: 0,\n  linkArrow: undefined,\n  linkStroke: undefined,\n  linkFlow: false,\n  linkLabel: undefined,\n  linkLabelShiftFromCenter: true,\n  linkNeighborSpacing: 8,\n  linkDisabled: false,\n  linkCurvature: 0,\n  linkHighlightOnHover: true,\n  linkSourcePointOffset: undefined,\n  linkTargetPointOffset: undefined,\n  selectedLinkId: undefined,\n\n  nodeSize: 30,\n  nodeStrokeWidth: 3,\n  nodeShape: GraphNodeShape.Circle,\n  nodeGaugeValue: 0,\n  nodeIcon: (n: GraphInputNode): string => (n as { icon: string }).icon,\n  nodeIconSize: undefined,\n  nodeLabel: (n: GraphInputNode): string => (n as { label: string }).label,\n  nodeLabelTrim: true,\n  nodeLabelTrimLength: 15,\n  nodeLabelTrimMode: TrimMode.Middle,\n  nodeSubLabel: '',\n  nodeSubLabelTrim: true,\n  nodeSubLabelTrimLength: 15,\n  nodeSubLabelTrimMode: TrimMode.Middle,\n  nodeSideLabels: undefined,\n  nodeBottomIcon: undefined,\n  nodeDisabled: false,\n  nodeFill: (n: GraphInputNode): string => (n as { fill: string }).fill,\n  nodeGaugeFill: undefined,\n  nodeStroke: (n: GraphInputNode): string => (n as { stroke: string }).stroke,\n  nodeEnterPosition: undefined,\n  nodeEnterScale: 0.75,\n  nodeExitPosition: undefined,\n  nodeExitScale: 0.75,\n  nodeSort: undefined,\n  nodeSelectionHighlightMode: GraphNodeSelectionHighlightMode.GreyoutNonConnected,\n  nodeGaugeAnimDuration: 1500,\n\n  selectedNodeId: undefined,\n  selectedNodeIds: undefined,\n\n  panels: undefined,\n\n  onNodeDragStart: undefined,\n  onNodeDrag: undefined,\n  onNodeDragEnd: undefined,\n  onZoom: undefined,\n  onZoomStart: undefined,\n  onZoomEnd: undefined,\n  onLayoutCalculated: undefined,\n  onNodeSelectionBrush: undefined,\n  onNodeSelectionDrag: undefined,\n  onRenderComplete: undefined,\n\n  shouldDataUpdate: (prevData: GraphInputData<GraphInputNode, GraphInputLink>, nextData: GraphInputData<GraphInputNode, GraphInputLink>): boolean => {\n    return !isEqual(prevData, nextData)\n  },\n}\n"],"names":[],"mappings":";;;;;AASA;AAuSa,MAAA,kBAAkB,GAC1B,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,sBAAsB,KACzB,QAAQ,EAAE,IAAI,EACd,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,EAC7B,WAAW,EAAE,KAAK,EAClB,eAAe,EAAE,SAAS,EAC1B,WAAW,EAAE,KAAK,EAClB,YAAY,EAAE,KAAK,EACnB,gCAAgC,EAAE,GAAG,EACrC,UAAU,EAAE,eAAe,CAAC,KAAK,EACjC,aAAa,EAAE,IAAI,EACnB,sBAAsB,EAAE,GAAG,EAC3B,uBAAuB,EAAE,KAAK,EAC9B,cAAc,EAAE,EAAE,EAClB,YAAY,EAAE,qBAAqB,CAAC,MAAM,EAE1C,gBAAgB,EAAE,EAAE,EACpB,6BAA6B,EAAE,CAAC,EAChC,4BAA4B,EAAE,CAAC,EAC/B,0BAA0B,EAAE,SAAS,EACrC,oCAAoC,EAAE,SAAS,EAC/C,eAAe,EAAE,CAAC,CAAiB,KAAc,CAAuB,CAAC,KAAK,EAC9E,0BAA0B,EAAE,CAAC,CAAiB,KAAc,CAA0B,CAAC,QAAQ,EAE/F,mBAAmB,EAAE;AACnB,QAAA,YAAY,EAAE,EAAE;AAChB,QAAA,YAAY,EAAE,IAAI;QAClB,MAAM,EAAE,CAAC,GAAG;AACZ,QAAA,cAAc,EAAE,IAAI;AACpB,QAAA,cAAc,EAAE,IAAI;AACpB,QAAA,aAAa,EAAE,SAAS;AACxB,QAAA,8BAA8B,EAAE,KAAK;AACtC,KAAA,EAED,mBAAmB,EAAE;AACnB,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,MAAM,EAAE,cAAc;AACvB,KAAA,EAED,iBAAiB,EAAE,SAAS,EAC5B,mBAAmB,EAAE,SAAS,EAC9B,qBAAqB,EAAE,SAAS,EAEhC,oBAAoB,EAAE,KAAK,EAC3B,oBAAoB,EAAE,CAAC,EACvB,qBAAqB,EAAE,SAAS,EAChC,SAAS,EAAE,CAAC,EACZ,SAAS,EAAE,cAAc,CAAC,KAAK,EAC/B,aAAa,EAAE,CAAC,EAChB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,SAAS,EACrB,QAAQ,EAAE,KAAK,EACf,SAAS,EAAE,SAAS,EACpB,wBAAwB,EAAE,IAAI,EAC9B,mBAAmB,EAAE,CAAC,EACtB,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,CAAC,EAChB,oBAAoB,EAAE,IAAI,EAC1B,qBAAqB,EAAE,SAAS,EAChC,qBAAqB,EAAE,SAAS,EAChC,cAAc,EAAE,SAAS,EAEzB,QAAQ,EAAE,EAAE,EACZ,eAAe,EAAE,CAAC,EAClB,SAAS,EAAE,cAAc,CAAC,MAAM,EAChC,cAAc,EAAE,CAAC,EACjB,QAAQ,EAAE,CAAC,CAAiB,KAAc,CAAsB,CAAC,IAAI,EACrE,YAAY,EAAE,SAAS,EACvB,SAAS,EAAE,CAAC,CAAiB,KAAc,CAAuB,CAAC,KAAK,EACxE,aAAa,EAAE,IAAI,EACnB,mBAAmB,EAAE,EAAE,EACvB,iBAAiB,EAAE,QAAQ,CAAC,MAAM,EAClC,YAAY,EAAE,EAAE,EAChB,gBAAgB,EAAE,IAAI,EACtB,sBAAsB,EAAE,EAAE,EAC1B,oBAAoB,EAAE,QAAQ,CAAC,MAAM,EACrC,cAAc,EAAE,SAAS,EACzB,cAAc,EAAE,SAAS,EACzB,YAAY,EAAE,KAAK,EACnB,QAAQ,EAAE,CAAC,CAAiB,KAAc,CAAsB,CAAC,IAAI,EACrE,aAAa,EAAE,SAAS,EACxB,UAAU,EAAE,CAAC,CAAiB,KAAc,CAAwB,CAAC,MAAM,EAC3E,iBAAiB,EAAE,SAAS,EAC5B,cAAc,EAAE,IAAI,EACpB,gBAAgB,EAAE,SAAS,EAC3B,aAAa,EAAE,IAAI,EACnB,QAAQ,EAAE,SAAS,EACnB,0BAA0B,EAAE,+BAA+B,CAAC,mBAAmB,EAC/E,qBAAqB,EAAE,IAAI,EAE3B,cAAc,EAAE,SAAS,EACzB,eAAe,EAAE,SAAS,EAE1B,MAAM,EAAE,SAAS,EAEjB,eAAe,EAAE,SAAS,EAC1B,UAAU,EAAE,SAAS,EACrB,aAAa,EAAE,SAAS,EACxB,MAAM,EAAE,SAAS,EACjB,WAAW,EAAE,SAAS,EACtB,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,SAAS,EAC7B,oBAAoB,EAAE,SAAS,EAC/B,mBAAmB,EAAE,SAAS,EAC9B,gBAAgB,EAAE,SAAS,EAE3B,gBAAgB,EAAE,CAAC,QAAwD,EAAE,QAAwD,KAAa;AAChJ,QAAA,OAAO,CAAC,OAAO,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;AACrC,KAAC;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/graph/config.ts"],"sourcesContent":["import { D3BrushEvent } from 'd3-brush'\nimport { D3DragEvent } from 'd3-drag'\nimport { D3ZoomEvent, ZoomTransform } from 'd3-zoom'\nimport { Selection } from 'd3-selection'\nimport { ElkShape } from 'elkjs'\n\n// Core\nimport type { GraphDataModel } from 'data-models/graph'\n\n// Utils\nimport { isEqual } from 'utils/data'\n\n// Config\nimport { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\n\n// Types\nimport { TrimMode } from 'types/text'\nimport { Spacing } from 'types/spacing'\nimport { GraphInputLink, GraphInputNode, GraphInputData } from 'types/graph'\nimport { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from 'types/accessor'\n\n// Local Types\nimport {\n  GraphLayoutType,\n  GraphCircleLabel,\n  GraphLinkStyle,\n  GraphLinkArrowStyle,\n  GraphPanelConfig,\n  GraphForceLayoutSettings,\n  GraphElkLayoutSettings,\n  GraphNodeShape,\n  GraphDagreLayoutSetting,\n  GraphNode,\n  GraphLink,\n  GraphNodeSelectionHighlightMode,\n  GraphFitViewAlignment,\n} from './types'\n\nexport interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {\n  // Zoom and drag\n  /** Zoom level constraints. Default: [0.35, 1.25] */\n  zoomScaleExtent?: [number, number];\n  /** Disable zooming. Default: `false` */\n  disableZoom?: boolean;\n  /** Custom Zoom event filter to better control which actions should trigger zooming.\n   * Learn more: https://d3js.org/d3-zoom#zoom_filter.\n   * Default: `undefined` */\n  zoomEventFilter?: (event: PointerEvent) => boolean;\n  /** Disable node dragging. Default: `false` */\n  disableDrag?: boolean;\n  /** Disable brush for multiple node selection. Default: `false` */\n  disableBrush?: boolean;\n  /** Interval to re-render the graph when zooming. Default: `100` */\n  zoomThrottledUpdateNodeThreshold?: number;\n  /** Padding for the graph when fitting to container. Default: `50` */\n  fitViewPadding?: Spacing | number;\n  /** Default alignment when fitting the graph view. Default: `GraphFitViewAlignment.Center` */\n  fitViewAlign?: GraphFitViewAlignment;\n\n  // Layout general settings\n  /** Type of the graph layout. Default: `GraphLayoutType.Force` */\n  layoutType?: GraphLayoutType | string;\n  /** Fit the graph to container on data or config updates, or on container resize. Default: `true` */\n  layoutAutofit?: boolean;\n  /** Tolerance constant defining whether the graph should be fitted to container\n   * (on data or config update, or container resize) after a zoom / pan interaction or not.\n   * `0` — Stop fitting after any pan or zoom\n   * `Number.POSITIVE_INFINITY` — Always fit\n   * Default: `8.0` */\n  layoutAutofitTolerance?: number;\n  /** Place non-connected nodes at the bottom of the graph. Default: `false` */\n  layoutNonConnectedAside?: boolean;\n\n  // Settings for Parallel and Concentric layouts\n  /** Node group accessor function.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `node => node.group` */\n  layoutNodeGroup?: StringAccessor<N>;\n  /** Order of the layout groups.\n   * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n   * Default: `[]` */\n  layoutGroupOrder?: string[];\n\n  // Setting for Parallel layouts only\n  /** Sets the number of nodes in a sub-group after which they'll continue on the next column (or row if `layoutType` is\n   * `GraphLayoutType.ParallelHorizontal`).\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `6` */\n  layoutParallelNodesPerColumn?: number;\n  /** Node sub-group accessor function.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `node => node.subgroup` */\n  layoutParallelNodeSubGroup?: StringAccessor<N>;\n  /** Number of sub-groups per row (or column if `layoutType` is `GraphLayoutType.ParallelHorizontal`) in a group.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `1` */\n  layoutParallelSubGroupsPerRow?: number;\n  /** Spacing between nodes, dynamic by default.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelNodeSpacing?: number | [number, number];\n  /** Spacing between sub-groups.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `40` */\n  layoutParallelSubGroupSpacing?: number;\n  /** Spacing between groups.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelGroupSpacing?: number;\n  /** Set a group by name to have priority in sorting the graph links.\n   * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n   * Default: `undefined` */\n  layoutParallelSortConnectionsByGroup?: string;\n\n  // Force layout\n  /** Force Layout settings, see the `d3-force` package for more details */\n  forceLayoutSettings?: GraphForceLayoutSettings<N, L>;\n\n  // Dagre layout\n  /** Darge Layout settings, see the `dagrejs` package\n   * for more details: https://github.com/dagrejs/dagre/wiki#configuring-the-layout\n  */\n  dagreLayoutSettings?: GraphDagreLayoutSetting;\n\n  // ELK layout\n  /** ELK layout options, see the `elkjs` package for more details: https://github.com/kieler/elkjs.\n   * If you want to specify custom layout option for each node group, you can provide an accessor function that\n   * receives group name ('root' for the top-level configuration) as the first argument and returns an object containing\n   * layout options. Default: `undefined`\n  */\n  layoutElkSettings?: GenericAccessor<GraphElkLayoutSettings, string> | undefined;\n  /** Array of accessor functions to define nested node groups for the ELK Layered layout.\n   * E.g.: `[n => n.group, n => n.subGroup]`.\n   * Default: `undefined` */\n  layoutElkNodeGroups?: StringAccessor<N>[];\n  /** A function to be called per graph node to get the ELK shape object.\n   * This enables you to provide custom node dimensions (through the `width` and `height` properties)\n   * and coordinates (through the `x` and `y` properties) if needed.\n   * Default: `undefined`\n  */\n  layoutElkGetNodeShape?: (d: GraphNode<N, L>, i: number) => ElkShape;\n\n  // Links\n  /** Link width accessor function ot constant value. Default: `1` */\n  linkWidth?: NumericAccessor<L>;\n  /** Link style accessor function or constant value. Default: `GraphLinkStyle.Solid`  */\n  linkStyle?: GenericAccessor<GraphLinkStyle, L>;\n  /** Link band width accessor function or constant value. Default: `0` */\n  linkBandWidth?: NumericAccessor<L>;\n  /** Link arrow accessor function or constant value. Default: `undefined` */\n  linkArrow?: GenericAccessor<GraphLinkArrowStyle | string | boolean, L> | undefined;\n  /** Link stroke color accessor function or constant value. Default: `undefined` */\n  linkStroke?: ColorAccessor<L>;\n  /** Link disabled state accessor function or constant value. Default: `false` */\n  linkDisabled?: BooleanAccessor<L>;\n  /** Link flow animation accessor function or constant value. Default: `false` */\n  linkFlow?: BooleanAccessor<L>;\n  /** Animation duration of the flow (traffic) circles in milliseconds. If `linkFlowParticleSpeed` is provided,\n   * this duration will be calculated based on the link length and particle speed. Default: `20000` */\n  linkFlowAnimDuration?: NumericAccessor<L>;\n  /** Size of the moving particles that represent traffic flow. Default: `2` */\n  linkFlowParticleSize?: NumericAccessor<L>;\n  /** Speed of the moving particles in pixels per second. This property takes precedence over `linkFlowAnimDuration`. Default: `undefined` */\n  linkFlowParticleSpeed?: NumericAccessor<L>;\n  /** Link label accessor function or constant value. Default: `undefined` */\n  linkLabel?: GenericAccessor<GraphCircleLabel | GraphCircleLabel[], L> | undefined;\n  /** Shift label along the link center a little bit to avoid overlap with the link arrow. Default: `true` */\n  linkLabelShiftFromCenter?: BooleanAccessor<L>;\n  /** Spacing between neighboring links. Default: `8` */\n  linkNeighborSpacing?: number;\n  /** Curvature of the link. Recommended value range: [0:1.5].\n   * `0` - straight line,\n   * `1` - nice curvature,\n   * `1.5` - very curve.\n   * Default: `0` */\n  linkCurvature?: NumericAccessor<L>;\n  /** Highlight links on hover. Default: `true` */\n  linkHighlightOnHover?: boolean;\n  /** Offset [x,y] in pixels from the source node's center point where the link should start. Default: `undefined` */\n  linkSourcePointOffset?: GenericAccessor<[number, number], GraphLink<N, L>>;\n  /** Offset [x,y] in pixels from the target node's center point where the link should end. Default: `undefined` */\n  linkTargetPointOffset?: GenericAccessor<[number, number], GraphLink<N, L>>;\n  /** Set selected link by its unique id. Default: `undefined` */\n  selectedLinkId?: number | string;\n\n  // Nodes\n  /** Node size accessor function or constant value. Default: `30` */\n  nodeSize?: NumericAccessor<N>;\n  /** Node stroke width accessor function or constant value. Default: `3` */\n  nodeStrokeWidth?: NumericAccessor<N>;\n  /** Node shape accessor function or constant value. Default: `GraphNodeShape.Circle` */\n  nodeShape?: GenericAccessor<GraphNodeShape | string, N>;\n  /** Node gauge outline accessor function or constant value in the range [0,100]. Default: `0` */\n  nodeGaugeValue?: NumericAccessor<N>;\n  /** Node gauge outline fill color accessor function or constant value. Default: `undefined` */\n  nodeGaugeFill?: ColorAccessor<N>;\n  /** Animation duration of the node gauge outline. Default: `1500` */\n  nodeGaugeAnimDuration?: number;\n  /** Node central icon accessor function or constant value. Default: `node => node.icon` */\n  nodeIcon?: StringAccessor<N>;\n  /** Node central icon size accessor function or constant value. Default: `undefined` */\n  nodeIconSize?: NumericAccessor<N>;\n  /** Node label accessor function or constant value. Default: `node => node.label` */\n  nodeLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node labels or not. Default: `true` */\n  nodeLabelTrim?: BooleanAccessor<N>;\n  /** Node label trimming mode. Default: `TrimMode.Middle` */\n  nodeLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeLabelTrimLength?: NumericAccessor<N>;\n  /** Node sub-label accessor function or constant value: Default: `''` */\n  nodeSubLabel?: StringAccessor<N>;\n  /** Defines whether to trim the node sub-labels or not. Default: `true` */\n  nodeSubLabelTrim?: BooleanAccessor<N>;\n  /** Node sub-label trimming mode. Default: `TrimMode.Middle` */\n  nodeSubLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n  /** Node sub-label maximum allowed text length above which the label will be trimmed. Default: `15` */\n  nodeSubLabelTrimLength?: NumericAccessor<N>;\n  /** Node circular side labels accessor function. The function should return an array of GraphCircleLabel objects. Default: `undefined` */\n  nodeSideLabels?: GenericAccessor<GraphCircleLabel[], N>;\n  /** Node bottom icon accessor function. Default: `undefined` */\n  nodeBottomIcon?: StringAccessor<N>;\n  /** Node disabled state accessor function or constant value. Default: `false` */\n  nodeDisabled?: BooleanAccessor<N>;\n  /** Node fill color accessor function or constant value. Default: `node => node.fill` */\n  nodeFill?: ColorAccessor<N>;\n  /** Node stroke color accessor function or constant value. Default: `node => node.stroke` */\n  nodeStroke?: ColorAccessor<N>;\n  /** Sorting function to determine node placement. Default: `undefined` */\n  nodeSort?: ((a: N, b: N) => number);\n  /** Specify the initial position for entering nodes as [x, y]. Default: `undefined` */\n  nodeEnterPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the initial scale for entering nodes in the range [0,1]. Default: `0.75` */\n  nodeEnterScale?: NumericAccessor<N> | undefined;\n  /** Specify the destination position for exiting nodes as [x, y]. Default: `undefined` */\n  nodeExitPosition?: GenericAccessor<[number, number], N> | undefined;\n  /** Specify the destination scale for exiting nodes in the range [0,1]. Default: `0.75` */\n  nodeExitScale?: NumericAccessor<N> | undefined;\n  /** Custom \"enter\" function for node rendering. Default: `undefined` */\n  nodeEnterCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom \"update\" function for node rendering. Default: `undefined` */\n  nodeUpdateCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom partial \"update\" function for node rendering which will be triggered after the following events:\n   * - Full node update (`nodeUpdateCustomRenderFunction`);\n   * - Background click;\n   * - Node and Link mouseover and mouseout;\n   * - Node brushing,\n   * Default: `undefined` */\n  nodePartialUpdateCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom \"exit\" function for node rendering. Default: `undefined` */\n  nodeExitCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n  /** Custom render function that will be called while zooming / panning the graph. Default: `undefined` */\n  nodeOnZoomCustomRenderFunction?:\n  (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, zoomLevel: number) => void;\n  /** Define the mode for highlighting selected nodes in the graph. Default: `GraphNodeSelectionHighlightMode.GreyoutNonConnected` */\n  nodeSelectionHighlightMode?: GraphNodeSelectionHighlightMode;\n  /** Set selected node by unique id. Default: `undefined` */\n  selectedNodeId?: number | string;\n  /** Set selected nodes by unique id. Default: `undefined` */\n  selectedNodeIds?: number[] | string[];\n\n  /** Panels configuration. An array of `GraphPanelConfig` objects. Default: `[]` */\n  panels?: GraphPanelConfig[] | undefined;\n\n  // Events\n  /** Graph node drag start callback function. Default: `undefined` */\n  onNodeDragStart?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Graph node drag callback function. Default: `undefined` */\n  onNodeDrag?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Graph node drag end callback function. Default: `undefined` */\n  onNodeDragEnd?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n  /** Zoom event callback. Default: `undefined` */\n  onZoom?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n  /** Zoom start event callback. Default: `undefined` */\n  onZoomStart?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n  /** Zoom end event callback. Default: `undefined` */\n  onZoomEnd?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n  /** Callback function to be called when the graph layout is calculated. Default: `undefined` */\n  onLayoutCalculated?: (nodes: GraphNode<N, L>[], links: GraphLink<N, L>[]) => void;\n  /** Graph node selection brush callback function. Default: `undefined` */\n  onNodeSelectionBrush?: (selectedNodes: GraphNode<N, L>[], event: D3BrushEvent<SVGGElement> | undefined) => void;\n  /** Graph multiple node drag callback function. Default: `undefined` */\n  onNodeSelectionDrag?: (selectedNodes: GraphNode<N, L>[], event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void;\n  /** Callback function to be called when the graph rendering is complete. Default: `undefined` */\n  onRenderComplete?: (\n    g: Selection<SVGGElement, unknown, null, undefined>,\n    nodes: GraphNode<N, L>[],\n    links: GraphLink<N, L>[],\n    config: GraphConfigInterface<N, L>,\n    duration: number,\n    zoomLevel: number,\n    width: number,\n    height: number\n  ) => void;\n\n  /** Determines whether the component should update when new data is provided.\n   * This function takes the previous and new data as parameters and returns a boolean\n   * indicating whether the update should proceed. Useful for fine-grained control over\n   * update behavior when your data has a complex nested structure.\n   * By default the `isEqual` function from Unovis will be used to do the comparison.\n   */\n  shouldDataUpdate?: (\n    prevData: GraphInputData<N, L>,\n    nextData: GraphInputData<N, L>,\n    datamodel: GraphDataModel<N, L, GraphNode<N, L>, GraphLink<N, L>>\n  ) => boolean;\n}\n\nexport const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInputLink> = {\n  ...ComponentDefaultConfig,\n  duration: 1000,\n  zoomScaleExtent: [0.35, 1.25],\n  disableZoom: false,\n  zoomEventFilter: undefined,\n  disableDrag: false,\n  disableBrush: false,\n  zoomThrottledUpdateNodeThreshold: 100,\n  layoutType: GraphLayoutType.Force,\n  layoutAutofit: true,\n  layoutAutofitTolerance: 8.0,\n  layoutNonConnectedAside: false,\n  fitViewPadding: 50,\n  fitViewAlign: GraphFitViewAlignment.Center,\n\n  layoutGroupOrder: [],\n  layoutParallelNodeSpacing: undefined,\n  layoutParallelSubGroupsPerRow: 1,\n  layoutParallelNodesPerColumn: 6,\n  layoutParallelGroupSpacing: undefined,\n  layoutParallelSubGroupSpacing: 40,\n  layoutParallelSortConnectionsByGroup: undefined,\n  layoutNodeGroup: (n: GraphInputNode): string => (n as { group: string }).group,\n  layoutParallelNodeSubGroup: (n: GraphInputNode): string => (n as { subgroup: string }).subgroup,\n\n  forceLayoutSettings: {\n    linkDistance: 60,\n    linkStrength: 0.45,\n    charge: -500,\n    forceXStrength: 0.15,\n    forceYStrength: 0.25,\n    numIterations: undefined,\n    fixNodePositionAfterSimulation: false,\n  },\n\n  dagreLayoutSettings: {\n    rankdir: 'BT',\n    ranker: 'longest-path',\n  },\n\n  layoutElkSettings: undefined,\n  layoutElkNodeGroups: undefined,\n  layoutElkGetNodeShape: undefined,\n\n  linkFlowAnimDuration: 20000,\n  linkFlowParticleSize: 2,\n  linkFlowParticleSpeed: undefined,\n  linkWidth: 1,\n  linkStyle: GraphLinkStyle.Solid,\n  linkBandWidth: 0,\n  linkArrow: undefined,\n  linkStroke: undefined,\n  linkFlow: false,\n  linkLabel: undefined,\n  linkLabelShiftFromCenter: true,\n  linkNeighborSpacing: 8,\n  linkDisabled: false,\n  linkCurvature: 0,\n  linkHighlightOnHover: true,\n  linkSourcePointOffset: undefined,\n  linkTargetPointOffset: undefined,\n  selectedLinkId: undefined,\n\n  nodeSize: 30,\n  nodeStrokeWidth: 3,\n  nodeShape: GraphNodeShape.Circle,\n  nodeGaugeValue: 0,\n  nodeIcon: (n: GraphInputNode): string => (n as { icon: string }).icon,\n  nodeIconSize: undefined,\n  nodeLabel: (n: GraphInputNode): string => (n as { label: string }).label,\n  nodeLabelTrim: true,\n  nodeLabelTrimLength: 15,\n  nodeLabelTrimMode: TrimMode.Middle,\n  nodeSubLabel: '',\n  nodeSubLabelTrim: true,\n  nodeSubLabelTrimLength: 15,\n  nodeSubLabelTrimMode: TrimMode.Middle,\n  nodeSideLabels: undefined,\n  nodeBottomIcon: undefined,\n  nodeDisabled: false,\n  nodeFill: (n: GraphInputNode): string => (n as { fill: string }).fill,\n  nodeGaugeFill: undefined,\n  nodeStroke: (n: GraphInputNode): string => (n as { stroke: string }).stroke,\n  nodeEnterPosition: undefined,\n  nodeEnterScale: 0.75,\n  nodeExitPosition: undefined,\n  nodeExitScale: 0.75,\n  nodeSort: undefined,\n  nodeSelectionHighlightMode: GraphNodeSelectionHighlightMode.GreyoutNonConnected,\n  nodeGaugeAnimDuration: 1500,\n\n  selectedNodeId: undefined,\n  selectedNodeIds: undefined,\n\n  panels: undefined,\n\n  onNodeDragStart: undefined,\n  onNodeDrag: undefined,\n  onNodeDragEnd: undefined,\n  onZoom: undefined,\n  onZoomStart: undefined,\n  onZoomEnd: undefined,\n  onLayoutCalculated: undefined,\n  onNodeSelectionBrush: undefined,\n  onNodeSelectionDrag: undefined,\n  onRenderComplete: undefined,\n\n  shouldDataUpdate: (prevData: GraphInputData<GraphInputNode, GraphInputLink>, nextData: GraphInputData<GraphInputNode, GraphInputLink>): boolean => {\n    return !isEqual(prevData, nextData)\n  },\n}\n"],"names":[],"mappings":"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"}

package/components/graph/index.d.ts

@@ -62,6 +62,7 @@ export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> e
     private _brushBehavior;
     private _groupDragInit;
     private _linkPathLengthMap;
+    private _linkFlowFrameElapsed;
     events: {
         [x: string]: {
             click: () => void;

package/components/graph/index.js

@@ -37,6 +37,7 @@ class Graph extends ComponentCore {
         this._isDragging = false;
         // A map for storing link total path lengths to optimize rendering performance
         this._linkPathLengthMap = new Map();
+        this._linkFlowFrameElapsed = 0;
         this.events = {
             [Graph.selectors.background]: {
                 click: this._onBackgroundClick.bind(this),
@@ -521,22 +522,25 @@ class Graph extends ComponentCore {
         const hasLinksWithFlow = links.some((d, i) => getBoolean(d, config.linkFlow, i));
         if (!hasLinksWithFlow)
             return;
-        const linkElements = this._linksGroup.selectAll(`.${gLink}`);
-        const linksToAnimate = linkElements.filter(d => !d._state.greyout);
-        linksToAnimate.each((l, i, els) => {
+        const deltaTime = elapsed - this._linkFlowFrameElapsed;
+        const linkGroups = this._linksGroup.selectAll(`.${gLink}`);
+        linkGroups.each((l, i, els) => {
             var _a;
-            let linkFlowAnimDuration = getNumber(l, config.linkFlowAnimDuration, l._indexGlobal);
             const linkFlowParticleSpeed = getNumber(l, config.linkFlowParticleSpeed, l._indexGlobal);
-            // If particle speed is provided, calculate duration based on link length and speed
-            if (linkFlowParticleSpeed) {
-                const linkPathElement = els[i].querySelector(`.${linkSupport}`);
-                const pathLength = linkPathElement ? ((_a = this._linkPathLengthMap.get(linkPathElement.getAttribute('d'))) !== null && _a !== void 0 ? _a : linkPathElement.getTotalLength()) : 0;
-                if (pathLength > 0)
-                    linkFlowAnimDuration = (pathLength / linkFlowParticleSpeed) * 1000; // Convert to milliseconds
-            }
-            l._state.flowAnimTime = (elapsed % linkFlowAnimDuration) / linkFlowAnimDuration;
+            // Get path length
+            const pathElement = els[i].querySelector(`.${linkSupport}`);
+            const pathLength = pathElement ? ((_a = this._linkPathLengthMap.get(pathElement.getAttribute('d'))) !== null && _a !== void 0 ? _a : pathElement.getTotalLength()) : 0;
+            if (pathLength <= 0)
+                return; // Skip if no valid path
+            // Calculate speed: either provided or derived from duration
+            const speed = linkFlowParticleSpeed || (pathLength / getNumber(l, config.linkFlowAnimDuration, l._indexGlobal) * 1000);
+            // Initialize and update distance
+            l._state.flowAnimDistancePx = (l._state.flowAnimDistancePx || 0) + (deltaTime / 1000) * speed;
+            // Convert to relative position
+            l._state.flowAnimDistanceRelative = (l._state.flowAnimDistancePx % pathLength) / pathLength;
         });
-        animateLinkFlow(linksToAnimate, this.config, this._scale, this._linkPathLengthMap);
+        this._linkFlowFrameElapsed = elapsed;
+        animateLinkFlow(linkGroups, this.config, this._scale, this._linkPathLengthMap);
     }
     _onZoom(t, event) {
         const { config, datamodel: { nodes } } = this;