synapse-react-client 4.0.46 → 4.0.48

package/dist/components/Markdown/MarkdownEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEditor.js","names":[],"sources":["../../../src/components/Markdown/MarkdownEditor.tsx"],"sourcesContent":["import {\n  Box,\n  IconButton,\n  Tab,\n  Tabs,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { useRef, useState, useEffect } from 'react'\nimport {\n  commandList,\n  CommandListType,\n  MARKDOWN_COMMANDS_DATA,\n} from '@sage-bionetworks/synapse-types'\nimport IconSvg from '../IconSvg/IconSvg'\nimport MarkdownSynapse from './MarkdownSynapse'\nimport { UserMentionModal } from './UserMentionModal'\nimport { startCase } from 'lodash-es'\n\nconst MarkdownEditorTabs = ['WRITE', 'PREVIEW'] as const\n\nexport type MarkdownEditorProps = {\n  placeholder?: string\n  text: string\n  setText: (text: string) => void\n}\n\nexport function MarkdownEditor({\n  placeholder,\n  text,\n  setText,\n}: MarkdownEditorProps) {\n  const [currentTab, setCurrentTab] = useState<number>(0)\n  const [selectionStart, setSelectionStart] = useState<number>(0)\n  const [isShowingTagModal, setIsShowingTagModal] = useState<boolean>(false)\n  const [tagModalWithKeyboard, setTagModalWithKeyboard] =\n    useState<boolean>(false)\n  const textAreaRef = useRef<HTMLTextAreaElement>(null)\n\n  /**\n   * Updates the position of the cursor. This must occur within `useEffect` because we need to ensure that the\n   * cursor position is updated after the state of `text` is updated.\n   */\n  useEffect(() => {\n    const input = textAreaRef.current\n    if (input) {\n      input.setSelectionRange(selectionStart, selectionStart)\n    }\n  }, [textAreaRef, selectionStart])\n\n  useEffect(() => {\n    textAreaRef.current?.focus()\n  }, [isShowingTagModal])\n\n  const handleUserTag = (user: string) => {\n    const newText: string[] = []\n    const textVal = textAreaRef.current\n    if (textVal) {\n      const start = textVal?.selectionStart\n      const textBeforeTag = text.substring(0, start)\n      const textAfterTag = text.substring(start, text.length)\n      setSelectionStart(start + user.length)\n      newText.push(\n        textBeforeTag,\n        `${tagModalWithKeyboard ? '' : '@'}${user.replace(/\\s/g, '')}`,\n        textAfterTag,\n      )\n    }\n    setText(newText.join(''))\n    setTagModalWithKeyboard(false)\n  }\n\n  const handleTagModal = (text: string) => {\n    const start = textAreaRef.current?.selectionStart\n    if (start && start > 0 && text.charAt(start - 1) === '@') {\n      setTagModalWithKeyboard(true)\n      setIsShowingTagModal(true)\n    }\n  }\n  const handleCommands = (command: CommandListType) => {\n    const textVal = textAreaRef.current\n    if (textVal) {\n      const start = textVal.selectionStart\n      const end = textVal.selectionEnd\n      const selected = text.substring(start, end)\n      const textBeforeSelection = text.substring(0, start)\n      const textAfterSelection = text.substring(end, text.length)\n\n      const openSyntax = MARKDOWN_COMMANDS_DATA[command].openSyntax\n      const closeSyntax = MARKDOWN_COMMANDS_DATA[command].closeSyntax\n\n      switch (command) {\n        case 'code': {\n          const newText: string[] = []\n          newText.push(\n            textBeforeSelection,\n            openSyntax,\n            selected,\n            closeSyntax,\n            textAfterSelection,\n          )\n\n          setText(newText.join('\\r\\n'))\n          textVal.focus()\n          // adds 2 due to new line\n          setSelectionStart(start + openSyntax.length + 2)\n          break\n        }\n        case 'title':\n        case 'bold':\n        case 'italic':\n        case 'strikethrough':\n        case 'latex':\n        case 'subscript':\n        case 'superscript':\n        case 'link':\n        case 'image': {\n          const newText = `${textBeforeSelection}${openSyntax}${selected}${closeSyntax}${textAfterSelection}`\n          textVal.focus()\n          setSelectionStart(start + openSyntax.length)\n          setText(newText)\n        }\n      }\n    }\n  }\n\n  return (\n    <div className=\"MarkdownEditor\">\n      <div className=\"MarkdownEditorControls\">\n        <Tabs\n          textColor=\"secondary\"\n          indicatorColor=\"secondary\"\n          value={currentTab}\n          onChange={(_e, newValue) => setCurrentTab(newValue)}\n        >\n          {MarkdownEditorTabs.map(tabName => {\n            return <Tab label={tabName} key={tabName} />\n          })}\n        </Tabs>\n        {MarkdownEditorTabs[currentTab] === 'WRITE' && (\n          <div className=\"MarkdownEditorControlsToolbar\">\n            {commandList.map(type => {\n              return (\n                <IconButton\n                  size={'small'}\n                  key={type}\n                  onClick={() => handleCommands(type)}\n                  sx={{ width: '32px', height: '32px' }}\n                >\n                  <IconSvg\n                    sx={{ fontSize: 'inherit' }}\n                    icon={type}\n                    label={startCase(type)}\n                  />\n                </IconButton>\n              )\n            })}\n            <IconButton\n              size={'small'}\n              onClick={() => setIsShowingTagModal(true)}\n              sx={{ width: '32px', height: '32px' }}\n            >\n              <IconSvg\n                sx={{ fontSize: 'inherit' }}\n                icon=\"tag\"\n                label=\"Mention\"\n              />\n            </IconButton>\n          </div>\n        )}\n      </div>\n      <div>\n        {MarkdownEditorTabs[currentTab] === 'WRITE' ? (\n          <TextField\n            inputProps={{\n              ['aria-label']: 'markdown',\n            }}\n            onChange={e => {\n              setText(e.target.value)\n              handleTagModal(e.target.value)\n            }}\n            style={{ width: '100%' }}\n            multiline\n            minRows={6}\n            value={text}\n            inputRef={textAreaRef}\n            placeholder={placeholder}\n            sx={{\n              textarea: {\n                resize: 'vertical',\n              },\n            }}\n          />\n        ) : (\n          <Box sx={{ mx: 1, my: 2 }}>\n            {text ? (\n              <MarkdownSynapse markdown={text} />\n            ) : (\n              <Typography>Nothing to preview</Typography>\n            )}\n          </Box>\n        )}\n      </div>\n\n      <UserMentionModal\n        show={isShowingTagModal}\n        onClose={() => setIsShowingTagModal(false)}\n        handleUserTag={handleUserTag}\n      />\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AAmBA,IAAM,IAAqB,CAAC,SAAS,SAAS;AAQ9C,SAAgB,EAAe,EAC7B,gBACA,SACA,cACsB;CACtB,IAAM,CAAC,GAAY,KAAiB,EAAiB,CAAC,GAChD,CAAC,GAAgB,KAAqB,EAAiB,CAAC,GACxD,CAAC,GAAmB,KAAwB,EAAkB,EAAK,GACnE,CAAC,GAAsB,KAC3B,EAAkB,EAAK,GACnB,IAAc,EAA4B,IAAI;CAapD,AAPA,QAAgB;EACd,IAAM,IAAQ,EAAY;EAC1B,AAAI,KACF,EAAM,kBAAkB,GAAgB,CAAc;CAE1D,GAAG,CAAC,GAAa,CAAc,CAAC,GAEhC,QAAgB;EACd,EAAY,SAAS,MAAM;CAC7B,GAAG,CAAC,CAAiB,CAAC;CAEtB,IAAM,KAAiB,MAAiB;EACtC,IAAM,IAAoB,CAAC,GACrB,IAAU,EAAY;EAC5B,IAAI,GAAS;GACX,IAAM,IAAQ,GAAS,gBACjB,IAAgB,EAAK,UAAU,GAAG,CAAK,GACvC,IAAe,EAAK,UAAU,GAAO,EAAK,MAAM;GAEtD,AADA,EAAkB,IAAQ,EAAK,MAAM,GACrC,EAAQ,KACN,GACA,GAAG,IAAuB,KAAK,MAAM,EAAK,QAAQ,OAAO,EAAE,KAC3D,CACF;EACF;EAEA,AADA,EAAQ,EAAQ,KAAK,EAAE,CAAC,GACxB,EAAwB,EAAK;CAC/B,GAEM,KAAkB,MAAiB;EACvC,IAAM,IAAQ,EAAY,SAAS;EACnC,AAAI,KAAS,IAAQ,KAAK,EAAK,OAAO,IAAQ,CAAC,MAAM,QACnD,EAAwB,EAAI,GAC5B,EAAqB,EAAI;CAE7B,GACM,KAAkB,MAA6B;EACnD,IAAM,IAAU,EAAY;EAC5B,IAAI,GAAS;GACX,IAAM,IAAQ,EAAQ,gBAChB,IAAM,EAAQ,cACd,IAAW,EAAK,UAAU,GAAO,CAAG,GACpC,IAAsB,EAAK,UAAU,GAAG,CAAK,GAC7C,IAAqB,EAAK,UAAU,GAAK,EAAK,MAAM,GAEpD,IAAa,EAAuB,GAAS,YAC7C,IAAc,EAAuB,GAAS;GAEpD,QAAQ,GAAR;IACE,KAAK,QAAQ;KACX,IAAM,IAAoB,CAAC;KAY3B,AAXA,EAAQ,KACN,GACA,GACA,GACA,GACA,CACF,GAEA,EAAQ,EAAQ,KAAK,MAAM,CAAC,GAC5B,EAAQ,MAAM,GAEd,EAAkB,IAAQ,EAAW,SAAS,CAAC;KAC/C;IACF;IACA,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK,SAAS;KACZ,IAAM,IAAU,GAAG,IAAsB,IAAa,IAAW,IAAc;KAG/E,AAFA,EAAQ,MAAM,GACd,EAAkB,IAAQ,EAAW,MAAM,GAC3C,EAAQ,CAAO;IACjB;GACF;EACF;CACF;CAEA,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KACE,WAAU;KACV,gBAAe;KACf,OAAO;KACP,WAAW,GAAI,MAAa,EAAc,CAAQ;eAEjD,EAAmB,KAAI,MACf,kBAAC,GAAD,EAAK,OAAO,EAAwB,GAAV,CAAU,CAC5C;IACG,CAAA,GACL,EAAmB,OAAgB,WAClC,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,EAAY,KAAI,MAEb,kBAAC,GAAD;MACE,MAAM;MAEN,eAAe,EAAe,CAAI;MAClC,IAAI;OAAE,OAAO;OAAQ,QAAQ;MAAO;gBAEpC,kBAAC,GAAD;OACE,IAAI,EAAE,UAAU,UAAU;OAC1B,MAAM;OACN,OAAO,EAAU,CAAI;MACtB,CAAA;KACS,GATL,CASK,CAEf,GACD,kBAAC,GAAD;MACE,MAAM;MACN,eAAe,EAAqB,EAAI;MACxC,IAAI;OAAE,OAAO;OAAQ,QAAQ;MAAO;gBAEpC,kBAAC,GAAD;OACE,IAAI,EAAE,UAAU,UAAU;OAC1B,MAAK;OACL,OAAM;MACP,CAAA;KACS,CAAA,CACT;MAEJ;;GACL,kBAAC,OAAD,EAAA,UACG,EAAmB,OAAgB,UAClC,kBAAC,GAAD;IACE,YAAY,EACT,cAAe,WAClB;IACA,WAAU,MAAK;KAEb,AADA,EAAQ,EAAE,OAAO,KAAK,GACtB,EAAe,EAAE,OAAO,KAAK;IAC/B;IACA,OAAO,EAAE,OAAO,OAAO;IACvB,WAAA;IACA,SAAS;IACT,OAAO;IACP,UAAU;IACG;IACb,IAAI,EACF,UAAU,EACR,QAAQ,WACV,EACF;GACD,CAAA,IAED,kBAAC,GAAD;IAAK,IAAI;KAAE,IAAI;KAAG,IAAI;IAAE;cACrB,IACC,kBAAC,GAAD,EAAiB,UAAU,EAAO,CAAA,IAElC,kBAAC,GAAD,EAAA,UAAY,qBAA8B,CAAA;GAEzC,CAAA,EAEJ,CAAA;GAEL,kBAAC,GAAD;IACE,MAAM;IACN,eAAe,EAAqB,EAAK;IAC1B;GAChB,CAAA;EACE;;AAET"}
+{"version":3,"file":"MarkdownEditor.js","names":[],"sources":["../../../src/components/Markdown/MarkdownEditor.tsx"],"sourcesContent":["import {\n  Box,\n  IconButton,\n  Tab,\n  Tabs,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { useRef, useState, useEffect } from 'react'\nimport {\n  commandList,\n  CommandListType,\n  MARKDOWN_COMMANDS_DATA,\n} from '@sage-bionetworks/synapse-types'\nimport IconSvg from '../IconSvg/IconSvg'\nimport MarkdownSynapse from './MarkdownSynapse'\nimport { UserMentionModal } from './UserMentionModal'\nimport { startCase } from 'lodash-es'\n\nconst MarkdownEditorTabs = ['WRITE', 'PREVIEW'] as const\n\nexport type MarkdownEditorProps = {\n  placeholder?: string\n  text: string\n  setText: (text: string) => void\n}\n\nexport function MarkdownEditor({\n  placeholder,\n  text,\n  setText,\n}: MarkdownEditorProps) {\n  const [currentTab, setCurrentTab] = useState<number>(0)\n  const [selectionStart, setSelectionStart] = useState<number>(0)\n  const [isShowingTagModal, setIsShowingTagModal] = useState<boolean>(false)\n  const [tagModalWithKeyboard, setTagModalWithKeyboard] =\n    useState<boolean>(false)\n  const textAreaRef = useRef<HTMLTextAreaElement>(null)\n\n  /**\n   * Updates the position of the cursor. This must occur within `useEffect` because we need to ensure that the\n   * cursor position is updated after the state of `text` is updated.\n   */\n  useEffect(() => {\n    const input = textAreaRef.current\n    if (input) {\n      input.setSelectionRange(selectionStart, selectionStart)\n    }\n  }, [textAreaRef, selectionStart])\n\n  useEffect(() => {\n    textAreaRef.current?.focus()\n  }, [isShowingTagModal])\n\n  const handleUserTag = (user: string) => {\n    const newText: string[] = []\n    const textVal = textAreaRef.current\n    if (textVal) {\n      const start = textVal?.selectionStart\n      const textBeforeTag = text.substring(0, start)\n      const textAfterTag = text.substring(start, text.length)\n      setSelectionStart(start + user.length)\n      newText.push(\n        textBeforeTag,\n        `${tagModalWithKeyboard ? '' : '@'}${user.replaceAll(/\\s/g, '')}`,\n        textAfterTag,\n      )\n    }\n    setText(newText.join(''))\n    setTagModalWithKeyboard(false)\n  }\n\n  const handleTagModal = (text: string) => {\n    const start = textAreaRef.current?.selectionStart\n    if (start && start > 0 && text.charAt(start - 1) === '@') {\n      setTagModalWithKeyboard(true)\n      setIsShowingTagModal(true)\n    }\n  }\n  const handleCommands = (command: CommandListType) => {\n    const textVal = textAreaRef.current\n    if (textVal) {\n      const start = textVal.selectionStart\n      const end = textVal.selectionEnd\n      const selected = text.substring(start, end)\n      const textBeforeSelection = text.substring(0, start)\n      const textAfterSelection = text.substring(end, text.length)\n\n      const openSyntax = MARKDOWN_COMMANDS_DATA[command].openSyntax\n      const closeSyntax = MARKDOWN_COMMANDS_DATA[command].closeSyntax\n\n      switch (command) {\n        case 'code': {\n          const newText: string[] = []\n          newText.push(\n            textBeforeSelection,\n            openSyntax,\n            selected,\n            closeSyntax,\n            textAfterSelection,\n          )\n\n          setText(newText.join('\\r\\n'))\n          textVal.focus()\n          // adds 2 due to new line\n          setSelectionStart(start + openSyntax.length + 2)\n          break\n        }\n        case 'title':\n        case 'bold':\n        case 'italic':\n        case 'strikethrough':\n        case 'latex':\n        case 'subscript':\n        case 'superscript':\n        case 'link':\n        case 'image': {\n          const newText = `${textBeforeSelection}${openSyntax}${selected}${closeSyntax}${textAfterSelection}`\n          textVal.focus()\n          setSelectionStart(start + openSyntax.length)\n          setText(newText)\n        }\n      }\n    }\n  }\n\n  return (\n    <div className=\"MarkdownEditor\">\n      <div className=\"MarkdownEditorControls\">\n        <Tabs\n          textColor=\"secondary\"\n          indicatorColor=\"secondary\"\n          value={currentTab}\n          onChange={(_e, newValue) => setCurrentTab(newValue)}\n        >\n          {MarkdownEditorTabs.map(tabName => {\n            return <Tab label={tabName} key={tabName} />\n          })}\n        </Tabs>\n        {MarkdownEditorTabs[currentTab] === 'WRITE' && (\n          <div className=\"MarkdownEditorControlsToolbar\">\n            {commandList.map(type => {\n              return (\n                <IconButton\n                  size={'small'}\n                  key={type}\n                  onClick={() => handleCommands(type)}\n                  sx={{ width: '32px', height: '32px' }}\n                >\n                  <IconSvg\n                    sx={{ fontSize: 'inherit' }}\n                    icon={type}\n                    label={startCase(type)}\n                  />\n                </IconButton>\n              )\n            })}\n            <IconButton\n              size={'small'}\n              onClick={() => setIsShowingTagModal(true)}\n              sx={{ width: '32px', height: '32px' }}\n            >\n              <IconSvg\n                sx={{ fontSize: 'inherit' }}\n                icon=\"tag\"\n                label=\"Mention\"\n              />\n            </IconButton>\n          </div>\n        )}\n      </div>\n      <div>\n        {MarkdownEditorTabs[currentTab] === 'WRITE' ? (\n          <TextField\n            inputProps={{\n              ['aria-label']: 'markdown',\n            }}\n            onChange={e => {\n              setText(e.target.value)\n              handleTagModal(e.target.value)\n            }}\n            style={{ width: '100%' }}\n            multiline\n            minRows={6}\n            value={text}\n            inputRef={textAreaRef}\n            placeholder={placeholder}\n            sx={{\n              textarea: {\n                resize: 'vertical',\n              },\n            }}\n          />\n        ) : (\n          <Box sx={{ mx: 1, my: 2 }}>\n            {text ? (\n              <MarkdownSynapse markdown={text} />\n            ) : (\n              <Typography>Nothing to preview</Typography>\n            )}\n          </Box>\n        )}\n      </div>\n\n      <UserMentionModal\n        show={isShowingTagModal}\n        onClose={() => setIsShowingTagModal(false)}\n        handleUserTag={handleUserTag}\n      />\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/Markdown/widget/index.d.ts

@@ -1,4 +1,4 @@
-import { default as Bookmarks } from './Bookmarks';
+import Bookmarks from './Bookmarks';
 import type { BookmarksProps } from './Bookmarks';
 export { Bookmarks, BookmarksProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Markdown/widget/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Markdown/widget/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Markdown/widget/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ModalDownload/ModalDownload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDownload.d.ts","sourceRoot":"","sources":["../../../src/components/ModalDownload/ModalDownload.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAG/D,OAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAE/C,OAAO,EAEL,uBAAuB,EACvB,kBAAkB,EAClB,QAAQ,EACT,MAAM,iCAAiC,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,WAAW,EAA2B,MAAM,OAAO,CAAA;AAavE,KAAK,kBAAkB,GAAG;IACxB,SAAS,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,uBAAuB,CAAA;IAC9B,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAClC,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAA;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,mBAAmB,CAAC,EAAE,MAAM,kBAAkB,CAAA;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAA;CAClB,CAAA;AAED,qBAAa,aAAc,SAAQ,SAAS,CAC1C,kBAAkB,EAClB,kBAAkB,CACnB;IACC,MAAM,CAAC,WAAW,uFAAiB;IAC3B,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,OAAO,cAAc,CAAC,CAAC,CAAA;gBAEpD,KAAK,EAAE,kBAAkB;IAYrC,YAAY,GAAI,OAAO,YAAY,UAMlC;IAED,mBAAmB,GAAI,OAAO,YAAY,UAwCzC;IAED,UAAU,aAUT;IAED,YAAY,GAAI,OAAO,YAAY,UAKlC;IAED,MAAM;CA8DP;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"ModalDownload.d.ts","sourceRoot":"","sources":["../../../src/components/ModalDownload/ModalDownload.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAG/D,OAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAE/C,OAAO,EAEL,uBAAuB,EACvB,kBAAkB,EAClB,QAAQ,EACT,MAAM,iCAAiC,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,WAAW,EAA2B,MAAM,OAAO,CAAA;AAavE,KAAK,kBAAkB,GAAG;IACxB,SAAS,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,uBAAuB,CAAA;IAC9B,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAClC,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAA;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,mBAAmB,CAAC,EAAE,MAAM,kBAAkB,CAAA;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAA;CAClB,CAAA;AAED,qBAAa,aAAc,SAAQ,SAAS,CAC1C,kBAAkB,EAClB,kBAAkB,CACnB;IACC,MAAM,CAAC,WAAW,uFAAiB;IAC3B,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,OAAO,cAAc,CAAC,CAAC,CAAA;gBAEpD,KAAK,EAAE,kBAAkB;IAYrC,YAAY,GAAI,OAAO,YAAY,UAMlC;IAED,mBAAmB,GAAI,OAAO,YAAY,UAyCzC;IAED,UAAU,aAUT;IAED,YAAY,GAAI,OAAO,YAAY,UAKlC;IAED,MAAM;CA8DP;AAED,eAAe,aAAa,CAAA"}

package/dist/components/ModalDownload/ModalDownload.js

@@ -37,7 +37,8 @@ var b = class extends f {
 			writeHeader: l,
 			includeRowIdAndRowVersion: f,
 			csvTableDescriptor: { separator: c },
-			additionalFilters: p.query.additionalFilters
+			additionalFilters: p.query.additionalFilters,
+			cohorts: p.query.cohorts
 		};
 		e.createTableCsvForDownload(h, this.context.accessToken).then((e) => {
 			this.setState({

package/dist/components/ModalDownload/ModalDownload.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDownload.js","names":[],"sources":["../../../src/components/ModalDownload/ModalDownload.tsx"],"sourcesContent":["import SynapseClient from '@/synapse-client'\nimport { SynapseContext } from '@/utils/context/SynapseContext'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions/SqlFunctions'\nimport { Button } from '@mui/material'\nimport Form, { IChangeEvent } from '@rjsf/core'\nimport validator from '@rjsf/validator-ajv8'\nimport {\n  DownloadFromTableRequest,\n  DownloadFromTableResult,\n  QueryBundleRequest,\n  SortItem,\n} from '@sage-bionetworks/synapse-types'\nimport { Component, ContextType, CSSProperties, Fragment } from 'react'\nimport { DialogBase } from '../DialogBase'\nimport SynapseFormCheckboxesWidget from '../SynapseForm/SynapseFormCheckboxesWidget'\nimport SynapseFormCheckboxWidget from '../SynapseForm/SynapseFormCheckboxWidget'\nimport SynapseFormRadioWidget from '../SynapseForm/SynapseFormRadioWidget'\nimport {\n  csvOption,\n  formSchemaArray,\n  formSchemaUIArray,\n  includeRowIdAndRowVersionOption,\n  writeHeaderOption,\n} from './ModalDownload.FormSchema'\n\ntype ModalDownloadState = {\n  isLoading: boolean\n  step: number\n  data?: DownloadFromTableResult\n  formData: Record<string, unknown>\n}\n\nexport type ModalDownloadProps = {\n  onClose: (...args: any[]) => void\n  includeEntityEtag?: boolean\n  queryBundleRequest?: QueryBundleRequest // either the query bundle request needs to be provided, or getLastQueryRequest\n  getLastQueryRequest?: () => QueryBundleRequest\n  offset?: number\n  limit?: number\n  sort?: SortItem[]\n}\n\nexport class ModalDownload extends Component<\n  ModalDownloadProps,\n  ModalDownloadState\n> {\n  static contextType = SynapseContext\n  declare context: NonNullable<ContextType<typeof SynapseContext>>\n\n  constructor(props: ModalDownloadProps) {\n    super(props)\n    this.state = {\n      isLoading: false,\n      step: 0,\n      formData: {\n        'File Type': csvOption,\n        Contents: [writeHeaderOption, includeRowIdAndRowVersionOption],\n      },\n    }\n  }\n\n  handleSubmit = (event: IChangeEvent) => {\n    if (this.state.step === 0) {\n      this.handleDownloadSetup(event)\n    } else {\n      this.onDownload()\n    }\n  }\n\n  handleDownloadSetup = (event: IChangeEvent) => {\n    this.setState({\n      isLoading: true,\n    })\n    const { formData } = event\n    const fileType = formData['File Type']\n    const contents = formData.Contents as string[]\n    const { queryBundleRequest, getLastQueryRequest } = this.props\n    const separator = fileType === csvOption ? ',' : '\\t'\n    const writeHeader = contents.includes(writeHeaderOption)\n    const includeRowIdAndRowVersion = contents.includes(\n      includeRowIdAndRowVersionOption,\n    )\n    const queryRequest = queryBundleRequest ?? getLastQueryRequest!()\n    const sql = queryRequest.query.sql\n    const downloadFromTableRequest: DownloadFromTableRequest = {\n      sql,\n      entityId: parseEntityIdFromSqlStatement(sql),\n      selectedFacets: queryRequest.query.selectedFacets,\n      concreteType:\n        'org.sagebionetworks.repo.model.table.DownloadFromTableRequest',\n      writeHeader,\n      includeRowIdAndRowVersion,\n      csvTableDescriptor: { separator },\n      additionalFilters: queryRequest.query.additionalFilters,\n    }\n    SynapseClient.createTableCsvForDownload(\n      downloadFromTableRequest,\n      this.context.accessToken,\n    )\n      .then(data => {\n        this.setState({\n          isLoading: false,\n          step: 1,\n          data,\n        })\n      })\n      .catch(err => {\n        console.log('Error getDownloadFromTableRequest: ', err)\n      })\n  }\n\n  onDownload = () => {\n    const { data } = this.state\n    // data will always be defined if calling this function\n    SynapseClient.getFileHandleByIdURL(\n      data!.resultsFileHandleId,\n      this.context.accessToken,\n    ).then(url => {\n      window.location.href = url\n      this.props.onClose()\n    })\n  }\n\n  handleChange = (event: IChangeEvent) => {\n    const { formData } = event\n    this.setState({\n      formData,\n    })\n  }\n\n  render() {\n    const spinnerStyle: CSSProperties = {\n      height: 50,\n      width: 50,\n      backgroundSize: 50,\n    }\n    return (\n      <DialogBase\n        open={true}\n        onCancel={this.props.onClose}\n        title=\"Download query results\"\n        content={\n          <>\n            <Form\n              validator={validator}\n              id=\"modal-download-form\"\n              schema={formSchemaArray[this.state.step]}\n              uiSchema={formSchemaUIArray[this.state.step]}\n              onChange={this.handleChange}\n              formData={this.state.formData}\n              onSubmit={this.handleSubmit}\n              widgets={{\n                CheckboxWidget: SynapseFormCheckboxWidget,\n                CheckboxesWidget: SynapseFormCheckboxesWidget,\n                RadioWidget: SynapseFormRadioWidget,\n              }}\n            >\n              {this.state.isLoading && (\n                <div className=\"SRC-centerAndJustifyContent\">\n                  <div className=\"SRC-center-text\">\n                    <p> Creating the File </p>\n                    <div style={spinnerStyle} className=\"spinner\" />\n                    <p> Loading... </p>\n                  </div>\n                </div>\n              )}\n              <Fragment />\n            </Form>\n          </>\n        }\n        actions={\n          <>\n            <Button\n              variant=\"outlined\"\n              color=\"primary\"\n              onClick={this.props.onClose}\n            >\n              Cancel\n            </Button>\n            <Button\n              form=\"modal-download-form\"\n              type=\"submit\"\n              variant=\"contained\"\n              color=\"primary\"\n            >\n              {this.state.step === 0 ? 'Next' : 'Download'}\n            </Button>\n          </>\n        }\n      />\n    )\n  }\n}\n\nexport default ModalDownload\n"],"mappings":";;;;;;;;;;;;;;AA0CA,IAAa,IAAb,cAAmC,EAGjC;CACA,OAAO,cAAc;CAGrB,YAAY,GAA2B;EAErC,AADA,MAAM,CAAK,GACX,KAAK,QAAQ;GACX,WAAW;GACX,MAAM;GACN,UAAU;IACR,aAAa;IACb,UAAU,CAAC,GAAmB,CAA+B;GAC/D;EACF;CACF;CAEA,gBAAgB,MAAwB;EACtC,AAAI,KAAK,MAAM,SAAS,IACtB,KAAK,oBAAoB,CAAK,IAE9B,KAAK,WAAW;CAEpB;CAEA,uBAAuB,MAAwB;EAC7C,KAAK,SAAS,EACZ,WAAW,GACb,CAAC;EACD,IAAM,EAAE,gBAAa,GACf,IAAW,EAAS,cACpB,IAAW,EAAS,UACpB,EAAE,uBAAoB,2BAAwB,KAAK,OACnD,IAAY,MAAA,iCAAyB,MAAM,KAC3C,IAAc,EAAS,SAAS,CAAiB,GACjD,IAA4B,EAAS,SACzC,CACF,GACM,IAAe,KAAsB,EAAqB,GAC1D,IAAM,EAAa,MAAM,KACzB,IAAqD;GACzD;GACA,UAAU,EAA8B,CAAG;GAC3C,gBAAgB,EAAa,MAAM;GACnC,cACE;GACF;GACA;GACA,oBAAoB,EAAE,aAAU;GAChC,mBAAmB,EAAa,MAAM;EACxC;EACA,EAAc,0BACZ,GACA,KAAK,QAAQ,WACf,EACG,MAAK,MAAQ;GACZ,KAAK,SAAS;IACZ,WAAW;IACX,MAAM;IACN;GACF,CAAC;EACH,CAAC,EACA,OAAM,MAAO;GACZ,QAAQ,IAAI,uCAAuC,CAAG;EACxD,CAAC;CACL;CAEA,mBAAmB;EACjB,IAAM,EAAE,YAAS,KAAK;EAEtB,EAAc,qBACZ,EAAM,qBACN,KAAK,QAAQ,WACf,EAAE,MAAK,MAAO;GAEZ,AADA,OAAO,SAAS,OAAO,GACvB,KAAK,MAAM,QAAQ;EACrB,CAAC;CACH;CAEA,gBAAgB,MAAwB;EACtC,IAAM,EAAE,gBAAa;EACrB,KAAK,SAAS,EACZ,YACF,CAAC;CACH;CAEA,SAAS;EAMP,OACE,kBAAC,GAAD;GACE,MAAM;GACN,UAAU,KAAK,MAAM;GACrB,OAAM;GACN,SACE,kBAAA,GAAA,EAAA,UACE,kBAAC,GAAD;IACa;IACX,IAAG;IACH,QAAQ,EAAgB,KAAK,MAAM;IACnC,UAAU,EAAkB,KAAK,MAAM;IACvC,UAAU,KAAK;IACf,UAAU,KAAK,MAAM;IACrB,UAAU,KAAK;IACf,SAAS;KACP,gBAAgB;KAChB,kBAAkB;KAClB,aAAa;IACf;cAZF,CAcG,KAAK,MAAM,aACV,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,KAAD,EAAA,UAAG,sBAAsB,CAAA;OACzB,kBAAC,OAAD;QAAK,OAAO;SA7B1B,QAAQ;SACR,OAAO;SACP,gBAAgB;QA2BU;QAAc,WAAU;OAAW,CAAA;OAC/C,kBAAC,KAAD,EAAA,UAAG,eAAe,CAAA;MACf;;IACF,CAAA,GAEP,kBAAC,GAAD,CAAW,CAAA,CACP;MACN,CAAA;GAEJ,SACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;IACE,SAAQ;IACR,OAAM;IACN,SAAS,KAAK,MAAM;cACrB;GAEO,CAAA,GACR,kBAAC,GAAD;IACE,MAAK;IACL,MAAK;IACL,SAAQ;IACR,OAAM;cAEL,KAAK,MAAM,SAAS,IAAI,SAAS;GAC5B,CAAA,CACR,EAAA,CAAA;EAEL,CAAA;CAEL;AACF"}
+{"version":3,"file":"ModalDownload.js","names":[],"sources":["../../../src/components/ModalDownload/ModalDownload.tsx"],"sourcesContent":["import SynapseClient from '@/synapse-client'\nimport { SynapseContext } from '@/utils/context/SynapseContext'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions/SqlFunctions'\nimport { Button } from '@mui/material'\nimport Form, { IChangeEvent } from '@rjsf/core'\nimport validator from '@rjsf/validator-ajv8'\nimport {\n  DownloadFromTableRequest,\n  DownloadFromTableResult,\n  QueryBundleRequest,\n  SortItem,\n} from '@sage-bionetworks/synapse-types'\nimport { Component, ContextType, CSSProperties, Fragment } from 'react'\nimport { DialogBase } from '../DialogBase'\nimport SynapseFormCheckboxesWidget from '../SynapseForm/SynapseFormCheckboxesWidget'\nimport SynapseFormCheckboxWidget from '../SynapseForm/SynapseFormCheckboxWidget'\nimport SynapseFormRadioWidget from '../SynapseForm/SynapseFormRadioWidget'\nimport {\n  csvOption,\n  formSchemaArray,\n  formSchemaUIArray,\n  includeRowIdAndRowVersionOption,\n  writeHeaderOption,\n} from './ModalDownload.FormSchema'\n\ntype ModalDownloadState = {\n  isLoading: boolean\n  step: number\n  data?: DownloadFromTableResult\n  formData: Record<string, unknown>\n}\n\nexport type ModalDownloadProps = {\n  onClose: (...args: any[]) => void\n  includeEntityEtag?: boolean\n  queryBundleRequest?: QueryBundleRequest // either the query bundle request needs to be provided, or getLastQueryRequest\n  getLastQueryRequest?: () => QueryBundleRequest\n  offset?: number\n  limit?: number\n  sort?: SortItem[]\n}\n\nexport class ModalDownload extends Component<\n  ModalDownloadProps,\n  ModalDownloadState\n> {\n  static contextType = SynapseContext\n  declare context: NonNullable<ContextType<typeof SynapseContext>>\n\n  constructor(props: ModalDownloadProps) {\n    super(props)\n    this.state = {\n      isLoading: false,\n      step: 0,\n      formData: {\n        'File Type': csvOption,\n        Contents: [writeHeaderOption, includeRowIdAndRowVersionOption],\n      },\n    }\n  }\n\n  handleSubmit = (event: IChangeEvent) => {\n    if (this.state.step === 0) {\n      this.handleDownloadSetup(event)\n    } else {\n      this.onDownload()\n    }\n  }\n\n  handleDownloadSetup = (event: IChangeEvent) => {\n    this.setState({\n      isLoading: true,\n    })\n    const { formData } = event\n    const fileType = formData['File Type']\n    const contents = formData.Contents as string[]\n    const { queryBundleRequest, getLastQueryRequest } = this.props\n    const separator = fileType === csvOption ? ',' : '\\t'\n    const writeHeader = contents.includes(writeHeaderOption)\n    const includeRowIdAndRowVersion = contents.includes(\n      includeRowIdAndRowVersionOption,\n    )\n    const queryRequest = queryBundleRequest ?? getLastQueryRequest!()\n    const sql = queryRequest.query.sql\n    const downloadFromTableRequest: DownloadFromTableRequest = {\n      sql,\n      entityId: parseEntityIdFromSqlStatement(sql),\n      selectedFacets: queryRequest.query.selectedFacets,\n      concreteType:\n        'org.sagebionetworks.repo.model.table.DownloadFromTableRequest',\n      writeHeader,\n      includeRowIdAndRowVersion,\n      csvTableDescriptor: { separator },\n      additionalFilters: queryRequest.query.additionalFilters,\n      cohorts: queryRequest.query.cohorts,\n    }\n    SynapseClient.createTableCsvForDownload(\n      downloadFromTableRequest,\n      this.context.accessToken,\n    )\n      .then(data => {\n        this.setState({\n          isLoading: false,\n          step: 1,\n          data,\n        })\n      })\n      .catch(err => {\n        console.log('Error getDownloadFromTableRequest: ', err)\n      })\n  }\n\n  onDownload = () => {\n    const { data } = this.state\n    // data will always be defined if calling this function\n    SynapseClient.getFileHandleByIdURL(\n      data!.resultsFileHandleId,\n      this.context.accessToken,\n    ).then(url => {\n      window.location.href = url\n      this.props.onClose()\n    })\n  }\n\n  handleChange = (event: IChangeEvent) => {\n    const { formData } = event\n    this.setState({\n      formData,\n    })\n  }\n\n  render() {\n    const spinnerStyle: CSSProperties = {\n      height: 50,\n      width: 50,\n      backgroundSize: 50,\n    }\n    return (\n      <DialogBase\n        open={true}\n        onCancel={this.props.onClose}\n        title=\"Download query results\"\n        content={\n          <>\n            <Form\n              validator={validator}\n              id=\"modal-download-form\"\n              schema={formSchemaArray[this.state.step]}\n              uiSchema={formSchemaUIArray[this.state.step]}\n              onChange={this.handleChange}\n              formData={this.state.formData}\n              onSubmit={this.handleSubmit}\n              widgets={{\n                CheckboxWidget: SynapseFormCheckboxWidget,\n                CheckboxesWidget: SynapseFormCheckboxesWidget,\n                RadioWidget: SynapseFormRadioWidget,\n              }}\n            >\n              {this.state.isLoading && (\n                <div className=\"SRC-centerAndJustifyContent\">\n                  <div className=\"SRC-center-text\">\n                    <p> Creating the File </p>\n                    <div style={spinnerStyle} className=\"spinner\" />\n                    <p> Loading... </p>\n                  </div>\n                </div>\n              )}\n              <Fragment />\n            </Form>\n          </>\n        }\n        actions={\n          <>\n            <Button\n              variant=\"outlined\"\n              color=\"primary\"\n              onClick={this.props.onClose}\n            >\n              Cancel\n            </Button>\n            <Button\n              form=\"modal-download-form\"\n              type=\"submit\"\n              variant=\"contained\"\n              color=\"primary\"\n            >\n              {this.state.step === 0 ? 'Next' : 'Download'}\n            </Button>\n          </>\n        }\n      />\n    )\n  }\n}\n\nexport default ModalDownload\n"],"mappings":";;;;;;;;;;;;;;AA0CA,IAAa,IAAb,cAAmC,EAGjC;CACA,OAAO,cAAc;CAGrB,YAAY,GAA2B;EAErC,AADA,MAAM,CAAK,GACX,KAAK,QAAQ;GACX,WAAW;GACX,MAAM;GACN,UAAU;IACR,aAAa;IACb,UAAU,CAAC,GAAmB,CAA+B;GAC/D;EACF;CACF;CAEA,gBAAgB,MAAwB;EACtC,AAAI,KAAK,MAAM,SAAS,IACtB,KAAK,oBAAoB,CAAK,IAE9B,KAAK,WAAW;CAEpB;CAEA,uBAAuB,MAAwB;EAC7C,KAAK,SAAS,EACZ,WAAW,GACb,CAAC;EACD,IAAM,EAAE,gBAAa,GACf,IAAW,EAAS,cACpB,IAAW,EAAS,UACpB,EAAE,uBAAoB,2BAAwB,KAAK,OACnD,IAAY,MAAA,iCAAyB,MAAM,KAC3C,IAAc,EAAS,SAAS,CAAiB,GACjD,IAA4B,EAAS,SACzC,CACF,GACM,IAAe,KAAsB,EAAqB,GAC1D,IAAM,EAAa,MAAM,KACzB,IAAqD;GACzD;GACA,UAAU,EAA8B,CAAG;GAC3C,gBAAgB,EAAa,MAAM;GACnC,cACE;GACF;GACA;GACA,oBAAoB,EAAE,aAAU;GAChC,mBAAmB,EAAa,MAAM;GACtC,SAAS,EAAa,MAAM;EAC9B;EACA,EAAc,0BACZ,GACA,KAAK,QAAQ,WACf,EACG,MAAK,MAAQ;GACZ,KAAK,SAAS;IACZ,WAAW;IACX,MAAM;IACN;GACF,CAAC;EACH,CAAC,EACA,OAAM,MAAO;GACZ,QAAQ,IAAI,uCAAuC,CAAG;EACxD,CAAC;CACL;CAEA,mBAAmB;EACjB,IAAM,EAAE,YAAS,KAAK;EAEtB,EAAc,qBACZ,EAAM,qBACN,KAAK,QAAQ,WACf,EAAE,MAAK,MAAO;GAEZ,AADA,OAAO,SAAS,OAAO,GACvB,KAAK,MAAM,QAAQ;EACrB,CAAC;CACH;CAEA,gBAAgB,MAAwB;EACtC,IAAM,EAAE,gBAAa;EACrB,KAAK,SAAS,EACZ,YACF,CAAC;CACH;CAEA,SAAS;EAMP,OACE,kBAAC,GAAD;GACE,MAAM;GACN,UAAU,KAAK,MAAM;GACrB,OAAM;GACN,SACE,kBAAA,GAAA,EAAA,UACE,kBAAC,GAAD;IACa;IACX,IAAG;IACH,QAAQ,EAAgB,KAAK,MAAM;IACnC,UAAU,EAAkB,KAAK,MAAM;IACvC,UAAU,KAAK;IACf,UAAU,KAAK,MAAM;IACrB,UAAU,KAAK;IACf,SAAS;KACP,gBAAgB;KAChB,kBAAkB;KAClB,aAAa;IACf;cAZF,CAcG,KAAK,MAAM,aACV,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,KAAD,EAAA,UAAG,sBAAsB,CAAA;OACzB,kBAAC,OAAD;QAAK,OAAO;SA7B1B,QAAQ;SACR,OAAO;SACP,gBAAgB;QA2BU;QAAc,WAAU;OAAW,CAAA;OAC/C,kBAAC,KAAD,EAAA,UAAG,eAAe,CAAA;MACf;;IACF,CAAA,GAEP,kBAAC,GAAD,CAAW,CAAA,CACP;MACN,CAAA;GAEJ,SACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;IACE,SAAQ;IACR,OAAM;IACN,SAAS,KAAK,MAAM;cACrB;GAEO,CAAA,GACR,kBAAC,GAAD;IACE,MAAK;IACL,MAAK;IACL,SAAQ;IACR,OAAM;cAEL,KAAK,MAAM,SAAS,IAAI,SAAS;GAC5B,CAAA,CACR,EAAA,CAAA;EAEL,CAAA;CAEL;AACF"}

package/dist/components/Plot/BarPlot.js

@@ -6,7 +6,7 @@ import i from "lodash-es/uniq";
 //#region src/components/Plot/BarPlot.tsx
 function a(e, t, n) {
 	t && (e = e.filter((e) => e.y === t));
-	let r = i(e.map((e) => e.group)).sort(), a = [], o = ["(28,118,175,1)", "rgba(91,176,181,1)"];
+	let r = i(e.map((e) => e.group)).toSorted(), a = [], o = ["(28,118,175,1)", "rgba(91,176,181,1)"];
 	return r.forEach((t, r) => {
 		let i = e.filter((e) => e.group === t);
 		a.push({

package/dist/components/Plot/BarPlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarPlot.js","names":[],"sources":["../../../src/components/Plot/BarPlot.tsx"],"sourcesContent":["import cloneDeep from 'lodash-es/cloneDeep'\nimport noop from 'lodash-es/noop'\nimport uniq from 'lodash-es/uniq'\nimport Plotly from 'plotly.js-basic-dist'\nimport { CSSProperties } from 'react'\nimport Plot from './Plot'\nimport { BarPlotColors, GraphItem, PlotStyle } from './types'\n\nexport type BarPlotProps = {\n  isTop: boolean\n  style?: CSSProperties\n  plotData: GraphItem[]\n  layoutConfig: Partial<Plotly.Layout>\n  optionsConfig: Partial<Plotly.Config>\n  label: string\n  xMax: number\n  colors?: BarPlotColors\n  plotStyle?: PlotStyle\n  onClick?: (event: Readonly<Plotly.PlotMouseEvent>) => void\n}\n\ntype LayoutOptions = {\n  isTop: boolean\n  maxValue: number\n  isLegend?: boolean\n  backgroundColor?: string\n}\n\nfunction getBarPlotDataPoints(\n  data: any[],\n  filter?: string,\n  colors?: BarPlotColors,\n): any[] {\n  if (filter) {\n    data = data.filter(item => item.y === filter)\n  }\n  const groups = uniq(data.map(item => item['group'])).sort()\n  const result: any[] = []\n  const defaultColors = [`(28,118,175,1)`, `rgba(91,176,181,1)`]\n\n  groups.forEach((group, i) => {\n    const items = data.filter(item => item.group === group)\n    result.push({\n      x: items.map(item => item.x),\n      y: items.map(item => item.y),\n      name: group,\n      orientation: 'h',\n      marker: {\n        color: colors ? colors[group] : defaultColors[i],\n        width: 1,\n      },\n      text: [group],\n      hovertemplate: `%{x} %{text}<extra></extra>`,\n      textposition: 'none',\n      type: 'bar',\n    })\n  })\n\n  return result\n}\n\nfunction getLayout(\n  layoutConfig: Partial<Plotly.Layout>,\n  { isTop, maxValue, backgroundColor }: LayoutOptions,\n): Partial<Plotly.Layout> {\n  const layout = cloneDeep(layoutConfig)\n  layout.xaxis = {\n    visible: false,\n    range: [0, maxValue],\n  }\n  if (backgroundColor) {\n    layout.plot_bgcolor = backgroundColor\n    layout.paper_bgcolor = backgroundColor\n  }\n  if (!isTop) {\n    layout.hoverlabel = {\n      font: {\n        size: 10,\n      },\n    }\n  }\n  layout.showlegend = false\n  layout.height = isTop ? 40 : 20\n  return layout\n}\n\nconst DEFAULT_BARPLOT_PLOTSTYLE: PlotStyle = { backgroundColor: 'transparent' }\nconst DEFAULT_BARPLOT_STYLE: CSSProperties = {\n  width: '100%',\n  height: '100%',\n}\n\nfunction BarPlot({\n  plotData,\n  optionsConfig,\n  isTop,\n  layoutConfig,\n  label,\n  xMax,\n  colors,\n  plotStyle = DEFAULT_BARPLOT_PLOTSTYLE,\n  style = DEFAULT_BARPLOT_STYLE,\n  onClick,\n}: BarPlotProps) {\n  return (\n    <Plot\n      style={style}\n      layout={getLayout(layoutConfig, {\n        isTop,\n        maxValue: xMax,\n        backgroundColor: plotStyle.backgroundColor,\n      })}\n      config={optionsConfig}\n      data={getBarPlotDataPoints(plotData, label, colors)}\n      onClick={e => (onClick ? onClick(e) : noop)}\n    />\n  )\n}\n\nexport default BarPlot\n"],"mappings":";;;;;;AA4BA,SAAS,EACP,GACA,GACA,GACO;CACP,AAAI,MACF,IAAO,EAAK,QAAO,MAAQ,EAAK,MAAM,CAAM;CAE9C,IAAM,IAAS,EAAK,EAAK,KAAI,MAAQ,EAAK,KAAQ,CAAC,EAAE,KAAK,GACpD,IAAgB,CAAC,GACjB,IAAgB,CAAC,kBAAkB,oBAAoB;CAoB7D,OAlBA,EAAO,SAAS,GAAO,MAAM;EAC3B,IAAM,IAAQ,EAAK,QAAO,MAAQ,EAAK,UAAU,CAAK;EACtD,EAAO,KAAK;GACV,GAAG,EAAM,KAAI,MAAQ,EAAK,CAAC;GAC3B,GAAG,EAAM,KAAI,MAAQ,EAAK,CAAC;GAC3B,MAAM;GACN,aAAa;GACb,QAAQ;IACN,OAAO,IAAS,EAAO,KAAS,EAAc;IAC9C,OAAO;GACT;GACA,MAAM,CAAC,CAAK;GACZ,eAAe;GACf,cAAc;GACd,MAAM;EACR,CAAC;CACH,CAAC,GAEM;AACT;AAEA,SAAS,EACP,GACA,EAAE,UAAO,aAAU,sBACK;CACxB,IAAM,IAAS,EAAU,CAAY;CAkBrC,OAjBA,EAAO,QAAQ;EACb,SAAS;EACT,OAAO,CAAC,GAAG,CAAQ;CACrB,GACI,MACF,EAAO,eAAe,GACtB,EAAO,gBAAgB,IAEpB,MACH,EAAO,aAAa,EAClB,MAAM,EACJ,MAAM,GACR,EACF,IAEF,EAAO,aAAa,IACpB,EAAO,SAAS,IAAQ,KAAK,IACtB;AACT;AAEA,IAAM,IAAuC,EAAE,iBAAiB,cAAc,GACxE,IAAuC;CAC3C,OAAO;CACP,QAAQ;AACV;AAEA,SAAS,EAAQ,EACf,aACA,kBACA,UACA,iBACA,UACA,SACA,WACA,eAAY,GACZ,WAAQ,GACR,cACe;CACf,OACE,kBAAC,GAAD;EACS;EACP,QAAQ,EAAU,GAAc;GAC9B;GACA,UAAU;GACV,iBAAiB,EAAU;EAC7B,CAAC;EACD,QAAQ;EACR,MAAM,EAAqB,GAAU,GAAO,CAAM;EAClD,UAAS,MAAM,IAAU,EAAQ,CAAC,IAAI;CACvC,CAAA;AAEL"}
+{"version":3,"file":"BarPlot.js","names":[],"sources":["../../../src/components/Plot/BarPlot.tsx"],"sourcesContent":["import cloneDeep from 'lodash-es/cloneDeep'\nimport noop from 'lodash-es/noop'\nimport uniq from 'lodash-es/uniq'\nimport Plotly from 'plotly.js-basic-dist'\nimport { CSSProperties } from 'react'\nimport Plot from './Plot'\nimport { BarPlotColors, GraphItem, PlotStyle } from './types'\n\nexport type BarPlotProps = {\n  isTop: boolean\n  style?: CSSProperties\n  plotData: GraphItem[]\n  layoutConfig: Partial<Plotly.Layout>\n  optionsConfig: Partial<Plotly.Config>\n  label: string\n  xMax: number\n  colors?: BarPlotColors\n  plotStyle?: PlotStyle\n  onClick?: (event: Readonly<Plotly.PlotMouseEvent>) => void\n}\n\ntype LayoutOptions = {\n  isTop: boolean\n  maxValue: number\n  isLegend?: boolean\n  backgroundColor?: string\n}\n\nfunction getBarPlotDataPoints(\n  data: any[],\n  filter?: string,\n  colors?: BarPlotColors,\n): any[] {\n  if (filter) {\n    data = data.filter(item => item.y === filter)\n  }\n  const groups = uniq(data.map(item => item['group'] as string)).toSorted()\n  const result: any[] = []\n  const defaultColors = [`(28,118,175,1)`, `rgba(91,176,181,1)`]\n\n  groups.forEach((group, i) => {\n    const items = data.filter(item => item.group === group)\n    result.push({\n      x: items.map(item => item.x),\n      y: items.map(item => item.y),\n      name: group,\n      orientation: 'h',\n      marker: {\n        color: colors ? colors[group] : defaultColors[i],\n        width: 1,\n      },\n      text: [group],\n      hovertemplate: `%{x} %{text}<extra></extra>`,\n      textposition: 'none',\n      type: 'bar',\n    })\n  })\n\n  return result\n}\n\nfunction getLayout(\n  layoutConfig: Partial<Plotly.Layout>,\n  { isTop, maxValue, backgroundColor }: LayoutOptions,\n): Partial<Plotly.Layout> {\n  const layout = cloneDeep(layoutConfig)\n  layout.xaxis = {\n    visible: false,\n    range: [0, maxValue],\n  }\n  if (backgroundColor) {\n    layout.plot_bgcolor = backgroundColor\n    layout.paper_bgcolor = backgroundColor\n  }\n  if (!isTop) {\n    layout.hoverlabel = {\n      font: {\n        size: 10,\n      },\n    }\n  }\n  layout.showlegend = false\n  layout.height = isTop ? 40 : 20\n  return layout\n}\n\nconst DEFAULT_BARPLOT_PLOTSTYLE: PlotStyle = { backgroundColor: 'transparent' }\nconst DEFAULT_BARPLOT_STYLE: CSSProperties = {\n  width: '100%',\n  height: '100%',\n}\n\nfunction BarPlot({\n  plotData,\n  optionsConfig,\n  isTop,\n  layoutConfig,\n  label,\n  xMax,\n  colors,\n  plotStyle = DEFAULT_BARPLOT_PLOTSTYLE,\n  style = DEFAULT_BARPLOT_STYLE,\n  onClick,\n}: BarPlotProps) {\n  return (\n    <Plot\n      style={style}\n      layout={getLayout(layoutConfig, {\n        isTop,\n        maxValue: xMax,\n        backgroundColor: plotStyle.backgroundColor,\n      })}\n      config={optionsConfig}\n      data={getBarPlotDataPoints(plotData, label, colors)}\n      onClick={e => (onClick ? onClick(e) : noop)}\n    />\n  )\n}\n\nexport default BarPlot\n"],"mappings":";;;;;;AA4BA,SAAS,EACP,GACA,GACA,GACO;CACP,AAAI,MACF,IAAO,EAAK,QAAO,MAAQ,EAAK,MAAM,CAAM;CAE9C,IAAM,IAAS,EAAK,EAAK,KAAI,MAAQ,EAAK,KAAkB,CAAC,EAAE,SAAS,GAClE,IAAgB,CAAC,GACjB,IAAgB,CAAC,kBAAkB,oBAAoB;CAoB7D,OAlBA,EAAO,SAAS,GAAO,MAAM;EAC3B,IAAM,IAAQ,EAAK,QAAO,MAAQ,EAAK,UAAU,CAAK;EACtD,EAAO,KAAK;GACV,GAAG,EAAM,KAAI,MAAQ,EAAK,CAAC;GAC3B,GAAG,EAAM,KAAI,MAAQ,EAAK,CAAC;GAC3B,MAAM;GACN,aAAa;GACb,QAAQ;IACN,OAAO,IAAS,EAAO,KAAS,EAAc;IAC9C,OAAO;GACT;GACA,MAAM,CAAC,CAAK;GACZ,eAAe;GACf,cAAc;GACd,MAAM;EACR,CAAC;CACH,CAAC,GAEM;AACT;AAEA,SAAS,EACP,GACA,EAAE,UAAO,aAAU,sBACK;CACxB,IAAM,IAAS,EAAU,CAAY;CAkBrC,OAjBA,EAAO,QAAQ;EACb,SAAS;EACT,OAAO,CAAC,GAAG,CAAQ;CACrB,GACI,MACF,EAAO,eAAe,GACtB,EAAO,gBAAgB,IAEpB,MACH,EAAO,aAAa,EAClB,MAAM,EACJ,MAAM,GACR,EACF,IAEF,EAAO,aAAa,IACpB,EAAO,SAAS,IAAQ,KAAK,IACtB;AACT;AAEA,IAAM,IAAuC,EAAE,iBAAiB,cAAc,GACxE,IAAuC;CAC3C,OAAO;CACP,QAAQ;AACV;AAEA,SAAS,EAAQ,EACf,aACA,kBACA,UACA,iBACA,UACA,SACA,WACA,eAAY,GACZ,WAAQ,GACR,cACe;CACf,OACE,kBAAC,GAAD;EACS;EACP,QAAQ,EAAU,GAAc;GAC9B;GACA,UAAU;GACV,iBAAiB,EAAU;EAC7B,CAAC;EACD,QAAQ;EACR,MAAM,EAAqB,GAAU,GAAO,CAAM;EAClD,UAAS,MAAM,IAAU,EAAQ,CAAC,IAAI;CACvC,CAAA;AAEL"}

package/dist/components/Plot/PlotPanelHeader.d.ts

@@ -1,9 +1,10 @@
-import { FacetColumnResultValues, QueryResultBundle } from '@sage-bionetworks/synapse-types';
+import { EnumerationFacet } from '@/utils/functions/enumerationFacet';
+import { QueryResultBundle } from '@sage-bionetworks/synapse-types';
 export type PlotPanelHeaderProps = {
     data?: QueryResultBundle;
     isLoading?: boolean;
     title: string;
-    facetToPlot?: FacetColumnResultValues;
+    facetToPlot?: EnumerationFacet;
     onHide: () => void;
     setShowModal?: (show: boolean) => void;
 };

package/dist/components/Plot/PlotPanelHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlotPanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Plot/PlotPanelHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,iBAAiB,EAClB,MAAM,iCAAiC,CAAA;AAKxC,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,CAAC,EAAE,iBAAiB,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,uBAAuB,CAAA;IACrC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAgClE"}
+{"version":3,"file":"PlotPanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Plot/PlotPanelHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAA;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AAKnE,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,CAAC,EAAE,iBAAiB,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAgClE"}

package/dist/components/Plot/PlotPanelHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlotPanelHeader.js","names":[],"sources":["../../../src/components/Plot/PlotPanelHeader.tsx"],"sourcesContent":["import {\n  FacetColumnResultValues,\n  QueryResultBundle,\n} from '@sage-bionetworks/synapse-types'\nimport { SkeletonInlineBlock } from '../Skeleton/SkeletonInlineBlock'\nimport { EnumFacetFilter } from '../widgets/query-filter/EnumFacetFilter/EnumFacetFilter'\nimport { IconSvgButton } from '../IconSvgButton'\n\nexport type PlotPanelHeaderProps = {\n  data?: QueryResultBundle\n  isLoading?: boolean\n  title: string\n  facetToPlot?: FacetColumnResultValues\n  onHide: () => void\n  setShowModal?: (show: boolean) => void\n}\n\nexport default function PlotPanelHeader(props: PlotPanelHeaderProps) {\n  const { data, isLoading, title, facetToPlot, onHide, setShowModal } = props\n  return (\n    <div className=\"FacetNavPanel__title\">\n      {!data && isLoading ? (\n        <SkeletonInlineBlock width={100} />\n      ) : (\n        <span className=\"FacetNavPanel__title__name\">{title}</span>\n      )}\n      <div role=\"toolbar\" className=\"FacetNavPanel__title__tools\">\n        {facetToPlot && (\n          <EnumFacetFilter facet={facetToPlot} containerAs=\"Dropdown\" />\n        )}\n        {setShowModal && (\n          <IconSvgButton\n            tooltipText=\"Expand to large graph\"\n            tooltipPlacement=\"bottom\"\n            onClick={() => setShowModal(true)}\n            size=\"small\"\n            icon=\"openInFull\"\n          />\n        )}\n        <IconSvgButton\n          tooltipText=\"Hide graph under Show More\"\n          tooltipPlacement=\"bottom\"\n          onClick={() => onHide()}\n          size=\"small\"\n          icon=\"close\"\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;AAiBA,SAAwB,EAAgB,GAA6B;CACnE,IAAM,EAAE,SAAM,cAAW,UAAO,gBAAa,WAAQ,oBAAiB;CACtE,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACG,CAAC,KAAQ,IACR,kBAAC,GAAD,EAAqB,OAAO,IAAM,CAAA,IAElC,kBAAC,QAAD;GAAM,WAAU;aAA8B;EAAY,CAAA,GAE5D,kBAAC,OAAD;GAAK,MAAK;GAAU,WAAU;aAA9B;IACG,KACC,kBAAC,GAAD;KAAiB,OAAO;KAAa,aAAY;IAAY,CAAA;IAE9D,KACC,kBAAC,GAAD;KACE,aAAY;KACZ,kBAAiB;KACjB,eAAe,EAAa,EAAI;KAChC,MAAK;KACL,MAAK;IACN,CAAA;IAEH,kBAAC,GAAD;KACE,aAAY;KACZ,kBAAiB;KACjB,eAAe,EAAO;KACtB,MAAK;KACL,MAAK;IACN,CAAA;GACE;IACF;;AAET"}
+{"version":3,"file":"PlotPanelHeader.js","names":[],"sources":["../../../src/components/Plot/PlotPanelHeader.tsx"],"sourcesContent":["import { EnumerationFacet } from '@/utils/functions/enumerationFacet'\nimport { QueryResultBundle } from '@sage-bionetworks/synapse-types'\nimport { SkeletonInlineBlock } from '../Skeleton/SkeletonInlineBlock'\nimport { EnumFacetFilter } from '../widgets/query-filter/EnumFacetFilter/EnumFacetFilter'\nimport { IconSvgButton } from '../IconSvgButton'\n\nexport type PlotPanelHeaderProps = {\n  data?: QueryResultBundle\n  isLoading?: boolean\n  title: string\n  facetToPlot?: EnumerationFacet\n  onHide: () => void\n  setShowModal?: (show: boolean) => void\n}\n\nexport default function PlotPanelHeader(props: PlotPanelHeaderProps) {\n  const { data, isLoading, title, facetToPlot, onHide, setShowModal } = props\n  return (\n    <div className=\"FacetNavPanel__title\">\n      {!data && isLoading ? (\n        <SkeletonInlineBlock width={100} />\n      ) : (\n        <span className=\"FacetNavPanel__title__name\">{title}</span>\n      )}\n      <div role=\"toolbar\" className=\"FacetNavPanel__title__tools\">\n        {facetToPlot && (\n          <EnumFacetFilter facet={facetToPlot} containerAs=\"Dropdown\" />\n        )}\n        {setShowModal && (\n          <IconSvgButton\n            tooltipText=\"Expand to large graph\"\n            tooltipPlacement=\"bottom\"\n            onClick={() => setShowModal(true)}\n            size=\"small\"\n            icon=\"openInFull\"\n          />\n        )}\n        <IconSvgButton\n          tooltipText=\"Hide graph under Show More\"\n          tooltipPlacement=\"bottom\"\n          onClick={() => onHide()}\n          size=\"small\"\n          icon=\"close\"\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;AAeA,SAAwB,EAAgB,GAA6B;CACnE,IAAM,EAAE,SAAM,cAAW,UAAO,gBAAa,WAAQ,oBAAiB;CACtE,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACG,CAAC,KAAQ,IACR,kBAAC,GAAD,EAAqB,OAAO,IAAM,CAAA,IAElC,kBAAC,QAAD;GAAM,WAAU;aAA8B;EAAY,CAAA,GAE5D,kBAAC,OAAD;GAAK,MAAK;GAAU,WAAU;aAA9B;IACG,KACC,kBAAC,GAAD;KAAiB,OAAO;KAAa,aAAY;IAAY,CAAA;IAE9D,KACC,kBAAC,GAAD;KACE,aAAY;KACZ,kBAAiB;KACjB,eAAe,EAAa,EAAI;KAChC,MAAK;KACL,MAAK;IACN,CAAA;IAEH,kBAAC,GAAD;KACE,aAAY;KACZ,kBAAiB;KACjB,eAAe,EAAO;KACtB,MAAK;KACL,MAAK;IACN,CAAA;GACE;IACF;;AAET"}

package/dist/components/ProgrammaticTableDownload/ProgrammaticTableDownload.js

@@ -22,7 +22,7 @@ function d({ queryBundleRequest: d, onHide: f }) {
 			m(`SELECT * ${v.substring(e)}`);
 		}
 	}, [v, y]);
-	let b = a(() => p.replace(/(["`])/g, "\\$1"), [p]), x = a(() => p.replace(/"/g, "\\\""), [p]);
+	let b = a(() => p.replaceAll(/(["`])/g, String.raw`\$1`), [p]), x = a(() => p.replaceAll("\"", String.raw`\"`), [p]);
 	return /* @__PURE__ */ l(t, {
 		show: !0,
 		onClose: f,

package/dist/components/ProgrammaticTableDownload/ProgrammaticTableDownload.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgrammaticTableDownload.js","names":[],"sources":["../../../src/components/ProgrammaticTableDownload/ProgrammaticTableDownload.tsx"],"sourcesContent":["import { useGetQueryResultBundleWithAsyncStatus } from '@/synapse-queries'\nimport { SynapseConstants } from '@/utils'\nimport { Link } from '@mui/material'\nimport { QueryBundleRequest } from '@sage-bionetworks/synapse-types'\nimport { useEffect, useMemo, useState } from 'react'\nimport {\n  PYTHON_CLIENT_IMPORT_AND_LOGIN,\n  R_CLIENT_IMPORT_AND_LOGIN,\n} from '../DownloadCart/DirectProgrammaticDownload'\nimport { ProgrammaticInstructionsModal } from '../ProgrammaticInstructionsModal/ProgrammaticInstructionsModal'\n\nexport type ProgrammaticTableDownloadProps = {\n  queryBundleRequest: QueryBundleRequest\n  onHide: () => void\n}\n\nexport function ProgrammaticTableDownload({\n  queryBundleRequest,\n  onHide,\n}: ProgrammaticTableDownloadProps) {\n  const [generatedSql, setGeneratedSql] = useState('...')\n\n  const {\n    data: asyncJobStatus,\n    isLoading: queryIsLoading,\n    isPlaceholderData: newQueryIsFetching,\n  } = useGetQueryResultBundleWithAsyncStatus(\n    {\n      ...queryBundleRequest,\n      partMask: SynapseConstants.BUNDLE_MASK_COMBINED_SQL,\n    },\n    {\n      placeholderData: previousData => previousData,\n      throwOnError: true,\n    },\n  )\n\n  const combinedSql = asyncJobStatus?.responseBody?.combinedSql\n  const isLoadingNewBundle = queryIsLoading || newQueryIsFetching\n\n  useEffect(() => {\n    if (combinedSql && !isLoadingNewBundle) {\n      // SWC-5686: The ID column is required by the client, and this column may not have been selected!\n      // Change the SQL to \"SELECT * ...\"\n      const indexOfFrom = combinedSql.toUpperCase().indexOf('FROM SYN')\n      const selectStarTransformedSql = `SELECT * ${combinedSql.substring(\n        indexOfFrom,\n      )}`\n      setGeneratedSql(selectStarTransformedSql)\n    }\n  }, [combinedSql, isLoadingNewBundle])\n\n  // Replace quotation marks with escaped quotations. For CLI, also escape backticks.\n  const commandLineSql = useMemo(\n    () => generatedSql.replace(/([\"`])/g, '\\\\$1'),\n    [generatedSql],\n  )\n\n  const clientSql = useMemo(\n    () => generatedSql.replace(/\"/g, '\\\\\"'),\n    [generatedSql],\n  )\n\n  return (\n    <ProgrammaticInstructionsModal\n      show={true}\n      onClose={onHide}\n      title=\"Download Programmatically\"\n      cliNotes={\n        <>\n          This command line code will download Synapse files AND file\n          annotations to your working directory.\n        </>\n      }\n      cliCode={`synapse get -q \"${commandLineSql}\"`}\n      rNotes={\n        <>\n          This R code will download file annotations only. Use{' '}\n          <Link\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            href=\"https://help.synapse.org/docs/Get-Started-with-Downloading-Data.2004254837.html#GetStartedwithDownloadingData-DownloadingFiles\"\n          >\n            synGet{'()'}\n          </Link>{' '}\n          to loop over the list of Synapse IDs from the file annotations to\n          download files.\n        </>\n      }\n      rCode={`${R_CLIENT_IMPORT_AND_LOGIN}\nquery ${'<-'} synTableQuery(\"${clientSql}\")${'\\n'}read.table(query$filepath, sep = \",\")`}\n      pythonNotes={\n        <>\n          This Python code will download file annotations only. Use{' '}\n          <Link\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            href=\"https://help.synapse.org/docs/Get-Started-with-Downloading-Data.2004254837.html#GetStartedwithDownloadingData-DownloadingFiles\"\n          >\n            syn.get\n          </Link>{' '}\n          to loop over the list of Synapse IDs from the file annotations to\n          download files.\n        </>\n      }\n      pythonCode={`${PYTHON_CLIENT_IMPORT_AND_LOGIN}\nquery = syn.tableQuery(\"${clientSql}\")${'\\n'}query.asDataFrame()`}\n    />\n  )\n}\n\nexport default ProgrammaticTableDownload\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,EAA0B,EACxC,uBACA,aACiC;CACjC,IAAM,CAAC,GAAc,KAAmB,EAAS,KAAK,GAEhD,EACJ,MAAM,GACN,WAAW,GACX,mBAAmB,MACjB,EACF;EACE,GAAG;EACH,UAAU;CACZ,GACA;EACE,kBAAiB,MAAgB;EACjC,cAAc;CAChB,CACF,GAEM,IAAc,GAAgB,cAAc,aAC5C,IAAqB,KAAkB;CAE7C,QAAgB;EACd,IAAI,KAAe,CAAC,GAAoB;GAGtC,IAAM,IAAc,EAAY,YAAY,EAAE,QAAQ,UAAU;GAIhE,EAAgB,YAH6B,EAAY,UACvD,CACF,GACwC;EAC1C;CACF,GAAG,CAAC,GAAa,CAAkB,CAAC;CAGpC,IAAM,IAAiB,QACf,EAAa,QAAQ,WAAW,MAAM,GAC5C,CAAC,CAAY,CACf,GAEM,IAAY,QACV,EAAa,QAAQ,MAAM,MAAK,GACtC,CAAC,CAAY,CACf;CAEA,OACE,kBAAC,GAAD;EACE,MAAM;EACN,SAAS;EACT,OAAM;EACN,UACE,kBAAA,GAAA,EAAA,UAAE,qGAGA,CAAA;EAEJ,SAAS,mBAAmB,EAAe;EAC3C,QACE,kBAAA,GAAA,EAAA,UAAA;GAAE;GACqD;GACrD,kBAAC,GAAD;IACE,QAAO;IACP,KAAI;IACJ,MAAK;cAHP,CAIC,UACQ,IACH;;GAAE;GAAI;EAGZ,EAAA,CAAA;EAEJ,OAAO,GAAG,EAA0B;0BACX,EAAU;;EACnC,aACE,kBAAA,GAAA,EAAA,UAAA;GAAE;GAC0D;GAC1D,kBAAC,GAAD;IACE,QAAO;IACP,KAAI;IACJ,MAAK;cACN;GAEK,CAAA;GAAE;GAAI;EAGZ,EAAA,CAAA;EAEJ,YAAY,GAAG,EAA+B;0BAC1B,EAAU;;CAC/B,CAAA;AAEL"}
+{"version":3,"file":"ProgrammaticTableDownload.js","names":[],"sources":["../../../src/components/ProgrammaticTableDownload/ProgrammaticTableDownload.tsx"],"sourcesContent":["import { useGetQueryResultBundleWithAsyncStatus } from '@/synapse-queries'\nimport { SynapseConstants } from '@/utils'\nimport { Link } from '@mui/material'\nimport { QueryBundleRequest } from '@sage-bionetworks/synapse-types'\nimport { useEffect, useMemo, useState } from 'react'\nimport {\n  PYTHON_CLIENT_IMPORT_AND_LOGIN,\n  R_CLIENT_IMPORT_AND_LOGIN,\n} from '../DownloadCart/DirectProgrammaticDownload'\nimport { ProgrammaticInstructionsModal } from '../ProgrammaticInstructionsModal/ProgrammaticInstructionsModal'\n\nexport type ProgrammaticTableDownloadProps = {\n  queryBundleRequest: QueryBundleRequest\n  onHide: () => void\n}\n\nexport function ProgrammaticTableDownload({\n  queryBundleRequest,\n  onHide,\n}: ProgrammaticTableDownloadProps) {\n  const [generatedSql, setGeneratedSql] = useState('...')\n\n  const {\n    data: asyncJobStatus,\n    isLoading: queryIsLoading,\n    isPlaceholderData: newQueryIsFetching,\n  } = useGetQueryResultBundleWithAsyncStatus(\n    {\n      ...queryBundleRequest,\n      partMask: SynapseConstants.BUNDLE_MASK_COMBINED_SQL,\n    },\n    {\n      placeholderData: previousData => previousData,\n      throwOnError: true,\n    },\n  )\n\n  const combinedSql = asyncJobStatus?.responseBody?.combinedSql\n  const isLoadingNewBundle = queryIsLoading || newQueryIsFetching\n\n  useEffect(() => {\n    if (combinedSql && !isLoadingNewBundle) {\n      // SWC-5686: The ID column is required by the client, and this column may not have been selected!\n      // Change the SQL to \"SELECT * ...\"\n      const indexOfFrom = combinedSql.toUpperCase().indexOf('FROM SYN')\n      const selectStarTransformedSql = `SELECT * ${combinedSql.substring(\n        indexOfFrom,\n      )}`\n      setGeneratedSql(selectStarTransformedSql)\n    }\n  }, [combinedSql, isLoadingNewBundle])\n\n  // Replace quotation marks with escaped quotations. For CLI, also escape backticks.\n  const commandLineSql = useMemo(\n    () => generatedSql.replaceAll(/([\"`])/g, String.raw`\\$1`),\n    [generatedSql],\n  )\n\n  const clientSql = useMemo(\n    () => generatedSql.replaceAll('\"', String.raw`\\\"`),\n    [generatedSql],\n  )\n\n  return (\n    <ProgrammaticInstructionsModal\n      show={true}\n      onClose={onHide}\n      title=\"Download Programmatically\"\n      cliNotes={\n        <>\n          This command line code will download Synapse files AND file\n          annotations to your working directory.\n        </>\n      }\n      cliCode={`synapse get -q \"${commandLineSql}\"`}\n      rNotes={\n        <>\n          This R code will download file annotations only. Use{' '}\n          <Link\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            href=\"https://help.synapse.org/docs/Get-Started-with-Downloading-Data.2004254837.html#GetStartedwithDownloadingData-DownloadingFiles\"\n          >\n            synGet{'()'}\n          </Link>{' '}\n          to loop over the list of Synapse IDs from the file annotations to\n          download files.\n        </>\n      }\n      rCode={`${R_CLIENT_IMPORT_AND_LOGIN}\nquery ${'<-'} synTableQuery(\"${clientSql}\")${'\\n'}read.table(query$filepath, sep = \",\")`}\n      pythonNotes={\n        <>\n          This Python code will download file annotations only. Use{' '}\n          <Link\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            href=\"https://help.synapse.org/docs/Get-Started-with-Downloading-Data.2004254837.html#GetStartedwithDownloadingData-DownloadingFiles\"\n          >\n            syn.get\n          </Link>{' '}\n          to loop over the list of Synapse IDs from the file annotations to\n          download files.\n        </>\n      }\n      pythonCode={`${PYTHON_CLIENT_IMPORT_AND_LOGIN}\nquery = syn.tableQuery(\"${clientSql}\")${'\\n'}query.asDataFrame()`}\n    />\n  )\n}\n\nexport default ProgrammaticTableDownload\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,EAA0B,EACxC,uBACA,aACiC;CACjC,IAAM,CAAC,GAAc,KAAmB,EAAS,KAAK,GAEhD,EACJ,MAAM,GACN,WAAW,GACX,mBAAmB,MACjB,EACF;EACE,GAAG;EACH,UAAU;CACZ,GACA;EACE,kBAAiB,MAAgB;EACjC,cAAc;CAChB,CACF,GAEM,IAAc,GAAgB,cAAc,aAC5C,IAAqB,KAAkB;CAE7C,QAAgB;EACd,IAAI,KAAe,CAAC,GAAoB;GAGtC,IAAM,IAAc,EAAY,YAAY,EAAE,QAAQ,UAAU;GAIhE,EAAgB,YAH6B,EAAY,UACvD,CACF,GACwC;EAC1C;CACF,GAAG,CAAC,GAAa,CAAkB,CAAC;CAGpC,IAAM,IAAiB,QACf,EAAa,WAAW,WAAW,OAAO,GAAG,KAAK,GACxD,CAAC,CAAY,CACf,GAEM,IAAY,QACV,EAAa,WAAW,MAAK,OAAO,GAAG,IAAI,GACjD,CAAC,CAAY,CACf;CAEA,OACE,kBAAC,GAAD;EACE,MAAM;EACN,SAAS;EACT,OAAM;EACN,UACE,kBAAA,GAAA,EAAA,UAAE,qGAGA,CAAA;EAEJ,SAAS,mBAAmB,EAAe;EAC3C,QACE,kBAAA,GAAA,EAAA,UAAA;GAAE;GACqD;GACrD,kBAAC,GAAD;IACE,QAAO;IACP,KAAI;IACJ,MAAK;cAHP,CAIC,UACQ,IACH;;GAAE;GAAI;EAGZ,EAAA,CAAA;EAEJ,OAAO,GAAG,EAA0B;0BACX,EAAU;;EACnC,aACE,kBAAA,GAAA,EAAA,UAAA;GAAE;GAC0D;GAC1D,kBAAC,GAAD;IACE,QAAO;IACP,KAAI;IACJ,MAAK;cACN;GAEK,CAAA;GAAE;GAAI;EAGZ,EAAA,CAAA;EAEJ,YAAY,GAAG,EAA+B;0BAC1B,EAAU;;CAC/B,CAAA;AAEL"}

package/dist/components/ProvenanceGraph/ProvenanceExternalIcon.js

@@ -4,7 +4,7 @@ import { jsx as t } from "react/jsx-runtime";
 //#region src/components/ProvenanceGraph/ProvenanceExternalIcon.tsx
 var n = /^(.+?\.)?github\.com$/, r = /^(.+?\.)?githubusercontent\.com$/, i = (i) => {
 	let { url: a } = i, o = "link", { hostname: s } = new URL(a);
-	return (s.match(n) || s.match(r)) && (o = "github"), /* @__PURE__ */ t(e, { icon: o });
+	return (n.exec(s) || r.exec(s)) && (o = "github"), /* @__PURE__ */ t(e, { icon: o });
 };
 //#endregion
 export { i as ProvenanceExternalIcon };

package/dist/components/ProvenanceGraph/ProvenanceExternalIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProvenanceExternalIcon.js","names":[],"sources":["../../../src/components/ProvenanceGraph/ProvenanceExternalIcon.tsx"],"sourcesContent":["import React from 'react'\nimport IconSvg, { IconName } from '../IconSvg/IconSvg'\n\nexport type ProvenanceExternalIconProps = {\n  url: string\n}\nconst githubRegex = /^(.+?\\.)?github\\.com$/\nconst githubusercontentRegex = /^(.+?\\.)?githubusercontent\\.com$/\n\nexport const ProvenanceExternalIcon = (\n  props: ProvenanceExternalIconProps,\n): React.ReactNode => {\n  const { url } = props\n  let icon: IconName = 'link'\n  const parsedUrl = new URL(url)\n  const { hostname } = parsedUrl\n\n  if (hostname.match(githubRegex) || hostname.match(githubusercontentRegex)) {\n    icon = 'github'\n  }\n  // else if (url.includes(\"genomespace.org\")) {\n  //   icon = 'genomespace'\n  // }\n\n  // return the default (File icon)\n  return <IconSvg icon={icon} />\n}\n"],"mappings":";;;;AAMA,IAAM,IAAc,yBACd,IAAyB,oCAElB,KACX,MACoB;CACpB,IAAM,EAAE,WAAQ,GACZ,IAAiB,QAEf,EAAE,gBAAa,IADC,IAAI,CACL;CAUrB,QARI,EAAS,MAAM,CAAW,KAAK,EAAS,MAAM,CAAsB,OACtE,IAAO,WAOF,kBAAC,GAAD,EAAe,QAAO,CAAA;AAC/B"}
+{"version":3,"file":"ProvenanceExternalIcon.js","names":[],"sources":["../../../src/components/ProvenanceGraph/ProvenanceExternalIcon.tsx"],"sourcesContent":["import React from 'react'\nimport IconSvg, { IconName } from '../IconSvg/IconSvg'\n\nexport type ProvenanceExternalIconProps = {\n  url: string\n}\nconst githubRegex = /^(.+?\\.)?github\\.com$/\nconst githubusercontentRegex = /^(.+?\\.)?githubusercontent\\.com$/\n\nexport const ProvenanceExternalIcon = (\n  props: ProvenanceExternalIconProps,\n): React.ReactNode => {\n  const { url } = props\n  let icon: IconName = 'link'\n  const parsedUrl = new URL(url)\n  const { hostname } = parsedUrl\n\n  if (githubRegex.exec(hostname) || githubusercontentRegex.exec(hostname)) {\n    icon = 'github'\n  }\n  // else if (url.includes(\"genomespace.org\")) {\n  //   icon = 'genomespace'\n  // }\n\n  // return the default (File icon)\n  return <IconSvg icon={icon} />\n}\n"],"mappings":";;;;AAMA,IAAM,IAAc,yBACd,IAAyB,oCAElB,KACX,MACoB;CACpB,IAAM,EAAE,WAAQ,GACZ,IAAiB,QAEf,EAAE,gBAAa,IADC,IAAI,CACL;CAUrB,QARI,EAAY,KAAK,CAAQ,KAAK,EAAuB,KAAK,CAAQ,OACpE,IAAO,WAOF,kBAAC,GAAD,EAAe,QAAO,CAAA;AAC/B"}

package/dist/components/ProvenanceGraph/ProvenanceGraph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProvenanceGraph.d.ts","sourceRoot":"","sources":["../../../src/components/ProvenanceGraph/ProvenanceGraph.tsx"],"names":[],"mappings":"AAQA,OAAO,EAGL,aAAa,EAKd,MAAM,iCAAiC,CAAA;AAGxC,OAAkB,EAEhB,IAAI,EAEJ,IAAI,EAKL,MAAM,WAAW,CAAA;AAoBlB,OAAO,0BAA0B,CAAA;AAEjC,MAAM,MAAM,eAAe,GAAG;IAE5B,UAAU,EAAE,aAAa,CAAA;IACzB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAA;IACrB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAA;IACrB,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAChD,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAChD,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAA;CACrC,CAAA;AAID,eAAO,MAAM,oBAAoB,oBAAoB,CAAA;AACrD,eAAO,MAAM,mBAAmB,uBAAuB,CAAA;AA2bvD,QAAA,MAAM,eAAe,GAAI,OAAO,eAAe,KAAG,KAAK,CAAC,SAQvD,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"ProvenanceGraph.d.ts","sourceRoot":"","sources":["../../../src/components/ProvenanceGraph/ProvenanceGraph.tsx"],"names":[],"mappings":"AAQA,OAAO,EAGL,aAAa,EAKd,MAAM,iCAAiC,CAAA;AAGxC,OAAkB,EAEhB,IAAI,EAEJ,IAAI,EAKL,MAAM,WAAW,CAAA;AAoBlB,OAAO,0BAA0B,CAAA;AAEjC,MAAM,MAAM,eAAe,GAAG;IAE5B,UAAU,EAAE,aAAa,CAAA;IACzB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAA;IACrB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAA;IACrB,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAChD,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAChD,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAA;CACrC,CAAA;AAID,eAAO,MAAM,oBAAoB,oBAAoB,CAAA;AACrD,eAAO,MAAM,mBAAmB,uBAAuB,CAAA;AAsbvD,QAAA,MAAM,eAAe,GAAI,OAAO,eAAe,KAAG,KAAK,CAAC,SAQvD,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/components/ProvenanceGraph/ProvenanceGraph.js

@@ -16,12 +16,12 @@ import ce, { Controls as x, ReactFlowProvider as S, getConnectedEdges as C, useE
 import "reactflow/dist/style.css";
 //#region src/components/ProvenanceGraph/ProvenanceGraph.tsx
 var E = 400, D = .85, O = "Edit Provenance", k = "No provenance data", ue = (e) => `We don’t have any provenance information for this ${e} yet.`, de = "rgba(255, 255, 255, 0.60)", A = (i) => {
-	let { entityRefs: S, containerHeight: O = "200px", initialNodes: A = [], initialEdges: j = [], onNodesChangedListener: M, onEdgesChangedListener: N, onEditProvenanceClicked: P } = i, { accessToken: F } = a(), [I, L] = _(A), [R, z] = _(j), [B, V] = w([]), [H, U] = le([]), [W, G] = _(), [fe, pe] = _(!1), K = se(), { data: q, isSuccess: me } = o(S, { throwOnError: !0 }), he = [
+	let { entityRefs: S, containerHeight: O = "200px", initialNodes: A = [], initialEdges: j = [], onNodesChangedListener: M, onEdgesChangedListener: N, onEditProvenanceClicked: P } = i, { accessToken: F } = a(), [I, L] = _(A), [R, z] = _(j), [B, V] = w([]), [H, U] = le([]), [W, G] = _(), [fe, pe] = _(!1), K = se(), { data: q, isSuccess: me } = o(S, { throwOnError: !0 }), he = new Set([
 		s.ENTITY_PLACEHOLDER,
 		s.EXTERNAL,
 		s.ACTIVITY,
 		s.EXPAND
-	], J = B.some((e) => he.includes(e.data.type)), ge = fe && !J;
+	]), J = B.some((e) => he.has(e.data.type)), ge = fe && !J;
 	me && q?.totalNumberOfResults == 0 && K(`Unable to load provenance for the given Synapse IDs: ${S.map((e) => e.targetId).join(",")}`);
 	let Y = q?.results, _e = Y?.[0] ? n(r(Y[0])).toLowerCase() : "entity", [X, ve] = _(!1), Z = T(), ye = h((e, t) => {
 		G(t);
@@ -95,7 +95,7 @@ var E = 400, D = .85, O = "Edit Provenance", k = "No provenance data", ue = (e)
 					});
 				});
 				let { results: a } = await t.getEntityHeaders(n, F);
-				n.filter((e) => a.find((t) => t.id == e.targetId) == null).forEach((t) => {
+				n.filter((e) => !a.some((t) => t.id == e.targetId)).forEach((t) => {
 					d({
 						ref: t,
 						activity: e,

package/dist/components/ProvenanceGraph/ProvenanceGraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProvenanceGraph.js","names":[],"sources":["../../../src/components/ProvenanceGraph/ProvenanceGraph.tsx"],"sourcesContent":["import SynapseClient from '@/synapse-client'\nimport { useGetEntityHeaders } from '@/synapse-queries'\nimport {\n  entityTypeToFriendlyName,\n  getEntityTypeFromHeader,\n} from '@/utils/functions/EntityTypeUtils'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { CircularProgress, Typography, Button, Stack } from '@mui/material'\nimport {\n  Activity,\n  EntityHeader,\n  ReferenceList,\n  Used,\n  USED_ENTITY_CONCRETE_TYPE_VALUE,\n  UsedEntity,\n  UsedURL,\n} from '@sage-bionetworks/synapse-types'\nimport { MouseEvent, useCallback, useEffect, useState, WheelEvent } from 'react'\nimport { useErrorHandler } from 'react-error-boundary'\nimport ReactFlow, {\n  Controls,\n  Edge,\n  getConnectedEdges,\n  Node,\n  ReactFlowProvider,\n  useEdgesState,\n  useNodesState,\n  useReactFlow,\n} from 'reactflow'\nimport { SynapseErrorBoundary } from '../error/ErrorBanner'\nimport { displayToast } from '../ToastMessage/ToastMessage'\nimport { ExpandGraphNodeDataProps } from './ExpandGraphNodeLabel'\nimport {\n  addActivityNode,\n  addEntityNode,\n  addEntityPlaceholderNode,\n  addExpandNode,\n  addExternalNode,\n  addUndefinedNode,\n  findEntityNode,\n  isRootEntity,\n} from './ProvenanceGraphUtils'\nimport {\n  getLayoutedElements,\n  isArrayEqual,\n  NodeType,\n  ProvenanceNodeData,\n} from './ProvenanceUtils'\nimport 'reactflow/dist/style.css'\n\nexport type ProvenanceProps = {\n  // what entity nodes should we start with?\n  entityRefs: ReferenceList\n  containerHeight?: string\n  initialNodes?: Node[]\n  initialEdges?: Edge[]\n  onNodesChangedListener?: (nodes: Node[]) => void\n  onEdgesChangedListener?: (edges: Edge[]) => void\n  onEditProvenanceClicked?: () => void\n}\n\nconst MAX_ACTIVITY_EXPAND_NODES = 400\nconst DEFAULT_ZOOM = 0.85\nexport const EDIT_PROVENANCE_TEXT = 'Edit Provenance'\nexport const NO_PROVENANCE_TITLE = 'No provenance data'\nconst NO_PROVENANCE_MESSAGE = (entityTypeName: string) =>\n  `We don’t have any provenance information for this ${entityTypeName} yet.`\nconst EDIT_PROVENANCE_BUTTON_BACKGROUND_COLOR = 'rgba(255, 255, 255, 0.60)'\n\n/**\n * Renders a Provenance Graph for a set of entities.\n * New Nodes are added to tempNodes, and new Edges are added to tempEdges.\n * On change, these are fed into the dagre js graph library to figure out the node positions,\n * and the output stored in 'nodes' and 'edges'. The 'nodes' and 'edges' arrays are used by the\n * ReactFlow component.\n */\nconst ProvenanceReactFlow = (props: ProvenanceProps): React.ReactNode => {\n  const {\n    entityRefs: rootEntityRefs,\n    containerHeight = '200px',\n    initialNodes = [],\n    initialEdges = [],\n    onNodesChangedListener,\n    onEdgesChangedListener,\n    onEditProvenanceClicked,\n  } = props\n  const { accessToken } = useSynapseContext()\n  const [tempNodes, setTempNodes] = useState<Node[]>(initialNodes)\n  const [tempEdges, setTempEdges] = useState<Edge[]>(initialEdges)\n  const [nodes, setNodes] = useNodesState([])\n  const [edges, setEdges] = useEdgesState([])\n  const [clickedNode, setClickedNode] = useState<Node>()\n  const [initialBuildComplete, setInitialBuildComplete] =\n    useState<boolean>(false)\n  const handleError = useErrorHandler()\n\n  const { data: rootEntityHeadersPage, isSuccess } = useGetEntityHeaders(\n    rootEntityRefs,\n    { throwOnError: true },\n  )\n\n  const PROVENANCE_NODE_TYPES = [\n    NodeType.ENTITY_PLACEHOLDER,\n    NodeType.EXTERNAL,\n    NodeType.ACTIVITY,\n    NodeType.EXPAND,\n  ]\n  const hasProvenanceNodes = nodes.some(node =>\n    PROVENANCE_NODE_TYPES.includes((node.data as ProvenanceNodeData).type),\n  )\n\n  const showNoProvenance = initialBuildComplete && !hasProvenanceNodes\n\n  if (isSuccess && rootEntityHeadersPage?.totalNumberOfResults == 0) {\n    const synapseIds = rootEntityRefs.map(ref => ref.targetId).join(',')\n    handleError(\n      `Unable to load provenance for the given Synapse IDs: ${synapseIds}`,\n    )\n  }\n  const rootEntityHeaders = rootEntityHeadersPage?.results\n  const entityTypeName = rootEntityHeaders?.[0]\n    ? entityTypeToFriendlyName(\n        getEntityTypeFromHeader(rootEntityHeaders[0]),\n      ).toLowerCase()\n    : 'entity'\n  const [initializedPosition, setInitializedPosition] = useState<boolean>(false)\n\n  // Get the react flow instance so we attempt to properly center the view.\n  const reactFlowInstance = useReactFlow()\n\n  const onClickNode = useCallback((_event: MouseEvent, node: Node) => {\n    setClickedNode(node)\n  }, [])\n\n  /**\n   * Called when we have a new entity to add to the graph.  This will result in adding\n   * a new Entity Node to the nodesCopy, a link from the usedInActivity to the new Entity Node,\n   * AND it will look for an Activity associated with the new entity.  If an Activity is found,\n   * it will add an Expand Node for the user to click (to expand to see this Activity!).\n   * If this is a root node (starting entity node), then we automatically add the Activity Node\n   * and process it.\n   */\n  const addEntity = useCallback(\n    async (params: {\n      entityHeader: EntityHeader\n      usedInActivity?: Activity\n      nodesCopy: Node[]\n      edgesCopy: Edge[]\n    }) => {\n      const { entityHeader, nodesCopy, edgesCopy, usedInActivity } = params\n      addEntityNode({\n        entityHeader,\n        activity: usedInActivity,\n        nodesCopy,\n        edgesCopy,\n      })\n      //look for Activity\n      try {\n        const activity = await SynapseClient.getActivityForEntity(\n          entityHeader.id,\n          entityHeader.versionNumber,\n          accessToken,\n        )\n        // if this is not a root node (or there are too many items to show), add an expand node\n        if (\n          !isRootEntity({ entityHeader, rootEntityHeaders }) ||\n          (activity.used && activity.used.length >= MAX_ACTIVITY_EXPAND_NODES)\n        ) {\n          addExpandNode({\n            entityHeader,\n            itemCount: activity.used?.length,\n            nodesCopy,\n            edgesCopy,\n          })\n        }\n      } catch (e) {\n        // Activity is not accessible\n        console.error(e)\n        if (\n          isRootEntity({\n            entityHeader,\n            rootEntityHeaders,\n          })\n        ) {\n          // add provenance undefined node\n          addUndefinedNode({\n            entityHeader,\n            nodesCopy,\n            edgesCopy,\n          })\n        }\n      }\n    },\n    [accessToken, rootEntityHeaders],\n  )\n\n  /**\n   * This effect attempts to center the graph on one of the root nodes.\n   * Only initializes after after a root node has been added to the graph.\n   */\n  useEffect(() => {\n    if (!initializedPosition && nodes.length > 0) {\n      setTimeout(() => {\n        if (rootEntityHeaders) {\n          const rootEntityNode = findEntityNode(rootEntityHeaders[0], nodes)\n          if (rootEntityNode) {\n            const currentZoom = reactFlowInstance.getZoom()\n            const zoom = currentZoom > DEFAULT_ZOOM ? DEFAULT_ZOOM : currentZoom\n            reactFlowInstance?.setCenter(\n              rootEntityNode.position.x + 150,\n              rootEntityNode.position.y - 30,\n              { zoom, duration: 0 },\n            )\n          }\n          setInitializedPosition(true)\n        }\n      })\n    }\n  }, [initializedPosition, nodes, reactFlowInstance, rootEntityHeaders])\n\n  /**\n   * This is called when the user clicks on an Expand Node.  It will add the associated Activity\n   * and all \"used\" items (entities and urls) to the graph by adding items to the nodesCopy and edgesCopy arrays.\n   */\n  const onExpandEntity = useCallback(\n    async (params: {\n      entityHeader: EntityHeader\n      nodesCopy: Node[]\n      edgesCopy: Edge[]\n    }) => {\n      const { entityHeader, nodesCopy, edgesCopy } = params\n      try {\n        const activity = await SynapseClient.getActivityForEntity(\n          entityHeader.id,\n          entityHeader.versionNumber,\n          accessToken,\n        )\n        addActivityNode({\n          activity,\n          entityHeader,\n          nodesCopy,\n          edgesCopy,\n        })\n        // go through Activity.used array to add these nodes/edges\n        if (activity.used && activity.used.length < MAX_ACTIVITY_EXPAND_NODES) {\n          const usedEntityReferences: ReferenceList = []\n          activity.used.forEach((usedItem: Used) => {\n            if (usedItem.concreteType == USED_ENTITY_CONCRETE_TYPE_VALUE) {\n              usedEntityReferences.push((usedItem as UsedEntity).reference)\n            } else {\n              // UsedURL\n              const usedURL = usedItem as UsedURL\n              addExternalNode({ usedURL, activity, nodesCopy, edgesCopy })\n            }\n          })\n          const usedEntityHeadersPage = await SynapseClient.getEntityHeaders(\n            usedEntityReferences,\n            accessToken,\n          )\n          const { results: usedEntityHeaderPageResults } = usedEntityHeadersPage\n          // find refs that were not returned by the entity header call\n          const refsMissingEntityHeaders = usedEntityReferences.filter(ref => {\n            return (\n              usedEntityHeaderPageResults.find(header => {\n                return header.id == ref.targetId\n              }) == undefined\n            )\n          })\n          refsMissingEntityHeaders.forEach(ref => {\n            addEntityPlaceholderNode({ ref, activity, nodesCopy, edgesCopy })\n          })\n          const addEntityPromises: Promise<void>[] = []\n          usedEntityHeaderPageResults.forEach(header => {\n            addEntityPromises.push(\n              addEntity({\n                entityHeader: header,\n                nodesCopy,\n                edgesCopy,\n                usedInActivity: activity,\n              }),\n            )\n          })\n          await Promise.allSettled(addEntityPromises)\n        }\n      } catch (e) {\n        // Activity is not accessible\n        console.error(e)\n      }\n    },\n    [accessToken, addEntity],\n  )\n\n  /**\n   * This effect code executes when no nodes have been added.\n   * It will add the root nodes, and attempt to expand the root nodes.\n   */\n  useEffect(() => {\n    if (rootEntityHeaders && tempNodes.length == 0) {\n      const nodesCopy = [...tempNodes]\n      const edgesCopy = [...tempEdges]\n      const addAndExpandPromises: Promise<void>[] = []\n      rootEntityHeaders.forEach(header => {\n        const addEntityPromise = addEntity({\n          entityHeader: header,\n          nodesCopy,\n          edgesCopy,\n        })\n        addAndExpandPromises.push(addEntityPromise)\n\n        const expandEntityPromise = onExpandEntity({\n          entityHeader: header,\n          nodesCopy,\n          edgesCopy,\n        })\n        addAndExpandPromises.push(expandEntityPromise)\n      })\n      Promise.allSettled(addAndExpandPromises).finally(() => {\n        setTempNodes(nodesCopy)\n        setTempEdges(edgesCopy)\n        setInitialBuildComplete(true)\n      })\n    }\n  }, [\n    addEntity,\n    handleError,\n    onExpandEntity,\n    rootEntityHeaders,\n    rootEntityRefs,\n    tempEdges,\n    tempNodes,\n  ])\n\n  /**\n   * This effect code executes when a node is clicked.\n   * We check to see if it is an expand node.  If it is, then we remove the expand node (and associated edge)\n   * and ask for the Activity and associated \"used\" nodes (entities and URLs)\n   */\n  useEffect(() => {\n    const nodeData: ProvenanceNodeData = clickedNode?.data as ProvenanceNodeData\n    if (clickedNode && nodeData?.type == NodeType.EXPAND) {\n      const expandNodeDataProps = nodeData.props as ExpandGraphNodeDataProps\n      if (expandNodeDataProps.itemCount > MAX_ACTIVITY_EXPAND_NODES) {\n        displayToast(\n          'Web visualization does not support expanding this many items at this time.',\n          'danger',\n        )\n        return\n      } else {\n        // graph will be used outside of synapse, so show a non-branded spinner\n        nodeData.label = <CircularProgress size={30} />\n        // remove clicked node\n        const nodesWithoutExpandNode = tempNodes.filter(\n          node => node.id != clickedNode.id,\n        )\n        const edgeToRemove = getConnectedEdges([clickedNode], tempEdges)[0]\n        const edgesWithoutExpandEdge = tempEdges.filter(\n          edge => edge != edgeToRemove,\n        )\n        onExpandEntity({\n          entityHeader: expandNodeDataProps.entityHeader,\n          nodesCopy: nodesWithoutExpandNode,\n          edgesCopy: edgesWithoutExpandEdge,\n        }).finally(() => {\n          setTempNodes(nodesWithoutExpandNode)\n          setTempEdges(edgesWithoutExpandEdge)\n        })\n      }\n      setClickedNode(undefined)\n    }\n  }, [clickedNode, tempNodes, tempEdges, onExpandEntity])\n\n  /**\n   * This effect code is run when the graph nodes or edges change.\n   * It feeds the nodes and edges into our layout library to figure out where they should be positioned.\n   * The result is saved in the state variable \"nodes\" and \"edges\".\n   */\n  useEffect(() => {\n    const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(\n      tempNodes,\n      tempEdges,\n      'TB',\n    )\n    // hack: ProvenanceUtils.getProvenanceNode() returns a new object every time, so check to see if\n    // there were any real changes\n    if (!isArrayEqual(layoutedNodes, nodes)) {\n      setNodes(layoutedNodes)\n      if (onNodesChangedListener) {\n        onNodesChangedListener(layoutedNodes)\n      }\n    }\n    if (!isArrayEqual(layoutedEdges, edges)) {\n      setEdges(layoutedEdges)\n      if (onEdgesChangedListener) {\n        onEdgesChangedListener(layoutedEdges)\n      }\n    }\n  }, [\n    tempNodes,\n    tempEdges,\n    nodes,\n    edges,\n    setNodes,\n    setEdges,\n    initializedPosition,\n    reactFlowInstance,\n    rootEntityRefs,\n    onNodesChangedListener,\n    onEdgesChangedListener,\n  ])\n\n  const onPaneScrollFunction: (event?: WheelEvent) => void = useCallback(\n    event => {\n      // Cannot simply check the truthy value of event.deltaX (or Y) because the value might be 0 (or -0), which is falsy\n      if (\n        typeof event?.deltaX !== 'undefined' &&\n        typeof event.deltaY !== 'undefined'\n      ) {\n        window.scrollTo(\n          window.scrollX + event.deltaX,\n          window.scrollY + event.deltaY,\n        )\n      }\n    },\n    [],\n  )\n  return (\n    <div\n      className=\"ProvenanceWidget\"\n      role=\"graphics-doc\" //https://www.w3.org/wiki/SVG_Accessibility/ARIA_roles_for_charts#Document_Roles\n      style={{\n        width: '100%',\n        height: containerHeight,\n      }}\n    >\n      {showNoProvenance ? (\n        <Stack\n          sx={{\n            display: 'flex',\n            height: '100%',\n            alignItems: 'center',\n            justifyContent: 'center',\n            textAlign: 'center',\n          }}\n        >\n          <Typography\n            sx={{\n              color: 'greyV2.900',\n              fontSize: '16px',\n              lineHeight: '24px',\n              fontWeight: 540,\n              marginBottom: '12px',\n            }}\n          >\n            {NO_PROVENANCE_TITLE}\n          </Typography>\n          <Typography\n            sx={{\n              color: 'greyV2.900',\n              fontSize: '14px',\n              lineHeight: '20px',\n              fontWeight: 440,\n            }}\n          >\n            {NO_PROVENANCE_MESSAGE(entityTypeName)}\n          </Typography>\n          {onEditProvenanceClicked && (\n            <Button\n              variant=\"outlined\"\n              sx={{\n                borderRadius: '6px',\n                border: '1px solid',\n                borderColor: 'greyV2.400',\n                background: EDIT_PROVENANCE_BUTTON_BACKGROUND_COLOR,\n                color: 'greyV2.800',\n                fontWeight: 540,\n                lineHeight: '12px' /* 100% */,\n                letterSpacing: '-0.24px',\n                marginTop: '20px',\n                height: '28px',\n                padding: '8px',\n              }}\n              onClick={onEditProvenanceClicked}\n            >\n              {EDIT_PROVENANCE_TEXT}\n            </Button>\n          )}\n        </Stack>\n      ) : (\n        <ReactFlow\n          defaultViewport={{ x: 0, y: 0, zoom: DEFAULT_ZOOM }}\n          nodes={nodes}\n          edges={edges}\n          onNodeClick={onClickNode}\n          // onNodesChange={onNodesChange}  // SWC-6804: When the nodes/edges are updated (expanded) the graph is already re-rendered.\n          // onEdgesChange={onEdgesChange}  // Specifying these callbacks causes an infinite re-rendering loop.\n          attributionPosition=\"bottom-right\"\n          onConnect={undefined}\n          zoomOnScroll={false}\n          onPaneScroll={onPaneScrollFunction}\n        >\n          <Controls />\n        </ReactFlow>\n      )}\n    </div>\n  )\n}\n\nconst ProvenanceGraph = (props: ProvenanceProps): React.ReactNode => {\n  return (\n    <SynapseErrorBoundary>\n      <ReactFlowProvider>\n        <ProvenanceReactFlow {...props} />\n      </ReactFlowProvider>\n    </SynapseErrorBoundary>\n  )\n}\n\nexport default ProvenanceGraph\n"],"mappings":"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"}
+{"version":3,"file":"ProvenanceGraph.js","names":[],"sources":["../../../src/components/ProvenanceGraph/ProvenanceGraph.tsx"],"sourcesContent":["import SynapseClient from '@/synapse-client'\nimport { useGetEntityHeaders } from '@/synapse-queries'\nimport {\n  entityTypeToFriendlyName,\n  getEntityTypeFromHeader,\n} from '@/utils/functions/EntityTypeUtils'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { CircularProgress, Typography, Button, Stack } from '@mui/material'\nimport {\n  Activity,\n  EntityHeader,\n  ReferenceList,\n  Used,\n  USED_ENTITY_CONCRETE_TYPE_VALUE,\n  UsedEntity,\n  UsedURL,\n} from '@sage-bionetworks/synapse-types'\nimport { MouseEvent, useCallback, useEffect, useState, WheelEvent } from 'react'\nimport { useErrorHandler } from 'react-error-boundary'\nimport ReactFlow, {\n  Controls,\n  Edge,\n  getConnectedEdges,\n  Node,\n  ReactFlowProvider,\n  useEdgesState,\n  useNodesState,\n  useReactFlow,\n} from 'reactflow'\nimport { SynapseErrorBoundary } from '../error/ErrorBanner'\nimport { displayToast } from '../ToastMessage/ToastMessage'\nimport { ExpandGraphNodeDataProps } from './ExpandGraphNodeLabel'\nimport {\n  addActivityNode,\n  addEntityNode,\n  addEntityPlaceholderNode,\n  addExpandNode,\n  addExternalNode,\n  addUndefinedNode,\n  findEntityNode,\n  isRootEntity,\n} from './ProvenanceGraphUtils'\nimport {\n  getLayoutedElements,\n  isArrayEqual,\n  NodeType,\n  ProvenanceNodeData,\n} from './ProvenanceUtils'\nimport 'reactflow/dist/style.css'\n\nexport type ProvenanceProps = {\n  // what entity nodes should we start with?\n  entityRefs: ReferenceList\n  containerHeight?: string\n  initialNodes?: Node[]\n  initialEdges?: Edge[]\n  onNodesChangedListener?: (nodes: Node[]) => void\n  onEdgesChangedListener?: (edges: Edge[]) => void\n  onEditProvenanceClicked?: () => void\n}\n\nconst MAX_ACTIVITY_EXPAND_NODES = 400\nconst DEFAULT_ZOOM = 0.85\nexport const EDIT_PROVENANCE_TEXT = 'Edit Provenance'\nexport const NO_PROVENANCE_TITLE = 'No provenance data'\nconst NO_PROVENANCE_MESSAGE = (entityTypeName: string) =>\n  `We don’t have any provenance information for this ${entityTypeName} yet.`\nconst EDIT_PROVENANCE_BUTTON_BACKGROUND_COLOR = 'rgba(255, 255, 255, 0.60)'\n\n/**\n * Renders a Provenance Graph for a set of entities.\n * New Nodes are added to tempNodes, and new Edges are added to tempEdges.\n * On change, these are fed into the dagre js graph library to figure out the node positions,\n * and the output stored in 'nodes' and 'edges'. The 'nodes' and 'edges' arrays are used by the\n * ReactFlow component.\n */\nconst ProvenanceReactFlow = (props: ProvenanceProps): React.ReactNode => {\n  const {\n    entityRefs: rootEntityRefs,\n    containerHeight = '200px',\n    initialNodes = [],\n    initialEdges = [],\n    onNodesChangedListener,\n    onEdgesChangedListener,\n    onEditProvenanceClicked,\n  } = props\n  const { accessToken } = useSynapseContext()\n  const [tempNodes, setTempNodes] = useState<Node[]>(initialNodes)\n  const [tempEdges, setTempEdges] = useState<Edge[]>(initialEdges)\n  const [nodes, setNodes] = useNodesState([])\n  const [edges, setEdges] = useEdgesState([])\n  const [clickedNode, setClickedNode] = useState<Node>()\n  const [initialBuildComplete, setInitialBuildComplete] =\n    useState<boolean>(false)\n  const handleError = useErrorHandler()\n\n  const { data: rootEntityHeadersPage, isSuccess } = useGetEntityHeaders(\n    rootEntityRefs,\n    { throwOnError: true },\n  )\n\n  const PROVENANCE_NODE_TYPES = new Set([\n    NodeType.ENTITY_PLACEHOLDER,\n    NodeType.EXTERNAL,\n    NodeType.ACTIVITY,\n    NodeType.EXPAND,\n  ])\n  const hasProvenanceNodes = nodes.some(node =>\n    PROVENANCE_NODE_TYPES.has((node.data as ProvenanceNodeData).type),\n  )\n\n  const showNoProvenance = initialBuildComplete && !hasProvenanceNodes\n\n  if (isSuccess && rootEntityHeadersPage?.totalNumberOfResults == 0) {\n    const synapseIds = rootEntityRefs.map(ref => ref.targetId).join(',')\n    handleError(\n      `Unable to load provenance for the given Synapse IDs: ${synapseIds}`,\n    )\n  }\n  const rootEntityHeaders = rootEntityHeadersPage?.results\n  const entityTypeName = rootEntityHeaders?.[0]\n    ? entityTypeToFriendlyName(\n        getEntityTypeFromHeader(rootEntityHeaders[0]),\n      ).toLowerCase()\n    : 'entity'\n  const [initializedPosition, setInitializedPosition] = useState<boolean>(false)\n\n  // Get the react flow instance so we attempt to properly center the view.\n  const reactFlowInstance = useReactFlow()\n\n  const onClickNode = useCallback((_event: MouseEvent, node: Node) => {\n    setClickedNode(node)\n  }, [])\n\n  /**\n   * Called when we have a new entity to add to the graph.  This will result in adding\n   * a new Entity Node to the nodesCopy, a link from the usedInActivity to the new Entity Node,\n   * AND it will look for an Activity associated with the new entity.  If an Activity is found,\n   * it will add an Expand Node for the user to click (to expand to see this Activity!).\n   * If this is a root node (starting entity node), then we automatically add the Activity Node\n   * and process it.\n   */\n  const addEntity = useCallback(\n    async (params: {\n      entityHeader: EntityHeader\n      usedInActivity?: Activity\n      nodesCopy: Node[]\n      edgesCopy: Edge[]\n    }) => {\n      const { entityHeader, nodesCopy, edgesCopy, usedInActivity } = params\n      addEntityNode({\n        entityHeader,\n        activity: usedInActivity,\n        nodesCopy,\n        edgesCopy,\n      })\n      //look for Activity\n      try {\n        const activity = await SynapseClient.getActivityForEntity(\n          entityHeader.id,\n          entityHeader.versionNumber,\n          accessToken,\n        )\n        // if this is not a root node (or there are too many items to show), add an expand node\n        if (\n          !isRootEntity({ entityHeader, rootEntityHeaders }) ||\n          (activity.used && activity.used.length >= MAX_ACTIVITY_EXPAND_NODES)\n        ) {\n          addExpandNode({\n            entityHeader,\n            itemCount: activity.used?.length,\n            nodesCopy,\n            edgesCopy,\n          })\n        }\n      } catch (e) {\n        // Activity is not accessible\n        console.error(e)\n        if (\n          isRootEntity({\n            entityHeader,\n            rootEntityHeaders,\n          })\n        ) {\n          // add provenance undefined node\n          addUndefinedNode({\n            entityHeader,\n            nodesCopy,\n            edgesCopy,\n          })\n        }\n      }\n    },\n    [accessToken, rootEntityHeaders],\n  )\n\n  /**\n   * This effect attempts to center the graph on one of the root nodes.\n   * Only initializes after after a root node has been added to the graph.\n   */\n  useEffect(() => {\n    if (!initializedPosition && nodes.length > 0) {\n      setTimeout(() => {\n        if (rootEntityHeaders) {\n          const rootEntityNode = findEntityNode(rootEntityHeaders[0], nodes)\n          if (rootEntityNode) {\n            const currentZoom = reactFlowInstance.getZoom()\n            const zoom = currentZoom > DEFAULT_ZOOM ? DEFAULT_ZOOM : currentZoom\n            reactFlowInstance?.setCenter(\n              rootEntityNode.position.x + 150,\n              rootEntityNode.position.y - 30,\n              { zoom, duration: 0 },\n            )\n          }\n          setInitializedPosition(true)\n        }\n      })\n    }\n  }, [initializedPosition, nodes, reactFlowInstance, rootEntityHeaders])\n\n  /**\n   * This is called when the user clicks on an Expand Node.  It will add the associated Activity\n   * and all \"used\" items (entities and urls) to the graph by adding items to the nodesCopy and edgesCopy arrays.\n   */\n  const onExpandEntity = useCallback(\n    async (params: {\n      entityHeader: EntityHeader\n      nodesCopy: Node[]\n      edgesCopy: Edge[]\n    }) => {\n      const { entityHeader, nodesCopy, edgesCopy } = params\n      try {\n        const activity = await SynapseClient.getActivityForEntity(\n          entityHeader.id,\n          entityHeader.versionNumber,\n          accessToken,\n        )\n        addActivityNode({\n          activity,\n          entityHeader,\n          nodesCopy,\n          edgesCopy,\n        })\n        // go through Activity.used array to add these nodes/edges\n        if (activity.used && activity.used.length < MAX_ACTIVITY_EXPAND_NODES) {\n          const usedEntityReferences: ReferenceList = []\n          activity.used.forEach((usedItem: Used) => {\n            if (usedItem.concreteType == USED_ENTITY_CONCRETE_TYPE_VALUE) {\n              usedEntityReferences.push((usedItem as UsedEntity).reference)\n            } else {\n              // UsedURL\n              const usedURL = usedItem as UsedURL\n              addExternalNode({ usedURL, activity, nodesCopy, edgesCopy })\n            }\n          })\n          const usedEntityHeadersPage = await SynapseClient.getEntityHeaders(\n            usedEntityReferences,\n            accessToken,\n          )\n          const { results: usedEntityHeaderPageResults } = usedEntityHeadersPage\n          // find refs that were not returned by the entity header call\n          const refsMissingEntityHeaders = usedEntityReferences.filter(ref => {\n            return !usedEntityHeaderPageResults.some(header => {\n              return header.id == ref.targetId\n            })\n          })\n          refsMissingEntityHeaders.forEach(ref => {\n            addEntityPlaceholderNode({ ref, activity, nodesCopy, edgesCopy })\n          })\n          const addEntityPromises: Promise<void>[] = []\n          usedEntityHeaderPageResults.forEach(header => {\n            addEntityPromises.push(\n              addEntity({\n                entityHeader: header,\n                nodesCopy,\n                edgesCopy,\n                usedInActivity: activity,\n              }),\n            )\n          })\n          await Promise.allSettled(addEntityPromises)\n        }\n      } catch (e) {\n        // Activity is not accessible\n        console.error(e)\n      }\n    },\n    [accessToken, addEntity],\n  )\n\n  /**\n   * This effect code executes when no nodes have been added.\n   * It will add the root nodes, and attempt to expand the root nodes.\n   */\n  useEffect(() => {\n    if (rootEntityHeaders && tempNodes.length == 0) {\n      const nodesCopy = [...tempNodes]\n      const edgesCopy = [...tempEdges]\n      const addAndExpandPromises: Promise<void>[] = []\n      rootEntityHeaders.forEach(header => {\n        const addEntityPromise = addEntity({\n          entityHeader: header,\n          nodesCopy,\n          edgesCopy,\n        })\n        addAndExpandPromises.push(addEntityPromise)\n\n        const expandEntityPromise = onExpandEntity({\n          entityHeader: header,\n          nodesCopy,\n          edgesCopy,\n        })\n        addAndExpandPromises.push(expandEntityPromise)\n      })\n      Promise.allSettled(addAndExpandPromises).finally(() => {\n        setTempNodes(nodesCopy)\n        setTempEdges(edgesCopy)\n        setInitialBuildComplete(true)\n      })\n    }\n  }, [\n    addEntity,\n    handleError,\n    onExpandEntity,\n    rootEntityHeaders,\n    rootEntityRefs,\n    tempEdges,\n    tempNodes,\n  ])\n\n  /**\n   * This effect code executes when a node is clicked.\n   * We check to see if it is an expand node.  If it is, then we remove the expand node (and associated edge)\n   * and ask for the Activity and associated \"used\" nodes (entities and URLs)\n   */\n  useEffect(() => {\n    const nodeData: ProvenanceNodeData = clickedNode?.data as ProvenanceNodeData\n    if (clickedNode && nodeData?.type == NodeType.EXPAND) {\n      const expandNodeDataProps = nodeData.props as ExpandGraphNodeDataProps\n      if (expandNodeDataProps.itemCount > MAX_ACTIVITY_EXPAND_NODES) {\n        displayToast(\n          'Web visualization does not support expanding this many items at this time.',\n          'danger',\n        )\n        return\n      } else {\n        // graph will be used outside of synapse, so show a non-branded spinner\n        nodeData.label = <CircularProgress size={30} />\n        // remove clicked node\n        const nodesWithoutExpandNode = tempNodes.filter(\n          node => node.id != clickedNode.id,\n        )\n        const edgeToRemove = getConnectedEdges([clickedNode], tempEdges)[0]\n        const edgesWithoutExpandEdge = tempEdges.filter(\n          edge => edge != edgeToRemove,\n        )\n        onExpandEntity({\n          entityHeader: expandNodeDataProps.entityHeader,\n          nodesCopy: nodesWithoutExpandNode,\n          edgesCopy: edgesWithoutExpandEdge,\n        }).finally(() => {\n          setTempNodes(nodesWithoutExpandNode)\n          setTempEdges(edgesWithoutExpandEdge)\n        })\n      }\n      setClickedNode(undefined)\n    }\n  }, [clickedNode, tempNodes, tempEdges, onExpandEntity])\n\n  /**\n   * This effect code is run when the graph nodes or edges change.\n   * It feeds the nodes and edges into our layout library to figure out where they should be positioned.\n   * The result is saved in the state variable \"nodes\" and \"edges\".\n   */\n  useEffect(() => {\n    const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(\n      tempNodes,\n      tempEdges,\n      'TB',\n    )\n    // hack: ProvenanceUtils.getProvenanceNode() returns a new object every time, so check to see if\n    // there were any real changes\n    if (!isArrayEqual(layoutedNodes, nodes)) {\n      setNodes(layoutedNodes)\n      if (onNodesChangedListener) {\n        onNodesChangedListener(layoutedNodes)\n      }\n    }\n    if (!isArrayEqual(layoutedEdges, edges)) {\n      setEdges(layoutedEdges)\n      if (onEdgesChangedListener) {\n        onEdgesChangedListener(layoutedEdges)\n      }\n    }\n  }, [\n    tempNodes,\n    tempEdges,\n    nodes,\n    edges,\n    setNodes,\n    setEdges,\n    initializedPosition,\n    reactFlowInstance,\n    rootEntityRefs,\n    onNodesChangedListener,\n    onEdgesChangedListener,\n  ])\n\n  const onPaneScrollFunction: (event?: WheelEvent) => void = useCallback(\n    event => {\n      // Cannot simply check the truthy value of event.deltaX (or Y) because the value might be 0 (or -0), which is falsy\n      if (event?.deltaX !== undefined && event.deltaY !== undefined) {\n        window.scrollTo(\n          window.scrollX + event.deltaX,\n          window.scrollY + event.deltaY,\n        )\n      }\n    },\n    [],\n  )\n  return (\n    <div\n      className=\"ProvenanceWidget\"\n      role=\"graphics-doc\" //https://www.w3.org/wiki/SVG_Accessibility/ARIA_roles_for_charts#Document_Roles\n      style={{\n        width: '100%',\n        height: containerHeight,\n      }}\n    >\n      {showNoProvenance ? (\n        <Stack\n          sx={{\n            display: 'flex',\n            height: '100%',\n            alignItems: 'center',\n            justifyContent: 'center',\n            textAlign: 'center',\n          }}\n        >\n          <Typography\n            sx={{\n              color: 'greyV2.900',\n              fontSize: '16px',\n              lineHeight: '24px',\n              fontWeight: 540,\n              marginBottom: '12px',\n            }}\n          >\n            {NO_PROVENANCE_TITLE}\n          </Typography>\n          <Typography\n            sx={{\n              color: 'greyV2.900',\n              fontSize: '14px',\n              lineHeight: '20px',\n              fontWeight: 440,\n            }}\n          >\n            {NO_PROVENANCE_MESSAGE(entityTypeName)}\n          </Typography>\n          {onEditProvenanceClicked && (\n            <Button\n              variant=\"outlined\"\n              sx={{\n                borderRadius: '6px',\n                border: '1px solid',\n                borderColor: 'greyV2.400',\n                background: EDIT_PROVENANCE_BUTTON_BACKGROUND_COLOR,\n                color: 'greyV2.800',\n                fontWeight: 540,\n                lineHeight: '12px' /* 100% */,\n                letterSpacing: '-0.24px',\n                marginTop: '20px',\n                height: '28px',\n                padding: '8px',\n              }}\n              onClick={onEditProvenanceClicked}\n            >\n              {EDIT_PROVENANCE_TEXT}\n            </Button>\n          )}\n        </Stack>\n      ) : (\n        <ReactFlow\n          defaultViewport={{ x: 0, y: 0, zoom: DEFAULT_ZOOM }}\n          nodes={nodes}\n          edges={edges}\n          onNodeClick={onClickNode}\n          // onNodesChange={onNodesChange}  // SWC-6804: When the nodes/edges are updated (expanded) the graph is already re-rendered.\n          // onEdgesChange={onEdgesChange}  // Specifying these callbacks causes an infinite re-rendering loop.\n          attributionPosition=\"bottom-right\"\n          onConnect={undefined}\n          zoomOnScroll={false}\n          onPaneScroll={onPaneScrollFunction}\n        >\n          <Controls />\n        </ReactFlow>\n      )}\n    </div>\n  )\n}\n\nconst ProvenanceGraph = (props: ProvenanceProps): React.ReactNode => {\n  return (\n    <SynapseErrorBoundary>\n      <ReactFlowProvider>\n        <ProvenanceReactFlow {...props} />\n      </ReactFlowProvider>\n    </SynapseErrorBoundary>\n  )\n}\n\nexport default ProvenanceGraph\n"],"mappings":"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"}

package/dist/components/QueryBuilder/FilterConditionRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterConditionRow.d.ts","sourceRoot":"","sources":["../../../src/components/QueryBuilder/FilterConditionRow.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAAE,WAAW,EAAiB,MAAM,qBAAqB,CAAA;AAEhE,MAAM,MAAM,uBAAuB,GAAG;IACpC,SAAS,EAAE,WAAW,CAAA;IACtB,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAmKhE;AAuJD,eAAO,MAAM,qBAAqB,KAAK,CAAA"}
+{"version":3,"file":"FilterConditionRow.d.ts","sourceRoot":"","sources":["../../../src/components/QueryBuilder/FilterConditionRow.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAAE,WAAW,EAAiB,MAAM,qBAAqB,CAAA;AAEhE,MAAM,MAAM,uBAAuB,GAAG;IACpC,SAAS,EAAE,WAAW,CAAA;IACtB,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAqKhE;AAuJD,eAAO,MAAM,qBAAqB,KAAK,CAAA"}

package/dist/components/QueryBuilder/FilterConditionRow.js

@@ -1,6 +1,7 @@
 import { splitAndTrim as e } from "../../utils/functions/StringUtils.js";
-import { defaultOpForColumnType as t } from "./queryBuilderOperations.js";
-import { availableOpsForKind as n, classifyColumn as r, facetValueMatchesFilter as i, isFacetColumnResultValues as a, labelForOp as o } from "./queryBuilderMetadata.js";
+import { getEnumerationFacet as t } from "../../utils/functions/enumerationFacet.js";
+import { defaultOpForColumnType as n } from "./queryBuilderOperations.js";
+import { availableOpsForKind as r, classifyColumn as i, facetValueMatchesFilter as a, labelForOp as o } from "./queryBuilderMetadata.js";
 import { useQueryBuilderInternalContext as s } from "./QueryBuilderInternalContext.js";
 import c from "./FilterConditionRow.module.js";
 import l from "./queryBuilderDrag.module.js";
@@ -12,12 +13,12 @@ import E from "@mui/icons-material/DeleteOutline";
 import { useSortable as D } from "@dnd-kit/react/sortable";
 //#region src/components/QueryBuilder/FilterConditionRow.tsx
 function O(e) {
-	let { condition: i, parentGroupId: d, index: p } = e, { columnModels: b, facetResults: x, onlyFacetedColumns: O, getColumnDisplayName: A, updateConditionAt: j, removeConditionAt: P } = s(), { ref: F, handleRef: I, isDragSource: L } = D({
-		id: i.id,
+	let { condition: a, parentGroupId: d, index: p } = e, { columnModels: b, facetResults: x, onlyFacetedColumns: O, getColumnDisplayName: A, updateConditionAt: j, removeConditionAt: P } = s(), { ref: F, handleRef: I, isDragSource: L } = D({
+		id: a.id,
 		index: p,
 		group: d,
 		disabled: { droppable: !0 }
-	}), R = f(() => new Set(x.filter(a).map((e) => e.columnName)), [x]), z = f(() => (O ? b.filter((e) => R.has(e.name)) : b).map((e) => ({
+	}), R = f(() => new Set(x.filter((e) => t(e) !== void 0).map((e) => e.columnName)), [x]), z = f(() => (O ? b.filter((e) => R.has(e.name)) : b).map((e) => ({
 		name: e.name,
 		columnType: e.columnType,
 		label: A(e.name)
@@ -26,13 +27,13 @@ function O(e) {
 		R,
 		O,
 		A
-	]), B = z.find((e) => e.name === i.columnName) ?? null, V = i.columnName != null && R.has(i.columnName), H = r(i.columnType, V), U = n(H), W = `qb-op-label-${i.id}`;
+	]), B = z.find((e) => e.name === a.columnName) ?? null, V = a.columnName != null && R.has(a.columnName), H = i(a.columnType, V), U = r(H), W = `qb-op-label-${a.id}`;
 	return /* @__PURE__ */ T("div", {
 		ref: F,
 		className: `${c.row}${L ? ` ${l.dragSource}` : ""}`,
 		role: "group",
-		"aria-label": `Filter condition${i.columnName ? ` on ${i.columnName}` : ""}`,
-		"data-qb-node-id": i.id,
+		"aria-label": `Filter condition${a.columnName ? ` on ${a.columnName}` : ""}`,
+		"data-qb-node-id": a.id,
 		children: [
 			/* @__PURE__ */ w(u, {
 				handleRef: I,
@@ -44,7 +45,7 @@ function O(e) {
 					size: "small",
 					className: c.remove,
 					"aria-label": "Remove condition",
-					onClick: () => P(i.id),
+					onClick: () => P(a.id),
 					children: /* @__PURE__ */ w(E, { fontSize: "small" })
 				})
 			}),
@@ -64,12 +65,12 @@ function O(e) {
 						"aria-label": "Property"
 					}
 				}),
-				onChange: (e, a) => {
-					if (a == null) return;
-					let o = n(r(a.columnType, N(x, a.name))), s = o.length > 0 ? o[0] : t(a.columnType);
-					j(i.id, {
-						columnName: a.name,
-						columnType: a.columnType,
+				onChange: (e, t) => {
+					if (t == null) return;
+					let o = r(i(t.columnType, N(x, t.name))), s = o.length > 0 ? o[0] : n(t.columnType);
+					j(a.id, {
+						columnName: t.name,
+						columnType: t.columnType,
 						op: s,
 						values: [],
 						rangeMin: null,
@@ -87,10 +88,10 @@ function O(e) {
 				size: "small",
 				labelId: W,
 				variant: "outlined",
-				value: U.includes(i.op) ? i.op : U[0],
+				value: U.includes(a.op) ? a.op : U[0],
 				onChange: (e) => {
 					let t = e.target.value;
-					j(i.id, { op: t });
+					j(a.id, { op: t });
 				},
 				"aria-label": "Operator",
 				children: U.map((e) => /* @__PURE__ */ w(_, {
@@ -99,11 +100,11 @@ function O(e) {
 				}, e))
 			})] }),
 			/* @__PURE__ */ w(k, {
-				condition: i,
+				condition: a,
 				columnKind: H,
 				hasFacet: V,
-				facetValues: V && i.columnName != null ? M(x, i.columnName) : [],
-				onChange: (e) => j(i.id, e)
+				facetValues: V && a.columnName != null ? M(x, a.columnName) : [],
+				onChange: (e) => j(a.id, e)
 			})
 		]
 	});
@@ -213,7 +214,7 @@ function k(t) {
 }
 var A = 40;
 function j(e) {
-	let { columnName: t, facetValues: n, selectedValues: r, onChange: a } = e, { getValueDisplayName: o } = s(), [l, u] = p(""), m = n.length > 40, h = d((e) => o(t, e), [o, t]), g = f(() => [...n].sort((e, t) => h(e).localeCompare(h(t), void 0, { sensitivity: "base" })), [n, h]), _ = f(() => m ? g.filter((e) => i(e, h(e), l)) : g, [
+	let { columnName: t, facetValues: n, selectedValues: r, onChange: i } = e, { getValueDisplayName: o } = s(), [l, u] = p(""), m = n.length > 40, h = d((e) => o(t, e), [o, t]), g = f(() => [...n].toSorted((e, t) => h(e).localeCompare(h(t), void 0, { sensitivity: "base" })), [n, h]), _ = f(() => m ? g.filter((e) => a(e, h(e), l)) : g, [
 		g,
 		l,
 		m,
@@ -234,7 +235,7 @@ function j(e) {
 			children: /* @__PURE__ */ w(x, {
 				className: c.pillGroup,
 				value: r,
-				onChange: (e, t) => a(t),
+				onChange: (e, t) => i(t),
 				"aria-label": "Selected values",
 				children: _.map((e) => /* @__PURE__ */ w(b, {
 					value: e,
@@ -244,12 +245,12 @@ function j(e) {
 		})]
 	});
 }
-function M(e, t) {
-	let n = e.find((e) => e.columnName === t);
-	return n == null || !a(n) ? [] : n.facetValues.map((e) => e.value);
+function M(e, n) {
+	let r = e.find((e) => e.columnName === n);
+	return (r && t(r))?.facetValues.map((e) => e.value) ?? [];
 }
-function N(e, t) {
-	return e.some((e) => e.columnName === t && a(e));
+function N(e, n) {
+	return e.some((e) => e.columnName === n && t(e) !== void 0);
 }
 //#endregion
 export { O as FilterConditionRow, A as PILL_FILTER_THRESHOLD };