synapse-react-client 4.0.22 → 4.0.24

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnumFacetFilter.js","names":[],"sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.tsx"],"sourcesContent":["import { isFacetColumnValuesRequest, SynapseConstants } from '@/utils'\nimport {\n  getCorrespondingColumnForFacet,\n  getCorrespondingSelectedFacet,\n} from '@/utils/functions/queryUtils'\nimport useGetInfoFromIds from '@/utils/hooks/useGetInfoFromIds'\nimport {\n  ColumnTypeEnum,\n  EntityHeader,\n  Evaluation,\n  FacetColumnRequest,\n  FacetColumnResultValueCount,\n  FacetColumnResultValues,\n  FacetColumnValuesRequest,\n  QueryBundleRequest,\n  UserGroupHeader,\n} from '@sage-bionetworks/synapse-types'\nimport { cloneDeep, partition, pick, sortBy } from 'lodash-es'\nimport { Suspense, useMemo } from 'react'\nimport { useQueryContext } from '../../../QueryContext'\nimport { useQueryVisualizationContext } from '../../../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../../../QueryWrapper/useGetQueryMetadata'\nimport { EnumFacetFilterSkeleton } from './EnumFacetFilterSkeleton'\nimport EnumFacetFilterUI, { RenderedFacetValue } from './EnumFacetFilterUI'\nimport { getAllIsSelected, valueToLabel } from './EnumFacetFilterUtils'\n\nexport type EnumFacetFilterProps = {\n  labelId?: string\n  facet: FacetColumnResultValues\n  containerAs?: 'Collapsible' | 'Dropdown'\n  dropdownType?: 'Icon' | 'SelectBox'\n  hideCollapsible?: boolean\n  defaultShowAllValues?: boolean\n}\n\nfunction EnumFacetFilterInternal(props: EnumFacetFilterProps) {\n  const {\n    facet,\n    containerAs = 'Collapsible',\n    dropdownType = 'Icon',\n    hideCollapsible = false,\n    defaultShowAllValues = false,\n    labelId,\n  } = props\n  const {\n    nextQueryRequest,\n    addValueToSelectedFacet,\n    removeSelectedFacet,\n    removeValueFromSelectedFacet,\n    resetDebounceTimer,\n  } = useQueryContext()\n\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n  const { getColumnDisplayName } = useQueryVisualizationContext()\n\n  const currentSelectedFacet: FacetColumnValuesRequest | undefined =\n    useMemo(() => {\n      const facetColumnRequest = getCorrespondingSelectedFacet(\n        facet,\n        cloneDeep(nextQueryRequest.query.selectedFacets) as\n          | FacetColumnRequest[]\n          | undefined,\n      )\n\n      if (\n        facetColumnRequest &&\n        !isFacetColumnValuesRequest(facetColumnRequest)\n      ) {\n        console.error(\n          `The facet rendered in EnumFacetFilter is not a FacetColumnValuesRequest`,\n          facet,\n        )\n        return undefined\n      }\n      return facetColumnRequest\n    }, [facet, nextQueryRequest.query.selectedFacets])\n\n  // Must compare the known facet values to the \"uncommitted\" current query\n  const allIsSelected = getAllIsSelected(\n    cloneDeep(nextQueryRequest) as QueryBundleRequest,\n    facet,\n  )\n\n  const columnModel = queryMetadata.columnModels\n    ? getCorrespondingColumnForFacet(facet, queryMetadata.columnModels)\n    : undefined\n\n  const isNumberColumnType = useMemo(() => {\n    switch (columnModel?.columnType) {\n      case ColumnTypeEnum.DOUBLE:\n      case ColumnTypeEnum.DATE:\n      case ColumnTypeEnum.INTEGER:\n        return true\n      default:\n        return false\n    }\n  }, [columnModel])\n\n  const userIds =\n    columnModel?.columnType === ColumnTypeEnum.USERID ||\n    columnModel?.columnType === ColumnTypeEnum.USERID_LIST\n      ? facet.facetValues.map(facet => facet.value)\n      : []\n  const userGroupHeaders = useGetInfoFromIds<UserGroupHeader>({\n    ids: userIds,\n    type: 'USER_PROFILE',\n  })\n\n  const entityIds =\n    columnModel?.columnType === ColumnTypeEnum.ENTITYID ||\n    columnModel?.columnType === ColumnTypeEnum.ENTITYID_LIST\n      ? facet.facetValues.map(facet => facet.value)\n      : []\n  const entityHeaders = useGetInfoFromIds<EntityHeader>({\n    ids: entityIds,\n    type: 'ENTITY_HEADER',\n  })\n\n  const evaluationIds =\n    columnModel?.columnType === ColumnTypeEnum.EVALUATIONID\n      ? facet.facetValues.map(facet => facet.value)\n      : []\n  const evaluations = useGetInfoFromIds<Evaluation>({\n    ids: evaluationIds,\n    type: 'EVALUATION_QUEUE',\n  })\n\n  const displayedFacetValues: RenderedFacetValue[] = useMemo(() => {\n    const renderedFacetValues = facet.facetValues.map(\n      (facetValue: FacetColumnResultValueCount): RenderedFacetValue => {\n        return {\n          ...facetValue,\n          // Selected status should be based on the 'nextQuery', not the result data\n          // This ensures the checkboxes respond instantly to user interaction, like while waiting for multiple changes to debounce\n          isSelected:\n            currentSelectedFacet?.facetValues.includes(facetValue.value) ??\n            false,\n          displayText: valueToLabel(\n            facetValue,\n            userGroupHeaders,\n            entityHeaders,\n            evaluations,\n          ),\n        }\n      },\n    )\n    //Abby V's suggestion, always show the VALUE_NOT_SET facet value on the bottom of this sorted list\n    const partitions = partition(\n      renderedFacetValues,\n      facet => facet.value === SynapseConstants.VALUE_NOT_SET,\n    )\n    const valueNotSetFacetArray = partitions[0]\n    const restOfFacetValuesArray = partitions[1]\n\n    // Apply client-side sorting if no server-side sort is specified\n    let sortedValues: RenderedFacetValue[] = restOfFacetValuesArray\n    const isClientSideSort =\n      columnModel == undefined || columnModel.facetSortConfig == undefined\n    if (isClientSideSort) {\n      if (isNumberColumnType) {\n        sortedValues = sortBy(restOfFacetValuesArray, fv => Number(fv.value))\n      } else {\n        sortedValues = sortBy(restOfFacetValuesArray, fv =>\n          fv.displayText.toLowerCase(),\n        )\n      }\n    }\n\n    return [...sortedValues, ...valueNotSetFacetArray]\n  }, [\n    facet.facetValues,\n    columnModel,\n    currentSelectedFacet?.facetValues,\n    userGroupHeaders,\n    entityHeaders,\n    evaluations,\n    isNumberColumnType,\n  ])\n\n  if (!columnModel) {\n    return <></>\n  }\n\n  return (\n    <EnumFacetFilterUI\n      labelId={labelId}\n      facetTitle={getColumnDisplayName(facet.columnName, facet.jsonPath)}\n      filterIsActive={!allIsSelected}\n      facetValues={displayedFacetValues}\n      containerAs={containerAs}\n      dropdownType={dropdownType}\n      hideCollapsible={hideCollapsible}\n      defaultShowAllValues={defaultShowAllValues}\n      onHoverOverValue={() => {\n        // SWC-6698: delay the query execution (via the debounce) when an item is hovered over\n        resetDebounceTimer()\n      }}\n      onAddValueToSelection={value => {\n        addValueToSelectedFacet(\n          pick(facet, ['columnName', 'jsonPath']),\n          value,\n          { debounce: true },\n        )\n      }}\n      onRemoveValueFromSelection={value => {\n        removeValueFromSelectedFacet(\n          pick(facet, ['columnName', 'jsonPath']),\n          value,\n          { debounce: true },\n        )\n      }}\n      onRemoveAllFacetSelections={() =>\n        removeSelectedFacet(pick(facet, ['columnName', 'jsonPath']))\n      }\n      canMultiSelect={true}\n    />\n  )\n}\n\nexport function EnumFacetFilter(props: EnumFacetFilterProps) {\n  const { containerAs = 'Collapsible', dropdownType = 'Icon' } = props\n  return (\n    <Suspense\n      fallback={\n        <EnumFacetFilterSkeleton\n          containerAs={containerAs}\n          dropdownType={dropdownType}\n        />\n      }\n    >\n      <EnumFacetFilterInternal {...props} />\n    </Suspense>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"EnumFacetFilter.js","names":[],"sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.tsx"],"sourcesContent":["import { isFacetColumnValuesRequest, SynapseConstants } from '@/utils'\nimport {\n  getCorrespondingColumnForFacet,\n  getCorrespondingSelectedFacet,\n} from '@/utils/functions/queryUtils'\nimport useGetInfoFromIds from '@/utils/hooks/useGetInfoFromIds'\nimport {\n  ColumnTypeEnum,\n  EntityHeader,\n  Evaluation,\n  FacetColumnRequest,\n  FacetColumnResultValueCount,\n  FacetColumnResultValues,\n  FacetColumnValuesRequest,\n  QueryBundleRequest,\n  UserGroupHeader,\n} from '@sage-bionetworks/synapse-types'\nimport { cloneDeep, partition, pick, sortBy } from 'lodash-es'\nimport { Suspense, useMemo } from 'react'\nimport { useQueryContext } from '../../../QueryContext'\nimport { useQueryVisualizationContext } from '../../../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../../../QueryWrapper/useGetQueryMetadata'\nimport { EnumFacetFilterSkeleton } from './EnumFacetFilterSkeleton'\nimport EnumFacetFilterUI, { RenderedFacetValue } from './EnumFacetFilterUI'\nimport { getAllIsSelected, valueToLabel } from './EnumFacetFilterUtils'\nimport FacetValueChip from '../../facet-nav/FacetValueChip'\n\nexport type EnumFacetFilterProps = {\n  labelId?: string\n  facet: FacetColumnResultValues\n  containerAs?: 'Collapsible' | 'Dropdown'\n  dropdownType?: 'Icon' | 'SelectBox'\n  hideCollapsible?: boolean\n  defaultShowAllValues?: boolean\n}\n\nfunction EnumFacetFilterInternal(props: EnumFacetFilterProps) {\n  const {\n    facet,\n    containerAs = 'Collapsible',\n    dropdownType = 'Icon',\n    hideCollapsible = false,\n    defaultShowAllValues = false,\n    labelId,\n  } = props\n  const {\n    nextQueryRequest,\n    addValueToSelectedFacet,\n    removeSelectedFacet,\n    removeValueFromSelectedFacet,\n    resetDebounceTimer,\n  } = useQueryContext()\n\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n  const { getColumnDisplayName, renderFacetValue } =\n    useQueryVisualizationContext()\n\n  const currentSelectedFacet: FacetColumnValuesRequest | undefined =\n    useMemo(() => {\n      const facetColumnRequest = getCorrespondingSelectedFacet(\n        facet,\n        cloneDeep(nextQueryRequest.query.selectedFacets) as\n          | FacetColumnRequest[]\n          | undefined,\n      )\n\n      if (\n        facetColumnRequest &&\n        !isFacetColumnValuesRequest(facetColumnRequest)\n      ) {\n        console.error(\n          `The facet rendered in EnumFacetFilter is not a FacetColumnValuesRequest`,\n          facet,\n        )\n        return undefined\n      }\n      return facetColumnRequest\n    }, [facet, nextQueryRequest.query.selectedFacets])\n\n  // Must compare the known facet values to the \"uncommitted\" current query\n  const allIsSelected = getAllIsSelected(\n    cloneDeep(nextQueryRequest) as QueryBundleRequest,\n    facet,\n  )\n\n  const columnModel = queryMetadata.columnModels\n    ? getCorrespondingColumnForFacet(facet, queryMetadata.columnModels)\n    : undefined\n\n  const isNumberColumnType = useMemo(() => {\n    switch (columnModel?.columnType) {\n      case ColumnTypeEnum.DOUBLE:\n      case ColumnTypeEnum.DATE:\n      case ColumnTypeEnum.INTEGER:\n        return true\n      default:\n        return false\n    }\n  }, [columnModel])\n\n  const userIds =\n    columnModel?.columnType === ColumnTypeEnum.USERID ||\n    columnModel?.columnType === ColumnTypeEnum.USERID_LIST\n      ? facet.facetValues.map(facet => facet.value)\n      : []\n  const userGroupHeaders = useGetInfoFromIds<UserGroupHeader>({\n    ids: userIds,\n    type: 'USER_PROFILE',\n  })\n\n  const entityIds =\n    columnModel?.columnType === ColumnTypeEnum.ENTITYID ||\n    columnModel?.columnType === ColumnTypeEnum.ENTITYID_LIST\n      ? facet.facetValues.map(facet => facet.value)\n      : []\n  const entityHeaders = useGetInfoFromIds<EntityHeader>({\n    ids: entityIds,\n    type: 'ENTITY_HEADER',\n  })\n\n  const evaluationIds =\n    columnModel?.columnType === ColumnTypeEnum.EVALUATIONID\n      ? facet.facetValues.map(facet => facet.value)\n      : []\n  const evaluations = useGetInfoFromIds<Evaluation>({\n    ids: evaluationIds,\n    type: 'EVALUATION_QUEUE',\n  })\n\n  const displayedFacetValues: RenderedFacetValue[] = useMemo(() => {\n    const renderedFacetValues = facet.facetValues.map(\n      (facetValue: FacetColumnResultValueCount): RenderedFacetValue => {\n        const displayText = valueToLabel(\n          facetValue,\n          userGroupHeaders,\n          entityHeaders,\n          evaluations,\n        )\n        return {\n          ...facetValue,\n          // Selected status should be based on the 'nextQuery', not the result data\n          // This ensures the checkboxes respond instantly to user interaction, like while waiting for multiple changes to debounce\n          isSelected:\n            currentSelectedFacet?.facetValues.includes(facetValue.value) ??\n            false,\n          displayText,\n          renderedLabel: (() => {\n            const rendered = renderFacetValue?.(\n              facet.columnName,\n              facetValue.value,\n            )\n            return rendered ? (\n              <FacetValueChip\n                label={rendered.label}\n                icon={rendered.icon}\n                tooltipTitle={rendered.tooltipTitle}\n                placement=\"right\"\n                truncate\n              />\n            ) : undefined\n          })(),\n        }\n      },\n    )\n    //Abby V's suggestion, always show the VALUE_NOT_SET facet value on the bottom of this sorted list\n    const partitions = partition(\n      renderedFacetValues,\n      facet => facet.value === SynapseConstants.VALUE_NOT_SET,\n    )\n    const valueNotSetFacetArray = partitions[0]\n    const restOfFacetValuesArray = partitions[1]\n\n    // Apply client-side sorting if no server-side sort is specified\n    let sortedValues: RenderedFacetValue[] = restOfFacetValuesArray\n    const isClientSideSort =\n      columnModel == undefined || columnModel.facetSortConfig == undefined\n    if (isClientSideSort) {\n      if (isNumberColumnType) {\n        sortedValues = sortBy(restOfFacetValuesArray, fv => Number(fv.value))\n      } else {\n        sortedValues = sortBy(restOfFacetValuesArray, fv =>\n          fv.displayText.toLowerCase(),\n        )\n      }\n    }\n\n    return [...sortedValues, ...valueNotSetFacetArray]\n  }, [\n    facet.facetValues,\n    facet.columnName,\n    columnModel,\n    currentSelectedFacet?.facetValues,\n    userGroupHeaders,\n    entityHeaders,\n    evaluations,\n    isNumberColumnType,\n    renderFacetValue,\n  ])\n\n  if (!columnModel) {\n    return <></>\n  }\n\n  return (\n    <EnumFacetFilterUI\n      labelId={labelId}\n      facetTitle={getColumnDisplayName(facet.columnName, facet.jsonPath)}\n      filterIsActive={!allIsSelected}\n      facetValues={displayedFacetValues}\n      containerAs={containerAs}\n      dropdownType={dropdownType}\n      hideCollapsible={hideCollapsible}\n      defaultShowAllValues={defaultShowAllValues}\n      onHoverOverValue={() => {\n        // SWC-6698: delay the query execution (via the debounce) when an item is hovered over\n        resetDebounceTimer()\n      }}\n      onAddValueToSelection={value => {\n        addValueToSelectedFacet(\n          pick(facet, ['columnName', 'jsonPath']),\n          value,\n          { debounce: true },\n        )\n      }}\n      onRemoveValueFromSelection={value => {\n        removeValueFromSelectedFacet(\n          pick(facet, ['columnName', 'jsonPath']),\n          value,\n          { debounce: true },\n        )\n      }}\n      onRemoveAllFacetSelections={() =>\n        removeSelectedFacet(pick(facet, ['columnName', 'jsonPath']))\n      }\n      canMultiSelect={true}\n    />\n  )\n}\n\nexport function EnumFacetFilter(props: EnumFacetFilterProps) {\n  const { containerAs = 'Collapsible', dropdownType = 'Icon' } = props\n  return (\n    <Suspense\n      fallback={\n        <EnumFacetFilterSkeleton\n          containerAs={containerAs}\n          dropdownType={dropdownType}\n        />\n      }\n    >\n      <EnumFacetFilterInternal {...props} />\n    </Suspense>\n  )\n}\n"],"mappings":"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"}

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterOption.d.ts

@@ -1,6 +1,7 @@
+import { ReactNode } from 'react';
 type EnumFacetFilterOptionProps = {
     readonly id: string;
-    readonly label: string;
+    readonly label: ReactNode;
     readonly count?: number;
     readonly isDropdown: boolean;
     readonly checked: boolean;

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnumFacetFilterOption.d.ts","sourceRoot":"","sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterOption.tsx"],"names":[],"mappings":"AAEA,KAAK,0BAA0B,GAAG;IAChC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAA;IAC5B,QAAQ,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAA;CACzC,CAAA;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,2CA6DtE"}
+{"version":3,"file":"EnumFacetFilterOption.d.ts","sourceRoot":"","sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterOption.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,KAAK,0BAA0B,GAAG;IAChC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAA;IACzB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAA;IAC5B,QAAQ,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAA;CACzC,CAAA;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,2CAwEtE"}

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterOption.js

@@ -17,7 +17,15 @@ function s(s) {
 		children: [/* @__PURE__ */ a(n, {
 			control: a(h === "checkbox" ? t : r, {}),
 			className: "EnumFacetFilter__checkbox",
-			sx: { overflowWrap: "anywhere" },
+			sx: {
+				overflowWrap: "anywhere",
+				flex: 1,
+				minWidth: 0,
+				"& .MuiFormControlLabel-label": {
+					minWidth: 0,
+					overflow: "hidden"
+				}
+			},
 			onClick: (e) => e.stopPropagation(),
 			onChange: (e, t) => {
 				p(t);
@@ -26,6 +34,10 @@ function s(s) {
 			label: l
 		}, `${c}`), u != null && /* @__PURE__ */ o(i, { children: [d && /* @__PURE__ */ o("span", {
 			className: "EnumFacetFilter__count",
+			style: {
+				flexShrink: 0,
+				marginLeft: 8
+			},
 			children: [
 				"(",
 				u.toLocaleString(),
@@ -33,6 +45,10 @@ function s(s) {
 			]
 		}), !d && /* @__PURE__ */ a("div", {
 			className: "EnumFacetFilter__count",
+			style: {
+				flexShrink: 0,
+				marginLeft: 8
+			},
 			children: u.toLocaleString()
 		})] })]
 	});

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnumFacetFilterOption.js","names":[],"sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterOption.tsx"],"sourcesContent":["import { Box, Checkbox, FormControlLabel, Radio } from '@mui/material'\n\ntype EnumFacetFilterOptionProps = {\n  readonly id: string\n  readonly label: string\n  readonly count?: number\n  readonly isDropdown: boolean\n  readonly checked: boolean\n  readonly onChange: (selected: boolean) => void\n  readonly onHover: () => void\n  readonly inputType: 'checkbox' | 'radio'\n}\n\nexport function EnumFacetFilterOption(props: EnumFacetFilterOptionProps) {\n  const {\n    id,\n    label,\n    count,\n    isDropdown,\n    checked,\n    onChange,\n    onHover,\n    inputType,\n  } = props\n\n  const control = inputType === 'checkbox' ? <Checkbox /> : <Radio />\n\n  return (\n    <Box\n      className=\"EnumFacetFilter__checkboxContainer\"\n      onClick={() => {\n        // If this is a dropdown option, clicking anywhere in the field should toggle selection\n        if (isDropdown) {\n          onChange(!checked)\n        }\n      }}\n      onMouseEnter={onHover}\n      sx={{\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n      }}\n    >\n      <FormControlLabel\n        control={control}\n        className=\"EnumFacetFilter__checkbox\"\n        sx={{\n          overflowWrap: 'anywhere',\n        }}\n        onClick={event => event.stopPropagation()}\n        onChange={(_event, newValue) => {\n          onChange(newValue)\n        }}\n        key={`${id}`}\n        checked={checked}\n        label={label}\n      />\n\n      {count != null && (\n        <>\n          {isDropdown && (\n            <span className=\"EnumFacetFilter__count\">\n              ({count.toLocaleString()})\n            </span>\n          )}\n          {!isDropdown && (\n            <div className=\"EnumFacetFilter__count\">\n              {count.toLocaleString()}\n            </div>\n          )}\n        </>\n      )}\n    </Box>\n  )\n}\n"],"mappings":";;;AAaA,SAAgB,EAAsB,GAAmC;CACvE,IAAM,EACJ,OACA,UACA,UACA,eACA,YACA,aACA,YACA,iBACE;CAIJ,OACE,kBAAC,GAAD;EACE,WAAU;EACV,eAAe;GAEb,AAAI,KACF,EAAS,CAAC,CAAO;EAErB;EACA,cAAc;EACd,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;EACd;YAbF,CAeE,kBAAC,GAAD;GACW,SAnB4B,EAA3B,MAAc,aAAc,IAAe,GAAhB,CAAW,CAAY;GAoB5D,WAAU;GACV,IAAI,EACF,cAAc,WAChB;GACA,UAAS,MAAS,EAAM,gBAAgB;GACxC,WAAW,GAAQ,MAAa;IAC9B,EAAS,CAAQ;GACnB;GAES;GACF;EACR,GAHM,GAAG,GAGT,GAEA,KAAS,QACR,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,QAAD;GAAM,WAAU;aAAhB;IAAyC;IACrC,EAAM,eAAe;IAAE;GACrB;MAEP,CAAC,KACA,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAM,eAAe;EACnB,CAAA,CAEP,EAAA,CAAA,CAED;;AAET"}
+{"version":3,"file":"EnumFacetFilterOption.js","names":[],"sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterOption.tsx"],"sourcesContent":["import { Box, Checkbox, FormControlLabel, Radio } from '@mui/material'\nimport { ReactNode } from 'react'\n\ntype EnumFacetFilterOptionProps = {\n  readonly id: string\n  readonly label: ReactNode\n  readonly count?: number\n  readonly isDropdown: boolean\n  readonly checked: boolean\n  readonly onChange: (selected: boolean) => void\n  readonly onHover: () => void\n  readonly inputType: 'checkbox' | 'radio'\n}\n\nexport function EnumFacetFilterOption(props: EnumFacetFilterOptionProps) {\n  const {\n    id,\n    label,\n    count,\n    isDropdown,\n    checked,\n    onChange,\n    onHover,\n    inputType,\n  } = props\n\n  const control = inputType === 'checkbox' ? <Checkbox /> : <Radio />\n\n  return (\n    <Box\n      className=\"EnumFacetFilter__checkboxContainer\"\n      onClick={() => {\n        // If this is a dropdown option, clicking anywhere in the field should toggle selection\n        if (isDropdown) {\n          onChange(!checked)\n        }\n      }}\n      onMouseEnter={onHover}\n      sx={{\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n      }}\n    >\n      <FormControlLabel\n        control={control}\n        className=\"EnumFacetFilter__checkbox\"\n        sx={{\n          overflowWrap: 'anywhere',\n          // Let the label shrink so the count stays in a consistent column\n          // (and custom node labels can truncate rather than overflow the row).\n          flex: 1,\n          minWidth: 0,\n          '& .MuiFormControlLabel-label': { minWidth: 0, overflow: 'hidden' },\n        }}\n        onClick={event => event.stopPropagation()}\n        onChange={(_event, newValue) => {\n          onChange(newValue)\n        }}\n        key={`${id}`}\n        checked={checked}\n        label={label}\n      />\n\n      {count != null && (\n        <>\n          {isDropdown && (\n            <span\n              className=\"EnumFacetFilter__count\"\n              style={{ flexShrink: 0, marginLeft: 8 }}\n            >\n              ({count.toLocaleString()})\n            </span>\n          )}\n          {!isDropdown && (\n            <div\n              className=\"EnumFacetFilter__count\"\n              style={{ flexShrink: 0, marginLeft: 8 }}\n            >\n              {count.toLocaleString()}\n            </div>\n          )}\n        </>\n      )}\n    </Box>\n  )\n}\n"],"mappings":";;;AAcA,SAAgB,EAAsB,GAAmC;CACvE,IAAM,EACJ,OACA,UACA,UACA,eACA,YACA,aACA,YACA,iBACE;CAIJ,OACE,kBAAC,GAAD;EACE,WAAU;EACV,eAAe;GAEb,AAAI,KACF,EAAS,CAAC,CAAO;EAErB;EACA,cAAc;EACd,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;EACd;YAbF,CAeE,kBAAC,GAAD;GACW,SAnB4B,EAA3B,MAAc,aAAc,IAAe,GAAhB,CAAW,CAAY;GAoB5D,WAAU;GACV,IAAI;IACF,cAAc;IAGd,MAAM;IACN,UAAU;IACV,gCAAgC;KAAE,UAAU;KAAG,UAAU;IAAS;GACpE;GACA,UAAS,MAAS,EAAM,gBAAgB;GACxC,WAAW,GAAQ,MAAa;IAC9B,EAAS,CAAQ;GACnB;GAES;GACF;EACR,GAHM,GAAG,GAGT,GAEA,KAAS,QACR,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,QAAD;GACE,WAAU;GACV,OAAO;IAAE,YAAY;IAAG,YAAY;GAAE;aAFxC;IAGC;IACG,EAAM,eAAe;IAAE;GACrB;MAEP,CAAC,KACA,kBAAC,OAAD;GACE,WAAU;GACV,OAAO;IAAE,YAAY;IAAG,YAAY;GAAE;aAErC,EAAM,eAAe;EACnB,CAAA,CAEP,EAAA,CAAA,CAED;;AAET"}

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI.d.ts

@@ -1,8 +1,10 @@
+import { ReactNode } from 'react';
 import { FacetColumnResultValueCount } from '@sage-bionetworks/synapse-types';
 import { SetOptional } from 'type-fest';
 export type RenderedFacetValue<TValue = string> = Omit<SetOptional<FacetColumnResultValueCount, 'count'>, 'value'> & {
     value: TValue;
     displayText: string;
+    renderedLabel?: ReactNode;
 };
 export type EnumFacetFilterUIProps<TValue = string> = {
     labelId?: string;

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnumFacetFilterUI.d.ts","sourceRoot":"","sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAA;AAK7E,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAIvC,MAAM,MAAM,kBAAkB,CAAC,MAAM,GAAG,MAAM,IAAI,IAAI,CACpD,WAAW,CAAC,2BAA2B,EAAE,OAAO,CAAC,EACjD,OAAO,CACR,GAAG;IACF,KAAK,EAAE,MAAM,CAAA;IAEb,WAAW,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,sBAAsB,CAAC,MAAM,GAAG,MAAM,IAAI;IAEpD,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB,UAAU,EAAE,MAAM,CAAA;IAElB,WAAW,EAAE,kBAAkB,CAAC,MAAM,CAAC,EAAE,CAAA;IAEzC,cAAc,EAAE,OAAO,CAAA;IAEvB,WAAW,CAAC,EAAE,aAAa,GAAG,UAAU,CAAA;IAExC,YAAY,CAAC,EAAE,MAAM,GAAG,WAAW,CAAA;IAEnC,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAE9C,0BAA0B,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAEnD,0BAA0B,EAAE,MAAM,IAAI,CAAA;IAEtC,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAEzC,cAAc,EAAE,OAAO,CAAA;IAEvB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,CAAA;AAMD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,MAAM,GAAG,MAAM,EACvD,KAAK,EAAE,sBAAsB,CAAC,MAAM,CAAC,2CAgQtC"}
+{"version":3,"file":"EnumFacetFilterUI.d.ts","sourceRoot":"","sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAA;AAC5D,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAA;AAK7E,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAIvC,MAAM,MAAM,kBAAkB,CAAC,MAAM,GAAG,MAAM,IAAI,IAAI,CACpD,WAAW,CAAC,2BAA2B,EAAE,OAAO,CAAC,EACjD,OAAO,CACR,GAAG;IACF,KAAK,EAAE,MAAM,CAAA;IAEb,WAAW,EAAE,MAAM,CAAA;IAEnB,aAAa,CAAC,EAAE,SAAS,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,sBAAsB,CAAC,MAAM,GAAG,MAAM,IAAI;IAEpD,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB,UAAU,EAAE,MAAM,CAAA;IAElB,WAAW,EAAE,kBAAkB,CAAC,MAAM,CAAC,EAAE,CAAA;IAEzC,cAAc,EAAE,OAAO,CAAA;IAEvB,WAAW,CAAC,EAAE,aAAa,GAAG,UAAU,CAAA;IAExC,YAAY,CAAC,EAAE,MAAM,GAAG,WAAW,CAAA;IAEnC,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAE9C,0BAA0B,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAEnD,0BAA0B,EAAE,MAAM,IAAI,CAAA;IAEtC,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAEzC,cAAc,EAAE,OAAO,CAAA;IAEvB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,CAAA;AAMD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,MAAM,GAAG,MAAM,EACvD,KAAK,EAAE,sBAAsB,CAAC,MAAM,CAAC,2CAiQtC"}

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI.js

@@ -89,25 +89,25 @@ function v(v) {
 			})]
 		}), /* @__PURE__ */ h("div", { children: [
 			H.map((e, t) => {
-				let { isSelected: r, displayText: i, value: a, count: o } = e;
+				let { isSelected: r, displayText: i, renderedLabel: a, value: o, count: s } = e;
 				return /* @__PURE__ */ m(n, {
 					id: [
 						_(D),
-						_(String(a)),
+						_(String(o)),
 						t
 					].join("-"),
-					label: i,
-					count: o,
+					label: a ?? i,
+					count: s,
 					isDropdown: W,
 					checked: r,
 					onHover: () => {
-						k(a);
+						k(o);
 					},
 					onChange: (e) => {
-						e ? T(a) : E(a);
+						e ? T(o) : E(o);
 					},
 					inputType: A ? "checkbox" : "radio"
-				}, String(a));
+				}, String(o));
 			}),
 			!W && /* @__PURE__ */ h(p, { children: [G && /* @__PURE__ */ m("button", {
 				className: "EnumFacetFilter__showMoreFacetsBtn",

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnumFacetFilterUI.js","names":[],"sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI.tsx"],"sourcesContent":["import {\n  Checkbox,\n  Collapse,\n  FormControlLabel,\n  IconButton,\n  TextField,\n  Tooltip,\n} from '@mui/material'\nimport { useMemo, useRef, useState } from 'react'\nimport { FacetColumnResultValueCount } from '@sage-bionetworks/synapse-types'\nimport IconSvg from '../../../IconSvg/IconSvg'\nimport { FacetFilterHeader } from '../FacetFilterHeader'\nimport { EnumFacetFilterOption } from './EnumFacetFilterOption'\nimport EnumFacetFilterDropdown from './EnumFacetFilterDropdown'\nimport { SetOptional } from 'type-fest'\n\nconst MAX_ENUMERATION_VALUES_TO_SHOW = 5\n\nexport type RenderedFacetValue<TValue = string> = Omit<\n  SetOptional<FacetColumnResultValueCount, 'count'>,\n  'value'\n> & {\n  value: TValue\n  /* Text displayed for the option, and also used to filter in search */\n  displayText: string\n}\n\nexport type EnumFacetFilterUIProps<TValue = string> = {\n  /* The ID of the corresponding label, for testing and accessibility */\n  labelId?: string\n  /* The title of the faceted column to be displayed */\n  facetTitle: string\n  /* List of all facet values and information associated with each value */\n  facetValues: RenderedFacetValue<TValue>[]\n  /* Determines how the component is styled and whether the 'All' checkbox should be selected. */\n  filterIsActive: boolean // filterIsActive cannot be derived from facetValues[*].isSelected. See PORTALS-2680\n  /* The EnumFacetFilter can be rendered as a collapsible panel or a dropdown. Default is `'Collapsible'` */\n  containerAs?: 'Collapsible' | 'Dropdown'\n  /* If `containerAs` is a dropdown, the dropdown can be either an IconButton or a SelectBox. Default is `'Icon'` */\n  dropdownType?: 'Icon' | 'SelectBox'\n  /* If true, hides the button to collapse the panel (only shown if `containerAs` is 'Collapsible'). Default is false.*/\n  hideCollapsible?: boolean\n  /* Called when an unselected value is selected */\n  onAddValueToSelection: (value: TValue) => void\n  /* Called when a selected value is unselected */\n  onRemoveValueFromSelection: (value: TValue) => void\n  /* Called when all values should be unselected (e.g. 'All' is clicked) */\n  onRemoveAllFacetSelections: () => void\n  /* Called when an value is hovered over */\n  onHoverOverValue: (value: TValue) => void\n  /* Set to true if multiple values can be selected for the filter */\n  canMultiSelect: boolean\n  /* By default, all values are not shown (defaultShowAllValues = false) */\n  defaultShowAllValues?: boolean\n}\n\nfunction removeWhitespace(value: string): string {\n  return value.replace(/\\s/g, '').toLowerCase()\n}\n\nexport default function EnumFacetFilterUI<TValue = string>(\n  props: EnumFacetFilterUIProps<TValue>,\n) {\n  const {\n    labelId,\n    filterIsActive,\n    containerAs = 'Collapsible',\n    dropdownType = 'Icon',\n    hideCollapsible = false,\n    facetValues,\n    onAddValueToSelection,\n    onRemoveValueFromSelection,\n    facetTitle,\n    onRemoveAllFacetSelections,\n    onHoverOverValue,\n    canMultiSelect = true,\n    defaultShowAllValues = false,\n  } = props\n  const [toggleShowAll, setToggleShowAll] =\n    useState<boolean>(defaultShowAllValues)\n  const [isCollapsed, setIsCollapsed] = useState<boolean>(false)\n  const [showSearch, setShowSearch] = useState<boolean>(false)\n  const [searchTerm, setSearchText] = useState<string>('')\n\n  // e.g. we show a subset of facet values before hiding the rest behind \"Show More\"\n  // If the user has selected a value that would normally be hidden, always show all of the values\n  const valueIndexedGreaterThanMaxToShowIsSelected =\n    facetValues.length > MAX_ENUMERATION_VALUES_TO_SHOW &&\n    facetValues\n      .slice(MAX_ENUMERATION_VALUES_TO_SHOW)\n      .some(({ isSelected }) => isSelected)\n  const showAll =\n    containerAs === 'Dropdown' ||\n    toggleShowAll ||\n    showSearch ||\n    valueIndexedGreaterThanMaxToShowIsSelected\n\n  const facetValuesToShow = useMemo(() => {\n    if (showSearch && searchTerm.length > 0) {\n      return facetValues.filter(({ displayText }) => {\n        return (\n          displayText.toLowerCase().indexOf(searchTerm.trim().toLowerCase()) >\n          -1\n        )\n      })\n    }\n    if (showAll) {\n      return facetValues\n    }\n    return facetValues.slice(0, MAX_ENUMERATION_VALUES_TO_SHOW)\n  }, [facetValues, searchTerm, showSearch, showAll])\n\n  const textInput = useRef<HTMLInputElement>(null)\n\n  const isDropdown = containerAs === 'Dropdown'\n  const showMoreButtonIsVisible =\n    !showAll && facetValues.length > MAX_ENUMERATION_VALUES_TO_SHOW\n  const showLessButtonIsVisible =\n    showAll &&\n    !searchTerm &&\n    !valueIndexedGreaterThanMaxToShowIsSelected &&\n    facetValues.length > MAX_ENUMERATION_VALUES_TO_SHOW\n\n  const content = (\n    <div className={isDropdown ? 'EnumFacetFilter__dropdown_menu' : ''}>\n      <div className=\"EnumFacetFilter__checkboxContainer--forAll\">\n        <TextField // Search Filter Text\n          sx={{\n            display: showSearch ? undefined : 'none',\n          }}\n          size={'small'}\n          fullWidth={true}\n          slotProps={{\n            input: {\n              startAdornment: (\n                <Tooltip title={'Close search'}>\n                  <IconButton\n                    size={'small'}\n                    onClick={() => {\n                      setShowSearch(false)\n                      setToggleShowAll(defaultShowAllValues)\n                    }}\n                  >\n                    <IconSvg\n                      sx={{ fontSize: 'inherit' }}\n                      wrap={false}\n                      icon=\"arrowBack\"\n                    />\n                  </IconButton>\n                </Tooltip>\n              ),\n              endAdornment: searchTerm.length > 0 && (\n                <Tooltip title={'Clear'}>\n                  <IconButton\n                    size={'small'}\n                    onClick={() => {\n                      setSearchText('')\n                      textInput.current?.focus()\n                    }}\n                  >\n                    <IconSvg\n                      sx={{ fontSize: 'inherit' }}\n                      wrap={false}\n                      icon=\"close\"\n                    />\n                  </IconButton>\n                </Tooltip>\n              ),\n            },\n          }}\n          type=\"text\"\n          placeholder=\"Find values\"\n          value={searchTerm}\n          ref={textInput}\n          onChange={e => {\n            setSearchText(e.target.value)\n          }}\n        />\n        {!showSearch && (\n          <div className=\"EnumFacetFilter__checkAll\">\n            <FormControlLabel\n              control={<Checkbox />}\n              className=\"EnumFacetFilter__checkbox\"\n              onChange={() => {\n                if (filterIsActive) {\n                  onRemoveAllFacetSelections()\n                }\n              }}\n              key=\"select_all\"\n              checked={!filterIsActive}\n              label=\"All\"\n            />\n            <Tooltip title={'Search'}>\n              <IconButton\n                size={'small'}\n                sx={{ aspectRatio: '1 / 1' }}\n                onClick={() => {\n                  setSearchText('')\n                  setShowSearch(true)\n                  textInput.current?.focus()\n                }}\n              >\n                <IconSvg\n                  sx={{ fontSize: 'inherit' }}\n                  wrap={false}\n                  icon=\"search\"\n                />\n              </IconButton>\n            </Tooltip>\n          </div>\n        )}\n      </div>\n      <div>\n        {facetValuesToShow.map((facetValueAndCount, index: number) => {\n          const { isSelected, displayText, value, count } = facetValueAndCount\n\n          return (\n            <EnumFacetFilterOption\n              key={String(value)}\n              id={[\n                removeWhitespace(facetTitle),\n                removeWhitespace(String(value)),\n                index,\n              ].join('-')}\n              label={displayText}\n              count={count}\n              isDropdown={isDropdown}\n              checked={isSelected}\n              onHover={() => {\n                onHoverOverValue(value)\n              }}\n              onChange={(newIsSelected: boolean) => {\n                if (newIsSelected) {\n                  onAddValueToSelection(value)\n                } else {\n                  onRemoveValueFromSelection(value)\n                }\n              }}\n              inputType={canMultiSelect ? 'checkbox' : 'radio'}\n            />\n          )\n        })}\n        {!isDropdown && (\n          <>\n            {showMoreButtonIsVisible && (\n              <button\n                className=\"EnumFacetFilter__showMoreFacetsBtn\"\n                onClick={() => setToggleShowAll(true)}\n              >\n                <div className=\"EnumFacetFilter__checkboxContainer\">\n                  <div className=\"EnumFacetFilter__showMoreFacetsLabel\">\n                    Show all ({facetValues.length})\n                  </div>\n                </div>\n              </button>\n            )}\n            {showLessButtonIsVisible && (\n              <button\n                className=\"EnumFacetFilter__showMoreFacetsBtn\"\n                onClick={() => setToggleShowAll(false)}\n              >\n                <div className=\"EnumFacetFilter__checkboxContainer\">\n                  <div className=\"EnumFacetFilter__showMoreFacetsLabel\">\n                    Show less\n                  </div>\n                </div>\n              </button>\n            )}\n          </>\n        )}\n        {facetValuesToShow.length <= 0 && (\n          <div className=\"EnumFacetFilter__noMatch\">No match found</div>\n        )}\n      </div>\n    </div>\n  )\n\n  const menuText = useMemo(() => {\n    if (!filterIsActive) {\n      return 'All'\n    } else if (\n      filterIsActive &&\n      facetValuesToShow.filter(item => item.isSelected).length === 1\n    ) {\n      return facetValuesToShow.filter(item => item.isSelected)[0].displayText\n    } else {\n      return 'Multiple Values Selected'\n    }\n  }, [filterIsActive, facetValuesToShow])\n\n  if (isDropdown) {\n    return (\n      <EnumFacetFilterDropdown\n        facetTitle={facetTitle}\n        dropdownType={dropdownType}\n        menuText={menuText}\n        filterIsActive={filterIsActive}\n        labelId={labelId}\n      >\n        {content}\n      </EnumFacetFilterDropdown>\n    )\n  } else {\n    return (\n      <>\n        <FacetFilterHeader\n          hideCollapsible={hideCollapsible}\n          isCollapsed={isCollapsed}\n          label={facetTitle}\n          onClick={(isCollapsed: boolean) => setIsCollapsed(isCollapsed)}\n        />\n        <Collapse className=\"EnumFacetFilter\" in={!isCollapsed}>\n          {content}\n        </Collapse>\n      </>\n    )\n  }\n}\n"],"mappings":";;;;;;;;AAgBA,IAAM,IAAiC;AAwCvC,SAAS,EAAiB,GAAuB;CAC/C,OAAO,EAAM,QAAQ,OAAO,EAAE,EAAE,YAAY;AAC9C;AAEA,SAAwB,EACtB,GACA;CACA,IAAM,EACJ,YACA,mBACA,iBAAc,eACd,kBAAe,QACf,qBAAkB,IAClB,gBACA,0BACA,+BACA,eACA,+BACA,qBACA,oBAAiB,IACjB,0BAAuB,OACrB,GACE,CAAC,GAAe,KACpB,EAAkB,CAAoB,GAClC,CAAC,GAAa,KAAkB,EAAkB,EAAK,GACvD,CAAC,GAAY,KAAiB,EAAkB,EAAK,GACrD,CAAC,GAAY,KAAiB,EAAiB,EAAE,GAIjD,IACJ,EAAY,SAAS,KACrB,EACG,MAAM,CAA8B,EACpC,MAAM,EAAE,oBAAiB,CAAU,GAClC,IACJ,MAAgB,cAChB,KACA,KACA,GAEI,IAAoB,QACpB,KAAc,EAAW,SAAS,IAC7B,EAAY,QAAQ,EAAE,qBAEzB,EAAY,YAAY,EAAE,QAAQ,EAAW,KAAK,EAAE,YAAY,CAAC,IACjE,EAEH,IAEC,IACK,IAEF,EAAY,MAAM,GAAG,CAA8B,GACzD;EAAC;EAAa;EAAY;EAAY;CAAO,CAAC,GAE3C,IAAY,EAAyB,IAAI,GAEzC,IAAa,MAAgB,YAC7B,IACJ,CAAC,KAAW,EAAY,SAAS,GAC7B,IACJ,KACA,CAAC,KACD,CAAC,KACD,EAAY,SAAS,GAEjB,IACJ,kBAAC,OAAD;EAAK,WAAW,IAAa,mCAAmC;YAAhE,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IACE,IAAI,EACF,SAAS,IAAa,KAAA,IAAY,OACpC;IACA,MAAM;IACN,WAAW;IACX,WAAW,EACT,OAAO;KACL,gBACE,kBAAC,GAAD;MAAS,OAAO;gBACd,kBAAC,GAAD;OACE,MAAM;OACN,eAAe;QAEb,AADA,EAAc,EAAK,GACnB,EAAiB,CAAoB;OACvC;iBAEA,kBAAC,GAAD;QACE,IAAI,EAAE,UAAU,UAAU;QAC1B,MAAM;QACN,MAAK;OACN,CAAA;MACS,CAAA;KACL,CAAA;KAEX,cAAc,EAAW,SAAS,KAChC,kBAAC,GAAD;MAAS,OAAO;gBACd,kBAAC,GAAD;OACE,MAAM;OACN,eAAe;QAEb,AADA,EAAc,EAAE,GAChB,EAAU,SAAS,MAAM;OAC3B;iBAEA,kBAAC,GAAD;QACE,IAAI,EAAE,UAAU,UAAU;QAC1B,MAAM;QACN,MAAK;OACN,CAAA;MACS,CAAA;KACL,CAAA;IAEb,EACF;IACA,MAAK;IACL,aAAY;IACZ,OAAO;IACP,KAAK;IACL,WAAU,MAAK;KACb,EAAc,EAAE,OAAO,KAAK;IAC9B;GACD,CAAA,GACA,CAAC,KACA,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KACE,SAAS,kBAAC,GAAD,CAAW,CAAA;KACpB,WAAU;KACV,gBAAgB;MACd,AAAI,KACF,EAA2B;KAE/B;KAEA,SAAS,CAAC;KACV,OAAM;IACP,GAHK,YAGL,GACD,kBAAC,GAAD;KAAS,OAAO;eACd,kBAAC,GAAD;MACE,MAAM;MACN,IAAI,EAAE,aAAa,QAAQ;MAC3B,eAAe;OAGb,AAFA,EAAc,EAAE,GAChB,EAAc,EAAI,GAClB,EAAU,SAAS,MAAM;MAC3B;gBAEA,kBAAC,GAAD;OACE,IAAI,EAAE,UAAU,UAAU;OAC1B,MAAM;OACN,MAAK;MACN,CAAA;KACS,CAAA;IACL,CAAA,CACN;KAEJ;MACL,kBAAC,OAAD,EAAA,UAAA;GACG,EAAkB,KAAK,GAAoB,MAAkB;IAC5D,IAAM,EAAE,eAAY,gBAAa,UAAO,aAAU;IAElD,OACE,kBAAC,GAAD;KAEE,IAAI;MACF,EAAiB,CAAU;MAC3B,EAAiB,OAAO,CAAK,CAAC;MAC9B;KACF,EAAE,KAAK,GAAG;KACV,OAAO;KACA;KACK;KACZ,SAAS;KACT,eAAe;MACb,EAAiB,CAAK;KACxB;KACA,WAAW,MAA2B;MACpC,AAAI,IACF,EAAsB,CAAK,IAE3B,EAA2B,CAAK;KAEpC;KACA,WAAW,IAAiB,aAAa;IAC1C,GArBM,OAAO,CAAK,CAqBlB;GAEL,CAAC;GACA,CAAC,KACA,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,UAAD;IACE,WAAU;IACV,eAAe,EAAiB,EAAI;cAEpC,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MAAK,WAAU;gBAAf;OAAsD;OACzC,EAAY;OAAO;MAC3B;;IACF,CAAA;GACC,CAAA,GAET,KACC,kBAAC,UAAD;IACE,WAAU;IACV,eAAe,EAAiB,EAAK;cAErC,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MAAK,WAAU;gBAAuC;KAEjD,CAAA;IACF,CAAA;GACC,CAAA,CAEV,EAAA,CAAA;GAEH,EAAkB,UAAU,KAC3B,kBAAC,OAAD;IAAK,WAAU;cAA2B;GAAmB,CAAA;EAE5D,EAAA,CAAA,CACF;KAGD,IAAW,QACV,IAGH,KACA,EAAkB,QAAO,MAAQ,EAAK,UAAU,EAAE,WAAW,IAEtD,EAAkB,QAAO,MAAQ,EAAK,UAAU,EAAE,GAAG,cAErD,6BAPA,OASR,CAAC,GAAgB,CAAiB,CAAC;CAepC,OAbE,IAEA,kBAAC,GAAD;EACc;EACE;EACJ;EACM;EACP;YAER;CACsB,CAAA,IAIzB,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACmB;EACJ;EACb,OAAO;EACP,UAAU,MAAyB,EAAe,CAAW;CAC9D,CAAA,GACD,kBAAC,GAAD;EAAU,WAAU;EAAkB,IAAI,CAAC;YACxC;CACO,CAAA,CACV,EAAA,CAAA;AAGR"}
+{"version":3,"file":"EnumFacetFilterUI.js","names":[],"sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI.tsx"],"sourcesContent":["import {\n  Checkbox,\n  Collapse,\n  FormControlLabel,\n  IconButton,\n  TextField,\n  Tooltip,\n} from '@mui/material'\nimport { ReactNode, useMemo, useRef, useState } from 'react'\nimport { FacetColumnResultValueCount } from '@sage-bionetworks/synapse-types'\nimport IconSvg from '../../../IconSvg/IconSvg'\nimport { FacetFilterHeader } from '../FacetFilterHeader'\nimport { EnumFacetFilterOption } from './EnumFacetFilterOption'\nimport EnumFacetFilterDropdown from './EnumFacetFilterDropdown'\nimport { SetOptional } from 'type-fest'\n\nconst MAX_ENUMERATION_VALUES_TO_SHOW = 5\n\nexport type RenderedFacetValue<TValue = string> = Omit<\n  SetOptional<FacetColumnResultValueCount, 'count'>,\n  'value'\n> & {\n  value: TValue\n  /* Text displayed for the option, and also used to filter in search */\n  displayText: string\n  /* Optional custom node to render in place of the plain-text label. */\n  renderedLabel?: ReactNode\n}\n\nexport type EnumFacetFilterUIProps<TValue = string> = {\n  /* The ID of the corresponding label, for testing and accessibility */\n  labelId?: string\n  /* The title of the faceted column to be displayed */\n  facetTitle: string\n  /* List of all facet values and information associated with each value */\n  facetValues: RenderedFacetValue<TValue>[]\n  /* Determines how the component is styled and whether the 'All' checkbox should be selected. */\n  filterIsActive: boolean // filterIsActive cannot be derived from facetValues[*].isSelected. See PORTALS-2680\n  /* The EnumFacetFilter can be rendered as a collapsible panel or a dropdown. Default is `'Collapsible'` */\n  containerAs?: 'Collapsible' | 'Dropdown'\n  /* If `containerAs` is a dropdown, the dropdown can be either an IconButton or a SelectBox. Default is `'Icon'` */\n  dropdownType?: 'Icon' | 'SelectBox'\n  /* If true, hides the button to collapse the panel (only shown if `containerAs` is 'Collapsible'). Default is false.*/\n  hideCollapsible?: boolean\n  /* Called when an unselected value is selected */\n  onAddValueToSelection: (value: TValue) => void\n  /* Called when a selected value is unselected */\n  onRemoveValueFromSelection: (value: TValue) => void\n  /* Called when all values should be unselected (e.g. 'All' is clicked) */\n  onRemoveAllFacetSelections: () => void\n  /* Called when an value is hovered over */\n  onHoverOverValue: (value: TValue) => void\n  /* Set to true if multiple values can be selected for the filter */\n  canMultiSelect: boolean\n  /* By default, all values are not shown (defaultShowAllValues = false) */\n  defaultShowAllValues?: boolean\n}\n\nfunction removeWhitespace(value: string): string {\n  return value.replace(/\\s/g, '').toLowerCase()\n}\n\nexport default function EnumFacetFilterUI<TValue = string>(\n  props: EnumFacetFilterUIProps<TValue>,\n) {\n  const {\n    labelId,\n    filterIsActive,\n    containerAs = 'Collapsible',\n    dropdownType = 'Icon',\n    hideCollapsible = false,\n    facetValues,\n    onAddValueToSelection,\n    onRemoveValueFromSelection,\n    facetTitle,\n    onRemoveAllFacetSelections,\n    onHoverOverValue,\n    canMultiSelect = true,\n    defaultShowAllValues = false,\n  } = props\n  const [toggleShowAll, setToggleShowAll] =\n    useState<boolean>(defaultShowAllValues)\n  const [isCollapsed, setIsCollapsed] = useState<boolean>(false)\n  const [showSearch, setShowSearch] = useState<boolean>(false)\n  const [searchTerm, setSearchText] = useState<string>('')\n\n  // e.g. we show a subset of facet values before hiding the rest behind \"Show More\"\n  // If the user has selected a value that would normally be hidden, always show all of the values\n  const valueIndexedGreaterThanMaxToShowIsSelected =\n    facetValues.length > MAX_ENUMERATION_VALUES_TO_SHOW &&\n    facetValues\n      .slice(MAX_ENUMERATION_VALUES_TO_SHOW)\n      .some(({ isSelected }) => isSelected)\n  const showAll =\n    containerAs === 'Dropdown' ||\n    toggleShowAll ||\n    showSearch ||\n    valueIndexedGreaterThanMaxToShowIsSelected\n\n  const facetValuesToShow = useMemo(() => {\n    if (showSearch && searchTerm.length > 0) {\n      return facetValues.filter(({ displayText }) => {\n        return (\n          displayText.toLowerCase().indexOf(searchTerm.trim().toLowerCase()) >\n          -1\n        )\n      })\n    }\n    if (showAll) {\n      return facetValues\n    }\n    return facetValues.slice(0, MAX_ENUMERATION_VALUES_TO_SHOW)\n  }, [facetValues, searchTerm, showSearch, showAll])\n\n  const textInput = useRef<HTMLInputElement>(null)\n\n  const isDropdown = containerAs === 'Dropdown'\n  const showMoreButtonIsVisible =\n    !showAll && facetValues.length > MAX_ENUMERATION_VALUES_TO_SHOW\n  const showLessButtonIsVisible =\n    showAll &&\n    !searchTerm &&\n    !valueIndexedGreaterThanMaxToShowIsSelected &&\n    facetValues.length > MAX_ENUMERATION_VALUES_TO_SHOW\n\n  const content = (\n    <div className={isDropdown ? 'EnumFacetFilter__dropdown_menu' : ''}>\n      <div className=\"EnumFacetFilter__checkboxContainer--forAll\">\n        <TextField // Search Filter Text\n          sx={{\n            display: showSearch ? undefined : 'none',\n          }}\n          size={'small'}\n          fullWidth={true}\n          slotProps={{\n            input: {\n              startAdornment: (\n                <Tooltip title={'Close search'}>\n                  <IconButton\n                    size={'small'}\n                    onClick={() => {\n                      setShowSearch(false)\n                      setToggleShowAll(defaultShowAllValues)\n                    }}\n                  >\n                    <IconSvg\n                      sx={{ fontSize: 'inherit' }}\n                      wrap={false}\n                      icon=\"arrowBack\"\n                    />\n                  </IconButton>\n                </Tooltip>\n              ),\n              endAdornment: searchTerm.length > 0 && (\n                <Tooltip title={'Clear'}>\n                  <IconButton\n                    size={'small'}\n                    onClick={() => {\n                      setSearchText('')\n                      textInput.current?.focus()\n                    }}\n                  >\n                    <IconSvg\n                      sx={{ fontSize: 'inherit' }}\n                      wrap={false}\n                      icon=\"close\"\n                    />\n                  </IconButton>\n                </Tooltip>\n              ),\n            },\n          }}\n          type=\"text\"\n          placeholder=\"Find values\"\n          value={searchTerm}\n          ref={textInput}\n          onChange={e => {\n            setSearchText(e.target.value)\n          }}\n        />\n        {!showSearch && (\n          <div className=\"EnumFacetFilter__checkAll\">\n            <FormControlLabel\n              control={<Checkbox />}\n              className=\"EnumFacetFilter__checkbox\"\n              onChange={() => {\n                if (filterIsActive) {\n                  onRemoveAllFacetSelections()\n                }\n              }}\n              key=\"select_all\"\n              checked={!filterIsActive}\n              label=\"All\"\n            />\n            <Tooltip title={'Search'}>\n              <IconButton\n                size={'small'}\n                sx={{ aspectRatio: '1 / 1' }}\n                onClick={() => {\n                  setSearchText('')\n                  setShowSearch(true)\n                  textInput.current?.focus()\n                }}\n              >\n                <IconSvg\n                  sx={{ fontSize: 'inherit' }}\n                  wrap={false}\n                  icon=\"search\"\n                />\n              </IconButton>\n            </Tooltip>\n          </div>\n        )}\n      </div>\n      <div>\n        {facetValuesToShow.map((facetValueAndCount, index: number) => {\n          const { isSelected, displayText, renderedLabel, value, count } =\n            facetValueAndCount\n\n          return (\n            <EnumFacetFilterOption\n              key={String(value)}\n              id={[\n                removeWhitespace(facetTitle),\n                removeWhitespace(String(value)),\n                index,\n              ].join('-')}\n              label={renderedLabel ?? displayText}\n              count={count}\n              isDropdown={isDropdown}\n              checked={isSelected}\n              onHover={() => {\n                onHoverOverValue(value)\n              }}\n              onChange={(newIsSelected: boolean) => {\n                if (newIsSelected) {\n                  onAddValueToSelection(value)\n                } else {\n                  onRemoveValueFromSelection(value)\n                }\n              }}\n              inputType={canMultiSelect ? 'checkbox' : 'radio'}\n            />\n          )\n        })}\n        {!isDropdown && (\n          <>\n            {showMoreButtonIsVisible && (\n              <button\n                className=\"EnumFacetFilter__showMoreFacetsBtn\"\n                onClick={() => setToggleShowAll(true)}\n              >\n                <div className=\"EnumFacetFilter__checkboxContainer\">\n                  <div className=\"EnumFacetFilter__showMoreFacetsLabel\">\n                    Show all ({facetValues.length})\n                  </div>\n                </div>\n              </button>\n            )}\n            {showLessButtonIsVisible && (\n              <button\n                className=\"EnumFacetFilter__showMoreFacetsBtn\"\n                onClick={() => setToggleShowAll(false)}\n              >\n                <div className=\"EnumFacetFilter__checkboxContainer\">\n                  <div className=\"EnumFacetFilter__showMoreFacetsLabel\">\n                    Show less\n                  </div>\n                </div>\n              </button>\n            )}\n          </>\n        )}\n        {facetValuesToShow.length <= 0 && (\n          <div className=\"EnumFacetFilter__noMatch\">No match found</div>\n        )}\n      </div>\n    </div>\n  )\n\n  const menuText = useMemo(() => {\n    if (!filterIsActive) {\n      return 'All'\n    } else if (\n      filterIsActive &&\n      facetValuesToShow.filter(item => item.isSelected).length === 1\n    ) {\n      return facetValuesToShow.filter(item => item.isSelected)[0].displayText\n    } else {\n      return 'Multiple Values Selected'\n    }\n  }, [filterIsActive, facetValuesToShow])\n\n  if (isDropdown) {\n    return (\n      <EnumFacetFilterDropdown\n        facetTitle={facetTitle}\n        dropdownType={dropdownType}\n        menuText={menuText}\n        filterIsActive={filterIsActive}\n        labelId={labelId}\n      >\n        {content}\n      </EnumFacetFilterDropdown>\n    )\n  } else {\n    return (\n      <>\n        <FacetFilterHeader\n          hideCollapsible={hideCollapsible}\n          isCollapsed={isCollapsed}\n          label={facetTitle}\n          onClick={(isCollapsed: boolean) => setIsCollapsed(isCollapsed)}\n        />\n        <Collapse className=\"EnumFacetFilter\" in={!isCollapsed}>\n          {content}\n        </Collapse>\n      </>\n    )\n  }\n}\n"],"mappings":"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"}

package/dist/features/curator/dashboard/components/CurationTaskCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CurationTaskCard.d.ts","sourceRoot":"","sources":["../../../../../src/features/curator/dashboard/components/CurationTaskCard.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAO7D,MAAM,MAAM,qBAAqB,GAAG;IAClC,UAAU,EAAE,UAAU,CAAA;CACvB,CAAA;AA+DD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAuDpE"}
+{"version":3,"file":"CurationTaskCard.d.ts","sourceRoot":"","sources":["../../../../../src/features/curator/dashboard/components/CurationTaskCard.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,UAAU,EAEX,MAAM,kCAAkC,CAAA;AASzC,MAAM,MAAM,qBAAqB,GAAG;IAClC,UAAU,EAAE,UAAU,CAAA;CACvB,CAAA;AA8ED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CA+FpE"}

package/dist/features/curator/dashboard/components/CurationTaskCard.js

@@ -1,17 +1,21 @@
 import { displayToast as e } from "../../../../components/ToastMessage/ToastMessage.js";
+import t from "../../../../synapse-queries/entity/useEntityBundle.js";
 import "../../../../components/index.js";
-import { OPEN_CURATOR_NO_PERMISSION_ON_SOURCE_ERROR_MESSAGE as t } from "../../../entity/metadata-task/utils/constants.js";
-import n from "../../../entity/metadata-task/hooks/useOpenCuratorButton.js";
-import r from "./CurationTaskCard.module.js";
-import i from "./NextStepButton.js";
-import a from "./shared.module.js";
-import o from "./UserOrTeamChip.js";
-import { Card as s, Chip as c, Divider as l, Typography as u } from "@mui/material";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import p from "classnames";
+import { OPEN_CURATOR_NO_PERMISSION_ON_SOURCE_ERROR_MESSAGE as n, TASK_STATUS_CONFIG as r } from "../../../entity/metadata-task/utils/constants.js";
+import i from "../../../entity/metadata-task/hooks/useOpenCuratorButton.js";
+import a from "../../../entity/metadata-task/components/CreateOrUpdateCurationTaskDialog.js";
+import o from "./CurationTaskCard.module.js";
+import s from "./NextStepButton.js";
+import c from "./shared.module.js";
+import l from "./UserOrTeamChip.js";
+import { useState as u } from "react";
+import { Box as d, Card as f, Chip as p, Divider as m, IconButton as h, Skeleton as g, Typography as _ } from "@mui/material";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import b from "classnames";
+import x from "@mui/icons-material/SettingsOutlined";
 //#region src/features/curator/dashboard/components/CurationTaskCard.tsx
-function m(t) {
-	let { onClick: r, isLoading: i, isPending: a, hasPermission: o } = n(t);
+function S(t) {
+	let { onClick: n, isLoading: r, isPending: a, hasPermission: o } = i(t);
 	if (!t.task || !t.status) throw Error("Task bundle is missing required properties");
 	switch (t.task?.taskProperties?.concreteType) {
 		case "org.sagebionetworks.repo.model.curation.metadata.FileBasedMetadataTaskProperties":
@@ -22,8 +26,9 @@ function m(t) {
 			principalIds: t.task.assigneePrincipalId ? [t.task.assigneePrincipalId] : [],
 			buttonText: "Open Curator",
 			taskType: "Curate Data",
-			onClickNextStep: r,
-			isLoading: i,
+			statusState: t.status.state,
+			onClickNextStep: n,
+			isLoading: r,
 			isPending: a,
 			hasPermission: o
 		};
@@ -36,6 +41,7 @@ function m(t) {
 		principalIds: t.task.assigneePrincipalId ? [t.task.assigneePrincipalId] : [],
 		buttonText: "Continue",
 		taskType: "",
+		statusState: t.status.state,
 		onClickNextStep: () => {
 			e("No action defined for this task type", "danger", { title: "Unexpected Error" });
 		},
@@ -44,9 +50,9 @@ function m(t) {
 		hasPermission: void 0
 	};
 }
-function h(e) {
+function C(e) {
 	let { label: t } = e;
-	return /* @__PURE__ */ d(c, {
+	return /* @__PURE__ */ v(p, {
 		sx: {
 			fontWeight: 600,
 			backgroundColor: "#BFD3ED"
@@ -54,38 +60,81 @@ function h(e) {
 		label: t
 	});
 }
-function g(n) {
-	let { taskBundle: c } = n, { title: g, description: _, taskId: v, taskType: y, principalIds: b, buttonText: x, onClickNextStep: S, hasPermission: C, isLoading: w, isPending: T } = m(c);
-	return /* @__PURE__ */ d(s, {
-		className: p(a.card, r.card),
-		children: /* @__PURE__ */ f("div", {
-			className: r.cardContent,
+function w(e) {
+	let { state: t } = e;
+	if (!t) return null;
+	let { label: n, backgroundColor: i } = r[t];
+	return /* @__PURE__ */ v(p, {
+		size: "small",
+		sx: {
+			fontWeight: 600,
+			backgroundColor: i
+		},
+		label: n
+	});
+}
+function T(r) {
+	let { taskBundle: i } = r, { title: p, description: T, taskId: E, taskType: D, principalIds: O, buttonText: k, statusState: A, onClickNextStep: j, hasPermission: M, isLoading: N, isPending: P } = S(i), [F, I] = u(!1), L = i.task?.projectId, { data: R } = t(L, void 0, {
+		includeEntity: !0,
+		includePermissions: !0
+	}), z = R?.permissions?.canEdit ?? !1;
+	function B() {
+		M ? j() : e(n, "danger");
+	}
+	return /* @__PURE__ */ y(f, {
+		className: b(c.card, o.card),
+		children: [/* @__PURE__ */ y("div", {
+			className: o.cardContent,
 			children: [
-				/* @__PURE__ */ f("div", {
-					className: r.mainContent,
+				/* @__PURE__ */ y("div", {
+					className: o.mainContent,
 					children: [
-						/* @__PURE__ */ f("div", {
-							className: r.titleChipContainer,
+						/* @__PURE__ */ y("div", {
+							className: o.titleChipContainer,
 							children: [
-								/* @__PURE__ */ d(u, {
+								/* @__PURE__ */ v(_, {
 									variant: "headline3",
-									children: g
+									children: p
 								}),
-								y && /* @__PURE__ */ d(h, { label: y }),
-								v && /* @__PURE__ */ d(h, { label: `TaskId ${v}` })
+								D && /* @__PURE__ */ v(C, { label: D }),
+								z && /* @__PURE__ */ v(h, {
+									onClick: () => I(!0),
+									"aria-label": "Task settings",
+									children: /* @__PURE__ */ v(x, {})
+								})
 							]
 						}),
-						/* @__PURE__ */ d(u, {
+						/* @__PURE__ */ y(d, {
+							sx: {
+								display: "flex",
+								gap: 4
+							},
+							children: [R?.entity?.name ? /* @__PURE__ */ v(_, {
+								variant: "body1",
+								children: R.entity.name
+							}) : /* @__PURE__ */ v(g, { width: 100 }), E && /* @__PURE__ */ y(_, {
+								variant: "body1",
+								children: ["Task ID: ", E]
+							})]
+						}),
+						T && /* @__PURE__ */ v(_, {
 							variant: "body1",
-							children: _
+							children: T
 						}),
-						/* @__PURE__ */ d("div", {
-							className: r.userChipContainer,
-							children: b.map((e) => /* @__PURE__ */ d(o, { principalId: e }, e))
+						/* @__PURE__ */ v("div", {
+							className: o.userChipContainer,
+							children: O.map((e) => /* @__PURE__ */ v(l, { principalId: e }, e))
 						})
 					]
 				}),
-				/* @__PURE__ */ d(l, {
+				/* @__PURE__ */ v(d, {
+					sx: {
+						display: "flex",
+						alignItems: "center"
+					},
+					children: /* @__PURE__ */ v(w, { state: A })
+				}),
+				/* @__PURE__ */ v(m, {
 					orientation: "vertical",
 					flexItem: !0,
 					sx: { display: {
@@ -93,20 +142,25 @@ function g(n) {
 						md: "block"
 					} }
 				}),
-				/* @__PURE__ */ d(i, {
-					className: r.cardButton,
-					buttonText: x,
-					onClick: C ? S : () => {
-						e(t, "danger");
-					},
-					disabled: w,
-					loading: T
+				/* @__PURE__ */ v(s, {
+					className: o.cardButton,
+					buttonText: k,
+					onClick: B,
+					disabled: N,
+					loading: P
 				})
 			]
-		})
+		}), /* @__PURE__ */ v(a, {
+			open: F,
+			onCancel: () => I(!1),
+			onSuccess: () => I(!1),
+			onDeleteSuccess: () => I(!1),
+			projectId: L ?? "",
+			task: i.task
+		}, String(F))]
 	});
 }
 //#endregion
-export { g as default };
+export { T as default };
 
 //# sourceMappingURL=CurationTaskCard.js.map

package/dist/features/curator/dashboard/components/CurationTaskCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CurationTaskCard.js","names":[],"sources":["../../../../../src/features/curator/dashboard/components/CurationTaskCard.tsx"],"sourcesContent":["import { displayToast } from '@/components'\nimport useOpenCuratorFromTaskButton from '@/features/entity/metadata-task/hooks/useOpenCuratorButton'\nimport { OPEN_CURATOR_NO_PERMISSION_ON_SOURCE_ERROR_MESSAGE } from '@/features/entity/metadata-task/utils/constants'\nimport { Card, Chip, Divider, Typography } from '@mui/material'\nimport { TaskBundle } from '@sage-bionetworks/synapse-client'\nimport classNames from 'classnames'\nimport styles from './CurationTaskCard.module.scss'\nimport NextStepButton from './NextStepButton'\nimport sharedStyles from './shared.module.scss'\nimport UserOrTeamChip from './UserOrTeamChip'\n\nexport type CurationTaskCardProps = {\n  taskBundle: TaskBundle\n}\n\nfunction useUiForTask(taskBundle: TaskBundle) {\n  const { onClick, isLoading, isPending, hasPermission } =\n    useOpenCuratorFromTaskButton(taskBundle)\n\n  if (!taskBundle.task || !taskBundle.status) {\n    throw new Error('Task bundle is missing required properties')\n  }\n\n  switch (taskBundle.task?.taskProperties?.concreteType) {\n    case 'org.sagebionetworks.repo.model.curation.metadata.FileBasedMetadataTaskProperties':\n    case 'org.sagebionetworks.repo.model.curation.metadata.RecordBasedMetadataTaskProperties':\n      return {\n        title: taskBundle.task.dataType,\n        description: taskBundle.task.instructions ?? '',\n        taskId: taskBundle.task.taskId,\n        principalIds: taskBundle.task.assigneePrincipalId\n          ? [taskBundle.task.assigneePrincipalId]\n          : [],\n        buttonText: 'Open Curator',\n        taskType: 'Curate Data',\n        onClickNextStep: onClick,\n        isLoading,\n        isPending,\n        hasPermission,\n      }\n    default: {\n      console.error(\n        'No UI implemented for task type: ' +\n          // @ts-expect-error - the switch should be exhaustive for known types\n          taskBundle.task?.taskProperties?.concreteType,\n      )\n    }\n  }\n\n  return {\n    title: taskBundle.task.dataType,\n    description: taskBundle.task.instructions ?? '',\n    taskId: taskBundle.task.taskId!,\n    principalIds: taskBundle.task.assigneePrincipalId\n      ? [taskBundle.task.assigneePrincipalId]\n      : [],\n    buttonText: 'Continue',\n    taskType: '',\n    onClickNextStep: () => {\n      displayToast('No action defined for this task type', 'danger', {\n        title: 'Unexpected Error',\n      })\n    },\n    isLoading: false,\n    isPending: false,\n    hasPermission: undefined,\n  }\n}\n\nfunction TaskTypeChip(props: { label: string }) {\n  const { label } = props\n  return (\n    <Chip sx={{ fontWeight: 600, backgroundColor: '#BFD3ED' }} label={label} />\n  )\n}\n\n/**\n * Card component for displaying a curation task on the curator dashboard. Shows relevant information about the task and includes a button to proceed to the next step in the workflow.\n */\nexport default function CurationTaskCard(props: CurationTaskCardProps) {\n  const { taskBundle } = props\n  const {\n    title,\n    description,\n    taskId,\n    taskType,\n    principalIds,\n    buttonText,\n    onClickNextStep,\n    hasPermission,\n    isLoading,\n    isPending,\n  } = useUiForTask(taskBundle)\n\n  return (\n    <Card className={classNames(sharedStyles.card, styles.card)}>\n      <div className={styles.cardContent}>\n        <div className={styles.mainContent}>\n          <div className={styles.titleChipContainer}>\n            <Typography variant=\"headline3\">{title}</Typography>\n            {taskType && <TaskTypeChip label={taskType} />}\n            {taskId && <TaskTypeChip label={`TaskId ${taskId}`} />}\n          </div>\n          <Typography variant=\"body1\">{description}</Typography>\n          <div className={styles.userChipContainer}>\n            {principalIds.map(principalId => (\n              <UserOrTeamChip key={principalId} principalId={principalId} />\n            ))}\n          </div>\n        </div>\n        <Divider\n          orientation=\"vertical\"\n          flexItem\n          sx={{ display: { xs: 'none', md: 'block' } }}\n        />\n        <NextStepButton\n          className={styles.cardButton}\n          buttonText={buttonText}\n          onClick={\n            hasPermission\n              ? onClickNextStep\n              : () => {\n                  displayToast(\n                    OPEN_CURATOR_NO_PERMISSION_ON_SOURCE_ERROR_MESSAGE,\n                    'danger',\n                  )\n                }\n          }\n          disabled={isLoading}\n          loading={isPending}\n        />\n      </div>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAeA,SAAS,EAAa,GAAwB;CAC5C,IAAM,EAAE,YAAS,cAAW,cAAW,qBACrC,EAA6B,CAAU;CAEzC,IAAI,CAAC,EAAW,QAAQ,CAAC,EAAW,QAClC,MAAU,MAAM,4CAA4C;CAG9D,QAAQ,EAAW,MAAM,gBAAgB,cAAzC;EACE,KAAK;EACL,KAAK,sFACH,OAAO;GACL,OAAO,EAAW,KAAK;GACvB,aAAa,EAAW,KAAK,gBAAgB;GAC7C,QAAQ,EAAW,KAAK;GACxB,cAAc,EAAW,KAAK,sBAC1B,CAAC,EAAW,KAAK,mBAAmB,IACpC,CAAC;GACL,YAAY;GACZ,UAAU;GACV,iBAAiB;GACjB;GACA;GACA;EACF;EACF,SACE,QAAQ,MACN,sCAEE,EAAW,MAAM,gBAAgB,YACrC;CAEJ;CAEA,OAAO;EACL,OAAO,EAAW,KAAK;EACvB,aAAa,EAAW,KAAK,gBAAgB;EAC7C,QAAQ,EAAW,KAAK;EACxB,cAAc,EAAW,KAAK,sBAC1B,CAAC,EAAW,KAAK,mBAAmB,IACpC,CAAC;EACL,YAAY;EACZ,UAAU;EACV,uBAAuB;GACrB,EAAa,wCAAwC,UAAU,EAC7D,OAAO,mBACT,CAAC;EACH;EACA,WAAW;EACX,WAAW;EACX,eAAe,KAAA;CACjB;AACF;AAEA,SAAS,EAAa,GAA0B;CAC9C,IAAM,EAAE,aAAU;CAClB,OACE,kBAAC,GAAD;EAAM,IAAI;GAAE,YAAY;GAAK,iBAAiB;EAAU;EAAU;CAAQ,CAAA;AAE9E;AAKA,SAAwB,EAAiB,GAA8B;CACrE,IAAM,EAAE,kBAAe,GACjB,EACJ,UACA,gBACA,WACA,aACA,iBACA,eACA,oBACA,kBACA,cACA,iBACE,EAAa,CAAU;CAE3B,OACE,kBAAC,GAAD;EAAM,WAAW,EAAW,EAAa,MAAM,EAAO,IAAI;YACxD,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB;IACE,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAvB;MACE,kBAAC,OAAD;OAAK,WAAW,EAAO;iBAAvB;QACE,kBAAC,GAAD;SAAY,SAAQ;mBAAa;QAAkB,CAAA;QAClD,KAAY,kBAAC,GAAD,EAAc,OAAO,EAAW,CAAA;QAC5C,KAAU,kBAAC,GAAD,EAAc,OAAO,UAAU,IAAW,CAAA;OAClD;;MACL,kBAAC,GAAD;OAAY,SAAQ;iBAAS;MAAwB,CAAA;MACrD,kBAAC,OAAD;OAAK,WAAW,EAAO;iBACpB,EAAa,KAAI,MAChB,kBAAC,GAAD,EAA+C,eAAc,GAAxC,CAAwC,CAC9D;MACE,CAAA;KACF;;IACL,kBAAC,GAAD;KACE,aAAY;KACZ,UAAA;KACA,IAAI,EAAE,SAAS;MAAE,IAAI;MAAQ,IAAI;KAAQ,EAAE;IAC5C,CAAA;IACD,kBAAC,GAAD;KACE,WAAW,EAAO;KACN;KACZ,SACE,IACI,UACM;MACJ,EACE,GACA,QACF;KACF;KAEN,UAAU;KACV,SAAS;IACV,CAAA;GACE;;CACD,CAAA;AAEV"}
+{"version":3,"file":"CurationTaskCard.js","names":[],"sources":["../../../../../src/features/curator/dashboard/components/CurationTaskCard.tsx"],"sourcesContent":["import { displayToast } from '@/components'\nimport CreateOrUpdateCurationTaskDialog from '@/features/entity/metadata-task/components/CreateOrUpdateCurationTaskDialog'\nimport { TASK_STATUS_CONFIG } from '@/features/entity/metadata-task/utils/constants'\nimport useOpenCuratorFromTaskButton from '@/features/entity/metadata-task/hooks/useOpenCuratorButton'\nimport { OPEN_CURATOR_NO_PERMISSION_ON_SOURCE_ERROR_MESSAGE } from '@/features/entity/metadata-task/utils/constants'\nimport useGetEntityBundle from '@/synapse-queries/entity/useEntityBundle'\nimport {\n  Box,\n  Card,\n  Chip,\n  Divider,\n  IconButton,\n  Skeleton,\n  Typography,\n} from '@mui/material'\nimport {\n  TaskBundle,\n  TaskStatusStateEnum,\n} from '@sage-bionetworks/synapse-client'\nimport classNames from 'classnames'\nimport styles from './CurationTaskCard.module.scss'\nimport NextStepButton from './NextStepButton'\nimport sharedStyles from './shared.module.scss'\nimport UserOrTeamChip from './UserOrTeamChip'\nimport SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined'\nimport { useState } from 'react'\n\nexport type CurationTaskCardProps = {\n  taskBundle: TaskBundle\n}\n\nfunction useUiForTask(taskBundle: TaskBundle) {\n  const { onClick, isLoading, isPending, hasPermission } =\n    useOpenCuratorFromTaskButton(taskBundle)\n\n  if (!taskBundle.task || !taskBundle.status) {\n    throw new Error('Task bundle is missing required properties')\n  }\n\n  switch (taskBundle.task?.taskProperties?.concreteType) {\n    case 'org.sagebionetworks.repo.model.curation.metadata.FileBasedMetadataTaskProperties':\n    case 'org.sagebionetworks.repo.model.curation.metadata.RecordBasedMetadataTaskProperties':\n      return {\n        title: taskBundle.task.dataType,\n        description: taskBundle.task.instructions ?? '',\n        taskId: taskBundle.task.taskId,\n        principalIds: taskBundle.task.assigneePrincipalId\n          ? [taskBundle.task.assigneePrincipalId]\n          : [],\n        buttonText: 'Open Curator',\n        taskType: 'Curate Data',\n        statusState: taskBundle.status.state,\n        onClickNextStep: onClick,\n        isLoading,\n        isPending,\n        hasPermission,\n      }\n    default: {\n      console.error(\n        'No UI implemented for task type: ' +\n          // @ts-expect-error - the switch should be exhaustive for known types\n          taskBundle.task?.taskProperties?.concreteType,\n      )\n    }\n  }\n\n  return {\n    title: taskBundle.task.dataType,\n    description: taskBundle.task.instructions ?? '',\n    taskId: taskBundle.task.taskId!,\n    principalIds: taskBundle.task.assigneePrincipalId\n      ? [taskBundle.task.assigneePrincipalId]\n      : [],\n    buttonText: 'Continue',\n    taskType: '',\n    statusState: taskBundle.status.state,\n    onClickNextStep: () => {\n      displayToast('No action defined for this task type', 'danger', {\n        title: 'Unexpected Error',\n      })\n    },\n    isLoading: false,\n    isPending: false,\n    hasPermission: undefined,\n  }\n}\n\nfunction TaskTypeChip(props: { label: string }) {\n  const { label } = props\n  return (\n    <Chip sx={{ fontWeight: 600, backgroundColor: '#BFD3ED' }} label={label} />\n  )\n}\n\nfunction TaskStatusChip(props: { state: TaskStatusStateEnum | undefined }) {\n  const { state } = props\n  if (!state) return null\n  const { label, backgroundColor } = TASK_STATUS_CONFIG[state]\n  return (\n    <Chip\n      size=\"small\"\n      sx={{ fontWeight: 600, backgroundColor }}\n      label={label}\n    />\n  )\n}\n\n/**\n * Card component for displaying a curation task on the curator dashboard. Shows relevant information about the task and includes a button to proceed to the next step in the workflow.\n */\nexport default function CurationTaskCard(props: CurationTaskCardProps) {\n  const { taskBundle } = props\n  const {\n    title,\n    description,\n    taskId,\n    taskType,\n    principalIds,\n    buttonText,\n    statusState,\n    onClickNextStep,\n    hasPermission: hasPermissionToOpenGrid,\n    isLoading,\n    isPending,\n  } = useUiForTask(taskBundle)\n\n  const [isSettingsOpen, setIsSettingsOpen] = useState(false)\n\n  const projectId = taskBundle.task?.projectId\n  const { data: bundle } = useGetEntityBundle(projectId, undefined, {\n    includeEntity: true,\n    includePermissions: true,\n  })\n  const canEdit = bundle?.permissions?.canEdit ?? false\n\n  function onClickAction() {\n    if (hasPermissionToOpenGrid) {\n      onClickNextStep()\n    } else {\n      displayToast(OPEN_CURATOR_NO_PERMISSION_ON_SOURCE_ERROR_MESSAGE, 'danger')\n    }\n  }\n\n  return (\n    <Card className={classNames(sharedStyles.card, styles.card)}>\n      <div className={styles.cardContent}>\n        <div className={styles.mainContent}>\n          <div className={styles.titleChipContainer}>\n            <Typography variant=\"headline3\">{title}</Typography>\n            {taskType && <TaskTypeChip label={taskType} />}\n            {canEdit && (\n              <IconButton\n                onClick={() => setIsSettingsOpen(true)}\n                aria-label=\"Task settings\"\n              >\n                <SettingsOutlinedIcon />\n              </IconButton>\n            )}\n          </div>\n          <Box sx={{ display: 'flex', gap: 4 }}>\n            {bundle?.entity?.name ? (\n              <Typography variant=\"body1\">{bundle.entity.name}</Typography>\n            ) : (\n              <Skeleton width={100} />\n            )}\n            {taskId && (\n              <Typography variant=\"body1\">Task ID: {taskId}</Typography>\n            )}\n          </Box>\n          {description && (\n            <Typography variant=\"body1\">{description}</Typography>\n          )}\n          <div className={styles.userChipContainer}>\n            {principalIds.map(principalId => (\n              <UserOrTeamChip key={principalId} principalId={principalId} />\n            ))}\n          </div>\n        </div>\n        <Box sx={{ display: 'flex', alignItems: 'center' }}>\n          <TaskStatusChip state={statusState} />\n        </Box>\n        <Divider\n          orientation=\"vertical\"\n          flexItem\n          sx={{ display: { xs: 'none', md: 'block' } }}\n        />\n        <NextStepButton\n          className={styles.cardButton}\n          buttonText={buttonText}\n          onClick={onClickAction}\n          disabled={isLoading}\n          loading={isPending}\n        />\n      </div>\n      <CreateOrUpdateCurationTaskDialog\n        key={String(isSettingsOpen)}\n        open={isSettingsOpen}\n        onCancel={() => setIsSettingsOpen(false)}\n        onSuccess={() => setIsSettingsOpen(false)}\n        onDeleteSuccess={() => setIsSettingsOpen(false)}\n        projectId={projectId ?? ''}\n        task={taskBundle.task}\n      />\n    </Card>\n  )\n}\n"],"mappings":"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"}

package/dist/features/entity/metadata-task/components/CreateOrUpdateCurationTaskDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateOrUpdateCurationTaskDialog.d.ts","sourceRoot":"","sources":["../../../../../src/features/entity/metadata-task/components/CreateOrUpdateCurationTaskDialog.tsx"],"names":[],"mappings":"AAmCA,OAAO,EACL,YAAY,EAKb,MAAM,kCAAkC,CAAA;AA0CzC,MAAM,MAAM,qCAAqC,GAAG;IAClD,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IACvC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB,CAAA;AAsBD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,gCAAgC,CACtD,KAAK,EAAE,qCAAqC,2CAmlB7C"}
+{"version":3,"file":"CreateOrUpdateCurationTaskDialog.d.ts","sourceRoot":"","sources":["../../../../../src/features/entity/metadata-task/components/CreateOrUpdateCurationTaskDialog.tsx"],"names":[],"mappings":"AAuCA,OAAO,EACL,YAAY,EAMb,MAAM,kCAAkC,CAAA;AA6CzC,MAAM,MAAM,qCAAqC,GAAG;IAClD,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IACvC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB,CAAA;AAsBD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,gCAAgC,CACtD,KAAK,EAAE,qCAAqC,2CAsoB7C"}