synapse-react-client 4.0.35 → 4.0.37

package/dist/components/MailchimpSubscribeSection/MailchimpSubscribeSection.js

@@ -63,19 +63,17 @@ function m({ subscribe: e, status: a, message: c }) {
 	});
 }
 function h({ headline: t, description: r, mailchimpUrl: i, headlineSx: o, background: s }) {
-	return /* @__PURE__ */ f(c, {
+	return /* @__PURE__ */ d(c, {
 		direction: {
 			xs: "column",
 			sm: "row"
 		},
 		spacing: 4,
-		alignItems: "center",
 		sx: (e) => ({
 			background: s || e.palette.lightPrimary.main,
-			borderRadius: "12px",
-			padding: 3
+			borderRadius: "12px"
 		}),
-		children: [/* @__PURE__ */ f(a, {
+		children: /* @__PURE__ */ f(a, {
 			sx: {
 				flex: 1,
 				minWidth: 0
@@ -91,15 +89,15 @@ function h({ headline: t, description: r, mailchimpUrl: i, headlineSx: o, backgr
 					className: n.description,
 					children: r
 				}),
-				/* @__PURE__ */ d(p, {
-					url: i,
-					render: (e) => /* @__PURE__ */ d(m, { ...e })
+				/* @__PURE__ */ f(a, {
+					className: n.formContainer,
+					children: [/* @__PURE__ */ d(e, {}), /* @__PURE__ */ d(p, {
+						url: i,
+						render: (e) => /* @__PURE__ */ d(m, { ...e })
+					})]
 				})
 			]
-		}), /* @__PURE__ */ d("div", {
-			className: n.imageColumn,
-			children: /* @__PURE__ */ d(e, {})
-		})]
+		})
 	});
 }
 //#endregion

package/dist/components/MailchimpSubscribeSection/MailchimpSubscribeSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"MailchimpSubscribeSection.js","names":[],"sources":["../../../src/components/MailchimpSubscribeSection/MailchimpSubscribeSection.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport {\n  Box,\n  Button,\n  InputAdornment,\n  Stack,\n  SxProps,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { ReactComponent as EmailWithNotification } from '@/assets/icons/emailWithNotification.svg'\nimport EmailAddressAdornment from '@/assets/icons/EmailAddressAdornment'\nimport MailchimpSubscribe, {\n  EmailFormFields,\n  FormHooks,\n} from 'react-mailchimp-subscribe'\nimport styles from './MailchimpSubscribeSection.module.scss'\n\nexport type MailchimpSubscribeSectionProps = {\n  headline: string\n  description: string\n  mailchimpUrl: string\n  headlineSx?: SxProps\n  background?: string\n}\n\ntype MailchimpFormProps = FormHooks<EmailFormFields>\n\nfunction MailchimpForm({ subscribe, status, message }: MailchimpFormProps) {\n  const emailRef = useRef<HTMLInputElement>(null)\n\n  useEffect(() => {\n    if (status === 'success' && emailRef.current) {\n      emailRef.current.value = ''\n    }\n  }, [status])\n\n  return (\n    <form\n      className={styles.formWrapper}\n      onSubmit={e => {\n        e.preventDefault()\n        if (emailRef.current) {\n          subscribe({ EMAIL: emailRef.current.value })\n        }\n      }}\n    >\n      <div className={styles.formRow}>\n        <TextField\n          inputRef={emailRef}\n          placeholder=\"Your email\"\n          type=\"email\"\n          size=\"small\"\n          required\n          inputProps={{ 'aria-label': 'Email address' }}\n          className={styles.emailInput}\n          slotProps={{\n            input: {\n              startAdornment: (\n                <InputAdornment position=\"start\">\n                  <EmailAddressAdornment color=\"primary\" fontSize=\"small\" />\n                </InputAdornment>\n              ),\n            },\n          }}\n        />\n        <Button\n          type=\"submit\"\n          variant=\"contained\"\n          disableElevation\n          disabled={status === 'sending'}\n          className={styles.submitButton}\n        >\n          Sign Up\n        </Button>\n      </div>\n      {status === 'sending' && (\n        <Typography variant=\"caption\" className={styles.statusMessage}>\n          Sending...\n        </Typography>\n      )}\n      {status === 'error' && (\n        <Typography\n          variant=\"caption\"\n          color=\"error\"\n          className={styles.statusMessage}\n        >\n          {typeof message === 'string' ? message : 'An error occurred.'}\n        </Typography>\n      )}\n      {status === 'success' && (\n        <Typography\n          variant=\"caption\"\n          sx={{ color: 'success.main' }}\n          className={styles.statusMessage}\n        >\n          {message}\n        </Typography>\n      )}\n    </form>\n  )\n}\n\nexport default function MailchimpSubscribeSection({\n  headline,\n  description,\n  mailchimpUrl,\n  headlineSx,\n  background,\n}: MailchimpSubscribeSectionProps) {\n  return (\n    <Stack\n      direction={{ xs: 'column', sm: 'row' }}\n      spacing={4}\n      alignItems=\"center\"\n      sx={theme => ({\n        background: background ? background : theme.palette.lightPrimary.main,\n        borderRadius: '12px',\n        padding: 3,\n      })}\n    >\n      <Box sx={{ flex: 1, minWidth: 0 }}>\n        <Typography variant=\"headline1\" sx={headlineSx}>\n          {headline}\n        </Typography>\n        <Typography variant=\"body1\" className={styles.description}>\n          {description}\n        </Typography>\n        <MailchimpSubscribe\n          url={mailchimpUrl}\n          render={props => <MailchimpForm {...props} />}\n        />\n      </Box>\n      <div className={styles.imageColumn}>\n        <EmailWithNotification />\n      </div>\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;AA4BA,SAAS,EAAc,EAAE,cAAW,WAAQ,cAA+B;CACzE,IAAM,IAAW,EAAyB,IAAI;CAQ9C,OANA,QAAgB;EACd,AAAI,MAAW,aAAa,EAAS,YACnC,EAAS,QAAQ,QAAQ;CAE7B,GAAG,CAAC,CAAM,CAAC,GAGT,kBAAC,QAAD;EACE,WAAW,EAAO;EAClB,WAAU,MAAK;GAEb,AADA,EAAE,eAAe,GACb,EAAS,WACX,EAAU,EAAE,OAAO,EAAS,QAAQ,MAAM,CAAC;EAE/C;YAPF;GASE,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB,CACE,kBAAC,GAAD;KACE,UAAU;KACV,aAAY;KACZ,MAAK;KACL,MAAK;KACL,UAAA;KACA,YAAY,EAAE,cAAc,gBAAgB;KAC5C,WAAW,EAAO;KAClB,WAAW,EACT,OAAO,EACL,gBACE,kBAAC,GAAD;MAAgB,UAAS;gBACvB,kBAAC,GAAD;OAAuB,OAAM;OAAU,UAAS;MAAS,CAAA;KAC3C,CAAA,EAEpB,EACF;IACD,CAAA,GACD,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,kBAAA;KACA,UAAU,MAAW;KACrB,WAAW,EAAO;eACnB;IAEO,CAAA,CACL;;GACJ,MAAW,aACV,kBAAC,GAAD;IAAY,SAAQ;IAAU,WAAW,EAAO;cAAe;GAEnD,CAAA;GAEb,MAAW,WACV,kBAAC,GAAD;IACE,SAAQ;IACR,OAAM;IACN,WAAW,EAAO;cAEjB,OAAO,KAAY,WAAW,IAAU;GAC/B,CAAA;GAEb,MAAW,aACV,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI,EAAE,OAAO,eAAe;IAC5B,WAAW,EAAO;cAEjB;GACS,CAAA;EAEV;;AAEV;AAEA,SAAwB,EAA0B,EAChD,aACA,gBACA,iBACA,eACA,iBACiC;CACjC,OACE,kBAAC,GAAD;EACE,WAAW;GAAE,IAAI;GAAU,IAAI;EAAM;EACrC,SAAS;EACT,YAAW;EACX,KAAI,OAAU;GACZ,YAAY,KAA0B,EAAM,QAAQ,aAAa;GACjE,cAAc;GACd,SAAS;EACX;YARF,CAUE,kBAAC,GAAD;GAAK,IAAI;IAAE,MAAM;IAAG,UAAU;GAAE;aAAhC;IACE,kBAAC,GAAD;KAAY,SAAQ;KAAY,IAAI;eACjC;IACS,CAAA;IACZ,kBAAC,GAAD;KAAY,SAAQ;KAAQ,WAAW,EAAO;eAC3C;IACS,CAAA;IACZ,kBAAC,GAAD;KACE,KAAK;KACL,SAAQ,MAAS,kBAAC,GAAD,EAAe,GAAI,EAAQ,CAAA;IAC7C,CAAA;GACE;MACL,kBAAC,OAAD;GAAK,WAAW,EAAO;aACrB,kBAAC,GAAD,CAAwB,CAAA;EACrB,CAAA,CACA;;AAEX"}
+{"version":3,"file":"MailchimpSubscribeSection.js","names":[],"sources":["../../../src/components/MailchimpSubscribeSection/MailchimpSubscribeSection.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef } from 'react'\nimport {\n  Box,\n  Button,\n  InputAdornment,\n  Stack,\n  SxProps,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { ReactComponent as EmailWithNotification } from '@/assets/icons/emailWithNotification.svg'\nimport EmailAddressAdornment from '@/assets/icons/EmailAddressAdornment'\nimport MailchimpSubscribe, {\n  EmailFormFields,\n  FormHooks,\n} from 'react-mailchimp-subscribe'\nimport styles from './MailchimpSubscribeSection.module.scss'\n\nexport type MailchimpSubscribeSectionProps = {\n  headline?: string\n  description: ReactNode\n  mailchimpUrl: string\n  headlineSx?: SxProps\n  background?: string\n}\n\ntype MailchimpFormProps = FormHooks<EmailFormFields>\n\nfunction MailchimpForm({ subscribe, status, message }: MailchimpFormProps) {\n  const emailRef = useRef<HTMLInputElement>(null)\n\n  useEffect(() => {\n    if (status === 'success' && emailRef.current) {\n      emailRef.current.value = ''\n    }\n  }, [status])\n\n  return (\n    <form\n      className={styles.formWrapper}\n      onSubmit={e => {\n        e.preventDefault()\n        if (emailRef.current) {\n          subscribe({ EMAIL: emailRef.current.value })\n        }\n      }}\n    >\n      <div className={styles.formRow}>\n        <TextField\n          inputRef={emailRef}\n          placeholder=\"Your email\"\n          type=\"email\"\n          size=\"small\"\n          required\n          inputProps={{ 'aria-label': 'Email address' }}\n          className={styles.emailInput}\n          slotProps={{\n            input: {\n              startAdornment: (\n                <InputAdornment position=\"start\">\n                  <EmailAddressAdornment color=\"primary\" fontSize=\"small\" />\n                </InputAdornment>\n              ),\n            },\n          }}\n        />\n        <Button\n          type=\"submit\"\n          variant=\"contained\"\n          disableElevation\n          disabled={status === 'sending'}\n          className={styles.submitButton}\n        >\n          Sign Up\n        </Button>\n      </div>\n      {status === 'sending' && (\n        <Typography variant=\"caption\" className={styles.statusMessage}>\n          Sending...\n        </Typography>\n      )}\n      {status === 'error' && (\n        <Typography\n          variant=\"caption\"\n          color=\"error\"\n          className={styles.statusMessage}\n        >\n          {typeof message === 'string' ? message : 'An error occurred.'}\n        </Typography>\n      )}\n      {status === 'success' && (\n        <Typography\n          variant=\"caption\"\n          sx={{ color: 'success.main' }}\n          className={styles.statusMessage}\n        >\n          {message}\n        </Typography>\n      )}\n    </form>\n  )\n}\n\nexport default function MailchimpSubscribeSection({\n  headline,\n  description,\n  mailchimpUrl,\n  headlineSx,\n  background,\n}: MailchimpSubscribeSectionProps) {\n  return (\n    <Stack\n      direction={{ xs: 'column', sm: 'row' }}\n      spacing={4}\n      sx={theme => ({\n        background: background ? background : theme.palette.lightPrimary.main,\n        borderRadius: '12px',\n      })}\n    >\n      <Box sx={{ flex: 1, minWidth: 0 }}>\n        <Typography variant=\"headline1\" sx={headlineSx}>\n          {headline}\n        </Typography>\n        <Typography variant=\"body1\" className={styles.description}>\n          {description}\n        </Typography>\n        <Box className={styles.formContainer}>\n          <EmailWithNotification />\n          <MailchimpSubscribe\n            url={mailchimpUrl}\n            render={props => <MailchimpForm {...props} />}\n          />\n        </Box>\n      </Box>\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;AA4BA,SAAS,EAAc,EAAE,cAAW,WAAQ,cAA+B;CACzE,IAAM,IAAW,EAAyB,IAAI;CAQ9C,OANA,QAAgB;EACd,AAAI,MAAW,aAAa,EAAS,YACnC,EAAS,QAAQ,QAAQ;CAE7B,GAAG,CAAC,CAAM,CAAC,GAGT,kBAAC,QAAD;EACE,WAAW,EAAO;EAClB,WAAU,MAAK;GAEb,AADA,EAAE,eAAe,GACb,EAAS,WACX,EAAU,EAAE,OAAO,EAAS,QAAQ,MAAM,CAAC;EAE/C;YAPF;GASE,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB,CACE,kBAAC,GAAD;KACE,UAAU;KACV,aAAY;KACZ,MAAK;KACL,MAAK;KACL,UAAA;KACA,YAAY,EAAE,cAAc,gBAAgB;KAC5C,WAAW,EAAO;KAClB,WAAW,EACT,OAAO,EACL,gBACE,kBAAC,GAAD;MAAgB,UAAS;gBACvB,kBAAC,GAAD;OAAuB,OAAM;OAAU,UAAS;MAAS,CAAA;KAC3C,CAAA,EAEpB,EACF;IACD,CAAA,GACD,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,kBAAA;KACA,UAAU,MAAW;KACrB,WAAW,EAAO;eACnB;IAEO,CAAA,CACL;;GACJ,MAAW,aACV,kBAAC,GAAD;IAAY,SAAQ;IAAU,WAAW,EAAO;cAAe;GAEnD,CAAA;GAEb,MAAW,WACV,kBAAC,GAAD;IACE,SAAQ;IACR,OAAM;IACN,WAAW,EAAO;cAEjB,OAAO,KAAY,WAAW,IAAU;GAC/B,CAAA;GAEb,MAAW,aACV,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI,EAAE,OAAO,eAAe;IAC5B,WAAW,EAAO;cAEjB;GACS,CAAA;EAEV;;AAEV;AAEA,SAAwB,EAA0B,EAChD,aACA,gBACA,iBACA,eACA,iBACiC;CACjC,OACE,kBAAC,GAAD;EACE,WAAW;GAAE,IAAI;GAAU,IAAI;EAAM;EACrC,SAAS;EACT,KAAI,OAAU;GACZ,YAAY,KAA0B,EAAM,QAAQ,aAAa;GACjE,cAAc;EAChB;YAEA,kBAAC,GAAD;GAAK,IAAI;IAAE,MAAM;IAAG,UAAU;GAAE;aAAhC;IACE,kBAAC,GAAD;KAAY,SAAQ;KAAY,IAAI;eACjC;IACS,CAAA;IACZ,kBAAC,GAAD;KAAY,SAAQ;KAAQ,WAAW,EAAO;eAC3C;IACS,CAAA;IACZ,kBAAC,GAAD;KAAK,WAAW,EAAO;eAAvB,CACE,kBAAC,GAAD,CAAwB,CAAA,GACxB,kBAAC,GAAD;MACE,KAAK;MACL,SAAQ,MAAS,kBAAC,GAAD,EAAe,GAAI,EAAQ,CAAA;KAC7C,CAAA,CACE;;GACF;;CACA,CAAA;AAEX"}

package/dist/components/MailchimpSubscribeSection/MailchimpSubscribeSection.module.js

@@ -1,11 +1,12 @@
 import './MailchimpSubscribeSection.css';var e = {
-	formRow: "_formRow_r0gup_1",
-	emailInput: "_emailInput_r0gup_7",
-	submitButton: "_submitButton_r0gup_24",
-	formWrapper: "_formWrapper_r0gup_29",
-	description: "_description_r0gup_33",
-	statusMessage: "_statusMessage_r0gup_37",
-	imageColumn: "_imageColumn_r0gup_42"
+	formRow: "_formRow_1yz5z_1",
+	emailInput: "_emailInput_1yz5z_7",
+	submitButton: "_submitButton_1yz5z_23",
+	formWrapper: "_formWrapper_1yz5z_28",
+	description: "_description_1yz5z_33",
+	statusMessage: "_statusMessage_1yz5z_37",
+	imageColumn: "_imageColumn_1yz5z_42",
+	formContainer: "_formContainer_1yz5z_55"
 };
 //#endregion
 export { e as default };

package/dist/components/MailchimpSubscribeSection/MailchimpSubscribeSection.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"MailchimpSubscribeSection.module.js","names":[],"sources":["../../../src/components/MailchimpSubscribeSection/MailchimpSubscribeSection.module.scss"],"sourcesContent":[".formRow {\n  display: flex;\n  align-items: stretch;\n  gap: 8px;\n}\n\n.emailInput:global(.MuiTextField-root) {\n  width: 100%;\n\n  @media (min-width: 600px) {\n    width: auto;\n    min-width: 350px;\n  }\n\n  :global(.MuiOutlinedInput-root) {\n    border-radius: 4px;\n    background-color: white;\n\n    fieldset {\n      border: 1px solid #e4e4e4;\n    }\n  }\n}\n\n.submitButton:global(.MuiButton-root) {\n  border-radius: 8px;\n  white-space: nowrap;\n}\n\n.formWrapper {\n  margin-top: 16px;\n}\n\n.description {\n  margin-top: 8px;\n}\n\n.statusMessage {\n  margin-top: 4px;\n  display: block;\n}\n\n.imageColumn {\n  width: 100%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  @media (min-width: 600px) {\n    width: 200px;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"MailchimpSubscribeSection.module.js","names":[],"sources":["../../../src/components/MailchimpSubscribeSection/MailchimpSubscribeSection.module.scss"],"sourcesContent":[".formRow {\n  display: flex;\n  align-items: stretch;\n  gap: 8px;\n}\n\n.emailInput:global(.MuiTextField-root) {\n  width: 100%;\n\n  @media (min-width: 600px) {\n    min-width: 0;\n  }\n\n  :global(.MuiOutlinedInput-root) {\n    border-radius: 4px;\n    background-color: white;\n\n    fieldset {\n      border: 1px solid #e4e4e4;\n    }\n  }\n}\n\n.submitButton:global(.MuiButton-root) {\n  border-radius: 8px;\n  white-space: nowrap;\n}\n\n.formWrapper {\n  margin-top: 16px;\n  flex: 1;\n}\n\n.description {\n  margin-top: 8px;\n}\n\n.statusMessage {\n  margin-top: 4px;\n  display: block;\n}\n\n.imageColumn {\n  width: 100%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  @media (min-width: 600px) {\n    width: 200px;\n  }\n}\n\n.formContainer {\n  display: flex;\n  align-items: flex-end;\n  gap: 16px;\n\n  svg {\n    flex-shrink: 0;\n  }\n}\n"],"mappings":""}

package/dist/components/MailchimpSubscribeSection/MailchimpSubscribeSection.module.scss

@@ -8,8 +8,7 @@
   width: 100%;
 
   @media (min-width: 600px) {
-    width: auto;
-    min-width: 350px;
+    min-width: 0;
   }
 
   :global(.MuiOutlinedInput-root) {
@@ -29,6 +28,7 @@
 
 .formWrapper {
   margin-top: 16px;
+  flex: 1;
 }
 
 .description {
@@ -51,3 +51,13 @@
     width: 200px;
   }
 }
+
+.formContainer {
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+
+  svg {
+    flex-shrink: 0;
+  }
+}

package/dist/components/Markdown/MarkdownEditor.js

@@ -24,7 +24,7 @@ function v({ placeholder: v, text: y, setText: b }) {
 		}
 		b(t.join("")), O(!1);
 	}, j = (e) => {
-		let t = k.current && k.current.selectionStart;
+		let t = k.current?.selectionStart;
 		t && t > 0 && e.charAt(t - 1) === "@" && (O(!0), E(!0));
 	}, M = (e) => {
 		let t = k.current;

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 && 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,WAAW,EAAY,QAAQ;EACzD,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.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":"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"}

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;AAgcvD,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;AA2bvD,QAAA,MAAM,eAAe,GAAI,OAAO,eAAe,KAAG,KAAK,CAAC,SAQvD,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/components/ProvenanceGraph/ProvenanceGraph.js

@@ -12,19 +12,19 @@ import { Button as v, CircularProgress as re, Stack as ie, Typography as y } fro
 import { jsx as b, jsxs as ae } from "react/jsx-runtime";
 import { USED_ENTITY_CONCRETE_TYPE_VALUE as oe } from "@sage-bionetworks/synapse-types";
 import { useErrorHandler as se } from "react-error-boundary";
-import ce, { Controls as x, ReactFlowProvider as S, getConnectedEdges as C, useEdgesState as w, useNodesState as le, useReactFlow as T } from "reactflow";
+import ce, { Controls as x, ReactFlowProvider as S, getConnectedEdges as C, useEdgesState as le, useNodesState as w, useReactFlow as T } from "reactflow";
 import "reactflow/dist/style.css";
 //#region src/components/ProvenanceGraph/ProvenanceGraph.tsx
-var E = 400, D = .85, O = "Edit Provenance", k = "No provenance data", A = (e) => `We don’t have any provenance information for this ${e} yet.`, ue = "rgba(255, 255, 255, 0.60)", j = (i) => {
-	let { entityRefs: S, containerHeight: O = "200px", initialNodes: j = [], initialEdges: M = [], onNodesChangedListener: N, onEdgesChangedListener: P, onEditProvenanceClicked: F } = i, { accessToken: I } = a(), [L, R] = _(j), [z, B] = _(M), [V, H] = le([]), [U, W] = w([]), [G, K] = _(), [de, fe] = _(!1), q = se(), { data: J, isSuccess: pe } = o(S, { throwOnError: !0 }), me = [
+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 = [
 		s.ENTITY_PLACEHOLDER,
 		s.EXTERNAL,
 		s.ACTIVITY,
 		s.EXPAND
-	], he = V.some((e) => me.includes(e.data.type)), ge = de && !he;
-	pe && J && J.totalNumberOfResults == 0 && q(`Unable to load provenance for the given Synapse IDs: ${S.map((e) => e.targetId).join(",")}`);
-	let Y = J?.results, _e = Y?.[0] ? n(r(Y[0])).toLowerCase() : "entity", [X, ve] = _(!1), Z = T(), ye = h((e, t) => {
-		K(t);
+	], J = B.some((e) => he.includes(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);
 	}, []), Q = h(async (e) => {
 		let { entityHeader: n, nodesCopy: r, edgesCopy: i, usedInActivity: a } = e;
 		ee({
@@ -34,7 +34,7 @@ var E = 400, D = .85, O = "Edit Provenance", k = "No provenance data", A = (e) =
 			edgesCopy: i
 		});
 		try {
-			let e = await t.getActivityForEntity(n.id, n.versionNumber, I);
+			let e = await t.getActivityForEntity(n.id, n.versionNumber, F);
 			(!m({
 				entityHeader: n,
 				rootEntityHeaders: Y
@@ -54,11 +54,11 @@ var E = 400, D = .85, O = "Edit Provenance", k = "No provenance data", A = (e) =
 				edgesCopy: i
 			});
 		}
-	}, [I, Y]);
+	}, [F, Y]);
 	g(() => {
-		!X && V.length > 0 && setTimeout(() => {
+		!X && B.length > 0 && setTimeout(() => {
 			if (Y) {
-				let e = ne(Y[0], V);
+				let e = ne(Y[0], B);
 				if (e) {
 					let t = Z.getZoom(), n = t > D ? D : t;
 					Z?.setCenter(e.position.x + 150, e.position.y - 30, {
@@ -71,14 +71,14 @@ var E = 400, D = .85, O = "Edit Provenance", k = "No provenance data", A = (e) =
 		});
 	}, [
 		X,
-		V,
+		B,
 		Z,
 		Y
 	]);
 	let $ = h(async (e) => {
 		let { entityHeader: n, nodesCopy: r, edgesCopy: i } = e;
 		try {
-			let e = await t.getActivityForEntity(n.id, n.versionNumber, I);
+			let e = await t.getActivityForEntity(n.id, n.versionNumber, F);
 			if (u({
 				activity: e,
 				entityHeader: n,
@@ -94,7 +94,7 @@ var E = 400, D = .85, O = "Edit Provenance", k = "No provenance data", A = (e) =
 						edgesCopy: i
 					});
 				});
-				let { results: a } = await t.getEntityHeaders(n, I);
+				let { results: a } = await t.getEntityHeaders(n, F);
 				n.filter((e) => a.find((t) => t.id == e.targetId) == null).forEach((t) => {
 					d({
 						ref: t,
@@ -116,10 +116,10 @@ var E = 400, D = .85, O = "Edit Provenance", k = "No provenance data", A = (e) =
 		} catch (e) {
 			console.error(e);
 		}
-	}, [I, Q]);
+	}, [F, Q]);
 	g(() => {
-		if (Y && L.length == 0) {
-			let e = [...L], t = [...z], n = [];
+		if (Y && I.length == 0) {
+			let e = [...I], t = [...R], n = [];
 			Y.forEach((r) => {
 				let i = Q({
 					entityHeader: r,
@@ -134,60 +134,60 @@ var E = 400, D = .85, O = "Edit Provenance", k = "No provenance data", A = (e) =
 				});
 				n.push(a);
 			}), Promise.allSettled(n).finally(() => {
-				R(e), B(t), fe(!0);
+				L(e), z(t), pe(!0);
 			});
 		}
 	}, [
 		Q,
-		q,
+		K,
 		$,
 		Y,
 		S,
-		z,
-		L
+		R,
+		I
 	]), g(() => {
-		let t = G?.data;
-		if (G && t?.type == s.EXPAND) {
+		let t = W?.data;
+		if (W && t?.type == s.EXPAND) {
 			let n = t.props;
 			if (n.itemCount > E) {
 				e("Web visualization does not support expanding this many items at this time.", "danger");
 				return;
 			} else {
 				t.label = /* @__PURE__ */ b(re, { size: 30 });
-				let e = L.filter((e) => e.id != G.id), r = C([G], z)[0], i = z.filter((e) => e != r);
+				let e = I.filter((e) => e.id != W.id), r = C([W], R)[0], i = R.filter((e) => e != r);
 				$({
 					entityHeader: n.entityHeader,
 					nodesCopy: e,
 					edgesCopy: i
 				}).finally(() => {
-					R(e), B(i);
+					L(e), z(i);
 				});
 			}
-			K(void 0);
+			G(void 0);
 		}
 	}, [
-		G,
-		L,
-		z,
+		W,
+		I,
+		R,
 		$
 	]), g(() => {
-		let { nodes: e, edges: t } = c(L, z, "TB");
-		l(e, V) || (H(e), N && N(e)), l(t, U) || (W(t), P && P(t));
+		let { nodes: e, edges: t } = c(I, R, "TB");
+		l(e, B) || (V(e), M && M(e)), l(t, H) || (U(t), N && N(t));
 	}, [
-		L,
-		z,
+		I,
+		R,
+		B,
+		H,
 		V,
 		U,
-		H,
-		W,
 		X,
 		Z,
 		S,
-		N,
-		P
+		M,
+		N
 	]);
 	let be = h((e) => {
-		e && e.deltaX !== void 0 && e.deltaY !== void 0 && window.scrollTo(window.scrollX + e.deltaX, window.scrollY + e.deltaY);
+		e?.deltaX !== void 0 && e.deltaY !== void 0 && window.scrollTo(window.scrollX + e.deltaX, window.scrollY + e.deltaY);
 	}, []);
 	return /* @__PURE__ */ b("div", {
 		className: "ProvenanceWidget",
@@ -222,15 +222,15 @@ var E = 400, D = .85, O = "Edit Provenance", k = "No provenance data", A = (e) =
 						lineHeight: "20px",
 						fontWeight: 440
 					},
-					children: A(_e)
+					children: ue(_e)
 				}),
-				F && /* @__PURE__ */ b(v, {
+				P && /* @__PURE__ */ b(v, {
 					variant: "outlined",
 					sx: {
 						borderRadius: "6px",
 						border: "1px solid",
 						borderColor: "greyV2.400",
-						background: ue,
+						background: de,
 						color: "greyV2.800",
 						fontWeight: 540,
 						lineHeight: "12px",
@@ -239,7 +239,7 @@ var E = 400, D = .85, O = "Edit Provenance", k = "No provenance data", A = (e) =
 						height: "28px",
 						padding: "8px"
 					},
-					onClick: F,
+					onClick: P,
 					children: "Edit Provenance"
 				})
 			]
@@ -249,8 +249,8 @@ var E = 400, D = .85, O = "Edit Provenance", k = "No provenance data", A = (e) =
 				y: 0,
 				zoom: D
 			},
-			nodes: V,
-			edges: U,
+			nodes: B,
+			edges: H,
 			onNodeClick: ye,
 			attributionPosition: "bottom-right",
 			onConnect: void 0,
@@ -259,8 +259,8 @@ var E = 400, D = .85, O = "Edit Provenance", k = "No provenance data", A = (e) =
 			children: /* @__PURE__ */ b(x, {})
 		})
 	});
-}, M = (e) => /* @__PURE__ */ b(i, { children: /* @__PURE__ */ b(S, { children: /* @__PURE__ */ b(j, { ...e }) }) });
+}, j = (e) => /* @__PURE__ */ b(i, { children: /* @__PURE__ */ b(S, { children: /* @__PURE__ */ b(A, { ...e }) }) });
 //#endregion
-export { O as EDIT_PROVENANCE_TEXT, k as NO_PROVENANCE_TITLE, M as default };
+export { O as EDIT_PROVENANCE_TEXT, k as NO_PROVENANCE_TITLE, j as default };
 
 //# sourceMappingURL=ProvenanceGraph.js.map

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 (\n    isSuccess &&\n    rootEntityHeadersPage &&\n    rootEntityHeadersPage.totalNumberOfResults == 0\n  ) {\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        event &&\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 = [\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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"}

package/dist/components/QueryBuilder/QueryBuilderTypes.d.ts

@@ -0,0 +1,39 @@
+/**
+ * QB internal UI types. These carry column-model metadata and per-input state
+ * (values / range / text) that the QueryFilter API objects don't. They are
+ * never serialized directly to the API — {@link qbNodeToApiFilter} converts
+ * them to {@link QueryFilter} first.
+ */
+export type QBCombinator = 'AND' | 'OR';
+export type QBConditionOp = 'is_any_of' | 'is_all_of' | 'between' | 'gt' | 'gte' | 'lt' | 'lte' | 'equal' | 'not_equal' | 'has_value' | 'no_value' | 'contains' | 'starts_with' | 'ends_with' | 'is_exactly';
+export type QBCondition = {
+    kind: 'condition';
+    id: string;
+    columnName: string | null;
+    /** `ColumnTypeEnum` string from the query metadata (STRING, INTEGER, …). */
+    columnType: string | null;
+    op: QBConditionOp;
+    /**
+     * - `is_any_of` / `is_all_of`: one or more selected values.
+     * - `equal` / `not_equal` (any single-value column, including booleans stored
+     *   as `'true'` / `'false'`): single-element array.
+     */
+    values: string[];
+    /** Lower bound for `between` / `gt` / `gte`. */
+    rangeMin: string | null;
+    /** Upper bound for `between` / `lt` / `lte`. */
+    rangeMax: string | null;
+    /** Free-text input for `contains` / `starts_with` / `ends_with` / `is_exactly`. */
+    text: string | null;
+};
+export type QBGroup = {
+    kind: 'group';
+    id: string;
+    combinator: QBCombinator;
+    not: boolean;
+    children: QBNode[];
+};
+export type QBNode = QBCondition | QBGroup;
+export declare function isQBCondition(node: QBNode): node is QBCondition;
+export declare function isQBGroup(node: QBNode): node is QBGroup;
+//# sourceMappingURL=QueryBuilderTypes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QueryBuilderTypes.d.ts","sourceRoot":"","sources":["../../../src/components/QueryBuilder/QueryBuilderTypes.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,IAAI,CAAA;AAEvC,MAAM,MAAM,aAAa,GAErB,WAAW,GACX,WAAW,GAEX,SAAS,GACT,IAAI,GACJ,KAAK,GACL,IAAI,GACJ,KAAK,GAEL,OAAO,GACP,WAAW,GAEX,WAAW,GACX,UAAU,GAEV,UAAU,GACV,aAAa,GACb,WAAW,GACX,YAAY,CAAA;AAEhB,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,WAAW,CAAA;IACjB,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,4EAA4E;IAC5E,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,EAAE,EAAE,aAAa,CAAA;IACjB;;;;OAIG;IACH,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,gDAAgD;IAChD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,gDAAgD;IAChD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,mFAAmF;IACnF,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,OAAO,CAAA;IACb,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,EAAE,YAAY,CAAA;IACxB,GAAG,EAAE,OAAO,CAAA;IACZ,QAAQ,EAAE,MAAM,EAAE,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,MAAM,GAAG,WAAW,GAAG,OAAO,CAAA;AAE1C,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,WAAW,CAE/D;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,OAAO,CAEvD"}

package/dist/components/QueryBuilder/QueryBuilderTypes.js

@@ -0,0 +1,11 @@
+//#region src/components/QueryBuilder/QueryBuilderTypes.ts
+function e(e) {
+	return e.kind === "condition";
+}
+function t(e) {
+	return e.kind === "group";
+}
+//#endregion
+export { e as isQBCondition, t as isQBGroup };
+
+//# sourceMappingURL=QueryBuilderTypes.js.map

package/dist/components/QueryBuilder/QueryBuilderTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryBuilderTypes.js","names":[],"sources":["../../../src/components/QueryBuilder/QueryBuilderTypes.ts"],"sourcesContent":["/**\n * QB internal UI types. These carry column-model metadata and per-input state\n * (values / range / text) that the QueryFilter API objects don't. They are\n * never serialized directly to the API — {@link qbNodeToApiFilter} converts\n * them to {@link QueryFilter} first.\n */\n\nexport type QBCombinator = 'AND' | 'OR'\n\nexport type QBConditionOp =\n  // enum / multi-value list columns\n  | 'is_any_of'\n  | 'is_all_of'\n  // range (numeric / date) columns\n  | 'between'\n  | 'gt'\n  | 'gte'\n  | 'lt'\n  | 'lte'\n  // single-value equality (string / numeric / date / boolean)\n  | 'equal'\n  | 'not_equal'\n  // presence (any column)\n  | 'has_value'\n  | 'no_value'\n  // text columns\n  | 'contains'\n  | 'starts_with'\n  | 'ends_with'\n  | 'is_exactly'\n\nexport type QBCondition = {\n  kind: 'condition'\n  id: string\n  columnName: string | null\n  /** `ColumnTypeEnum` string from the query metadata (STRING, INTEGER, …). */\n  columnType: string | null\n  op: QBConditionOp\n  /**\n   * - `is_any_of` / `is_all_of`: one or more selected values.\n   * - `equal` / `not_equal` (any single-value column, including booleans stored\n   *   as `'true'` / `'false'`): single-element array.\n   */\n  values: string[]\n  /** Lower bound for `between` / `gt` / `gte`. */\n  rangeMin: string | null\n  /** Upper bound for `between` / `lt` / `lte`. */\n  rangeMax: string | null\n  /** Free-text input for `contains` / `starts_with` / `ends_with` / `is_exactly`. */\n  text: string | null\n}\n\nexport type QBGroup = {\n  kind: 'group'\n  id: string\n  combinator: QBCombinator\n  not: boolean\n  children: QBNode[]\n}\n\nexport type QBNode = QBCondition | QBGroup\n\nexport function isQBCondition(node: QBNode): node is QBCondition {\n  return node.kind === 'condition'\n}\n\nexport function isQBGroup(node: QBNode): node is QBGroup {\n  return node.kind === 'group'\n}\n"],"mappings":";AA8DA,SAAgB,EAAc,GAAmC;CAC/D,OAAO,EAAK,SAAS;AACvB;AAEA,SAAgB,EAAU,GAA+B;CACvD,OAAO,EAAK,SAAS;AACvB"}