npm - synapse-react-client - Versions diffs - 4.0.2 → 4.0.3 - Mend

synapse-react-client 4.0.2 → 4.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (259) hide show

package/dist/components/FeaturedDataTabs/FacetPlotsCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FacetPlotsCard.js","sources":["../../../src/components/FeaturedDataTabs/FacetPlotsCard.tsx"],"sourcesContent":["import { useSynapseContext } from '@/utils/context/SynapseContext'\nimport {\n Box,\n Button,\n Divider,\n Paper,\n Skeleton,\n Typography,\n} from '@mui/material'\nimport {\n ColumnTypeEnum,\n FacetColumnResult,\n FacetColumnResultValueCount,\n FacetColumnResultValues,\n} from '@sage-bionetworks/synapse-types'\nimport { useSuspenseQuery } from '@tanstack/react-query'\nimport { times } from 'lodash-es'\nimport Plotly from 'plotly.js-basic-dist'\nimport { Fragment, Suspense, useMemo } from 'react'\nimport Plot from '../Plot/Plot'\nimport { useQueryVisualizationContext } from '../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../QueryWrapper/useGetQueryMetadata'\nimport { ShowMore } from '../row_renderers/utils'\nimport { SkeletonParagraph, SkeletonTable } from '../Skeleton'\nimport {\n extractPlotDataArray,\n getPlotStyle,\n PlotType,\n} from '../widgets/facet-nav/FacetNavPanel'\nimport { FacetPlotLegendTable } from '../widgets/facet-nav/FacetPlotLegendTable'\nimport { getFacets } from '../widgets/facet-nav/useFacetPlots'\nimport {\n FACET_PLOTS_CARD_CLASSNAME,\n FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME,\n FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME,\n FacetPlotsCardPlotContainer,\n FacetPlotsCardTitleContainer,\n} from './FacetPlotsCardGrid'\nimport { useMeasure } from '@react-hookz/web'\n\nexport type FacetPlotsCardProps = {\n title?: string\n description?: string\n facetsToPlot?: string[]\n detailsPagePath?: string\n plotType?: PlotType\n}\n\nconst layout: Partial<Plotly.Layout> = {\n showlegend: false,\n annotations: [],\n margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },\n yaxis: {\n visible: false,\n showgrid: false,\n },\n xaxis: {\n visible: false,\n showgrid: false,\n },\n}\n\nfunction LoadingCard(props: { numPlots: number }) {\n const { numPlots } = props\n return (\n <Paper className={FACET_PLOTS_CARD_CLASSNAME}>\n <FacetPlotsCardTitleContainer\n className={FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}\n >\n <Skeleton width={'60%'} height={'24px'} />\n\n <SkeletonParagraph numRows={5} />\n\n <Skeleton width={'40%'}>\n <Button variant={'contained'}>Explore</Button>\n </Skeleton>\n </FacetPlotsCardTitleContainer>\n {times(numPlots).map(index => (\n <FacetPlotsCardPlotContainer\n key={index}\n className={FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}\n sx={{\n py: 3,\n gridRow: `plot${index}`,\n }}\n >\n <Skeleton width={'100%'} height={'300px'} />\n <SkeletonTable numRows={4} numCols={2} />\n </FacetPlotsCardPlotContainer>\n ))}\n </Paper>\n )\n}\n\nfunction FacetPlotsCard(props: FacetPlotsCardProps) {\n const {\n title,\n description,\n facetsToPlot,\n detailsPagePath,\n plotType = 'PIE',\n } = props\n const { accessToken } = useSynapseContext()\n const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n const { getColumnDisplayName } = useQueryVisualizationContext()\n const [plotContainerMeasurements, plotContainerRef] = useMeasure()\n\n const facetDataArray = useMemo(() => {\n if (!facetsToPlot) {\n return []\n }\n\n return getFacets(queryMetadata, facetsToPlot)\n }, [facetsToPlot, queryMetadata])\n\n const currentLayout: Partial<Plotly.Layout> = useMemo(() => {\n return {\n ...layout,\n barmode: plotType === 'STACKED_HORIZONTAL_BAR' ? 'stack' : undefined,\n }\n }, [plotType])\n const maxPlotHeight = plotType === 'STACKED_HORIZONTAL_BAR' ? 50 : 150\n const { data: facetPlotDataArray } = useSuspenseQuery({\n queryKey: ['facetPlotDataArray', facetsToPlot, facetDataArray],\n queryFn: async () => {\n if (!facetsToPlot) {\n return []\n }\n\n const getColumnType = (\n facetToPlot: FacetColumnResult,\n ): ColumnTypeEnum \| undefined =>\n queryMetadata.columnModels!.find(\n columnModel => columnModel.name === facetToPlot.columnName,\n )?.columnType as ColumnTypeEnum\n\n return Promise.all(\n facetDataArray.map(async (item, index) => {\n const plotData = await extractPlotDataArray(\n item as FacetColumnResultValues,\n getColumnType(item),\n index + 1, //individual plot rgbIndex\n plotType,\n accessToken,\n )\n return plotData\n }),\n )\n },\n })\n\n const selectedFacetValue = useMemo(() => {\n if (!facetsToPlot) {\n return ''\n }\n\n // If we are showing a facet selection based card, then set the selectedFacetValue. For example, facet column \"study\" with value \"ROSMAP\"\n const selectedFacet: FacetColumnResultValueCount \| undefined = queryMetadata\n ?.facets!.map(item => {\n const facetValues: FacetColumnResultValueCount[] = (\n item as FacetColumnResultValues\n ).facetValues\n if (facetValues) {\n const filteredFacetValues: FacetColumnResultValueCount[] =\n facetValues.filter(facetValue => {\n return facetValue.isSelected\n })\n return filteredFacetValues.length > 0\n ? filteredFacetValues[0]\n : undefined\n } else {\n return undefined\n }\n })\n .filter(x => x !== undefined)[0]\n\n if (selectedFacet && selectedFacet.value) {\n return selectedFacet?.value\n }\n return ''\n }, [facetsToPlot, queryMetadata?.facets])\n\n const isShowingMultiplePlots = facetPlotDataArray.length > 1\n const cardTitle =\n title ??\n (isShowingMultiplePlots\n ? selectedFacetValue\n : getColumnDisplayName(facetDataArray[0].columnName))\n return (\n <Paper className={FACET_PLOTS_CARD_CLASSNAME} sx={{ overflow: 'hidden' }}>\n <FacetPlotsCardTitleContainer\n className={FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}\n >\n <Typography variant={'headline1'}>{cardTitle}</Typography>\n {description && (\n <Typography variant={'body1'} sx={{ color: 'grey.700', my: 2 }}>\n <ShowMore summary={description} maxCharacterCount={200} />\n </Typography>\n )}\n\n {detailsPagePath && selectedFacetValue && (\n <Box sx={{ my: 2 }}>\n <Button\n variant={'contained'}\n href={detailsPagePath}\n color={'secondary'}\n sx={theme => ({\n [theme.breakpoints.down('sm')]: { width: '100%' },\n })}\n >\n Explore {selectedFacetValue}\n </Button>\n </Box>\n )}\n </FacetPlotsCardTitleContainer>\n\n {/* create a plot for every facet to be plotted */}\n {facetPlotDataArray.map((plotData, index) => {\n return (\n <Fragment key={index}>\n <FacetPlotsCardPlotContainer\n className={FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}\n sx={{\n pt: index === 0 ? 5 : 0,\n gridRow: `plot${index}`,\n }}\n key={index}\n >\n {index != 0 && <Divider sx={{ mt: 2, mb: 4 }} />}\n <Box sx={{ minHeight: '130px' }}>\n <Box\n ref={plotContainerRef}\n sx={{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n }}\n >\n <Plot\n key={`${facetsToPlot![index]}-${\n plotContainerMeasurements?.width\n }`}\n layout={currentLayout}\n data={plotData?.data ?? []}\n style={getPlotStyle(\n plotContainerMeasurements?.width,\n plotType,\n maxPlotHeight,\n )}\n config={{ displayModeBar: false }}\n />\n </Box>\n <Box sx={{ mt: 4, width: '100%' }}>\n <FacetPlotLegendTable\n facetName={getColumnDisplayName(\n facetDataArray[index].columnName,\n )}\n labels={plotData?.labels}\n colors={plotData?.colors}\n isExpanded={false}\n linkToFullQuery={detailsPagePath}\n />\n </Box>\n </Box>\n </FacetPlotsCardPlotContainer>\n </Fragment>\n )\n })}\n </Paper>\n )\n}\n\nexport default function FacetPlotsCardWithSuspense(props: FacetPlotsCardProps) {\n return (\n <Suspense\n fallback={<LoadingCard numPlots={(props.facetsToPlot ?? []).length} />}\n >\n <FacetPlotsCard {...props} />\n </Suspense>\n )\n}\n"],"names":["layout","LoadingCard","props","numPlots","jsxs","Paper","FACET_PLOTS_CARD_CLASSNAME","FacetPlotsCardTitleContainer","FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME","jsx","Skeleton","SkeletonParagraph","Button","times","index","FacetPlotsCardPlotContainer","FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME","SkeletonTable","FacetPlotsCard","title","description","facetsToPlot","detailsPagePath","plotType","accessToken","useSynapseContext","queryMetadata","useSuspenseGetQueryMetadata","getColumnDisplayName","useQueryVisualizationContext","plotContainerMeasurements","plotContainerRef","useMeasure","facetDataArray","useMemo","getFacets","currentLayout","maxPlotHeight","facetPlotDataArray","useSuspenseQuery","getColumnType","facetToPlot","columnModel","item","extractPlotDataArray","selectedFacetValue","selectedFacet","facetValues","filteredFacetValues","facetValue","x","isShowingMultiplePlots","cardTitle","Typography","ShowMore","Box","theme","plotData","Fragment","Divider","Plot","getPlotStyle","FacetPlotLegendTable","FacetPlotsCardWithSuspense","Suspense"],"mappings":"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"}
1	+ {"version":3,"file":"FacetPlotsCard.js","sources":["../../../src/components/FeaturedDataTabs/FacetPlotsCard.tsx"],"sourcesContent":["import { useSynapseContext } from '@/utils/context/SynapseContext'\nimport {\n Box,\n Button,\n Divider,\n Paper,\n Skeleton,\n Typography,\n} from '@mui/material'\nimport {\n ColumnTypeEnum,\n FacetColumnResult,\n FacetColumnResultValueCount,\n FacetColumnResultValues,\n} from '@sage-bionetworks/synapse-types'\nimport { useSuspenseQuery } from '@tanstack/react-query'\nimport { times } from 'lodash-es'\nimport Plotly from 'plotly.js-basic-dist'\nimport { Fragment, Suspense, useMemo } from 'react'\nimport Plot from '../Plot/Plot'\nimport { useQueryVisualizationContext } from '../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../QueryWrapper/useGetQueryMetadata'\nimport { ShowMore } from '../row_renderers/utils'\nimport { SkeletonParagraph, SkeletonTable } from '../Skeleton'\nimport {\n extractPlotDataArray,\n getPlotStyle,\n PlotType,\n} from '../widgets/facet-nav/FacetNavPanel'\nimport { FacetPlotLegendTable } from '../widgets/facet-nav/FacetPlotLegendTable'\nimport { getFacets } from '../widgets/facet-nav/useFacetPlots'\nimport {\n FACET_PLOTS_CARD_CLASSNAME,\n FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME,\n FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME,\n FacetPlotsCardPlotContainer,\n FacetPlotsCardTitleContainer,\n} from './FacetPlotsCardGrid'\nimport { useMeasure } from '@react-hookz/web'\n\nexport type FacetPlotsCardProps = {\n title?: string\n description?: string\n facetsToPlot?: string[]\n detailsPagePath?: string\n plotType?: PlotType\n}\n\nconst layout: Partial<Plotly.Layout> = {\n showlegend: false,\n annotations: [],\n margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },\n yaxis: {\n visible: false,\n showgrid: false,\n },\n xaxis: {\n visible: false,\n showgrid: false,\n },\n}\n\nfunction LoadingCard(props: { numPlots: number }) {\n const { numPlots } = props\n return (\n <Paper className={FACET_PLOTS_CARD_CLASSNAME}>\n <FacetPlotsCardTitleContainer\n className={FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}\n >\n <Skeleton width={'60%'} height={'24px'} />\n\n <SkeletonParagraph numRows={5} />\n\n <Skeleton width={'40%'}>\n <Button variant={'contained'}>Explore</Button>\n </Skeleton>\n </FacetPlotsCardTitleContainer>\n {times(numPlots).map(index => (\n <FacetPlotsCardPlotContainer\n key={index}\n className={FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}\n sx={{\n py: 3,\n gridRow: `plot${index}`,\n }}\n >\n <Skeleton width={'100%'} height={'300px'} />\n <SkeletonTable numRows={4} numCols={2} />\n </FacetPlotsCardPlotContainer>\n ))}\n </Paper>\n )\n}\n\nfunction FacetPlotsCard(props: FacetPlotsCardProps) {\n const {\n title,\n description,\n facetsToPlot,\n detailsPagePath,\n plotType = 'PIE',\n } = props\n const { accessToken } = useSynapseContext()\n const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n const { getColumnDisplayName } = useQueryVisualizationContext()\n const [plotContainerMeasurements, plotContainerRef] = useMeasure()\n\n const facetDataArray = useMemo(() => {\n if (!facetsToPlot) {\n return []\n }\n\n return getFacets(queryMetadata, facetsToPlot)\n }, [facetsToPlot, queryMetadata])\n\n const currentLayout: Partial<Plotly.Layout> = useMemo(() => {\n return {\n ...layout,\n barmode: plotType === 'STACKED_HORIZONTAL_BAR' ? 'stack' : undefined,\n }\n }, [plotType])\n const maxPlotHeight = plotType === 'STACKED_HORIZONTAL_BAR' ? 50 : 150\n const { data: facetPlotDataArray } = useSuspenseQuery({\n queryKey: ['facetPlotDataArray', facetsToPlot, facetDataArray],\n queryFn: async () => {\n if (!facetsToPlot) {\n return []\n }\n\n const getColumnType = (\n facetToPlot: FacetColumnResult,\n ): ColumnTypeEnum \| undefined =>\n queryMetadata.columnModels!.find(\n columnModel => columnModel.name === facetToPlot.columnName,\n )?.columnType as ColumnTypeEnum\n\n return Promise.all(\n facetDataArray.map(async (item, index) => {\n const plotData = await extractPlotDataArray(\n item as FacetColumnResultValues,\n getColumnType(item),\n index + 1, //individual plot rgbIndex\n plotType,\n accessToken,\n )\n return plotData\n }),\n )\n },\n })\n\n const selectedFacetValue = useMemo(() => {\n if (!facetsToPlot) {\n return ''\n }\n\n // If we are showing a facet selection based card, then set the selectedFacetValue. For example, facet column \"study\" with value \"ROSMAP\"\n const selectedFacet: FacetColumnResultValueCount \| undefined = queryMetadata\n ?.facets!.map(item => {\n const facetValues: FacetColumnResultValueCount[] = (\n item as FacetColumnResultValues\n ).facetValues\n if (facetValues) {\n const filteredFacetValues: FacetColumnResultValueCount[] =\n facetValues.filter(facetValue => {\n return facetValue.isSelected\n })\n return filteredFacetValues.length > 0\n ? filteredFacetValues[0]\n : undefined\n } else {\n return undefined\n }\n })\n .filter(x => x !== undefined)[0]\n\n if (selectedFacet && selectedFacet.value) {\n return selectedFacet?.value\n }\n return ''\n }, [facetsToPlot, queryMetadata?.facets])\n\n const isShowingMultiplePlots = facetPlotDataArray.length > 1\n const cardTitle =\n title ??\n (isShowingMultiplePlots\n ? selectedFacetValue\n : getColumnDisplayName(facetDataArray[0].columnName))\n return (\n <Paper className={FACET_PLOTS_CARD_CLASSNAME} sx={{ overflow: 'hidden' }}>\n <FacetPlotsCardTitleContainer\n className={FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME}\n >\n <Typography variant={'headline1'}>{cardTitle}</Typography>\n {description && (\n <Typography variant={'body1'} sx={{ color: 'grey.700', my: 2 }}>\n <ShowMore summary={description} maxCharacterCount={200} />\n </Typography>\n )}\n\n {detailsPagePath && selectedFacetValue && (\n <Box sx={{ my: 2 }}>\n <Button\n variant={'contained'}\n href={detailsPagePath}\n color={'secondary'}\n sx={theme => ({\n [theme.breakpoints.down('sm')]: { width: '100%' },\n })}\n >\n Explore {selectedFacetValue}\n </Button>\n </Box>\n )}\n </FacetPlotsCardTitleContainer>\n\n {/* create a plot for every facet to be plotted */}\n {facetPlotDataArray.map((plotData, index) => {\n return (\n <Fragment key={index}>\n <FacetPlotsCardPlotContainer\n className={FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME}\n sx={{\n pt: index === 0 ? 5 : 0,\n gridRow: `plot${index}`,\n }}\n key={index}\n >\n {index != 0 && <Divider sx={{ mt: 2, mb: 4 }} />}\n <Box sx={{ minHeight: '130px' }}>\n <Box\n ref={plotContainerRef}\n sx={{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n }}\n >\n <Plot\n key={`${facetsToPlot![index]}-${\n plotContainerMeasurements?.width\n }`}\n layout={currentLayout}\n data={plotData?.data ?? []}\n style={getPlotStyle(\n plotContainerMeasurements?.width,\n plotType,\n maxPlotHeight,\n )}\n config={{ displayModeBar: false }}\n />\n </Box>\n <Box sx={{ mt: 4, width: '100%' }}>\n <FacetPlotLegendTable\n facetName={getColumnDisplayName(\n facetDataArray[index].columnName,\n )}\n labels={plotData?.labels}\n colors={plotData?.colors}\n isExpanded={false}\n linkToFullQuery={detailsPagePath}\n />\n </Box>\n </Box>\n </FacetPlotsCardPlotContainer>\n </Fragment>\n )\n })}\n </Paper>\n )\n}\n\nexport default function FacetPlotsCardWithSuspense(props: FacetPlotsCardProps) {\n return (\n <Suspense\n fallback={<LoadingCard numPlots={(props.facetsToPlot ?? []).length} />}\n >\n <FacetPlotsCard {...props} />\n </Suspense>\n )\n}\n"],"names":["layout","LoadingCard","props","numPlots","jsxs","Paper","FACET_PLOTS_CARD_CLASSNAME","FacetPlotsCardTitleContainer","FACET_PLOTS_CARD_TITLE_CONTAINER_CLASSNAME","jsx","Skeleton","SkeletonParagraph","Button","times","index","FacetPlotsCardPlotContainer","FACET_PLOTS_CARD_PLOT_CONTAINER_CLASSNAME","SkeletonTable","FacetPlotsCard","title","description","facetsToPlot","detailsPagePath","plotType","accessToken","useSynapseContext","queryMetadata","useSuspenseGetQueryMetadata","getColumnDisplayName","useQueryVisualizationContext","plotContainerMeasurements","plotContainerRef","useMeasure","facetDataArray","useMemo","getFacets","currentLayout","maxPlotHeight","facetPlotDataArray","useSuspenseQuery","getColumnType","facetToPlot","columnModel","item","extractPlotDataArray","selectedFacetValue","selectedFacet","facetValues","filteredFacetValues","facetValue","x","isShowingMultiplePlots","cardTitle","Typography","ShowMore","Box","theme","plotData","Fragment","Divider","Plot","getPlotStyle","FacetPlotLegendTable","FacetPlotsCardWithSuspense","Suspense"],"mappings":"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"}

package/dist/components/FeaturedDataTabs/FeaturedDataTabs.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsxs as r, jsx as e, Fragment as l } from "react/jsx-runtime";
-import { useState as m } from "react";
+import { useState as c } from "react";
 import b from "./FeaturedDataPlots.js";
 import "../../utils/functions/EntityTypeUtils.js";
 import "../../assets/ArcusBioIcon.svg.js";
@@ -7,25 +7,28 @@ import "@mui/material/SvgIcon";
 import "../../assets/icons/AccessPending.svg.js";
 import "../../assets/icons/AccessPendingCloud.svg.js";
 import "../../assets/icons/FileWithShield.svg.js";
+import "../../assets/icons/MultiFile.svg.js";
+import "../../assets/icons/UnpackagableFile.svg.js";
 import "../../assets/icons/bioChemicalPhysical.svg.js";
 import "../../assets/icons/computationalTool.svg.js";
 import "../../assets/icons/dataReuse.svg.js";
 import { Box as x, Button as h, Paper as u } from "@mui/material";
 import "../../assets/icons/inSilicoModel.svg.js";
 import "../../assets/icons/modelSystem.svg.js";
+import "../../assets/mui_components/PackagableFile.svg.js";
 import "../../assets/icons/spatialProfiling.svg.js";
 import "@mui/icons-material";
 import _ from "../Icon/Icon.js";
 import T from "../SynapseTable/NoContentAvailable.js";
-function R(p) {
-  const [o, d] = m(0), { configs: s, rgbIndex: c, sql: i } = p, t = s[o];
+function E(p) {
+  const [o, d] = c(0), { configs: i, rgbIndex: m, sql: s } = p, t = i[o];
   return /* @__PURE__ */ r(
     x,
     {
       className: "FeaturedDataTabs",
       sx: { padding: { xs: "40px", lg: "80px" } },
       children: [
-        s.length > 1 && /* @__PURE__ */ e("div", { className: "FeaturedDataTabs__tabs", children: s.map((a, n) => /* @__PURE__ */ e(
+        i.length > 1 && /* @__PURE__ */ e("div", { className: "FeaturedDataTabs__tabs", children: i.map((a, n) => /* @__PURE__ */ e(
           "div",
           {
             className: `FeaturedDataTabs__tabs__tab ${n === o ? "FeaturedDataTabs__tabs__tab__selected" : ""}`,
@@ -47,12 +50,12 @@ function R(p) {
           /* @__PURE__ */ e(
             b,
             {
-              sql: i,
-              rgbIndex: c,
+              sql: s,
+              rgbIndex: m,
               explorePagePath: t.explorePagePath,
               ...t.plotsConfig
             },
-            `${i}-${o}`
+            `${s}-${o}`
           ),
           t.explorePagePath && /* @__PURE__ */ e("div", { className: "FeaturedDataTabs__explore-all", children: /* @__PURE__ */ r(
             h,
@@ -78,6 +81,6 @@ function R(p) {
   );
 }
 export {
-  R as default
+  E as default
 };
 //# sourceMappingURL=FeaturedDataTabs.js.map

package/dist/components/FeaturedDataTabs/FeaturedDataTabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FeaturedDataTabs.js","sources":["../../../src/components/FeaturedDataTabs/FeaturedDataTabs.tsx"],"sourcesContent":["import { useState } from 'react'\nimport FeaturedDataPlots, { FeaturedDataPlotsProps } from './FeaturedDataPlots'\nimport { Icon } from '../row_renderers/utils'\nimport NoContentAvailable from '../SynapseTable/NoContentAvailable'\nimport { Box, Button } from '@mui/material'\nimport { Paper } from '@mui/material'\n\nexport type FeatureDataTabProps = {\n title: string // type of data being shown, used for the tab title and explore all button\n icon?: string\n exploreObjectType?: string\n explorePagePath?: string\n plotsConfig: FeaturedDataPlotsProps\n}\n\nexport type FeaturedDataTabsProps = {\n configs: FeatureDataTabProps[]\n rgbIndex: number\n sql: string\n}\n\nfunction FeaturedDataTabs(props: FeaturedDataTabsProps) {\n const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0)\n const { configs, rgbIndex, sql } = props\n // explore all data button\n const selectedTabProps: FeatureDataTabProps = configs[selectedTabIndex]\n return (\n <Box\n className=\"FeaturedDataTabs\"\n sx={{ padding: { xs: '40px', lg: '80px' } }}\n >\n {/* tabs /}\n {configs.length > 1 && (\n <div className=\"FeaturedDataTabs__tabs\">\n {configs.map((config, index) => {\n const isSelectedTabIndex: boolean = index === selectedTabIndex\n return (\n <div\n className={`FeaturedDataTabs__tabs__tab ${\n isSelectedTabIndex\n ? 'FeaturedDataTabs__tabs__tab__selected'\n : ''\n }`}\n key={config.title}\n >\n <button\n className=\"SRC-centerAndJustifyContent\"\n onClick={() => setSelectedTabIndex(index)}\n >\n {config.icon && <Icon type={config.icon}></Icon>}\n <span>{config.title}</span>\n </button>\n </div>\n )\n })}\n </div>\n )}\n {/ tab content */}\n {selectedTabProps && (\n <>\n {selectedTabProps.plotsConfig.configs.length > 0 ? (\n <>\n <FeaturedDataPlots\n key={`${sql}-${selectedTabIndex}`}\n sql={sql}\n rgbIndex={rgbIndex}\n explorePagePath={selectedTabProps.explorePagePath}\n {...selectedTabProps.plotsConfig}\n />\n {selectedTabProps.explorePagePath && (\n <div className=\"FeaturedDataTabs__explore-all\">\n <Button\n variant=\"contained\"\n color=\"secondary\"\n href={selectedTabProps.explorePagePath}\n sx={theme => ({\n mb: '40px',\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n },\n })}\n >\n View All {selectedTabProps.exploreObjectType}\n </Button>\n </div>\n )}\n </>\n ) : (\n <Paper sx={{ p: 2 }}>\n <NoContentAvailable />\n </Paper>\n )}\n </>\n )}\n </Box>\n )\n}\n\nexport default FeaturedDataTabs\n"],"names":["FeaturedDataTabs","props","selectedTabIndex","setSelectedTabIndex","useState","configs","rgbIndex","sql","selectedTabProps","jsxs","Box","jsx","config","index","Icon","Fragment","FeaturedDataPlots","Button","theme","Paper","NoContentAvailable"],"mappings":"~~;;;;;;;;;;;;;;;;;;;~~AAqBA,SAASA,EAAiBC,GAA8B;AACtD,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAiB,CAAC,GAC5D,EAAE,SAAAC,GAAS,UAAAC,GAAU,KAAAC,EAAA,IAAQN,GAE7BO,IAAwCH,EAAQH,CAAgB;AACtE,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,IAAI,EAAE,SAAS,EAAE,IAAI,QAAQ,IAAI,SAAO;AAAA,MAGvC,UAAA;AAAA,QAAAL,EAAQ,SAAS,KAChB,gBAAAM,EAAC,OAAA,EAAI,WAAU,0BACZ,UAAAN,EAAQ,IAAI,CAACO,GAAQC,MAGlB,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,+BAHqBE,MAAUX,IAKpC,0CACA,EACN;AAAA,YAGA,UAAA,gBAAAO;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,MAAMN,EAAoBU,CAAK;AAAA,gBAEvC,UAAA;AAAA,kBAAAD,EAAO,QAAQ,gBAAAD,EAACG,GAAA,EAAK,MAAMF,EAAO,MAAM;AAAA,kBACzC,gBAAAD,EAAC,QAAA,EAAM,UAAAC,EAAO,MAAA,CAAM;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACtB;AAAA,UARKA,EAAO;AAAA,QAAA,CAWjB,EAAA,CACH;AAAA,QAGDJ,KACC,gBAAAG,EAAAI,GAAA,EACG,UAAAP,EAAiB,YAAY,QAAQ,SAAS,IAC7C,gBAAAC,EAAAM,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAJ;AAAA,YAACK;AAAA,YAAA;AAAA,cAEC,KAAAT;AAAA,cACA,UAAAD;AAAA,cACA,iBAAiBE,EAAiB;AAAA,cACjC,GAAGA,EAAiB;AAAA,YAAA;AAAA,YAJhB,GAAGD,CAAG,IAAIL,CAAgB;AAAA,UAAA;AAAA,UAMhCM,EAAiB,mBAChB,gBAAAG,EAAC,OAAA,EAAI,WAAU,iCACb,UAAA,gBAAAF;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,MAAMT,EAAiB;AAAA,cACvB,IAAI,CAAAU,OAAU;AAAA,gBACZ,IAAI;AAAA,gBACJ,CAACA,EAAM,YAAY,KAAK,IAAI,CAAC,GAAG;AAAA,kBAC9B,OAAO;AAAA,gBAAA;AAAA,cACT;AAAA,cAEH,UAAA;AAAA,gBAAA;AAAA,gBACWV,EAAiB;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA,EAC7B,CACF;AAAA,QAAA,EAAA,CAEJ,IAEA,gBAAAG,EAACQ,GAAA,EAAM,IAAI,EAAE,GAAG,EAAA,GACd,UAAA,gBAAAR,EAACS,GAAA,CAAA,CAAmB,EAAA,CACtB,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
1	+ {"version":3,"file":"FeaturedDataTabs.js","sources":["../../../src/components/FeaturedDataTabs/FeaturedDataTabs.tsx"],"sourcesContent":["import { useState } from 'react'\nimport FeaturedDataPlots, { FeaturedDataPlotsProps } from './FeaturedDataPlots'\nimport { Icon } from '../row_renderers/utils'\nimport NoContentAvailable from '../SynapseTable/NoContentAvailable'\nimport { Box, Button } from '@mui/material'\nimport { Paper } from '@mui/material'\n\nexport type FeatureDataTabProps = {\n title: string // type of data being shown, used for the tab title and explore all button\n icon?: string\n exploreObjectType?: string\n explorePagePath?: string\n plotsConfig: FeaturedDataPlotsProps\n}\n\nexport type FeaturedDataTabsProps = {\n configs: FeatureDataTabProps[]\n rgbIndex: number\n sql: string\n}\n\nfunction FeaturedDataTabs(props: FeaturedDataTabsProps) {\n const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0)\n const { configs, rgbIndex, sql } = props\n // explore all data button\n const selectedTabProps: FeatureDataTabProps = configs[selectedTabIndex]\n return (\n <Box\n className=\"FeaturedDataTabs\"\n sx={{ padding: { xs: '40px', lg: '80px' } }}\n >\n {/* tabs /}\n {configs.length > 1 && (\n <div className=\"FeaturedDataTabs__tabs\">\n {configs.map((config, index) => {\n const isSelectedTabIndex: boolean = index === selectedTabIndex\n return (\n <div\n className={`FeaturedDataTabs__tabs__tab ${\n isSelectedTabIndex\n ? 'FeaturedDataTabs__tabs__tab__selected'\n : ''\n }`}\n key={config.title}\n >\n <button\n className=\"SRC-centerAndJustifyContent\"\n onClick={() => setSelectedTabIndex(index)}\n >\n {config.icon && <Icon type={config.icon}></Icon>}\n <span>{config.title}</span>\n </button>\n </div>\n )\n })}\n </div>\n )}\n {/ tab content */}\n {selectedTabProps && (\n <>\n {selectedTabProps.plotsConfig.configs.length > 0 ? (\n <>\n <FeaturedDataPlots\n key={`${sql}-${selectedTabIndex}`}\n sql={sql}\n rgbIndex={rgbIndex}\n explorePagePath={selectedTabProps.explorePagePath}\n {...selectedTabProps.plotsConfig}\n />\n {selectedTabProps.explorePagePath && (\n <div className=\"FeaturedDataTabs__explore-all\">\n <Button\n variant=\"contained\"\n color=\"secondary\"\n href={selectedTabProps.explorePagePath}\n sx={theme => ({\n mb: '40px',\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n },\n })}\n >\n View All {selectedTabProps.exploreObjectType}\n </Button>\n </div>\n )}\n </>\n ) : (\n <Paper sx={{ p: 2 }}>\n <NoContentAvailable />\n </Paper>\n )}\n </>\n )}\n </Box>\n )\n}\n\nexport default FeaturedDataTabs\n"],"names":["FeaturedDataTabs","props","selectedTabIndex","setSelectedTabIndex","useState","configs","rgbIndex","sql","selectedTabProps","jsxs","Box","jsx","config","index","Icon","Fragment","FeaturedDataPlots","Button","theme","Paper","NoContentAvailable"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqBA,SAASA,EAAiBC,GAA8B;AACtD,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAiB,CAAC,GAC5D,EAAE,SAAAC,GAAS,UAAAC,GAAU,KAAAC,EAAA,IAAQN,GAE7BO,IAAwCH,EAAQH,CAAgB;AACtE,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,IAAI,EAAE,SAAS,EAAE,IAAI,QAAQ,IAAI,SAAO;AAAA,MAGvC,UAAA;AAAA,QAAAL,EAAQ,SAAS,KAChB,gBAAAM,EAAC,OAAA,EAAI,WAAU,0BACZ,UAAAN,EAAQ,IAAI,CAACO,GAAQC,MAGlB,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,+BAHqBE,MAAUX,IAKpC,0CACA,EACN;AAAA,YAGA,UAAA,gBAAAO;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,MAAMN,EAAoBU,CAAK;AAAA,gBAEvC,UAAA;AAAA,kBAAAD,EAAO,QAAQ,gBAAAD,EAACG,GAAA,EAAK,MAAMF,EAAO,MAAM;AAAA,kBACzC,gBAAAD,EAAC,QAAA,EAAM,UAAAC,EAAO,MAAA,CAAM;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACtB;AAAA,UARKA,EAAO;AAAA,QAAA,CAWjB,EAAA,CACH;AAAA,QAGDJ,KACC,gBAAAG,EAAAI,GAAA,EACG,UAAAP,EAAiB,YAAY,QAAQ,SAAS,IAC7C,gBAAAC,EAAAM,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAJ;AAAA,YAACK;AAAA,YAAA;AAAA,cAEC,KAAAT;AAAA,cACA,UAAAD;AAAA,cACA,iBAAiBE,EAAiB;AAAA,cACjC,GAAGA,EAAiB;AAAA,YAAA;AAAA,YAJhB,GAAGD,CAAG,IAAIL,CAAgB;AAAA,UAAA;AAAA,UAMhCM,EAAiB,mBAChB,gBAAAG,EAAC,OAAA,EAAI,WAAU,iCACb,UAAA,gBAAAF;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,MAAMT,EAAiB;AAAA,cACvB,IAAI,CAAAU,OAAU;AAAA,gBACZ,IAAI;AAAA,gBACJ,CAACA,EAAM,YAAY,KAAK,IAAI,CAAC,GAAG;AAAA,kBAC9B,OAAO;AAAA,gBAAA;AAAA,cACT;AAAA,cAEH,UAAA;AAAA,gBAAA;AAAA,gBACWV,EAAiB;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA,EAC7B,CACF;AAAA,QAAA,EAAA,CAEJ,IAEA,gBAAAG,EAACQ,GAAA,EAAM,IAAI,EAAE,GAAG,EAAA,GACd,UAAA,gBAAAR,EAACS,GAAA,CAAA,CAAmB,EAAA,CACtB,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/FullWidthAlert/FullWidthAlert.d.ts CHANGED Viewed

@@ -28,8 +28,8 @@ export interface FullWidthAlertProps {
     globalAlertSx?: AlertProps['sx'];
 }
 /**
- * Nav bar item, displayed when files have been added to the Download Cart.
- * This must be configured with the URL of a page dedicated to showing the Download Cart.
+ * Nav bar item, displayed when files have been added to the Download List.
+ * This must be configured with the URL of a page dedicated to showing the Download List.
  */
 declare function FullWidthAlert(props: FullWidthAlertProps): import("react/jsx-runtime").JSX.Element;
 export default FullWidthAlert;

package/dist/components/FullWidthAlert/FullWidthAlert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FullWidthAlert.js","sources":["../../../src/components/FullWidthAlert/FullWidthAlert.tsx"],"sourcesContent":["import { spreadSx } from '@/theme/spreadSx'\nimport {\n Alert,\n AlertProps,\n AlertTitle,\n Box,\n Button,\n ButtonProps,\n Snackbar,\n Stack,\n Tooltip,\n} from '@mui/material'\nimport { MouseEventHandler, ReactNode, useEffect } from 'react'\nimport './FullWidthAlert.scss'\n\nexport type AlertButtonConfig = {\n text: string\n isDisabled?: boolean\n tooltipText?: string\n} & (\n \| // \"onClick\" or \"href\", but not both\n {\n onClick?: MouseEventHandler<HTMLButtonElement>\n }\n \| { href?: string }\n)\n\nexport type FullWidthAlertVariant = 'warning' \| 'info' \| 'danger' \| 'success'\n\nexport interface FullWidthAlertProps {\n variant?: FullWidthAlertVariant\n show?: boolean\n title?: string\n description?: ReactNode\n primaryButtonConfig?: AlertButtonConfig\n secondaryButtonConfig?: AlertButtonConfig\n tertiaryButtonConfig?: AlertButtonConfig\n onClose?: () => void\n autoCloseAfterDelayInSeconds?: number\n isGlobal?: boolean\n icon?: ReactNode\n sx?: AlertProps['sx']\n globalAlertSx?: AlertProps['sx']\n}\n\nfunction variantToSeverity(variant: string \| undefined) {\n return (variant === 'danger' ? 'error' : variant) as AlertProps['severity']\n}\n\nfunction ButtonFromConfig(props: {\n config?: AlertButtonConfig\n variant: ButtonProps['variant']\n}) {\n const { config, variant } = props\n if (config && ('onClick' in config \|\| 'href' in config)) {\n return (\n <Tooltip title={config.tooltipText ?? ''} enterNextDelay={300}>\n <span // See https://github.com/wwayne/react-tooltip/issues/304\n data-tip-disable={false}\n >\n <Button\n variant={variant}\n sx={{\n width: { xs: '100%', md: 'initial' },\n }}\n color=\"primary\"\n disabled={config.isDisabled}\n onClick={e => {\n if ('onClick' in config) {\n e.preventDefault()\n config.onClick!(e)\n } else if ('href' in config) {\n e.preventDefault()\n window.open(config.href, '_blank', 'noopener')\n }\n }}\n >\n {config.text}\n </Button>\n </span>\n </Tooltip>\n )\n }\n return null\n}\n\n/*\n Nav bar item, displayed when files have been added to the Download ~~Cart~~.\n * This must be configured with the URL of a page dedicated to showing the Download ~~Cart~~.\n /\nfunction FullWidthAlert(props: FullWidthAlertProps) {\n const {\n title,\n description,\n primaryButtonConfig,\n secondaryButtonConfig,\n tertiaryButtonConfig,\n show = true,\n onClose,\n autoCloseAfterDelayInSeconds,\n variant = 'info',\n isGlobal = true,\n icon,\n sx,\n globalAlertSx,\n } = props\n\n useEffect(() => {\n let timer: NodeJS.Timeout\n if (onClose && autoCloseAfterDelayInSeconds) {\n timer = setTimeout(onClose, autoCloseAfterDelayInSeconds 1000)\n }\n return () => {\n if (timer) {\n clearTimeout(timer)\n }\n }\n }, [onClose, autoCloseAfterDelayInSeconds])\n\n const alert = (\n <Alert\n severity={variantToSeverity(variant)}\n sx={spreadSx(\n {\n width: '100%',\n my: '10px',\n '.MuiAlert-message': {\n flexGrow: 1,\n },\n '.MuiAlert-icon': {\n display: { xs: 'none', sm: 'flex' },\n },\n },\n sx,\n )}\n className=\"FullWidthAlert\"\n onClose={onClose}\n icon={icon}\n >\n <Stack\n direction={{ xs: 'column', sm: 'row' }}\n spacing={{ xs: 1, sm: 2 }}\n sx={{\n alignItems: { xs: 'start', sm: 'center' },\n gap: { xs: '8px', sm: 'initial' },\n display: 'flex',\n justifyContent: 'space-between',\n }}\n >\n <Box>\n {title && <AlertTitle>{title}</AlertTitle>}\n <span className=\"FullWidthAlertDescription\">{description}</span>\n </Box>\n {(primaryButtonConfig \|\|\n secondaryButtonConfig \|\|\n tertiaryButtonConfig) && (\n <Stack\n spacing={{ xs: 1, lg: 2 }}\n direction={{ xs: 'row', sm: 'column', lg: 'row' }}\n sx={theme => ({\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n gap: { xs: '8px', sm: 'initial' },\n flexWrap: { xs: 'wrap', sm: 'nowrap' },\n width: { xs: '100%', sm: 'initial' },\n [theme.breakpoints.down('sm')]: {\n '& > *': {\n flexGrow: 1,\n },\n },\n })}\n >\n {tertiaryButtonConfig && (\n <ButtonFromConfig config={tertiaryButtonConfig} variant=\"text\" />\n )}\n {secondaryButtonConfig && (\n <ButtonFromConfig config={secondaryButtonConfig} variant=\"text\" />\n )}\n {primaryButtonConfig && (\n <ButtonFromConfig\n config={primaryButtonConfig}\n variant=\"contained\"\n />\n )}\n </Stack>\n )}\n </Stack>\n </Alert>\n )\n\n return (\n <>\n {isGlobal ? (\n <Snackbar\n open={show}\n className={isGlobal ? 'FullWidthAlertGlobal' : undefined}\n sx={{\n width: '96%',\n filter:\n 'drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.05)) drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.05)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.05))',\n ...globalAlertSx,\n }}\n anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\n slotProps={{\n transition: {\n appear: false,\n },\n }}\n >\n {alert}\n </Snackbar>\n ) : (\n show && alert\n )}\n </>\n )\n}\n\nexport default FullWidthAlert\n"],"names":["variantToSeverity","variant","ButtonFromConfig","props","config","Tooltip","jsx","Button","e","FullWidthAlert","title","description","primaryButtonConfig","secondaryButtonConfig","tertiaryButtonConfig","show","onClose","autoCloseAfterDelayInSeconds","isGlobal","icon","sx","globalAlertSx","useEffect","timer","alert","Alert","spreadSx","jsxs","Stack","Box","AlertTitle","theme","Snackbar"],"mappings":"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"}
1	+ {"version":3,"file":"FullWidthAlert.js","sources":["../../../src/components/FullWidthAlert/FullWidthAlert.tsx"],"sourcesContent":["import { spreadSx } from '@/theme/spreadSx'\nimport {\n Alert,\n AlertProps,\n AlertTitle,\n Box,\n Button,\n ButtonProps,\n Snackbar,\n Stack,\n Tooltip,\n} from '@mui/material'\nimport { MouseEventHandler, ReactNode, useEffect } from 'react'\nimport './FullWidthAlert.scss'\n\nexport type AlertButtonConfig = {\n text: string\n isDisabled?: boolean\n tooltipText?: string\n} & (\n \| // \"onClick\" or \"href\", but not both\n {\n onClick?: MouseEventHandler<HTMLButtonElement>\n }\n \| { href?: string }\n)\n\nexport type FullWidthAlertVariant = 'warning' \| 'info' \| 'danger' \| 'success'\n\nexport interface FullWidthAlertProps {\n variant?: FullWidthAlertVariant\n show?: boolean\n title?: string\n description?: ReactNode\n primaryButtonConfig?: AlertButtonConfig\n secondaryButtonConfig?: AlertButtonConfig\n tertiaryButtonConfig?: AlertButtonConfig\n onClose?: () => void\n autoCloseAfterDelayInSeconds?: number\n isGlobal?: boolean\n icon?: ReactNode\n sx?: AlertProps['sx']\n globalAlertSx?: AlertProps['sx']\n}\n\nfunction variantToSeverity(variant: string \| undefined) {\n return (variant === 'danger' ? 'error' : variant) as AlertProps['severity']\n}\n\nfunction ButtonFromConfig(props: {\n config?: AlertButtonConfig\n variant: ButtonProps['variant']\n}) {\n const { config, variant } = props\n if (config && ('onClick' in config \|\| 'href' in config)) {\n return (\n <Tooltip title={config.tooltipText ?? ''} enterNextDelay={300}>\n <span // See https://github.com/wwayne/react-tooltip/issues/304\n data-tip-disable={false}\n >\n <Button\n variant={variant}\n sx={{\n width: { xs: '100%', md: 'initial' },\n }}\n color=\"primary\"\n disabled={config.isDisabled}\n onClick={e => {\n if ('onClick' in config) {\n e.preventDefault()\n config.onClick!(e)\n } else if ('href' in config) {\n e.preventDefault()\n window.open(config.href, '_blank', 'noopener')\n }\n }}\n >\n {config.text}\n </Button>\n </span>\n </Tooltip>\n )\n }\n return null\n}\n\n/*\n Nav bar item, displayed when files have been added to the Download List.\n * This must be configured with the URL of a page dedicated to showing the Download List.\n /\nfunction FullWidthAlert(props: FullWidthAlertProps) {\n const {\n title,\n description,\n primaryButtonConfig,\n secondaryButtonConfig,\n tertiaryButtonConfig,\n show = true,\n onClose,\n autoCloseAfterDelayInSeconds,\n variant = 'info',\n isGlobal = true,\n icon,\n sx,\n globalAlertSx,\n } = props\n\n useEffect(() => {\n let timer: NodeJS.Timeout\n if (onClose && autoCloseAfterDelayInSeconds) {\n timer = setTimeout(onClose, autoCloseAfterDelayInSeconds 1000)\n }\n return () => {\n if (timer) {\n clearTimeout(timer)\n }\n }\n }, [onClose, autoCloseAfterDelayInSeconds])\n\n const alert = (\n <Alert\n severity={variantToSeverity(variant)}\n sx={spreadSx(\n {\n width: '100%',\n my: '10px',\n '.MuiAlert-message': {\n flexGrow: 1,\n },\n '.MuiAlert-icon': {\n display: { xs: 'none', sm: 'flex' },\n },\n },\n sx,\n )}\n className=\"FullWidthAlert\"\n onClose={onClose}\n icon={icon}\n >\n <Stack\n direction={{ xs: 'column', sm: 'row' }}\n spacing={{ xs: 1, sm: 2 }}\n sx={{\n alignItems: { xs: 'start', sm: 'center' },\n gap: { xs: '8px', sm: 'initial' },\n display: 'flex',\n justifyContent: 'space-between',\n }}\n >\n <Box>\n {title && <AlertTitle>{title}</AlertTitle>}\n <span className=\"FullWidthAlertDescription\">{description}</span>\n </Box>\n {(primaryButtonConfig \|\|\n secondaryButtonConfig \|\|\n tertiaryButtonConfig) && (\n <Stack\n spacing={{ xs: 1, lg: 2 }}\n direction={{ xs: 'row', sm: 'column', lg: 'row' }}\n sx={theme => ({\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n gap: { xs: '8px', sm: 'initial' },\n flexWrap: { xs: 'wrap', sm: 'nowrap' },\n width: { xs: '100%', sm: 'initial' },\n [theme.breakpoints.down('sm')]: {\n '& > *': {\n flexGrow: 1,\n },\n },\n })}\n >\n {tertiaryButtonConfig && (\n <ButtonFromConfig config={tertiaryButtonConfig} variant=\"text\" />\n )}\n {secondaryButtonConfig && (\n <ButtonFromConfig config={secondaryButtonConfig} variant=\"text\" />\n )}\n {primaryButtonConfig && (\n <ButtonFromConfig\n config={primaryButtonConfig}\n variant=\"contained\"\n />\n )}\n </Stack>\n )}\n </Stack>\n </Alert>\n )\n\n return (\n <>\n {isGlobal ? (\n <Snackbar\n open={show}\n className={isGlobal ? 'FullWidthAlertGlobal' : undefined}\n sx={{\n width: '96%',\n filter:\n 'drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.05)) drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.05)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.05))',\n ...globalAlertSx,\n }}\n anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\n slotProps={{\n transition: {\n appear: false,\n },\n }}\n >\n {alert}\n </Snackbar>\n ) : (\n show && alert\n )}\n </>\n )\n}\n\nexport default FullWidthAlert\n"],"names":["variantToSeverity","variant","ButtonFromConfig","props","config","Tooltip","jsx","Button","e","FullWidthAlert","title","description","primaryButtonConfig","secondaryButtonConfig","tertiaryButtonConfig","show","onClose","autoCloseAfterDelayInSeconds","isGlobal","icon","sx","globalAlertSx","useEffect","timer","alert","Alert","spreadSx","jsxs","Stack","Box","AlertTitle","theme","Snackbar"],"mappings":"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"}

package/dist/components/GenericCard/GenericCard.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { CardLabel } from '@/components/row_renderers/utils/CardFooter';
 import { FileHandleAssociation } from '@sage-bionetworks/synapse-types';
 import React from 'react';
-import { ColumnIconConfigs, DescriptionConfig } from '../CardContainerLogic';
+import { DescriptionConfig } from '../CardContainerLogic';
 import { HeaderCardVariant } from '../HeaderCard';
 import { SustainabilityScorecardProps } from '../SustainabilityScorecard/SustainabilityScorecard';
 /** Resolved CTA link configuration with actual href values (as opposed to CTACardLink which uses column names) */
@@ -58,10 +58,6 @@ export type GenericCardProps = {
      * The initial number of labels to display in the footer of the card
      */
     secondaryLabelLimit?: number;
-    /**
-     * Options for displaying icons with the labels in the card footer
-     */
-    columnIconOptions?: ColumnIconConfigs;
     /**
      * Optional configuration for displaying CTA button(s) on the card. Accepts a single config or an array.
      */
@@ -78,6 +74,10 @@ export type GenericCardProps = {
      * Optional ReactNode to be rendered next to the card type
      */
     cardTypeAdornment?: React.ReactNode;
+    /**
+     * Optional content to render to the right of the title/subtitle/description area.
+     */
+    titleAreaRightContent?: React.ReactNode;
     /**
      * Character count threshold for truncating description
      * @default 400

package/dist/components/GenericCard/GenericCard.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GenericCard.d.ts","sourceRoot":"","sources":["../../../src/components/GenericCard/GenericCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,6CAA6C,CAAA;AAEvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAA;AACvE,OAAO,KAAoC,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,iBAAiB,EAAE,~~iBAAiB,EAAE,~~MAAM,uBAAuB,CAAA;~~AAC5E~~,OAAmB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;~~AAI7D~~,OAAO,EAAE,4BAA4B,EAAE,MAAM,oDAAoD,CAAA;~~AAGjG~~,kHAAkH;AAClH,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,0FAA0F;IAC1F,IAAI,EAAE,MAAM,CAAA;IACZ,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,sBAAsB,CAAC,EAAE;QACvB,IAAI,EAAE,MAAM,CAAA;QACZ,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;IACD,6FAA6F;IAC7F,kCAAkC,CAAC,EAAE;QACnC,sEAAsE;QACtE,qBAAqB,EAAE,qBAAqB,CAAA;QAC5C,gDAAgD;QAChD,gBAAgB,EAAE,OAAO,CAAA;KAC1B,CAAA;IACD,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iDAAiD;IACjD,WAAW,EAAE,MAAM,CAAA;IACnB,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,8DAA8D;IAC9D,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,qEAAqE;IACrE,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;wBACoB;IACpB,0BAA0B,CAAC,EAAE,OAAO,CAAA;IACpC;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,EAAE,CAAA;IACpB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;OAEG;IACH,~~iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;OAEG;IACH,~~aAAa,CAAC,EAAE,aAAa,GAAG,aAAa,EAAE,CAAA;IAC/C;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC;;OAEG;IACH,uBAAuB,CAAC,EAAE,4BAA4B,CAAA;IACtD;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAID;;GAEG;AACH,eAAO,MAAM,WAAW,~~yFA+JtB~~,CAAA;AAEF,eAAe,WAAW,CAAA"}
1	+ {"version":3,"file":"GenericCard.d.ts","sourceRoot":"","sources":["../../../src/components/GenericCard/GenericCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,6CAA6C,CAAA;AAEvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAA;AACvE,OAAO,KAAoC,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAmB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAG7D,OAAO,EAAE,4BAA4B,EAAE,MAAM,oDAAoD,CAAA;AAIjG,kHAAkH;AAClH,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,0FAA0F;IAC1F,IAAI,EAAE,MAAM,CAAA;IACZ,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,sBAAsB,CAAC,EAAE;QACvB,IAAI,EAAE,MAAM,CAAA;QACZ,MAAM,EAAE,MAAM,CAAA;KACf,CAAA;IACD,6FAA6F;IAC7F,kCAAkC,CAAC,EAAE;QACnC,sEAAsE;QACtE,qBAAqB,EAAE,qBAAqB,CAAA;QAC5C,gDAAgD;QAChD,gBAAgB,EAAE,OAAO,CAAA;KAC1B,CAAA;IACD,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iDAAiD;IACjD,WAAW,EAAE,MAAM,CAAA;IACnB,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,8DAA8D;IAC9D,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,qEAAqE;IACrE,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;wBACoB;IACpB,0BAA0B,CAAC,EAAE,OAAO,CAAA;IACpC;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,EAAE,CAAA;IACpB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,GAAG,aAAa,EAAE,CAAA;IAC/C;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC;;OAEG;IACH,uBAAuB,CAAC,EAAE,4BAA4B,CAAA;IACtD;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC;;OAEG;IACH,qBAAqB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAID;;GAEG;AACH,eAAO,MAAM,WAAW,yFAyKtB,CAAA;AAEF,eAAe,WAAW,CAAA"}

package/dist/components/GenericCard/GenericCard.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
 import { GenericCardTitle as H } from "./GenericCardTitle.js";
-import { Box as v, Stack as I } from "@mui/material";
+import { Box as l, Stack as I } from "@mui/material";
 import { forwardRef as B } from "react";
 import F from "../HeaderCard.js";
 import G from "../row_renderers/utils/CardFooter.js";
@@ -17,80 +17,84 @@ import "../../assets/icons/study-complete.svg.js";
 import "../../assets/icons/translational.svg.js";
 import "../../assets/icons/tree_horizontal.svg.js";
 import "../../assets/icons/standardDataModel.svg.js";
+import "../../assets/icons/Challenge.svg.js";
 import "@mui/material/SvgIcon";
 import "../../utils/SynapseConstants.js";
 import "../../assets/ArcusBioIcon.svg.js";
 import "../../assets/icons/AccessPending.svg.js";
 import "../../assets/icons/AccessPendingCloud.svg.js";
 import "../../assets/icons/FileWithShield.svg.js";
+import "../../assets/icons/MultiFile.svg.js";
+import "../../assets/icons/UnpackagableFile.svg.js";
 import "../../assets/icons/bioChemicalPhysical.svg.js";
 import "../../assets/icons/computationalTool.svg.js";
 import "../../assets/icons/dataReuse.svg.js";
 import "../../assets/icons/inSilicoModel.svg.js";
 import "../../assets/icons/modelSystem.svg.js";
+import "../../assets/mui_components/PackagableFile.svg.js";
 import "../../assets/icons/spatialProfiling.svg.js";
 import "@mui/icons-material";
-import { FileHandleLink as _ } from "../widgets/FileHandleLink.js";
-import { CollapsibleDescription as j } from "./CollapsibleDescription.js";
-import { SmartLink as E } from "../SmartLink/SmartLink.js";
-const M = [], Ar = B(function(S, d) {
+import { SmartLink as _ } from "../SmartLink/SmartLink.js";
+import { FileHandleLink as j } from "../widgets/FileHandleLink.js";
+import { CollapsibleDescription as E } from "./CollapsibleDescription.js";
+const M = [], br = B(function(R, c) {
   const {
-    icon: c,
-    type: f,
+    icon: f,
+    type: h,
     title: n,
-    titleLinkConfiguration: e,
+    titleLinkConfiguration: o,
     titleAsFileHandleLinkConfiguration: a,
-    subtitle: l,
-    description: h,
-    descriptionSubTitle: A = "",
-    descriptionConfig: C,
-    cardTopContent: x,
+    subtitle: s,
+    description: C,
+    descriptionSubTitle: S = "",
+    descriptionConfig: x,
+    cardTopContent: g,
     cardTopButtons: p,
-    isHeader: s = !1,
-    headerCardVariant: L,
+    isHeader: m = !1,
+    headerCardVariant: T,
     useStylesForDisplayedImage: u = !1,
-    labels: m = M,
-    secondaryLabelLimit: g,
-    columnIconOptions: R,
-    ctaLinkConfig: t,
-    renderedIconList: T,
+    labels: d = M,
+    secondaryLabelLimit: v,
+    ctaLinkConfig: i,
+    renderedIconList: L,
     sustainabilityScorecard: b,
-    cardTypeAdornment: w,
-    charCountCutoff: N
-  } = S, y = m.length > 0, k = {
+    cardTypeAdornment: N,
+    titleAreaRightContent: y,
+    charCountCutoff: w
+  } = R, A = d.length > 0, D = {
     // undefined, take default value from class
-    marginTop: s ? "0px" : void 0,
-    marginBottom: s ? "0px" : void 0,
-    paddingBottom: y || u ? void 0 : "15px"
+    marginTop: m ? "0px" : void 0,
+    marginBottom: m ? "0px" : void 0,
+    paddingBottom: A || u ? void 0 : "15px"
   };
-  return s ? /* @__PURE__ */ r(
+  return m ? /* @__PURE__ */ r(
     F,
     {
-      ref: d,
-      headerCardVariant: L,
-      descriptionConfig: C,
-      charCountCutoff: N,
+      ref: c,
+      headerCardVariant: T,
+      descriptionConfig: x,
+      charCountCutoff: w,
       title: n,
-      subTitle: l,
-      description: h,
-      type: f,
-      icon: c,
-      values: m,
-      href: e?.href,
-      target: e?.target,
-      ctaLinkConfig: t,
+      subTitle: s,
+      description: C,
+      type: h,
+      icon: f,
+      values: d,
+      href: o?.href,
+      target: o?.target,
+      ctaLinkConfig: i,
       isAlignToLeftNav: !0,
-      secondaryLabelLimit: g,
+      secondaryLabelLimit: v,
       cardTopButtons: p,
-      cardTopContent: x,
+      cardTopContent: g,
       sustainabilityScorecard: b
     }
-  ) : /* @__PURE__ */ o("div", { style: k, ref: d, className: "SRC-portalCard", children: [
-    /* @__PURE__ */ o("div", { className: "SRC-portalCardMain", children: [
-      c,
-      /* @__PURE__ */ o("div", { className: "SRC-cardContent", children: [
+  ) : /* @__PURE__ */ t("div", { style: D, ref: c, className: "SRC-portalCard", children: [
+    /* @__PURE__ */ t("div", { className: "SRC-portalCardMain", children: [
+      f,
+      /* @__PURE__ */ t("div", { className: "SRC-cardContent", children: [
         p && /* @__PURE__ */ r(
-          v,
+          l,
           {
             sx: {
               position: "absolute",
@@ -103,7 +107,7 @@ const M = [], Ar = B(function(S, d) {
             children: p
           }
         ),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ t(
           I,
           {
             sx: {
@@ -112,74 +116,84 @@ const M = [], Ar = B(function(S, d) {
               gap: "10px"
             },
             children: [
-              /* @__PURE__ */ r("div", { className: "SRC-type", children: f }),
-              w
+              /* @__PURE__ */ r("div", { className: "SRC-type", children: h }),
+              N
             ]
           }
         ),
-        T,
-        /* @__PURE__ */ r("div", { children: /* @__PURE__ */ o(
-          "h3",
-          {
-            className: "SRC-boldText SRC-blackText",
-            style: { margin: "none" },
-            children: [
-              !a && /* @__PURE__ */ r(
-                H,
-                {
-                  title: n,
-                  href: e?.href,
-                  target: e?.target
-                }
-              ),
-              a && /* @__PURE__ */ r(
-                _,
-                {
-                  fileHandleAssociation: a.fileHandleAssociation,
-                  showDownloadIcon: a.showDownloadIcon,
-                  displayValue: n
-                }
-              )
-            ]
-          }
-        ) }),
-        l && /* @__PURE__ */ r("div", { className: "SRC-author", children: l }),
-        /* @__PURE__ */ r(
-          j,
-          {
-            description: h,
-            descriptionSubTitle: A,
-            descriptionConfig: C
-          }
-        ),
-        t && /* @__PURE__ */ r(v, { sx: { mt: "20px", display: "flex", gap: 2, flexWrap: "wrap" }, children: (Array.isArray(t) ? t : [t]).map(
-          (i, D) => i.text && i.href && /* @__PURE__ */ r(
-            E,
-            {
-              href: i.href,
-              target: i.target,
-              children: i.text
-            },
-            D
-          )
-        ) })
+        L,
+        /* @__PURE__ */ t(l, { className: "SRC-cardTitleArea", children: [
+          /* @__PURE__ */ t(l, { sx: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ r("div", { children: /* @__PURE__ */ t(
+              "h3",
+              {
+                className: "SRC-boldText SRC-blackText",
+                style: { margin: "none" },
+                children: [
+                  !a && /* @__PURE__ */ r(
+                    H,
+                    {
+                      title: n,
+                      href: o?.href,
+                      target: o?.target
+                    }
+                  ),
+                  a && /* @__PURE__ */ r(
+                    j,
+                    {
+                      fileHandleAssociation: a.fileHandleAssociation,
+                      showDownloadIcon: a.showDownloadIcon,
+                      displayValue: n
+                    }
+                  )
+                ]
+              }
+            ) }),
+            s && /* @__PURE__ */ r("div", { className: "SRC-author", children: s }),
+            /* @__PURE__ */ r(
+              E,
+              {
+                description: C,
+                descriptionSubTitle: S,
+                descriptionConfig: x
+              }
+            ),
+            i && /* @__PURE__ */ r(
+              l,
+              {
+                sx: { mt: "20px", display: "flex", gap: 2, flexWrap: "wrap" },
+                children: (Array.isArray(i) ? i : [i]).map(
+                  (e, k) => e.text && e.href && /* @__PURE__ */ r(
+                    _,
+                    {
+                      href: e.href,
+                      target: e.target,
+                      children: e.text
+                    },
+                    k
+                  )
+                )
+              }
+            )
+          ] }),
+          y && /* @__PURE__ */ r("div", { className: "SRC-cardTitleAreaDetails", children: y })
+        ] })
       ] })
     ] }),
-    y && /* @__PURE__ */ r(
+    A && /* @__PURE__ */ r(
       G,
       {
         isHeader: !1,
-        secondaryLabelLimit: g,
-        values: m,
-        columnIconOptions: R,
+        secondaryLabelLimit: v,
+        values: d,
         className: u ? void 0 : "hasIcon",
-        cardTopContent: x
+        cardTopContent: g
       }
     )
   ] });
 });
 export {
-  Ar as GenericCard,
-  Ar as default
+  br as GenericCard,
+  br as default
 };
 //# sourceMappingURL=GenericCard.js.map