npm - synapse-react-client - Versions diffs - 4.0.19 → 4.0.20 - Mend

synapse-react-client 4.0.19 → 4.0.20

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 (1553) hide show

package/dist/components/TimelinePlot/TimelinePhase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimelinePhase.js","names":[],"sources":["../../../src/components/TimelinePlot/TimelinePhase.tsx"],"sourcesContent":["import React from 'react'\nimport { OBSERVATION_CARD } from '@/utils/SynapseConstants'\nimport { Dialog, DialogContent } from '@mui/material'\nimport {\n ColumnSingleValueFilterOperator,\n Row,\n} from '@sage-bionetworks/synapse-types'\nimport dayjs, { ManipulateType } from 'dayjs'\nimport Plotly, { Layout, PlotData } from 'plotly.js-basic-dist'\nimport { useMemo, useRef, useState } from 'react'\nimport CardContainerLogic from '../CardContainerLogic'\nimport Plot from '../Plot/Plot'\nimport { ObservationCardSchema } from '../row_renderers/ObservationCard'\n\ntype TimepointData = {\n timepoints: dayjs.Dayjs[]\n hoverOverIndex: number\n}\n\nconst getTimepointData = (\n start: dayjs.Dayjs,\n rowData: Row[],\n schema: ObservationCardSchema,\n hoverEventRowId?: number, //if supplied, will return the index of this row\n): TimepointData => {\n let hoverOverIndex = -1\n const timepoints = rowData.map((row, index) => {\n const time = parseFloat(row.values[schema.observationTime]!)\n const timeUnit = row.values[schema.observationTimeUnits]\n if (row.rowId == hoverEventRowId) {\n hoverOverIndex = index\n }\n return start.add(time, timeUnit as ManipulateType)\n })\n return {\n timepoints,\n hoverOverIndex,\n }\n}\n\nexport const getMaxDate = (timepoints: dayjs.Dayjs[]) => {\n if (timepoints.length == 0) {\n return dayjs().add(1, 'days')\n }\n return timepoints.reduce(\n (maxDateItem: dayjs.Dayjs, currentDateItem: dayjs.Dayjs) => {\n if (!maxDateItem \|\| currentDateItem.isAfter(maxDateItem)) {\n return currentDateItem\n }\n return maxDateItem\n },\n )\n}\n\nconst getTimelineData = (timepointData: TimepointData, rowData: Row[]) => {\n // If this phase has no data, return an empty data line\n if (\n timepointData.timepoints == undefined \|\|\n timepointData.timepoints.length == 0\n ) {\n return [\n {\n x: [dayjs().format()],\n y: [0.5],\n mode: 'lines',\n line: {\n color: 'blue',\n width: 2,\n },\n customdata: [],\n hoverinfo: 'none',\n },\n ]\n }\n\n // first combine all of the Rows that share the same timepoint\n const combinedData: Record<string, Row[]> = timepointData.timepoints.reduce(\n (result, currentTimepoint, index) => {\n const resultRecord = result as Record<string, Row[]>\n if (!resultRecord[currentTimepoint.format()]) {\n resultRecord[currentTimepoint.format()] = []\n }\n resultRecord[currentTimepoint.format()].push(rowData[index])\n return result\n },\n {},\n )\n\n const data = timepointData.timepoints.map((timepoint, index) => {\n const utcFormattedTimepoint = timepoint.format()\n const isHoveredOver = index == timepointData.hoverOverIndex\n const rows = combinedData[utcFormattedTimepoint]\n const rowIds = rows.map(row => {\n return row.rowId\n })\n return {\n x: [utcFormattedTimepoint, utcFormattedTimepoint, utcFormattedTimepoint],\n y: [0, 0.5, 1],\n mode: 'lines',\n line: {\n color: isHoveredOver ? 'black' : 'gray',\n width: isHoveredOver ? 2 : 1,\n },\n // Add event into in the customdata\n customdata: [rowIds, rowIds, rowIds],\n // but tell Plotly that we do not want it to show a hover tooltip (we're going to handle this)\n hoverinfo: 'none',\n }\n })\n return data\n}\n\nconst getLayout = (\n start: dayjs.Dayjs,\n end: dayjs.Dayjs,\n color: string,\n timelineData: Plotly.Data[],\n rowData: Row[],\n schema: ObservationCardSchema,\n): Partial<Layout> => {\n const xTickVals = timelineData.map(value => {\n // return the utcFormattedTimepoint\n return (value as PlotData).x[0]\n })\n const xTickText = timelineData.map(value => {\n const rowIds = (value as PlotData).customdata[0] as number[] \| undefined\n if (rowIds && rowIds.length > 0) {\n const count = rowIds.length\n const rows = rowData?.filter(row => {\n return rowIds[0] == row.rowId\n })\n if (rows && rows.length > 0) {\n const row = rows[0]\n const time = parseFloat(row.values[schema.observationTime]!)\n const timeUnits = row.values[\n schema.observationTimeUnits\n ] as ManipulateType\n const countString = count > 1 ? `(${count})` : ''\n return `${time} ${timeUnits} ${countString}`\n }\n }\n return ''\n })\n\n return {\n hovermode: 'closest',\n dragmode: false, //disallow interaction\n showlegend: false,\n xaxis: {\n showgrid: false,\n showticklabels: true,\n showline: false,\n zeroline: false,\n tickvals: xTickVals,\n ticktext: xTickText,\n tickangle: -45,\n },\n\n yaxis: {\n range: [0, 1.25],\n showgrid: false,\n zeroline: false,\n showline: false,\n showticklabels: false,\n },\n // Each phase has a shape\n shapes: [\n {\n type: 'rect',\n x0: start.subtract(end.diff(start) / 10).format(), // add 10% to the left side of the graph\n x1: end.add(end.diff(start) / 3).format(), // add 33% to right side of the graph\n y0: 0.25,\n y1: 0.75,\n fillcolor: color,\n opacity: 0.8,\n line: {\n width: 0,\n },\n },\n ],\n margin: {\n l: 0,\n r: 0,\n t: 60,\n b: 60,\n },\n // autosize: false,\n }\n}\n\ntype TimelinePhaseProps = {\n name: string\n color: string\n rowData: Row[]\n schema: ObservationCardSchema\n widthPx: number\n sql: string\n}\n\nconst TimelinePhase = ({\n color,\n rowData,\n schema,\n widthPx,\n sql,\n}: TimelinePhaseProps): React.ReactNode => {\n const [clickEvent, setClickEvent] = useState<Plotly.PlotMouseEvent>()\n const [hoverEvent, setHoverEvent] = useState<Plotly.PlotHoverEvent>()\n const [plotKey, setPlotKey] = useState(1)\n const start = dayjs()\n // hide the hover UI if we detect that the user moves the mouse outside of this component boundary\n const componentRef = useRef<HTMLDivElement>(null)\n const rowIds = clickEvent?.points[0].customdata as unknown as (\n \| number\n \| undefined\n )[]\n const selectedRows = rowData?.filter(row => {\n return rowIds?.includes(row.rowId)\n })\n\n const hoverEventRowIds = hoverEvent?.points[0].customdata as unknown as (\n \| number\n \| undefined\n )[]\n\n const timepointData = useMemo(() => {\n return getTimepointData(\n start,\n rowData,\n schema,\n hoverEventRowIds?.length > 0 ? hoverEventRowIds[0] : undefined,\n )\n }, [hoverEventRowIds, rowData, schema, start])\n\n const end = getMaxDate(timepointData.timepoints)\n\n const timelineData = useMemo(() => {\n return getTimelineData(timepointData, rowData)\n }, [timepointData, rowData])\n\n const selectedRowIds = selectedRows.map(row => row.rowId!)\n\n return (\n <div ref={componentRef} style={{ width: widthPx }}>\n <Plot\n key={`Plot-${color}-${plotKey}`}\n style={{ width: widthPx, height: '220px' }}\n data={timelineData}\n layout={getLayout(start, end, color, timelineData, rowData, schema)}\n config={{ displayModeBar: false }}\n useResizeHandler={true}\n onClick={eventData => {\n setClickEvent(eventData)\n setHoverEvent(undefined)\n }}\n // PORTALS-2861: To avoid the plot handling the double-click, change the key so the Plotly graph (gd) associated\n // to the click event is invalid.\n onDoubleClick={() => {\n setPlotKey(plotKey + 1)\n }}\n onHover={eventData => {\n setHoverEvent(eventData)\n }}\n onUnhover={() => {\n setHoverEvent(undefined)\n }}\n />\n <Dialog\n onClose={() => setClickEvent(undefined)}\n open={selectedRows && selectedRows.length > 0}\n >\n <DialogContent>\n <CardContainerLogic\n topLevelEnumeratedFacetToFilter={{ columnName: 'observationType' }}\n sql={sql}\n searchParams={{ ['ROW_ID']: selectedRowIds.map(String).join(',') }}\n sqlOperator={ColumnSingleValueFilterOperator.IN}\n lockedColumn={{ columnName: 'ROW_ID' }}\n cardConfiguration={{ type: OBSERVATION_CARD }}\n initialLimit={3}\n />\n </DialogContent>\n </Dialog>\n </div>\n )\n}\n\nexport default TimelinePhase\n"],"mappings":"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"}
1	+ {"version":3,"file":"TimelinePhase.js","names":[],"sources":["../../../src/components/TimelinePlot/TimelinePhase.tsx"],"sourcesContent":["import React from 'react'\nimport { OBSERVATION_CARD } from '@/utils/SynapseConstants'\nimport { Dialog, DialogContent } from '@mui/material'\nimport {\n ColumnSingleValueFilterOperator,\n Row,\n} from '@sage-bionetworks/synapse-types'\nimport dayjs, { ManipulateType } from 'dayjs'\nimport Plotly, { Layout, PlotData } from 'plotly.js-basic-dist'\nimport { useMemo, useRef, useState } from 'react'\nimport CardContainerLogic from '../CardContainerLogic'\nimport Plot from '../Plot/Plot'\nimport { ObservationCardSchema } from '../row_renderers/ObservationCard'\n\ntype TimepointData = {\n timepoints: dayjs.Dayjs[]\n hoverOverIndex: number\n}\n\nconst getTimepointData = (\n start: dayjs.Dayjs,\n rowData: Row[],\n schema: ObservationCardSchema,\n hoverEventRowId?: number, //if supplied, will return the index of this row\n): TimepointData => {\n let hoverOverIndex = -1\n const timepoints = rowData.map((row, index) => {\n const time = parseFloat(row.values[schema.observationTime]!)\n const timeUnit = row.values[schema.observationTimeUnits]\n if (row.rowId == hoverEventRowId) {\n hoverOverIndex = index\n }\n return start.add(time, timeUnit as ManipulateType)\n })\n return {\n timepoints,\n hoverOverIndex,\n }\n}\n\nexport const getMaxDate = (timepoints: dayjs.Dayjs[]) => {\n if (timepoints.length == 0) {\n return dayjs().add(1, 'days')\n }\n return timepoints.reduce(\n (maxDateItem: dayjs.Dayjs, currentDateItem: dayjs.Dayjs) => {\n if (!maxDateItem \|\| currentDateItem.isAfter(maxDateItem)) {\n return currentDateItem\n }\n return maxDateItem\n },\n )\n}\n\nconst getTimelineData = (timepointData: TimepointData, rowData: Row[]) => {\n // If this phase has no data, return an empty data line\n if (\n timepointData.timepoints == undefined \|\|\n timepointData.timepoints.length == 0\n ) {\n return [\n {\n x: [dayjs().format()],\n y: [0.5],\n mode: 'lines',\n line: {\n color: 'blue',\n width: 2,\n },\n customdata: [],\n hoverinfo: 'none',\n },\n ]\n }\n\n // first combine all of the Rows that share the same timepoint\n const combinedData: Record<string, Row[]> = timepointData.timepoints.reduce(\n (result, currentTimepoint, index) => {\n const resultRecord = result as Record<string, Row[]>\n if (!resultRecord[currentTimepoint.format()]) {\n resultRecord[currentTimepoint.format()] = []\n }\n resultRecord[currentTimepoint.format()].push(rowData[index])\n return result\n },\n {},\n )\n\n const data = timepointData.timepoints.map((timepoint, index) => {\n const utcFormattedTimepoint = timepoint.format()\n const isHoveredOver = index == timepointData.hoverOverIndex\n const rows = combinedData[utcFormattedTimepoint]\n const rowIds = rows.map(row => {\n return row.rowId\n })\n return {\n x: [utcFormattedTimepoint, utcFormattedTimepoint, utcFormattedTimepoint],\n y: [0, 0.5, 1],\n mode: 'lines',\n line: {\n color: isHoveredOver ? 'black' : 'gray',\n width: isHoveredOver ? 2 : 1,\n },\n // Add event into in the customdata\n customdata: [rowIds, rowIds, rowIds],\n // but tell Plotly that we do not want it to show a hover tooltip (we're going to handle this)\n hoverinfo: 'none',\n }\n })\n return data\n}\n\nconst getLayout = (\n start: dayjs.Dayjs,\n end: dayjs.Dayjs,\n color: string,\n timelineData: Plotly.Data[],\n rowData: Row[],\n schema: ObservationCardSchema,\n): Partial<Layout> => {\n const xTickVals = timelineData.map(value => {\n // return the utcFormattedTimepoint\n return (value as PlotData).x[0]\n })\n const xTickText = timelineData.map(value => {\n const rowIds = (value as PlotData).customdata[0] as number[] \| undefined\n if (rowIds && rowIds.length > 0) {\n const count = rowIds.length\n const rows = rowData?.filter(row => {\n return rowIds[0] == row.rowId\n })\n if (rows && rows.length > 0) {\n const row = rows[0]\n const time = parseFloat(row.values[schema.observationTime]!)\n const timeUnits = row.values[\n schema.observationTimeUnits\n ] as ManipulateType\n const countString = count > 1 ? `(${count})` : ''\n return `${time} ${timeUnits} ${countString}`\n }\n }\n return ''\n })\n\n return {\n hovermode: 'closest',\n dragmode: false, //disallow interaction\n showlegend: false,\n xaxis: {\n showgrid: false,\n showticklabels: true,\n showline: false,\n zeroline: false,\n tickvals: xTickVals,\n ticktext: xTickText,\n tickangle: -45,\n },\n\n yaxis: {\n range: [0, 1.25],\n showgrid: false,\n zeroline: false,\n showline: false,\n showticklabels: false,\n },\n // Each phase has a shape\n shapes: [\n {\n type: 'rect',\n x0: start.subtract(end.diff(start) / 10).format(), // add 10% to the left side of the graph\n x1: end.add(end.diff(start) / 3).format(), // add 33% to right side of the graph\n y0: 0.25,\n y1: 0.75,\n fillcolor: color,\n opacity: 0.8,\n line: {\n width: 0,\n },\n },\n ],\n margin: {\n l: 0,\n r: 0,\n t: 60,\n b: 60,\n },\n // autosize: false,\n }\n}\n\ntype TimelinePhaseProps = {\n name: string\n color: string\n rowData: Row[]\n schema: ObservationCardSchema\n widthPx: number\n sql: string\n}\n\nconst TimelinePhase = ({\n color,\n rowData,\n schema,\n widthPx,\n sql,\n}: TimelinePhaseProps): React.ReactNode => {\n const [clickEvent, setClickEvent] = useState<Plotly.PlotMouseEvent>()\n const [hoverEvent, setHoverEvent] = useState<Plotly.PlotHoverEvent>()\n const [plotKey, setPlotKey] = useState(1)\n const start = dayjs()\n // hide the hover UI if we detect that the user moves the mouse outside of this component boundary\n const componentRef = useRef<HTMLDivElement>(null)\n const rowIds = clickEvent?.points[0].customdata as unknown as (\n \| number\n \| undefined\n )[]\n const selectedRows = rowData?.filter(row => {\n return rowIds?.includes(row.rowId)\n })\n\n const hoverEventRowIds = hoverEvent?.points[0].customdata as unknown as (\n \| number\n \| undefined\n )[]\n\n const timepointData = useMemo(() => {\n return getTimepointData(\n start,\n rowData,\n schema,\n hoverEventRowIds?.length > 0 ? hoverEventRowIds[0] : undefined,\n )\n }, [hoverEventRowIds, rowData, schema, start])\n\n const end = getMaxDate(timepointData.timepoints)\n\n const timelineData = useMemo(() => {\n return getTimelineData(timepointData, rowData)\n }, [timepointData, rowData])\n\n const selectedRowIds = selectedRows.map(row => row.rowId!)\n\n return (\n <div ref={componentRef} style={{ width: widthPx }}>\n <Plot\n key={`Plot-${color}-${plotKey}`}\n style={{ width: widthPx, height: '220px' }}\n data={timelineData}\n layout={getLayout(start, end, color, timelineData, rowData, schema)}\n config={{ displayModeBar: false }}\n useResizeHandler={true}\n onClick={eventData => {\n setClickEvent(eventData)\n setHoverEvent(undefined)\n }}\n // PORTALS-2861: To avoid the plot handling the double-click, change the key so the Plotly graph (gd) associated\n // to the click event is invalid.\n onDoubleClick={() => {\n setPlotKey(plotKey + 1)\n }}\n onHover={eventData => {\n setHoverEvent(eventData)\n }}\n onUnhover={() => {\n setHoverEvent(undefined)\n }}\n />\n <Dialog\n onClose={() => setClickEvent(undefined)}\n open={selectedRows && selectedRows.length > 0}\n >\n <DialogContent>\n <CardContainerLogic\n topLevelEnumeratedFacetToFilter={{ columnName: 'observationType' }}\n sql={sql}\n searchParams={{ ['ROW_ID']: selectedRowIds.map(String).join(',') }}\n sqlOperator={ColumnSingleValueFilterOperator.IN}\n lockedColumn={{ columnName: 'ROW_ID' }}\n cardConfiguration={{ type: OBSERVATION_CARD }}\n initialLimit={3}\n />\n </DialogContent>\n </Dialog>\n </div>\n )\n}\n\nexport default TimelinePhase\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TimelinePlot.js","names":[],"sources":["../../../src/components/TimelinePlot/TimelinePlot.tsx"],"sourcesContent":["import React from 'react'\nimport { useGetFullTableQueryResults } from '@/synapse-queries'\nimport {\n getAdditionalFilters,\n parseEntityIdFromSqlStatement,\n SQLOperator,\n} from '@/utils/functions'\nimport { getHeaderIndex } from '@/utils/functions/queryUtils'\nimport { BUNDLE_MASK_QUERY_RESULTS } from '@/utils/SynapseConstants'\nimport { Skeleton, Typography } from '@mui/material'\nimport { Box } from '@mui/system'\nimport { useMeasure } from '@react-hookz/web'\nimport {\n ColumnMultiValueFunction,\n ColumnMultiValueFunctionQueryFilter,\n} from '@sage-bionetworks/synapse-types'\nimport { useMemo, useState } from 'react'\nimport { getColorPalette } from '../ColorGradient/ColorGradient'\nimport { ObservationCardSchema } from '../row_renderers/ObservationCard'\nimport hardcodedPhasesQueryResponseData, {\n phaseObservationIndex,\n phaseSpeciesIndex,\n} from './phasesQueryResponseData'\nimport TimelineLegendItem from './TimelineLegendItem'\nimport TimelinePhase from './TimelinePhase'\nimport TimelinePlotSpeciesSelector from './TimelinePlotSpeciesSelector'\n\nconst OBSERVATION_PHASE_COLUMN_NAME = 'observationphase'\nconst OBSERVATION_TIME_COLUMN_NAME = 'observationtime'\nconst OBSERVATION_TIME_UNITS_COLUMN_NAME = 'observationtimeunits'\nconst OBSERVATION_SUBMITTER_NAME_COLUMN_NAME = 'observationsubmittername'\nconst OBSERVATION_TEXT_COLUMN_NAME = 'observationtext'\nconst OBSERVATION_TYPE_COLUMN_NAME = 'observationtype'\nconst OBSERVATION_SUBMITTER_USER_ID_COLUMN_NAME = 'synapseid'\nconst OBSERVATION_DOI_COLUMN_NAME = 'doi'\n\nexport type TimelinePlotProps = {\n sql: string\n searchParams?: Record<string, string>\n sqlOperator?: SQLOperator\n title?: string\n subTitle?: string\n defaultSpecies?: string //for test\n}\nexport const TimelinePlot = ({\n sql,\n searchParams,\n sqlOperator,\n defaultSpecies,\n title,\n subTitle,\n}: TimelinePlotProps): React.ReactNode => {\n // Fetch the table data\n const eventsTableId = parseEntityIdFromSqlStatement(sql)\n const [species, setSpecies] = useState<string \| undefined \| null>(\n defaultSpecies,\n )\n const [plotContainerMeasurements, plotContainerRef] =\n useMeasure<HTMLDivElement>()\n const queryFilters = getAdditionalFilters(searchParams, sqlOperator) ?? []\n const speciesFilter: ColumnMultiValueFunctionQueryFilter \| undefined = species\n ? {\n columnName: 'species',\n concreteType:\n 'org.sagebionetworks.repo.model.table.ColumnMultiValueFunctionQueryFilter',\n values: [species],\n function: ColumnMultiValueFunction.HAS,\n _function: ColumnMultiValueFunction.HAS,\n }\n : undefined\n const additionalFilters = [...queryFilters]\n if (speciesFilter) {\n additionalFilters.push(speciesFilter)\n }\n const eventTableQuery = useGetFullTableQueryResults(\n {\n entityId: eventsTableId,\n query: {\n sql: `${sql} WHERE observationTime IS NOT NULL`,\n sort: [\n {\n column: 'observationTime',\n direction: 'ASC',\n },\n ],\n additionalFilters: additionalFilters,\n },\n\n partMask: BUNDLE_MASK_QUERY_RESULTS,\n concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n },\n {\n enabled: !!species,\n },\n )\n\n const { data: eventsData, isLoading } = eventTableQuery\n\n // filter the phases query response data to the specific species\n const phaseData = useMemo(() => {\n if (species) {\n const phasesForTargetSpecies =\n hardcodedPhasesQueryResponseData.queryResult?.queryResults.rows.filter(\n row => {\n return row.values[phaseSpeciesIndex] == species\n },\n )\n return phasesForTargetSpecies\n } else return undefined\n }, [species])\n\n if (isLoading) {\n return <LoadingTimelinePlot />\n }\n const observationPhaseIndex = getHeaderIndex(\n OBSERVATION_PHASE_COLUMN_NAME,\n eventsData,\n )\n const observationTimeIndex = getHeaderIndex(\n OBSERVATION_TIME_COLUMN_NAME,\n eventsData,\n )\n const observationTimeUnitIndex = getHeaderIndex(\n OBSERVATION_TIME_UNITS_COLUMN_NAME,\n eventsData,\n )\n const observationSubmitterNameIndex = getHeaderIndex(\n OBSERVATION_SUBMITTER_NAME_COLUMN_NAME,\n eventsData,\n )\n const observationTextIndex = getHeaderIndex(\n OBSERVATION_TEXT_COLUMN_NAME,\n eventsData,\n )\n const observationDoiIndex = getHeaderIndex(\n OBSERVATION_DOI_COLUMN_NAME,\n eventsData,\n )\n\n const observationTypeIndex = getHeaderIndex(\n OBSERVATION_TYPE_COLUMN_NAME,\n eventsData,\n )\n const submitterUserIdIndex = getHeaderIndex(\n OBSERVATION_SUBMITTER_USER_ID_COLUMN_NAME,\n eventsData,\n )\n\n const schema: ObservationCardSchema = {\n observationSubmitterName: observationSubmitterNameIndex,\n synapseId: submitterUserIdIndex,\n observationType: observationTypeIndex,\n observationText: observationTextIndex,\n observationTime: observationTimeIndex,\n observationTimeUnits: observationTimeUnitIndex,\n doi: observationDoiIndex,\n }\n\n const widthPx =\n plotContainerMeasurements?.width && phaseData\n ? plotContainerMeasurements?.width / phaseData.length\n : 0\n const gridTemplateColumns = phaseData?.map(() => 'auto').join(' ')\n\n return (\n <>\n {species && (\n <>\n {title && <Typography variant=\"h2\">{title}</Typography>}\n {subTitle && (\n <Typography variant=\"body1Italic\" sx={{ margin: '10px 0px' }}>\n {subTitle}\n </Typography>\n )}\n </>\n )}\n <Box>\n <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>\n {/* Species selector /}\n <Box>\n {!defaultSpecies && (\n <TimelinePlotSpeciesSelector\n setSpecies={setSpecies}\n species={species}\n sql={sql}\n additionalFilters={queryFilters}\n />\n )}\n </Box>\n {/ Legend /}\n {phaseData && (\n <Box\n sx={{ display: 'flex', justifyContent: 'flex-end', gap: '25px' }}\n >\n {phaseData.map((phaseRow, index) => {\n const { colorPalette } = getColorPalette(index, 1)\n return (\n <TimelineLegendItem\n key={phaseRow.rowId}\n color={colorPalette[0]}\n phaseName={phaseRow.values[phaseObservationIndex]}\n />\n )\n })}\n </Box>\n )}\n </Box>\n {/ Phase plots */}\n {species && phaseData && (\n <div ref={plotContainerRef}>\n <Box\n sx={{\n display: 'inline-grid',\n gridTemplateColumns,\n minWidth: plotContainerMeasurements?.width,\n maxWidth: plotContainerMeasurements?.width,\n }}\n className=\"forcePlotlyDefaultCursor\"\n >\n {phaseData.map((phaseRow, index) => {\n const { colorPalette } = getColorPalette(index, 1)\n const phaseEventRows =\n eventsData?.queryResult?.queryResults.rows.filter(row => {\n return (\n row.values[observationPhaseIndex] ==\n phaseRow.values[phaseObservationIndex]\n )\n })\n\n return phaseEventRows ? (\n <TimelinePhase\n key={phaseRow.rowId}\n name={phaseRow.values[phaseObservationIndex]!}\n color={colorPalette[0]}\n rowData={phaseEventRows}\n schema={schema}\n widthPx={widthPx}\n sql={sql}\n />\n ) : (\n <></>\n )\n })}\n </Box>\n </div>\n )}\n </Box>\n </>\n )\n}\n\nexport const LoadingTimelinePlot = (): React.ReactNode => {\n return (\n <Box>\n <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: '10px' }}>\n <Skeleton height=\"45px\" width=\"80px\" />\n <Skeleton height=\"45px\" width=\"80px\" />\n </Box>\n <Box sx={{ display: 'flex' }}>\n <Skeleton height=\"150px\" width=\"100%\" />\n </Box>\n </Box>\n )\n}\n\nexport default TimelinePlot\n"],"mappings":"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"}
1	+ {"version":3,"file":"TimelinePlot.js","names":[],"sources":["../../../src/components/TimelinePlot/TimelinePlot.tsx"],"sourcesContent":["import React from 'react'\nimport { useGetFullTableQueryResults } from '@/synapse-queries'\nimport {\n getAdditionalFilters,\n parseEntityIdFromSqlStatement,\n SQLOperator,\n} from '@/utils/functions'\nimport { getHeaderIndex } from '@/utils/functions/queryUtils'\nimport { BUNDLE_MASK_QUERY_RESULTS } from '@/utils/SynapseConstants'\nimport { Skeleton, Typography } from '@mui/material'\nimport { Box } from '@mui/system'\nimport { useMeasure } from '@react-hookz/web'\nimport {\n ColumnMultiValueFunction,\n ColumnMultiValueFunctionQueryFilter,\n} from '@sage-bionetworks/synapse-types'\nimport { useMemo, useState } from 'react'\nimport { getColorPalette } from '../ColorGradient/ColorGradient'\nimport { ObservationCardSchema } from '../row_renderers/ObservationCard'\nimport hardcodedPhasesQueryResponseData, {\n phaseObservationIndex,\n phaseSpeciesIndex,\n} from './phasesQueryResponseData'\nimport TimelineLegendItem from './TimelineLegendItem'\nimport TimelinePhase from './TimelinePhase'\nimport TimelinePlotSpeciesSelector from './TimelinePlotSpeciesSelector'\n\nconst OBSERVATION_PHASE_COLUMN_NAME = 'observationphase'\nconst OBSERVATION_TIME_COLUMN_NAME = 'observationtime'\nconst OBSERVATION_TIME_UNITS_COLUMN_NAME = 'observationtimeunits'\nconst OBSERVATION_SUBMITTER_NAME_COLUMN_NAME = 'observationsubmittername'\nconst OBSERVATION_TEXT_COLUMN_NAME = 'observationtext'\nconst OBSERVATION_TYPE_COLUMN_NAME = 'observationtype'\nconst OBSERVATION_SUBMITTER_USER_ID_COLUMN_NAME = 'synapseid'\nconst OBSERVATION_DOI_COLUMN_NAME = 'doi'\n\nexport type TimelinePlotProps = {\n sql: string\n searchParams?: Record<string, string>\n sqlOperator?: SQLOperator\n title?: string\n subTitle?: string\n defaultSpecies?: string //for test\n}\nexport const TimelinePlot = ({\n sql,\n searchParams,\n sqlOperator,\n defaultSpecies,\n title,\n subTitle,\n}: TimelinePlotProps): React.ReactNode => {\n // Fetch the table data\n const eventsTableId = parseEntityIdFromSqlStatement(sql)\n const [species, setSpecies] = useState<string \| undefined \| null>(\n defaultSpecies,\n )\n const [plotContainerMeasurements, plotContainerRef] =\n useMeasure<HTMLDivElement>()\n const queryFilters = getAdditionalFilters(searchParams, sqlOperator) ?? []\n const speciesFilter: ColumnMultiValueFunctionQueryFilter \| undefined = species\n ? {\n columnName: 'species',\n concreteType:\n 'org.sagebionetworks.repo.model.table.ColumnMultiValueFunctionQueryFilter',\n values: [species],\n function: ColumnMultiValueFunction.HAS,\n _function: ColumnMultiValueFunction.HAS,\n }\n : undefined\n const additionalFilters = [...queryFilters]\n if (speciesFilter) {\n additionalFilters.push(speciesFilter)\n }\n const eventTableQuery = useGetFullTableQueryResults(\n {\n entityId: eventsTableId,\n query: {\n sql: `${sql} WHERE observationTime IS NOT NULL`,\n sort: [\n {\n column: 'observationTime',\n direction: 'ASC',\n },\n ],\n additionalFilters: additionalFilters,\n },\n\n partMask: BUNDLE_MASK_QUERY_RESULTS,\n concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n },\n {\n enabled: !!species,\n },\n )\n\n const { data: eventsData, isLoading } = eventTableQuery\n\n // filter the phases query response data to the specific species\n const phaseData = useMemo(() => {\n if (species) {\n const phasesForTargetSpecies =\n hardcodedPhasesQueryResponseData.queryResult?.queryResults.rows.filter(\n row => {\n return row.values[phaseSpeciesIndex] == species\n },\n )\n return phasesForTargetSpecies\n } else return undefined\n }, [species])\n\n if (isLoading) {\n return <LoadingTimelinePlot />\n }\n const observationPhaseIndex = getHeaderIndex(\n OBSERVATION_PHASE_COLUMN_NAME,\n eventsData,\n )\n const observationTimeIndex = getHeaderIndex(\n OBSERVATION_TIME_COLUMN_NAME,\n eventsData,\n )\n const observationTimeUnitIndex = getHeaderIndex(\n OBSERVATION_TIME_UNITS_COLUMN_NAME,\n eventsData,\n )\n const observationSubmitterNameIndex = getHeaderIndex(\n OBSERVATION_SUBMITTER_NAME_COLUMN_NAME,\n eventsData,\n )\n const observationTextIndex = getHeaderIndex(\n OBSERVATION_TEXT_COLUMN_NAME,\n eventsData,\n )\n const observationDoiIndex = getHeaderIndex(\n OBSERVATION_DOI_COLUMN_NAME,\n eventsData,\n )\n\n const observationTypeIndex = getHeaderIndex(\n OBSERVATION_TYPE_COLUMN_NAME,\n eventsData,\n )\n const submitterUserIdIndex = getHeaderIndex(\n OBSERVATION_SUBMITTER_USER_ID_COLUMN_NAME,\n eventsData,\n )\n\n const schema: ObservationCardSchema = {\n observationSubmitterName: observationSubmitterNameIndex,\n synapseId: submitterUserIdIndex,\n observationType: observationTypeIndex,\n observationText: observationTextIndex,\n observationTime: observationTimeIndex,\n observationTimeUnits: observationTimeUnitIndex,\n doi: observationDoiIndex,\n }\n\n const widthPx =\n plotContainerMeasurements?.width && phaseData\n ? plotContainerMeasurements?.width / phaseData.length\n : 0\n const gridTemplateColumns = phaseData?.map(() => 'auto').join(' ')\n\n return (\n <>\n {species && (\n <>\n {title && <Typography variant=\"h2\">{title}</Typography>}\n {subTitle && (\n <Typography variant=\"body1Italic\" sx={{ margin: '10px 0px' }}>\n {subTitle}\n </Typography>\n )}\n </>\n )}\n <Box>\n <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>\n {/* Species selector /}\n <Box>\n {!defaultSpecies && (\n <TimelinePlotSpeciesSelector\n setSpecies={setSpecies}\n species={species}\n sql={sql}\n additionalFilters={queryFilters}\n />\n )}\n </Box>\n {/ Legend /}\n {phaseData && (\n <Box\n sx={{ display: 'flex', justifyContent: 'flex-end', gap: '25px' }}\n >\n {phaseData.map((phaseRow, index) => {\n const { colorPalette } = getColorPalette(index, 1)\n return (\n <TimelineLegendItem\n key={phaseRow.rowId}\n color={colorPalette[0]}\n phaseName={phaseRow.values[phaseObservationIndex]}\n />\n )\n })}\n </Box>\n )}\n </Box>\n {/ Phase plots */}\n {species && phaseData && (\n <div ref={plotContainerRef}>\n <Box\n sx={{\n display: 'inline-grid',\n gridTemplateColumns,\n minWidth: plotContainerMeasurements?.width,\n maxWidth: plotContainerMeasurements?.width,\n }}\n className=\"forcePlotlyDefaultCursor\"\n >\n {phaseData.map((phaseRow, index) => {\n const { colorPalette } = getColorPalette(index, 1)\n const phaseEventRows =\n eventsData?.queryResult?.queryResults.rows.filter(row => {\n return (\n row.values[observationPhaseIndex] ==\n phaseRow.values[phaseObservationIndex]\n )\n })\n\n return phaseEventRows ? (\n <TimelinePhase\n key={phaseRow.rowId}\n name={phaseRow.values[phaseObservationIndex]!}\n color={colorPalette[0]}\n rowData={phaseEventRows}\n schema={schema}\n widthPx={widthPx}\n sql={sql}\n />\n ) : (\n <></>\n )\n })}\n </Box>\n </div>\n )}\n </Box>\n </>\n )\n}\n\nexport const LoadingTimelinePlot = (): React.ReactNode => {\n return (\n <Box>\n <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: '10px' }}>\n <Skeleton height=\"45px\" width=\"80px\" />\n <Skeleton height=\"45px\" width=\"80px\" />\n </Box>\n <Box sx={{ display: 'flex' }}>\n <Skeleton height=\"150px\" width=\"100%\" />\n </Box>\n </Box>\n )\n}\n\nexport default TimelinePlot\n"],"mappings":";;;;;;;;;;;;;;;;;;AA2BA,IAAM,IAAgC,oBAChC,IAA+B,mBAC/B,IAAqC,wBACrC,IAAyC,4BACzC,IAA+B,mBAC/B,IAA+B,mBAC/B,IAA4C,aAC5C,IAA8B,OAUvB,KAAgB,EAC3B,QACA,iBACA,gBACA,mBACA,UACA,kBACwC;CAExC,IAAM,IAAgB,EAA8B,CAAG,GACjD,CAAC,GAAS,KAAc,EAC5B,CACF,GACM,CAAC,GAA2B,KAChC,EAA2B,GACvB,IAAe,EAAqB,GAAc,CAAW,KAAK,CAAC,GACnE,IAAiE,IACnE;EACE,YAAY;EACZ,cACE;EACF,QAAQ,CAAC,CAAO;EAChB,UAAU,EAAyB;EACnC,WAAW,EAAyB;CACtC,IACA,KAAA,GACE,IAAoB,CAAC,GAAG,CAAY;CAC1C,AAAI,KACF,EAAkB,KAAK,CAAa;CAwBtC,IAAM,EAAE,MAAM,GAAY,iBAtBF,EACtB;EACE,UAAU;EACV,OAAO;GACL,KAAK,GAAG,EAAI;GACZ,MAAM,CACJ;IACE,QAAQ;IACR,WAAW;GACb,CACF;GACmB;EACrB;EAEA,UAAA;EACA,cAAc;CAChB,GACA,EACE,SAAS,CAAC,CAAC,EACb,CAGsC,GAGlC,IAAY,QAAc;EAC9B,IAAI,GAOF,OALE,EAAiC,aAAa,aAAa,KAAK,QAC9D,MACS,EAAI,OAAO,MAAsB,CAE5C;CAGN,GAAG,CAAC,CAAO,CAAC;CAEZ,IAAI,GACF,OAAO,kBAAC,GAAD,CAAsB,CAAA;CAE/B,IAAM,IAAwB,EAC5B,GACA,CACF,GACM,IAAuB,EAC3B,GACA,CACF,GACM,IAA2B,EAC/B,GACA,CACF,GACM,IAAgC,EACpC,GACA,CACF,GACM,IAAuB,EAC3B,GACA,CACF,GACM,IAAsB,EAC1B,GACA,CACF,GAEM,IAAuB,EAC3B,GACA,CACF,GAMM,IAAgC;EACpC,0BAA0B;EAC1B,WAP2B,EAC3B,GACA,CAKW;EACX,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,sBAAsB;EACtB,KAAK;CACP,GAEM,KACJ,GAA2B,SAAS,IAChC,GAA2B,QAAQ,EAAU,SAC7C,GACA,KAAsB,GAAW,UAAU,MAAM,EAAE,KAAK,GAAG;CAEjE,OACE,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAA,GAAA,EAAA,UAAA,CACG,KAAS,kBAAC,GAAD;EAAY,SAAQ;YAAM;CAAkB,CAAA,GACrD,KACC,kBAAC,GAAD;EAAY,SAAQ;EAAc,IAAI,EAAE,QAAQ,WAAW;YACxD;CACS,CAAA,CAEd,EAAA,CAAA,GAEJ,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,gBAAgB;EAAgB;YAA5D,CAEE,kBAAC,GAAD,EAAA,UACG,CAAC,KACA,kBAAC,GAAD;GACc;GACH;GACJ;GACL,mBAAmB;EACpB,CAAA,EAEA,CAAA,GAEJ,KACC,kBAAC,GAAD;GACE,IAAI;IAAE,SAAS;IAAQ,gBAAgB;IAAY,KAAK;GAAO;aAE9D,EAAU,KAAK,GAAU,MAAU;IAClC,IAAM,EAAE,oBAAiB,EAAgB,GAAO,CAAC;IACjD,OACE,kBAAC,GAAD;KAEE,OAAO,EAAa;KACpB,WAAW,EAAS,OAAO;IAC5B,GAHM,EAAS,KAGf;GAEL,CAAC;EACE,CAAA,CAEJ;KAEJ,KAAW,KACV,kBAAC,OAAD;EAAK,KAAK;YACR,kBAAC,GAAD;GACE,IAAI;IACF,SAAS;IACT;IACA,UAAU,GAA2B;IACrC,UAAU,GAA2B;GACvC;GACA,WAAU;aAET,EAAU,KAAK,GAAU,MAAU;IAClC,IAAM,EAAE,oBAAiB,EAAgB,GAAO,CAAC,GAC3C,IACJ,GAAY,aAAa,aAAa,KAAK,QAAO,MAE9C,EAAI,OAAO,MACX,EAAS,OAAO,EAEnB;IAEH,OAAO,IACL,kBAAC,GAAD;KAEE,MAAM,EAAS,OAAO;KACtB,OAAO,EAAa;KACpB,SAAS;KACD;KACC;KACJ;IACN,GAPM,EAAS,KAOf,IAED,kBAAA,GAAA,CAAI,CAAA;GAER,CAAC;EACE,CAAA;CACF,CAAA,CAEJ,EAAA,CAAA,CACL,EAAA,CAAA;AAEN,GAEa,UAET,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;CAAK,IAAI;EAAE,SAAS;EAAQ,gBAAgB;EAAY,KAAK;CAAO;WAApE,CACE,kBAAC,GAAD;EAAU,QAAO;EAAO,OAAM;CAAQ,CAAA,GACtC,kBAAC,GAAD;EAAU,QAAO;EAAO,OAAM;CAAQ,CAAA,CACnC;IACL,kBAAC,GAAD;CAAK,IAAI,EAAE,SAAS,OAAO;WACzB,kBAAC,GAAD;EAAU,QAAO;EAAQ,OAAM;CAAQ,CAAA;AACpC,CAAA,CACF,EAAA,CAAA"}

package/dist/components/TimelinePlot/TimelinePlotSpeciesSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimelinePlotSpeciesSelector.js","names":[],"sources":["../../../src/components/TimelinePlot/TimelinePlotSpeciesSelector.tsx"],"sourcesContent":["import React, { useId } from 'react'\nimport { StyledFormControl } from '@/components/styled'\nimport { useGetFullTableQueryResults } from '@/synapse-queries'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions'\nimport { BUNDLE_MASK_QUERY_RESULTS } from '@/utils/SynapseConstants'\nimport { InputLabel, MenuItem, Select } from '@mui/material'\nimport { Box } from '@mui/system'\nimport { QueryFilter } from '@sage-bionetworks/synapse-types'\nimport { Dispatch, SetStateAction } from 'react'\n\nexport type TimelinePlotSpeciesSelectorProps = {\n sql: string\n additionalFilters?: QueryFilter[]\n species?: string \| null\n setSpecies: Dispatch<SetStateAction<string \| null \| undefined>>\n}\nexport const TimelinePlotSpeciesSelector = ({\n sql,\n additionalFilters,\n species,\n setSpecies,\n}: TimelinePlotSpeciesSelectorProps): React.ReactNode => {\n const speciesLabelId = useId()\n\n const eventsTableId = parseEntityIdFromSqlStatement(sql)\n // Fetch the species\n const eventTableQuery = useGetFullTableQueryResults({\n entityId: eventsTableId,\n query: {\n sql: `SELECT distinct unnest(species) FROM ${eventsTableId} WHERE species IS NOT NULL AND observationTime IS NOT NULL GROUP BY species`,\n additionalFilters: additionalFilters,\n },\n partMask: BUNDLE_MASK_QUERY_RESULTS,\n concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n })\n\n const { data: speciesData, isLoading } = eventTableQuery\n const rows = speciesData?.queryResult?.queryResults?.rows\n const defaultSpecies = rows && rows.length > 0 ? rows[0].values[0] : undefined\n if (species == undefined && defaultSpecies != undefined) {\n setSpecies(defaultSpecies)\n }\n // Hide if loading, there are no rows, or there's only 1 species option\n if (isLoading \|\| !rows \|\| rows.length < 2) {\n return <></>\n }\n\n return (\n <Box>\n <StyledFormControl>\n <InputLabel id={speciesLabelId}>Species</InputLabel>\n <Select\n sx={{ marginLeft: '2px', marginBottom: '2px' }}\n labelId={speciesLabelId}\n value={species}\n label=\"Species\"\n onChange={event => {\n setSpecies(event.target.value)\n }}\n >\n {rows?.map(row => {\n const species = row.values[0]!\n return (\n <MenuItem key={species} value={species}>\n {species}\n </MenuItem>\n )\n })}\n </Select>\n </StyledFormControl>\n </Box>\n )\n}\nexport default TimelinePlotSpeciesSelector\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAa,KAA+B,EAC1C,QACA,sBACA,YACA,oBACuD;CACvD,IAAM,IAAiB,~~GAAO~~,~~EAExB~~,IAAgB,EAA8B,~~EAAI~~,~~EAYlD~~,EAAE,MAAM,GAAa,iBAVH,EAA4B;EAClD,UAAU;EACV,OAAO;GACL,KAAK,wCAAwC,EAAc;GACxC;~~GACpB~~;~~EACD~~,UAAA;EACA,cAAc;~~EACf~~,~~CAEwC~~,~~EACnC~~,IAAO,GAAa,aAAa,cAAc,MAC/C,IAAiB,KAAQ,EAAK,SAAS,IAAI,EAAK,GAAG,OAAO,KAAK,KAAA;~~AASrE~~,~~QARI~~,KAAW,QAAa,KAAkB,QAC5C,EAAW,~~EAAe~~,~~EAGxB~~,KAAa,CAAC,KAAQ,EAAK,SAAS,IAC/B,kBAAA,GAAA,~~EAAK~~,CAAA,~~GAIZ~~,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAY,IAAI;YAAgB;~~EAAoB~~,CAAA,~~EACpD~~,kBAAC,GAAD;EACE,IAAI;GAAE,YAAY;GAAO,cAAc;~~GAAO~~;~~EAC9C~~,SAAS;EACT,OAAO;EACP,OAAM;EACN,WAAU,MAAS;~~AACjB~~,~~KAAW~~,EAAM,OAAO,~~MAAM;;YAG~~/B,GAAM,KAAI,MAAO;GAChB,IAAM,IAAU,EAAI,OAAO;~~AAC3B~~,~~UACE~~,kBAAC,GAAD;IAAwB,OAAO;cAC5B;~~IACQ~~,~~EAFI~~,~~EAEJ~~;~~IAEb~~;~~EACK~~,CAAA,CACS,EAAA,CAAA,EAChB,CAAA"}
1	+ {"version":3,"file":"TimelinePlotSpeciesSelector.js","names":[],"sources":["../../../src/components/TimelinePlot/TimelinePlotSpeciesSelector.tsx"],"sourcesContent":["import React, { useId } from 'react'\nimport { StyledFormControl } from '@/components/styled'\nimport { useGetFullTableQueryResults } from '@/synapse-queries'\nimport { parseEntityIdFromSqlStatement } from '@/utils/functions'\nimport { BUNDLE_MASK_QUERY_RESULTS } from '@/utils/SynapseConstants'\nimport { InputLabel, MenuItem, Select } from '@mui/material'\nimport { Box } from '@mui/system'\nimport { QueryFilter } from '@sage-bionetworks/synapse-types'\nimport { Dispatch, SetStateAction } from 'react'\n\nexport type TimelinePlotSpeciesSelectorProps = {\n sql: string\n additionalFilters?: QueryFilter[]\n species?: string \| null\n setSpecies: Dispatch<SetStateAction<string \| null \| undefined>>\n}\nexport const TimelinePlotSpeciesSelector = ({\n sql,\n additionalFilters,\n species,\n setSpecies,\n}: TimelinePlotSpeciesSelectorProps): React.ReactNode => {\n const speciesLabelId = useId()\n\n const eventsTableId = parseEntityIdFromSqlStatement(sql)\n // Fetch the species\n const eventTableQuery = useGetFullTableQueryResults({\n entityId: eventsTableId,\n query: {\n sql: `SELECT distinct unnest(species) FROM ${eventsTableId} WHERE species IS NOT NULL AND observationTime IS NOT NULL GROUP BY species`,\n additionalFilters: additionalFilters,\n },\n partMask: BUNDLE_MASK_QUERY_RESULTS,\n concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n })\n\n const { data: speciesData, isLoading } = eventTableQuery\n const rows = speciesData?.queryResult?.queryResults?.rows\n const defaultSpecies = rows && rows.length > 0 ? rows[0].values[0] : undefined\n if (species == undefined && defaultSpecies != undefined) {\n setSpecies(defaultSpecies)\n }\n // Hide if loading, there are no rows, or there's only 1 species option\n if (isLoading \|\| !rows \|\| rows.length < 2) {\n return <></>\n }\n\n return (\n <Box>\n <StyledFormControl>\n <InputLabel id={speciesLabelId}>Species</InputLabel>\n <Select\n sx={{ marginLeft: '2px', marginBottom: '2px' }}\n labelId={speciesLabelId}\n value={species}\n label=\"Species\"\n onChange={event => {\n setSpecies(event.target.value)\n }}\n >\n {rows?.map(row => {\n const species = row.values[0]!\n return (\n <MenuItem key={species} value={species}>\n {species}\n </MenuItem>\n )\n })}\n </Select>\n </StyledFormControl>\n </Box>\n )\n}\nexport default TimelinePlotSpeciesSelector\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAa,KAA+B,EAC1C,QACA,sBACA,YACA,oBACuD;CACvD,IAAM,IAAiB,EAAM,GAEvB,IAAgB,EAA8B,CAAG,GAYjD,EAAE,MAAM,GAAa,iBAVH,EAA4B;EAClD,UAAU;EACV,OAAO;GACL,KAAK,wCAAwC,EAAc;GACxC;EACrB;EACA,UAAA;EACA,cAAc;CAChB,CAEyC,GACnC,IAAO,GAAa,aAAa,cAAc,MAC/C,IAAiB,KAAQ,EAAK,SAAS,IAAI,EAAK,GAAG,OAAO,KAAK,KAAA;CASrE,OARI,KAAW,QAAa,KAAkB,QAC5C,EAAW,CAAc,GAGvB,KAAa,CAAC,KAAQ,EAAK,SAAS,IAC/B,kBAAA,GAAA,CAAI,CAAA,IAIX,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAY,IAAI;YAAgB;CAAmB,CAAA,GACnD,kBAAC,GAAD;EACE,IAAI;GAAE,YAAY;GAAO,cAAc;EAAM;EAC7C,SAAS;EACT,OAAO;EACP,OAAM;EACN,WAAU,MAAS;GACjB,EAAW,EAAM,OAAO,KAAK;EAC/B;YAEC,GAAM,KAAI,MAAO;GAChB,IAAM,IAAU,EAAI,OAAO;GAC3B,OACE,kBAAC,GAAD;IAAwB,OAAO;cAC5B;GACO,GAFK,CAEL;EAEd,CAAC;CACK,CAAA,CACS,EAAA,CAAA,EAChB,CAAA;AAET"}

package/dist/components/TimelinePlot/phasesQueryResponseData.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"phasesQueryResponseData.js","names":[],"sources":["../../../src/components/TimelinePlot/phasesQueryResponseData.ts"],"sourcesContent":["import { QueryResultBundle } from '@sage-bionetworks/synapse-types'\n\nconst SPECIES_COLUMN_NAME = 'species'\nconst OBSERVATION_PHASE_COLUMN_NAME = 'observationphase'\n\nconst hardcodedPhasesQueryResponseData: QueryResultBundle = {\n concreteType: 'org.sagebionetworks.repo.model.table.QueryResultBundle',\n queryResult: {\n concreteType: 'org.sagebionetworks.repo.model.table.QueryResult',\n queryResults: {\n concreteType: 'org.sagebionetworks.repo.model.table.RowSet',\n tableId: 'syn52408661',\n etag: 'a3270cb2-4373-4e12-9981-e12326e54ad1',\n headers: [\n {\n name: 'species',\n columnType: 'STRING',\n id: '152514',\n },\n {\n name: 'observationPhase',\n columnType: 'STRING',\n id: '197976',\n },\n {\n name: 'observationPhaseOrder',\n columnType: 'INTEGER',\n id: '198102',\n },\n {\n name: 'observationTimeMax',\n columnType: 'INTEGER',\n id: '198103',\n },\n {\n name: 'observationTimeUnits',\n columnType: 'STRING',\n id: '198101',\n },\n ],\n rows: [\n {\n rowId: 9,\n versionNumber: 4,\n values: ['Danio rerio', 'embryo', '1', '7', 'days'],\n },\n {\n rowId: 10,\n versionNumber: 4,\n values: ['Danio rerio', 'larval', '2', '3', 'months'],\n },\n {\n rowId: 11,\n versionNumber: 4,\n values: ['Danio rerio', 'juvenile', '3', '6', 'months'],\n },\n {\n rowId: 12,\n versionNumber: 4,\n values: ['Danio rerio', 'adult', '4', '12', 'months'],\n },\n {\n rowId: 16,\n versionNumber: 4,\n values: ['Drosophila', 'embryo', '1', '24', 'hours'],\n },\n {\n rowId: 17,\n versionNumber: 4,\n values: ['Drosophila', 'larval', '2', '5', 'days'],\n },\n {\n rowId: 18,\n versionNumber: 4,\n values: ['Drosophila', 'pupal', '3', '12', 'days'],\n },\n {\n rowId: 19,\n versionNumber: 4,\n values: ['Drosophila', 'adult', '4', '5', 'weeks'],\n },\n {\n rowId: 1,\n versionNumber: 4,\n values: ['Mus musculus', 'prenatal', '1', '21', 'days'],\n },\n {\n rowId: 2,\n versionNumber: 4,\n values: ['Mus musculus', 'postnatal', '2', '6', 'months'],\n },\n {\n rowId: 20,\n versionNumber: 4,\n values: ['Rattus norvegicus', 'prenatal', '1', '23', 'days'],\n },\n {\n rowId: 21,\n versionNumber: 4,\n values: ['Rattus norvegicus', 'neonatal', '2', '4', 'weeks'],\n },\n {\n rowId: 22,\n versionNumber: 4,\n values: ['Rattus norvegicus', 'weanling', '3', '2', 'months'],\n },\n {\n rowId: 23,\n versionNumber: 4,\n values: ['Rattus norvegicus', 'juvenile', '4', '3', 'months'],\n },\n {\n rowId: 24,\n versionNumber: 4,\n values: ['Rattus norvegicus', 'adolescent', '5', '6', 'months'],\n },\n {\n rowId: 25,\n versionNumber: 4,\n values: ['Rattus norvegicus', 'adult', '6', '12', 'months'],\n },\n {\n rowId: 13,\n versionNumber: 4,\n values: ['Saccharomyces', 'log phase', '1', '7', 'days'],\n },\n {\n rowId: 14,\n versionNumber: 4,\n values: ['Saccharomyces', 'stationary phase', '2', '2', 'weeks'],\n },\n {\n rowId: 15,\n versionNumber: 4,\n values: ['Saccharomyces', 'death phase', '3', '3', 'weeks'],\n },\n {\n rowId: 3,\n versionNumber: 4,\n values: ['Sus scrofa', 'prenatal', '1', '115', 'days'],\n },\n {\n rowId: 4,\n versionNumber: 4,\n values: ['Sus scrofa', 'neonatal', '2', '3', 'months'],\n },\n {\n rowId: 5,\n versionNumber: 4,\n values: ['Sus scrofa', 'weanling', '3', '6', 'months'],\n },\n {\n rowId: 6,\n versionNumber: 4,\n values: ['Sus scrofa', 'juvenile', '4', '12', 'months'],\n },\n {\n rowId: 7,\n versionNumber: 4,\n values: ['Sus scrofa', 'adolescent', '5', '2', 'years'],\n },\n {\n rowId: 8,\n versionNumber: 4,\n values: ['Sus scrofa', 'adult', '6', '3', 'years'],\n },\n ],\n },\n },\n}\n\nexport const phaseSpeciesIndex =\n hardcodedPhasesQueryResponseData.queryResult?.queryResults.headers.findIndex(\n header => header.name.toLowerCase() === SPECIES_COLUMN_NAME,\n )!\nexport const phaseObservationIndex =\n hardcodedPhasesQueryResponseData.queryResult?.queryResults.headers.findIndex(\n header => header.name.toLowerCase() === OBSERVATION_PHASE_COLUMN_NAME,\n )!\n\nexport default hardcodedPhasesQueryResponseData\n"],"mappings":";AAEA,IAAM,IAAsB,WACtB,IAAgC,oBAEhC,IAAsD;CAC1D,cAAc;CACd,aAAa;EACX,cAAc;EACd,cAAc;GACZ,cAAc;GACd,SAAS;GACT,MAAM;GACN,SAAS;IACP;KACE,MAAM;KACN,YAAY;KACZ,IAAI;~~KACL~~;~~IACD~~;KACE,MAAM;KACN,YAAY;KACZ,IAAI;~~KACL~~;~~IACD~~;KACE,MAAM;KACN,YAAY;KACZ,IAAI;~~KACL~~;~~IACD~~;KACE,MAAM;KACN,YAAY;KACZ,IAAI;~~KACL~~;~~IACD~~;KACE,MAAM;KACN,YAAY;KACZ,IAAI;~~KACL~~;~~IACF~~;~~GACD~~,MAAM;IACJ;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAe;MAAU;MAAK;MAAK;~~MAAO~~;~~KACpD~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAe;MAAU;MAAK;MAAK;~~MAAS~~;~~KACtD~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAe;MAAY;MAAK;MAAK;~~MAAS~~;~~KACxD~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAe;MAAS;MAAK;MAAM;~~MAAS~~;~~KACtD~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAc;MAAU;MAAK;MAAM;~~MAAQ~~;~~KACrD~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAc;MAAU;MAAK;MAAK;~~MAAO~~;~~KACnD~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAc;MAAS;MAAK;MAAM;~~MAAO~~;~~KACnD~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAc;MAAS;MAAK;MAAK;~~MAAQ~~;~~KACnD~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAgB;MAAY;MAAK;MAAM;~~MAAO~~;~~KACxD~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAgB;MAAa;MAAK;MAAK;~~MAAS~~;~~KAC1D~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAqB;MAAY;MAAK;MAAM;~~MAAO~~;~~KAC7D~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAqB;MAAY;MAAK;MAAK;~~MAAQ~~;~~KAC7D~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAqB;MAAY;MAAK;MAAK;~~MAAS~~;~~KAC9D~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAqB;MAAY;MAAK;MAAK;~~MAAS~~;~~KAC9D~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAqB;MAAc;MAAK;MAAK;~~MAAS~~;~~KAChE~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAqB;MAAS;MAAK;MAAM;~~MAAS~~;~~KAC5D~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAiB;MAAa;MAAK;MAAK;~~MAAO~~;~~KACzD~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAiB;MAAoB;MAAK;MAAK;~~MAAQ~~;~~KACjE~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAiB;MAAe;MAAK;MAAK;~~MAAQ~~;~~KAC5D~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAc;MAAY;MAAK;MAAO;~~MAAO~~;~~KACvD~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAc;MAAY;MAAK;MAAK;~~MAAS~~;~~KACvD~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAc;MAAY;MAAK;MAAK;~~MAAS~~;~~KACvD~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAc;MAAY;MAAK;MAAM;~~MAAS~~;~~KACxD~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAc;MAAc;MAAK;MAAK;~~MAAQ~~;~~KACxD~~;~~IACD~~;KACE,OAAO;KACP,eAAe;KACf,QAAQ;MAAC;MAAc;MAAS;MAAK;MAAK;~~MAAQ~~;~~KACnD~~;~~IACF;~~GACF;EACF;CACF,~~EAEY~~,IACX,EAAiC,aAAa,aAAa,QAAQ,WACjE,MAAU,EAAO,KAAK,~~aAAa~~,~~KAAK~~,~~EACzC~~,~~EACU~~,IACX,EAAiC,aAAa,aAAa,QAAQ,WACjE,MAAU,EAAO,KAAK,~~aAAa~~,~~KAAK~~,~~EACzC~~"}
1	+ {"version":3,"file":"phasesQueryResponseData.js","names":[],"sources":["../../../src/components/TimelinePlot/phasesQueryResponseData.ts"],"sourcesContent":["import { QueryResultBundle } from '@sage-bionetworks/synapse-types'\n\nconst SPECIES_COLUMN_NAME = 'species'\nconst OBSERVATION_PHASE_COLUMN_NAME = 'observationphase'\n\nconst hardcodedPhasesQueryResponseData: QueryResultBundle = {\n concreteType: 'org.sagebionetworks.repo.model.table.QueryResultBundle',\n queryResult: {\n concreteType: 'org.sagebionetworks.repo.model.table.QueryResult',\n queryResults: {\n concreteType: 'org.sagebionetworks.repo.model.table.RowSet',\n tableId: 'syn52408661',\n etag: 'a3270cb2-4373-4e12-9981-e12326e54ad1',\n headers: [\n {\n name: 'species',\n columnType: 'STRING',\n id: '152514',\n },\n {\n name: 'observationPhase',\n columnType: 'STRING',\n id: '197976',\n },\n {\n name: 'observationPhaseOrder',\n columnType: 'INTEGER',\n id: '198102',\n },\n {\n name: 'observationTimeMax',\n columnType: 'INTEGER',\n id: '198103',\n },\n {\n name: 'observationTimeUnits',\n columnType: 'STRING',\n id: '198101',\n },\n ],\n rows: [\n {\n rowId: 9,\n versionNumber: 4,\n values: ['Danio rerio', 'embryo', '1', '7', 'days'],\n },\n {\n rowId: 10,\n versionNumber: 4,\n values: ['Danio rerio', 'larval', '2', '3', 'months'],\n },\n {\n rowId: 11,\n versionNumber: 4,\n values: ['Danio rerio', 'juvenile', '3', '6', 'months'],\n },\n {\n rowId: 12,\n versionNumber: 4,\n values: ['Danio rerio', 'adult', '4', '12', 'months'],\n },\n {\n rowId: 16,\n versionNumber: 4,\n values: ['Drosophila', 'embryo', '1', '24', 'hours'],\n },\n {\n rowId: 17,\n versionNumber: 4,\n values: ['Drosophila', 'larval', '2', '5', 'days'],\n },\n {\n rowId: 18,\n versionNumber: 4,\n values: ['Drosophila', 'pupal', '3', '12', 'days'],\n },\n {\n rowId: 19,\n versionNumber: 4,\n values: ['Drosophila', 'adult', '4', '5', 'weeks'],\n },\n {\n rowId: 1,\n versionNumber: 4,\n values: ['Mus musculus', 'prenatal', '1', '21', 'days'],\n },\n {\n rowId: 2,\n versionNumber: 4,\n values: ['Mus musculus', 'postnatal', '2', '6', 'months'],\n },\n {\n rowId: 20,\n versionNumber: 4,\n values: ['Rattus norvegicus', 'prenatal', '1', '23', 'days'],\n },\n {\n rowId: 21,\n versionNumber: 4,\n values: ['Rattus norvegicus', 'neonatal', '2', '4', 'weeks'],\n },\n {\n rowId: 22,\n versionNumber: 4,\n values: ['Rattus norvegicus', 'weanling', '3', '2', 'months'],\n },\n {\n rowId: 23,\n versionNumber: 4,\n values: ['Rattus norvegicus', 'juvenile', '4', '3', 'months'],\n },\n {\n rowId: 24,\n versionNumber: 4,\n values: ['Rattus norvegicus', 'adolescent', '5', '6', 'months'],\n },\n {\n rowId: 25,\n versionNumber: 4,\n values: ['Rattus norvegicus', 'adult', '6', '12', 'months'],\n },\n {\n rowId: 13,\n versionNumber: 4,\n values: ['Saccharomyces', 'log phase', '1', '7', 'days'],\n },\n {\n rowId: 14,\n versionNumber: 4,\n values: ['Saccharomyces', 'stationary phase', '2', '2', 'weeks'],\n },\n {\n rowId: 15,\n versionNumber: 4,\n values: ['Saccharomyces', 'death phase', '3', '3', 'weeks'],\n },\n {\n rowId: 3,\n versionNumber: 4,\n values: ['Sus scrofa', 'prenatal', '1', '115', 'days'],\n },\n {\n rowId: 4,\n versionNumber: 4,\n values: ['Sus scrofa', 'neonatal', '2', '3', 'months'],\n },\n {\n rowId: 5,\n versionNumber: 4,\n values: ['Sus scrofa', 'weanling', '3', '6', 'months'],\n },\n {\n rowId: 6,\n versionNumber: 4,\n values: ['Sus scrofa', 'juvenile', '4', '12', 'months'],\n },\n {\n rowId: 7,\n versionNumber: 4,\n values: ['Sus scrofa', 'adolescent', '5', '2', 'years'],\n },\n {\n rowId: 8,\n versionNumber: 4,\n values: ['Sus scrofa', 'adult', '6', '3', 'years'],\n },\n ],\n },\n },\n}\n\nexport const phaseSpeciesIndex =\n hardcodedPhasesQueryResponseData.queryResult?.queryResults.headers.findIndex(\n header => header.name.toLowerCase() === SPECIES_COLUMN_NAME,\n )!\nexport const phaseObservationIndex =\n hardcodedPhasesQueryResponseData.queryResult?.queryResults.headers.findIndex(\n header => header.name.toLowerCase() === OBSERVATION_PHASE_COLUMN_NAME,\n )!\n\nexport default hardcodedPhasesQueryResponseData\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ToastMessage.js","names":[],"sources":["../../../src/components/ToastMessage/ToastMessage.tsx"],"sourcesContent":["import { uniqueId } from 'lodash-es'\nimport React, { ReactNode, useRef } from 'react'\nimport { toast, ToastBar, Toaster } from 'react-hot-toast'\nimport { CSSTransition, TransitionGroup } from 'react-transition-group'\nimport FullWidthAlert, {\n AlertButtonConfig,\n} from '../FullWidthAlert/FullWidthAlert'\n\nexport type ToastMessageProps = {\n text: string\n show: boolean\n autohide: boolean\n}\n\n/*\n \n * Generalization of a Material-style toast message used in a couple of places. This component is simple and\n * cannot handle issuing multiple toast messages. For more sophisticated cases, see {@link displayToast}\n /\nexport function ToastMessage({\n text,\n show,\n autohide,\n}: ToastMessageProps): React.JSX.Element {\n const modalRef = useRef<HTMLDivElement>(null)\n return (\n <TransitionGroup>\n {show && (\n <CSSTransition\n nodeRef={modalRef}\n classNames=\"SRC-card\"\n timeout={autohide ? { enter: 500, exit: 300 } : {}}\n >\n <div className=\"SRC-modal\" ref={modalRef}>\n {text}\n </div>\n </CSSTransition>\n )}\n </TransitionGroup>\n )\n}\n\n/\n Customized ToastContainer for using react-toastify.\n \n Note that this will collide with other notification systems, such as the BootstrapNotify notifications\n * in SWC.\n /\nexport function SynapseToastContainer(): React.ReactNode {\n return (\n <Toaster\n containerClassName=\"SynapseToastContainer\"\n position=\"bottom-center\"\n >\n {t => (\n <ToastBar\n toast={t}\n style={{\n ...t.style,\n animation: t.visible ? 'fadeInUp 0.5s ease' : 'fadeOutDown 1s ease', // The exit animation needs to be long enough for the element to be removed, or else it will pop back in\n }}\n ></ToastBar>\n )}\n </Toaster>\n )\n}\n\ntype ToastMessageOptions = {\n title?: string\n / autoCloseInMs default: 15000 /\n autoCloseInMs?: number\n primaryButtonConfig?: AlertButtonConfig\n secondaryButtonConfig?: AlertButtonConfig\n dismissOnPrimaryButtonClick?: boolean\n dismissOnSecondaryButtonClick?: boolean\n}\n\n/\n Displays a toast message. Requires one 'SynapseToastContainer' to be somewhere in the page.\n \n @param message - The description of the toast message.\n * @param variant - The type of toast message to display. Default 'info'.\n\n * In ToastMessageOptions:\n \n @param autoCloseInMs - The amount of time in milliseconds to wait before automatically closing the toast. To prevent autoclose, set to 0 or Infinity. Default 15000.\n \n The rest of the options params are undefined by default.\n */\nexport const displayToast = (\n message: ReactNode,\n variant?: 'info' \| 'success' \| 'warning' \| 'danger',\n toastMessageOptions: ToastMessageOptions \| null = {},\n): (() => void) => {\n const id = uniqueId('synToast-')\n const onClose = () => {\n toast.dismiss(id)\n }\n\n const {\n title = undefined,\n primaryButtonConfig = undefined,\n secondaryButtonConfig = undefined,\n dismissOnPrimaryButtonClick = false,\n dismissOnSecondaryButtonClick = false,\n } = toastMessageOptions ?? {}\n\n // If 'dismissOnPrimaryButtonClick' is true, then we need to invoke onClose after onClick is invoked.\n if (\n primaryButtonConfig &&\n 'onClick' in primaryButtonConfig &&\n dismissOnPrimaryButtonClick\n ) {\n const onClick = primaryButtonConfig.onClick!\n primaryButtonConfig.onClick = e => {\n onClick(e)\n onClose()\n }\n }\n\n // ditto for secondary\n if (\n secondaryButtonConfig &&\n 'onClick' in secondaryButtonConfig &&\n dismissOnSecondaryButtonClick\n ) {\n const onClick = secondaryButtonConfig.onClick!\n secondaryButtonConfig.onClick = e => {\n onClick(e)\n onClose()\n }\n }\n\n let { autoCloseInMs = 15000 } = toastMessageOptions ?? {}\n // Some toast libraries use 0 to prevent autoclose\n // react-hot-toast doesn't, but we can convert it for better compatibility as we try to migrate to use just one library\n if (autoCloseInMs === 0) {\n autoCloseInMs = Infinity\n }\n\n toast(\n <FullWidthAlert\n isGlobal={false}\n onClose={onClose}\n variant={variant ?? 'info'}\n show={true}\n title={title}\n description={message}\n primaryButtonConfig={primaryButtonConfig}\n secondaryButtonConfig={secondaryButtonConfig}\n />,\n {\n id: id,\n className: 'SynapseToastMessage',\n duration: autoCloseInMs,\n },\n )\n\n return onClose\n}\n"],"mappings":";;;;;;;AAmBA,SAAgB,EAAa,EAC3B,SACA,SACA,eACuC;CACvC,IAAM,IAAW,EAAuB,~~KAAK~~;~~AAC7C~~,~~QACE~~,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,GAAD;EACE,SAAS;EACT,YAAW;EACX,SAAS,IAAW;GAAE,OAAO;GAAK,MAAM;~~GAAK~~,~~GAAG~~,~~EAAE~~;~~YAElD~~,kBAAC,OAAD;GAAK,WAAU;GAAY,KAAK;aAC7B;~~GACG~~,CAAA;~~EACQ~~,CAAA,EAEF,CAAA~~;;AAUtB~~,SAAgB,IAAyC;~~AACvD~~,~~QACE~~,kBAAC,GAAD;EACE,oBAAmB;EACnB,UAAS;aAER,MACC,kBAAC,GAAD;GACE,OAAO;GACP,OAAO;IACL,GAAG,EAAE;IACL,WAAW,EAAE,UAAU,uBAAuB;~~IAC/C~~;~~GACS~~,CAAA;~~EAEN~~,CAAA~~;;AA0Bd~~,IAAa,KACX,GACA,GACA,IAAkD,~~EAAE~~,~~KACnC~~;CACjB,IAAM,IAAK,EAAS,~~YAAY~~,~~EAC1B~~,UAAgB;~~AACpB~~,~~IAAM~~,QAAQ,~~EAAG~~;~~IAGb~~,EACJ,WAAQ,KAAA,GACR,yBAAsB,KAAA,GACtB,2BAAwB,KAAA,GACxB,iCAA8B,IAC9B,mCAAgC,OAC9B,KAAuB,~~EAAE~~;~~AAG7B~~,~~KACE~~,KACA,aAAa,KACb,GACA;EACA,IAAM,IAAU,EAAoB;~~AACpC~~,~~IAAoB~~,WAAU,MAAK;~~AAEjC~~,~~GADA~~,EAAQ,~~EAAE~~,EACV,~~GAAS;;;AAKb~~,~~KACE,~~KACA,aAAa,KACb,GACA;EACA,IAAM,IAAU,EAAsB;~~AACtC~~,~~IAAsB~~,WAAU,MAAK;~~AAEnC~~,~~GADA~~,EAAQ,~~EAAE~~,EACV,~~GAAS;;;CAIb,~~IAAI,EAAE,mBAAgB,SAAU,KAAuB,~~EAAE~~;~~AAyBzD~~,~~QAtBI~~,MAAkB,MACpB,IAAgB,WAGlB,EACE,kBAAC,GAAD;EACE,UAAU;EACD;EACT,SAAS,KAAW;EACpB,MAAM;EACC;EACP,aAAa;EACQ;EACE;~~EACvB~~,CAAA,~~EACF~~;EACM;EACJ,WAAW;EACX,UAAU;~~EACX~~,CACF,~~EAEM~~"}
1	+ {"version":3,"file":"ToastMessage.js","names":[],"sources":["../../../src/components/ToastMessage/ToastMessage.tsx"],"sourcesContent":["import { uniqueId } from 'lodash-es'\nimport React, { ReactNode, useRef } from 'react'\nimport { toast, ToastBar, Toaster } from 'react-hot-toast'\nimport { CSSTransition, TransitionGroup } from 'react-transition-group'\nimport FullWidthAlert, {\n AlertButtonConfig,\n} from '../FullWidthAlert/FullWidthAlert'\n\nexport type ToastMessageProps = {\n text: string\n show: boolean\n autohide: boolean\n}\n\n/*\n \n * Generalization of a Material-style toast message used in a couple of places. This component is simple and\n * cannot handle issuing multiple toast messages. For more sophisticated cases, see {@link displayToast}\n /\nexport function ToastMessage({\n text,\n show,\n autohide,\n}: ToastMessageProps): React.JSX.Element {\n const modalRef = useRef<HTMLDivElement>(null)\n return (\n <TransitionGroup>\n {show && (\n <CSSTransition\n nodeRef={modalRef}\n classNames=\"SRC-card\"\n timeout={autohide ? { enter: 500, exit: 300 } : {}}\n >\n <div className=\"SRC-modal\" ref={modalRef}>\n {text}\n </div>\n </CSSTransition>\n )}\n </TransitionGroup>\n )\n}\n\n/\n Customized ToastContainer for using react-toastify.\n \n Note that this will collide with other notification systems, such as the BootstrapNotify notifications\n * in SWC.\n /\nexport function SynapseToastContainer(): React.ReactNode {\n return (\n <Toaster\n containerClassName=\"SynapseToastContainer\"\n position=\"bottom-center\"\n >\n {t => (\n <ToastBar\n toast={t}\n style={{\n ...t.style,\n animation: t.visible ? 'fadeInUp 0.5s ease' : 'fadeOutDown 1s ease', // The exit animation needs to be long enough for the element to be removed, or else it will pop back in\n }}\n ></ToastBar>\n )}\n </Toaster>\n )\n}\n\ntype ToastMessageOptions = {\n title?: string\n / autoCloseInMs default: 15000 /\n autoCloseInMs?: number\n primaryButtonConfig?: AlertButtonConfig\n secondaryButtonConfig?: AlertButtonConfig\n dismissOnPrimaryButtonClick?: boolean\n dismissOnSecondaryButtonClick?: boolean\n}\n\n/\n Displays a toast message. Requires one 'SynapseToastContainer' to be somewhere in the page.\n \n @param message - The description of the toast message.\n * @param variant - The type of toast message to display. Default 'info'.\n\n * In ToastMessageOptions:\n \n @param autoCloseInMs - The amount of time in milliseconds to wait before automatically closing the toast. To prevent autoclose, set to 0 or Infinity. Default 15000.\n \n The rest of the options params are undefined by default.\n */\nexport const displayToast = (\n message: ReactNode,\n variant?: 'info' \| 'success' \| 'warning' \| 'danger',\n toastMessageOptions: ToastMessageOptions \| null = {},\n): (() => void) => {\n const id = uniqueId('synToast-')\n const onClose = () => {\n toast.dismiss(id)\n }\n\n const {\n title = undefined,\n primaryButtonConfig = undefined,\n secondaryButtonConfig = undefined,\n dismissOnPrimaryButtonClick = false,\n dismissOnSecondaryButtonClick = false,\n } = toastMessageOptions ?? {}\n\n // If 'dismissOnPrimaryButtonClick' is true, then we need to invoke onClose after onClick is invoked.\n if (\n primaryButtonConfig &&\n 'onClick' in primaryButtonConfig &&\n dismissOnPrimaryButtonClick\n ) {\n const onClick = primaryButtonConfig.onClick!\n primaryButtonConfig.onClick = e => {\n onClick(e)\n onClose()\n }\n }\n\n // ditto for secondary\n if (\n secondaryButtonConfig &&\n 'onClick' in secondaryButtonConfig &&\n dismissOnSecondaryButtonClick\n ) {\n const onClick = secondaryButtonConfig.onClick!\n secondaryButtonConfig.onClick = e => {\n onClick(e)\n onClose()\n }\n }\n\n let { autoCloseInMs = 15000 } = toastMessageOptions ?? {}\n // Some toast libraries use 0 to prevent autoclose\n // react-hot-toast doesn't, but we can convert it for better compatibility as we try to migrate to use just one library\n if (autoCloseInMs === 0) {\n autoCloseInMs = Infinity\n }\n\n toast(\n <FullWidthAlert\n isGlobal={false}\n onClose={onClose}\n variant={variant ?? 'info'}\n show={true}\n title={title}\n description={message}\n primaryButtonConfig={primaryButtonConfig}\n secondaryButtonConfig={secondaryButtonConfig}\n />,\n {\n id: id,\n className: 'SynapseToastMessage',\n duration: autoCloseInMs,\n },\n )\n\n return onClose\n}\n"],"mappings":";;;;;;;AAmBA,SAAgB,EAAa,EAC3B,SACA,SACA,eACuC;CACvC,IAAM,IAAW,EAAuB,IAAI;CAC5C,OACE,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,GAAD;EACE,SAAS;EACT,YAAW;EACX,SAAS,IAAW;GAAE,OAAO;GAAK,MAAM;EAAI,IAAI,CAAC;YAEjD,kBAAC,OAAD;GAAK,WAAU;GAAY,KAAK;aAC7B;EACE,CAAA;CACQ,CAAA,EAEF,CAAA;AAErB;AAQA,SAAgB,IAAyC;CACvD,OACE,kBAAC,GAAD;EACE,oBAAmB;EACnB,UAAS;aAER,MACC,kBAAC,GAAD;GACE,OAAO;GACP,OAAO;IACL,GAAG,EAAE;IACL,WAAW,EAAE,UAAU,uBAAuB;GAChD;EACS,CAAA;CAEN,CAAA;AAEb;AAwBA,IAAa,KACX,GACA,GACA,IAAkD,CAAC,MAClC;CACjB,IAAM,IAAK,EAAS,WAAW,GACzB,UAAgB;EACpB,EAAM,QAAQ,CAAE;CAClB,GAEM,EACJ,WAAQ,KAAA,GACR,yBAAsB,KAAA,GACtB,2BAAwB,KAAA,GACxB,iCAA8B,IAC9B,mCAAgC,OAC9B,KAAuB,CAAC;CAG5B,IACE,KACA,aAAa,KACb,GACA;EACA,IAAM,IAAU,EAAoB;EACpC,EAAoB,WAAU,MAAK;GAEjC,AADA,EAAQ,CAAC,GACT,EAAQ;EACV;CACF;CAGA,IACE,KACA,aAAa,KACb,GACA;EACA,IAAM,IAAU,EAAsB;EACtC,EAAsB,WAAU,MAAK;GAEnC,AADA,EAAQ,CAAC,GACT,EAAQ;EACV;CACF;CAEA,IAAI,EAAE,mBAAgB,SAAU,KAAuB,CAAC;CAyBxD,OAtBI,MAAkB,MACpB,IAAgB,WAGlB,EACE,kBAAC,GAAD;EACE,UAAU;EACD;EACT,SAAS,KAAW;EACpB,MAAM;EACC;EACP,aAAa;EACQ;EACE;CACxB,CAAA,GACD;EACM;EACJ,WAAW;EACX,UAAU;CACZ,CACF,GAEO;AACT"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TotalQueryResults.js","names":[],"sources":["../../src/components/TotalQueryResults.tsx"],"sourcesContent":["import { FacetColumnRequest } from '@sage-bionetworks/synapse-types'\nimport pluralize from 'pluralize'\nimport { CSSProperties, Suspense } from 'react'\nimport { SynapseErrorBoundary } from './error'\nimport IconSvg from './IconSvg/IconSvg'\nimport { useQueryContext } from './QueryContext'\nimport { useQueryVisualizationContext } from './QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from './QueryWrapper/useGetQueryMetadata'\nimport { SkeletonInlineBlock } from './Skeleton'\nimport SelectionCriteriaPills from './widgets/facet-nav/SelectionCriteriaPills'\n\nexport type TotalQueryResultsProps = {\n style?: CSSProperties\n frontText: string\n endText?: string\n applyChanges?: (newFacets: FacetColumnRequest[]) => void\n hideIfUnfiltered?: boolean\n}\n\nfunction TotalQueryResults(props: TotalQueryResultsProps) {\n const { style, frontText, endText = '', hideIfUnfiltered = false } = props\n const { resetQuery, hasResettableFilters } = useQueryContext()\n const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n const { unitDescription } = useQueryVisualizationContext()\n\n const total = queryMetadata?.queryCount\n\n const showClearAll = hasResettableFilters\n\n return (\n <div\n className={`TotalQueryResults ${\n hasResettableFilters ? 'hasFilters' : ''\n }`}\n style={style}\n >\n {(hasResettableFilters \|\| !hideIfUnfiltered) && (\n <div className=\"TotalQueryResults__topbar\">\n <span className=\"SRC-boldText\">\n {frontText} {total?.toLocaleString()}{' '}\n {pluralize(unitDescription, total)} {endText}\n </span>\n {showClearAll && (\n <a\n onClick={resetQuery}\n className=\"TotalQueryResults__topbar__clearall\"\n >\n <IconSvg icon=\"deleteSweep\" />\n Clear all filters\n </a>\n )}\n </div>\n )}\n <div className=\"TotalQueryResults__selections\">\n <SelectionCriteriaPills />\n </div>\n </div>\n )\n}\n\nexport default function TotalQueryResultsWithSuspense(\n props: TotalQueryResultsProps,\n) {\n return (\n <SynapseErrorBoundary>\n <Suspense fallback={<SkeletonInlineBlock width={100} />}>\n <TotalQueryResults {...props} />\n </Suspense>\n </SynapseErrorBoundary>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,SAAS,EAAkB,GAA+B;CACxD,IAAM,EAAE,UAAO,cAAW,aAAU,IAAI,sBAAmB,OAAU,GAC/D,EAAE,eAAY,4BAAyB,~~GAAiB~~,~~EACxD~~,EAAE,MAAM,MAAkB,~~GAA6B~~,~~EACvD~~,EAAE,uBAAoB,~~GAA8B~~,~~EAEpD~~,IAAQ,GAAe,YAEvB,IAAe;~~AAErB~~,~~QACE~~,kBAAC,OAAD;EACE,WAAW,qBACT,IAAuB,eAAe;EAEjC;YAJT,EAMI,KAAwB,CAAC,MACzB,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACG;KAAU;KAAE,GAAO,~~gBAAgB~~;~~KAAE~~;KACrC,EAAU,GAAiB,~~EAAM~~;~~KAAC~~;KAAE;~~KAChC~~;~~OACN~~,KACC,kBAAC,KAAD;IACE,SAAS;IACT,WAAU;cAFZ,CAIE,kBAAC,GAAD,EAAS,MAAK,~~eAAgB~~,CAAA,~~EAAA~~,~~oBAE5B~~;~~MAEF~~;~~MAER~~,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD,~~EAA0B~~,CAAA;~~GACtB~~,CAAA,CACF~~;;;AAIV~~,SAAwB,EACtB,GACA;~~AACA~~,~~QACE~~,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAU,UAAU,kBAAC,GAAD,EAAqB,OAAO,~~KAAO~~,CAAA;~~YACrD~~,kBAAC,GAAD,EAAmB,GAAI,~~GAAS~~,CAAA;~~EACvB~~,CAAA,EACU,CAAA"}
1	+ {"version":3,"file":"TotalQueryResults.js","names":[],"sources":["../../src/components/TotalQueryResults.tsx"],"sourcesContent":["import { FacetColumnRequest } from '@sage-bionetworks/synapse-types'\nimport pluralize from 'pluralize'\nimport { CSSProperties, Suspense } from 'react'\nimport { SynapseErrorBoundary } from './error'\nimport IconSvg from './IconSvg/IconSvg'\nimport { useQueryContext } from './QueryContext'\nimport { useQueryVisualizationContext } from './QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from './QueryWrapper/useGetQueryMetadata'\nimport { SkeletonInlineBlock } from './Skeleton'\nimport SelectionCriteriaPills from './widgets/facet-nav/SelectionCriteriaPills'\n\nexport type TotalQueryResultsProps = {\n style?: CSSProperties\n frontText: string\n endText?: string\n applyChanges?: (newFacets: FacetColumnRequest[]) => void\n hideIfUnfiltered?: boolean\n}\n\nfunction TotalQueryResults(props: TotalQueryResultsProps) {\n const { style, frontText, endText = '', hideIfUnfiltered = false } = props\n const { resetQuery, hasResettableFilters } = useQueryContext()\n const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n const { unitDescription } = useQueryVisualizationContext()\n\n const total = queryMetadata?.queryCount\n\n const showClearAll = hasResettableFilters\n\n return (\n <div\n className={`TotalQueryResults ${\n hasResettableFilters ? 'hasFilters' : ''\n }`}\n style={style}\n >\n {(hasResettableFilters \|\| !hideIfUnfiltered) && (\n <div className=\"TotalQueryResults__topbar\">\n <span className=\"SRC-boldText\">\n {frontText} {total?.toLocaleString()}{' '}\n {pluralize(unitDescription, total)} {endText}\n </span>\n {showClearAll && (\n <a\n onClick={resetQuery}\n className=\"TotalQueryResults__topbar__clearall\"\n >\n <IconSvg icon=\"deleteSweep\" />\n Clear all filters\n </a>\n )}\n </div>\n )}\n <div className=\"TotalQueryResults__selections\">\n <SelectionCriteriaPills />\n </div>\n </div>\n )\n}\n\nexport default function TotalQueryResultsWithSuspense(\n props: TotalQueryResultsProps,\n) {\n return (\n <SynapseErrorBoundary>\n <Suspense fallback={<SkeletonInlineBlock width={100} />}>\n <TotalQueryResults {...props} />\n </Suspense>\n </SynapseErrorBoundary>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,SAAS,EAAkB,GAA+B;CACxD,IAAM,EAAE,UAAO,cAAW,aAAU,IAAI,sBAAmB,OAAU,GAC/D,EAAE,eAAY,4BAAyB,EAAgB,GACvD,EAAE,MAAM,MAAkB,EAA4B,GACtD,EAAE,uBAAoB,EAA6B,GAEnD,IAAQ,GAAe,YAEvB,IAAe;CAErB,OACE,kBAAC,OAAD;EACE,WAAW,qBACT,IAAuB,eAAe;EAEjC;YAJT,EAMI,KAAwB,CAAC,MACzB,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,QAAD;IAAM,WAAU;cAAhB;KACG;KAAU;KAAE,GAAO,eAAe;KAAG;KACrC,EAAU,GAAiB,CAAK;KAAE;KAAE;IACjC;OACL,KACC,kBAAC,KAAD;IACE,SAAS;IACT,WAAU;cAFZ,CAIE,kBAAC,GAAD,EAAS,MAAK,cAAe,CAAA,GAAC,mBAE7B;KAEF;MAEP,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD,CAAyB,CAAA;EACtB,CAAA,CACF;;AAET;AAEA,SAAwB,EACtB,GACA;CACA,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAU,UAAU,kBAAC,GAAD,EAAqB,OAAO,IAAM,CAAA;YACpD,kBAAC,GAAD,EAAmB,GAAI,EAAQ,CAAA;CACvB,CAAA,EACU,CAAA;AAE1B"}

package/dist/components/UserCard/Avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/UserCard/Avatar.tsx"],"sourcesContent":["import { getColor } from '@/utils/functions/getUserData'\nimport { useOverlay } from '@/utils/hooks'\nimport { Avatar as MUIAvatar, Skeleton, SxProps, useTheme } from '@mui/material'\nimport { UserProfile } from '@sage-bionetworks/synapse-types'\nimport { CSSProperties, ReactNode, useRef } from 'react'\nimport UserCardMedium from './UserCardMedium'\n\nconst TIMER_DELAY_SHOW = 250 // milliseconds\nconst TIMER_DELAY_HIDE = 500\n\nexport type AvatarSize = 'SMALL' \| 'MEDIUM' \| 'LARGE'\n\nexport type AvatarProps = {\n userProfile: UserProfile\n avatarSize?: AvatarSize\n imageURL?: string\n showCardOnHover?: boolean\n isLoadingAvatar?: boolean\n className?: string\n}\n\nexport function Avatar({\n userProfile,\n avatarSize = 'LARGE',\n imageURL,\n showCardOnHover = false,\n isLoadingAvatar = false,\n className,\n}: AvatarProps) {\n const target = useRef(null)\n const theme = useTheme()\n\n const mediumUserCard = (\n <UserCardMedium userProfile={userProfile} imageURL={imageURL} />\n )\n const {\n OverlayComponent,\n isShowing: isShowingOverlay,\n toggleShow,\n toggleHide,\n } = useOverlay(mediumUserCard, target, TIMER_DELAY_SHOW, TIMER_DELAY_HIDE, {\n sx: { maxWidth: '425px' },\n })\n\n let sizeStyles: SxProps = {}\n switch (avatarSize) {\n case 'SMALL':\n sizeStyles = {\n fontSize: '12px',\n width: '20px',\n height: '20px',\n }\n break\n case 'MEDIUM':\n sizeStyles = {\n fontSize: '18px',\n width: '30px',\n height: '30px',\n }\n break\n case 'LARGE':\n sizeStyles = {\n fontSize: '26px',\n width: '80px',\n height: '80px',\n [theme.breakpoints.down('sm')]: {\n fontSize: '21px',\n width: '45px',\n height: '45px',\n },\n }\n break\n default:\n break\n }\n\n const cursorStyle = showCardOnHover ? 'pointer' : 'unset'\n\n const hasProfileImage = !!imageURL\n\n const { ownerId } = userProfile\n const { userName = ownerId, firstName } = userProfile\n const conditionalStyles: CSSProperties = hasProfileImage\n ? {\n backgroundImage: `url(${imageURL})`,\n }\n : { background: getColor(userName) }\n\n if (isLoadingAvatar) {\n return <Skeleton sx={sizeStyles} variant=\"circular\" />\n }\n\n let content: ReactNode \| string = <></>\n\n if (!hasProfileImage) {\n content = firstName ? firstName[0] : userName[0]\n }\n\n return (\n <>\n {showCardOnHover && <OverlayComponent />}\n <MUIAvatar\n ref={target}\n role=\"img\"\n onMouseEnter={() => toggleShow()}\n onMouseLeave={() => toggleHide()}\n onClick={event => {\n if (showCardOnHover) {\n event.stopPropagation()\n }\n if (isShowingOverlay) {\n toggleHide(false)\n } else {\n toggleShow(false)\n }\n }}\n className={`${className ?? ''}`}\n sx={{\n backgroundPosition: 'center',\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'cover',\n cursor: cursorStyle,\n textDecoration: 'none',\n ...sizeStyles,\n ...conditionalStyles,\n }}\n >\n {content}\n </MUIAvatar>\n </>\n )\n}\n"],"mappings":";;;;;;;;AAOA,IAAM,IAAmB,KACnB,IAAmB;AAazB,SAAgB,EAAO,EACrB,gBACA,gBAAa,SACb,aACA,qBAAkB,IAClB,qBAAkB,IAClB,gBACc;CACd,IAAM,IAAS,EAAO,~~KAAK~~,~~EACrB~~,IAAQ,~~GAAU~~,~~EAKlB~~,EACJ,qBACA,WAAW,GACX,eACA,kBACE,EAPF,kBAAC,GAAD;EAA6B;EAAuB;~~EAAY~~,~~CAOnD~~,~~EAAgB~~,GAAQ,GAAkB,GAAkB,EACzE,IAAI,EAAE,UAAU,~~SAAS~~,EAC1B,CAAC,~~EAEE~~,IAAsB,~~EAAE~~;~~AAC5B~~,~~SAAQ~~,GAAR;EACE,KAAK;~~AACH~~,~~OAAa~~;IACX,UAAU;IACV,OAAO;IACP,QAAQ;~~IACT~~;~~AACD~~;EACF,KAAK;~~AACH~~,~~OAAa~~;IACX,UAAU;IACV,OAAO;IACP,QAAQ;~~IACT~~;~~AACD~~;EACF,KAAK;~~AACH~~,~~OAAa~~;IACX,UAAU;IACV,OAAO;IACP,QAAQ;KACP,EAAM,YAAY,KAAK,~~KAAK~~,~~GAAG~~;KAC9B,UAAU;KACV,OAAO;KACP,QAAQ;~~KACT~~;~~IACF~~;~~AACD~~;EACF,~~QACE;;CAGJ~~,IAAM,IAAc,IAAkB,YAAY,SAE5C,IAAkB,CAAC,CAAC,GAEpB,EAAE,eAAY,GACd,EAAE,cAAW,GAAS,iBAAc,GACpC,IAAmC,IACrC,EACE,iBAAiB,OAAO,EAAS,~~IAClC~~,~~GACD~~,EAAE,YAAY,EAAS,~~EAAS~~,EAAE;~~AAEtC~~,~~KAAI~~,~~EACF~~,~~QAAO~~,kBAAC,GAAD;EAAU,IAAI;EAAY,SAAQ;~~EAAa~~,CAAA;~~CAGxD~~,IAAI,IAA8B,kBAAA,GAAA,~~EAAK~~,CAAA;~~AAMvC~~,~~QAJK~~,MACH,IAAU,IAAY,EAAU,KAAK,EAAS,KAI9C,kBAAA,GAAA,EAAA,UAAA,CACG,KAAmB,kBAAC,GAAD,~~EAAoB~~,CAAA,~~EACxC~~,kBAAC,GAAD;EACE,KAAK;EACL,MAAK;EACL,oBAAoB,~~GAAY~~;~~EAChC~~,oBAAoB,~~GAAY~~;~~EAChC~~,UAAS,MAAS;~~AAIhB~~,~~GAHI~~,KACF,EAAM,~~iBAAiB~~,~~EAErB~~,IACF,EAAW,~~GAAM~~,~~GAEjB~~,EAAW,~~GAAM;;EAGrB~~,WAAW,GAAG,KAAa;EAC3B,IAAI;GACF,oBAAoB;GACpB,kBAAkB;GAClB,gBAAgB;GAChB,QAAQ;GACR,gBAAgB;GAChB,GAAG;GACH,GAAG;~~GACJ~~;~~YAEA~~;~~EACS~~,CAAA,CACX,EAAA,CAAA"}
1	+ {"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/UserCard/Avatar.tsx"],"sourcesContent":["import { getColor } from '@/utils/functions/getUserData'\nimport { useOverlay } from '@/utils/hooks'\nimport { Avatar as MUIAvatar, Skeleton, SxProps, useTheme } from '@mui/material'\nimport { UserProfile } from '@sage-bionetworks/synapse-types'\nimport { CSSProperties, ReactNode, useRef } from 'react'\nimport UserCardMedium from './UserCardMedium'\n\nconst TIMER_DELAY_SHOW = 250 // milliseconds\nconst TIMER_DELAY_HIDE = 500\n\nexport type AvatarSize = 'SMALL' \| 'MEDIUM' \| 'LARGE'\n\nexport type AvatarProps = {\n userProfile: UserProfile\n avatarSize?: AvatarSize\n imageURL?: string\n showCardOnHover?: boolean\n isLoadingAvatar?: boolean\n className?: string\n}\n\nexport function Avatar({\n userProfile,\n avatarSize = 'LARGE',\n imageURL,\n showCardOnHover = false,\n isLoadingAvatar = false,\n className,\n}: AvatarProps) {\n const target = useRef(null)\n const theme = useTheme()\n\n const mediumUserCard = (\n <UserCardMedium userProfile={userProfile} imageURL={imageURL} />\n )\n const {\n OverlayComponent,\n isShowing: isShowingOverlay,\n toggleShow,\n toggleHide,\n } = useOverlay(mediumUserCard, target, TIMER_DELAY_SHOW, TIMER_DELAY_HIDE, {\n sx: { maxWidth: '425px' },\n })\n\n let sizeStyles: SxProps = {}\n switch (avatarSize) {\n case 'SMALL':\n sizeStyles = {\n fontSize: '12px',\n width: '20px',\n height: '20px',\n }\n break\n case 'MEDIUM':\n sizeStyles = {\n fontSize: '18px',\n width: '30px',\n height: '30px',\n }\n break\n case 'LARGE':\n sizeStyles = {\n fontSize: '26px',\n width: '80px',\n height: '80px',\n [theme.breakpoints.down('sm')]: {\n fontSize: '21px',\n width: '45px',\n height: '45px',\n },\n }\n break\n default:\n break\n }\n\n const cursorStyle = showCardOnHover ? 'pointer' : 'unset'\n\n const hasProfileImage = !!imageURL\n\n const { ownerId } = userProfile\n const { userName = ownerId, firstName } = userProfile\n const conditionalStyles: CSSProperties = hasProfileImage\n ? {\n backgroundImage: `url(${imageURL})`,\n }\n : { background: getColor(userName) }\n\n if (isLoadingAvatar) {\n return <Skeleton sx={sizeStyles} variant=\"circular\" />\n }\n\n let content: ReactNode \| string = <></>\n\n if (!hasProfileImage) {\n content = firstName ? firstName[0] : userName[0]\n }\n\n return (\n <>\n {showCardOnHover && <OverlayComponent />}\n <MUIAvatar\n ref={target}\n role=\"img\"\n onMouseEnter={() => toggleShow()}\n onMouseLeave={() => toggleHide()}\n onClick={event => {\n if (showCardOnHover) {\n event.stopPropagation()\n }\n if (isShowingOverlay) {\n toggleHide(false)\n } else {\n toggleShow(false)\n }\n }}\n className={`${className ?? ''}`}\n sx={{\n backgroundPosition: 'center',\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'cover',\n cursor: cursorStyle,\n textDecoration: 'none',\n ...sizeStyles,\n ...conditionalStyles,\n }}\n >\n {content}\n </MUIAvatar>\n </>\n )\n}\n"],"mappings":";;;;;;;;AAOA,IAAM,IAAmB,KACnB,IAAmB;AAazB,SAAgB,EAAO,EACrB,gBACA,gBAAa,SACb,aACA,qBAAkB,IAClB,qBAAkB,IAClB,gBACc;CACd,IAAM,IAAS,EAAO,IAAI,GACpB,IAAQ,EAAS,GAKjB,EACJ,qBACA,WAAW,GACX,eACA,kBACE,EAPF,kBAAC,GAAD;EAA6B;EAAuB;CAAW,CAOlD,GAAgB,GAAQ,GAAkB,GAAkB,EACzE,IAAI,EAAE,UAAU,QAAQ,EAC1B,CAAC,GAEG,IAAsB,CAAC;CAC3B,QAAQ,GAAR;EACE,KAAK;GACH,IAAa;IACX,UAAU;IACV,OAAO;IACP,QAAQ;GACV;GACA;EACF,KAAK;GACH,IAAa;IACX,UAAU;IACV,OAAO;IACP,QAAQ;GACV;GACA;EACF,KAAK;GACH,IAAa;IACX,UAAU;IACV,OAAO;IACP,QAAQ;KACP,EAAM,YAAY,KAAK,IAAI,IAAI;KAC9B,UAAU;KACV,OAAO;KACP,QAAQ;IACV;GACF;GACA;EACF,SACE;CACJ;CAEA,IAAM,IAAc,IAAkB,YAAY,SAE5C,IAAkB,CAAC,CAAC,GAEpB,EAAE,eAAY,GACd,EAAE,cAAW,GAAS,iBAAc,GACpC,IAAmC,IACrC,EACE,iBAAiB,OAAO,EAAS,GACnC,IACA,EAAE,YAAY,EAAS,CAAQ,EAAE;CAErC,IAAI,GACF,OAAO,kBAAC,GAAD;EAAU,IAAI;EAAY,SAAQ;CAAY,CAAA;CAGvD,IAAI,IAA8B,kBAAA,GAAA,CAAI,CAAA;CAMtC,OAJK,MACH,IAAU,IAAY,EAAU,KAAK,EAAS,KAI9C,kBAAA,GAAA,EAAA,UAAA,CACG,KAAmB,kBAAC,GAAD,CAAmB,CAAA,GACvC,kBAAC,GAAD;EACE,KAAK;EACL,MAAK;EACL,oBAAoB,EAAW;EAC/B,oBAAoB,EAAW;EAC/B,UAAS,MAAS;GAIhB,AAHI,KACF,EAAM,gBAAgB,GAEpB,IACF,EAAW,EAAK,IAEhB,EAAW,EAAK;EAEpB;EACA,WAAW,GAAG,KAAa;EAC3B,IAAI;GACF,oBAAoB;GACpB,kBAAkB;GAClB,gBAAgB;GAChB,QAAQ;GACR,gBAAgB;GAChB,GAAG;GACH,GAAG;EACL;YAEC;CACQ,CAAA,CACX,EAAA,CAAA;AAEN"}

package/dist/components/UserCard/UserBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UserBadge.js","names":[],"sources":["../../../src/components/UserCard/UserBadge.tsx"],"sourcesContent":["import { useUserOrTeam } from '../UserOrTeamBadge/useUserOrTeam'\nimport { useGetUserBundle } from '@/synapse-queries/user/useUserBundle'\nimport { SynapseConstants } from '@/utils'\nimport { PRODUCTION_ENDPOINT_CONFIG } from '@/utils/functions/getEndpoint'\nimport { getPrincipalDisplayName } from '@/utils/functions/getPrincipalDisplayName'\nimport { useOverlay } from '@/utils/hooks/useOverlay'\nimport { Box, Chip, Link, Skeleton } from '@mui/material'\nimport { CSSProperties, useMemo, useRef } from 'react'\nimport IconSvg from '../IconSvg/IconSvg'\nimport { AvatarSize } from './Avatar'\nimport UserCard from './UserCard'\n\nexport type UserBadgeProps = {\n /* The ID of the user to show. If undefined, a skeleton will be shown /\n userId?: string\n / If true, shows the user's avatar with their name. Default false /\n withAvatar?: boolean\n / Whether a card containing additional profile information should be shown on hover. Default true. /\n showCardOnHover?: boolean\n / Whether to disable the profile linking to the user's profile page /\n disableLink?: boolean\n / Override the href of the UserBadge component. Default is the Synapse profile page /\n link?: string\n / Shows icons to denote profile certification and validation. Default is false. /\n showAccountLevelIcon?: boolean\n / Whether to open the clicked link in a new tab. Default is false /\n openLinkInNewTab?: boolean\n / Defines the size of the avatar if `withAvatar` is true. Default is 'SMALL' /\n avatarSize?: AvatarSize\n / If true, shows the user's full name. Default is false */\n showFullName?: boolean\n\n className?: string\n\n showModeratorBadge?: boolean\n}\n\nconst TIMER_DELAY_SHOW = 250 // milliseconds\nconst TIMER_DELAY_HIDE = 500\n\nexport function UserBadge(props: UserBadgeProps) {\n const {\n userId,\n showCardOnHover = true,\n disableLink,\n showAccountLevelIcon = false,\n openLinkInNewTab = false,\n withAvatar = false,\n avatarSize = 'SMALL',\n className,\n showFullName = false,\n showModeratorBadge = false,\n } = props\n let { link } = props\n\n const target = useRef(null)\n const certificationOrVerification =\n SynapseConstants.USER_BUNDLE_MASK_IS_CERTIFIED \|\n SynapseConstants.USER_BUNDLE_MASK_IS_VERIFIED\n\n const { userGroupHeader, IconComponent } = useUserOrTeam(userId)\n\n // To show certification/validation status, we need the full bundle. Only fetch if these should be shown.\n const { data: userBundle } = useGetUserBundle(\n userId!,\n certificationOrVerification,\n {\n enabled: Boolean(userId) && showAccountLevelIcon,\n },\n )\n\n const mediumUserCard = useMemo(\n () => <UserCard ownerId={userId} size={'MEDIUM USER CARD'} />,\n [userId],\n )\n\n if (link == null) {\n link = `${PRODUCTION_ENDPOINT_CONFIG.PORTAL}Profile:${userId}`\n }\n\n const { OverlayComponent, toggleShow, toggleHide } = useOverlay(\n mediumUserCard,\n target,\n TIMER_DELAY_SHOW,\n TIMER_DELAY_HIDE,\n { sx: { maxWidth: '425px' } },\n )\n\n const avatar = withAvatar ? (\n <span className=\"SRC-inline-avatar\">\n <IconComponent avatarSize={avatarSize} />\n </span>\n ) : (\n <></>\n )\n\n const accountLevelIcon = (\n <Box\n sx={{\n display: 'flex',\n gap: 1,\n mx: 1,\n }}\n >\n {!userBundle?.isCertified && !userBundle?.isVerified && (\n <IconSvg\n icon=\"accountRegistered\"\n label={'Registered'}\n sx={{ width: '30px', height: '30px' }}\n />\n )}\n {userBundle?.isCertified && (\n <IconSvg\n icon=\"accountCertified\"\n label={'Certified'}\n sx={{ width: '30px', height: '30px' }}\n />\n )}\n {userBundle?.isVerified && (\n <IconSvg\n icon=\"accountValidated\"\n label={'Validated'}\n sx={{ width: '30px', height: '30px' }}\n />\n )}\n </Box>\n )\n\n const displayName = userGroupHeader\n ? getPrincipalDisplayName(userGroupHeader, { showFullName })\n : undefined\n\n const Tag = showCardOnHover \|\| !disableLink ? Link : 'span'\n\n let style: CSSProperties = {}\n if (showCardOnHover) {\n style = { whiteSpace: 'nowrap' }\n } else if (disableLink) {\n style = { cursor: 'unset' }\n }\n\n return (\n <>\n {showCardOnHover && <OverlayComponent />}\n {avatar}\n <Tag\n className={`SRC-userCard UserBadge SRC-boldText ${className ?? ''}`}\n style={style}\n href={disableLink ? undefined : link}\n target={openLinkInNewTab ? '_blank' : ''}\n rel={openLinkInNewTab ? 'noreferrer' : ''}\n ref={target}\n onMouseEnter={() => toggleShow()}\n onMouseLeave={() => toggleHide()}\n >\n {displayName ?? <Skeleton width={'100px'} />}\n {showAccountLevelIcon && accountLevelIcon}\n </Tag>\n {showModeratorBadge && (\n <Chip\n sx={{\n borderRadius: '5px',\n backgroundColor: '#395979',\n color: '#FFF',\n fontWeight: 700,\n fontSize: '12px',\n marginLeft: '8px',\n height: 'unset',\n '& .MuiChip-label': {\n padding: '5px 6px',\n },\n }}\n label=\"Moderator\"\n />\n )}\n </>\n )\n}\n"],"mappings":";;;;;;;;;;;;;AAqCA,IAAM,IAAmB,KACnB,IAAmB;AAEzB,SAAgB,EAAU,GAAuB;CAC/C,IAAM,EACJ,WACA,qBAAkB,IAClB,gBACA,0BAAuB,IACvB,sBAAmB,IACnB,gBAAa,IACb,gBAAa,SACb,cACA,kBAAe,IACf,wBAAqB,OACnB,GACA,EAAE,YAAS,GAET,IAAS,EAAO,~~KAAK~~,~~EAKrB~~,EAAE,oBAAiB,qBAAkB,EAAc,~~EAAO~~,~~EAG1D~~,EAAE,MAAM,MAAe,EAC3B,GACA,IACA,EACE,SAAS,EAAQ,KAAW,~~GAC7B~~,CACF,~~EAEK~~,IAAiB,QACf,kBAAC,GAAD;EAAU,SAAS;EAAQ,MAAM;~~EAAsB~~,CAAA,~~EAC7D~~,CAAC,~~EAAO~~,CACT;~~AAED~~,~~CACE~~,MAAO,GAAG,EAA2B,OAAO,UAAU;CAGxD,IAAM,EAAE,qBAAkB,eAAY,kBAAe,EACnD,GACA,GACA,GACA,GACA,EAAE,IAAI,EAAE,UAAU,~~SAAS~~,EAAE,CAC9B,~~EAEK~~,IAAS,IACb,kBAAC,QAAD;EAAM,WAAU;YACd,kBAAC,GAAD,EAA2B,~~eAAc~~,CAAA;~~EACpC~~,CAAA,~~GAEP~~,kBAAA,GAAA,~~EAAK~~,CAAA,~~EAGD~~,IACJ,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,KAAK;GACL,IAAI;~~GACL~~;~~YALH~~;GAOG,CAAC,GAAY,eAAe,CAAC,GAAY,cACxC,kBAAC,GAAD;IACE,MAAK;IACL,OAAO;IACP,IAAI;KAAE,OAAO;KAAQ,QAAQ;~~KAAQ~~;~~IACrC~~,CAAA;~~GAEH~~,GAAY,eACX,kBAAC,GAAD;IACE,MAAK;IACL,OAAO;IACP,IAAI;KAAE,OAAO;KAAQ,QAAQ;~~KAAQ~~;~~IACrC~~,CAAA;~~GAEH~~,GAAY,cACX,kBAAC,GAAD;IACE,MAAK;IACL,OAAO;IACP,IAAI;KAAE,OAAO;KAAQ,QAAQ;~~KAAQ~~;~~IACrC~~,CAAA;~~GAEA~~;~~KAGF~~,IAAc,IAChB,EAAwB,GAAiB,EAAE,~~iBAAc~~,CAAC,~~GAC1D~~,KAAA,GAEE,IAAM,KAAmB,CAAC,IAAc,IAAO,QAEjD,IAAuB,~~EAAE~~;~~AAO7B~~,~~QANI~~,IACF,IAAQ,EAAE,YAAY,~~UAAU~~,~~GACvB~~,MACT,IAAQ,EAAE,QAAQ,~~SAAS~~,~~GAI3B~~,kBAAA,GAAA,EAAA,UAAA;EACG,KAAmB,kBAAC,GAAD,~~EAAoB~~,CAAA;~~EACvC~~;EACD,kBAAC,GAAD;GACE,WAAW,uCAAuC,KAAa;GACxD;GACP,MAAM,IAAc,KAAA,IAAY;GAChC,QAAQ,IAAmB,WAAW;GACtC,KAAK,IAAmB,eAAe;GACvC,KAAK;GACL,oBAAoB,~~GAAY~~;~~GAChC~~,oBAAoB,~~GAAY~~;~~aARlC~~,CAUG,KAAe,kBAAC,GAAD,EAAU,OAAO,~~SAAW~~,CAAA,~~EAC3C~~,KAAwB,~~EACrB~~;;~~EACL~~,KACC,kBAAC,GAAD;GACE,IAAI;IACF,cAAc;IACd,iBAAiB;IACjB,OAAO;IACP,YAAY;IACZ,UAAU;IACV,YAAY;IACZ,QAAQ;IACR,oBAAoB,EAClB,SAAS,~~WACV~~;~~IACF~~;~~GACD~~,OAAM;~~GACN~~,CAAA;~~EAEH~~,EAAA,CAAA"}
1	+ {"version":3,"file":"UserBadge.js","names":[],"sources":["../../../src/components/UserCard/UserBadge.tsx"],"sourcesContent":["import { useUserOrTeam } from '../UserOrTeamBadge/useUserOrTeam'\nimport { useGetUserBundle } from '@/synapse-queries/user/useUserBundle'\nimport { SynapseConstants } from '@/utils'\nimport { PRODUCTION_ENDPOINT_CONFIG } from '@/utils/functions/getEndpoint'\nimport { getPrincipalDisplayName } from '@/utils/functions/getPrincipalDisplayName'\nimport { useOverlay } from '@/utils/hooks/useOverlay'\nimport { Box, Chip, Link, Skeleton } from '@mui/material'\nimport { CSSProperties, useMemo, useRef } from 'react'\nimport IconSvg from '../IconSvg/IconSvg'\nimport { AvatarSize } from './Avatar'\nimport UserCard from './UserCard'\n\nexport type UserBadgeProps = {\n /* The ID of the user to show. If undefined, a skeleton will be shown /\n userId?: string\n / If true, shows the user's avatar with their name. Default false /\n withAvatar?: boolean\n / Whether a card containing additional profile information should be shown on hover. Default true. /\n showCardOnHover?: boolean\n / Whether to disable the profile linking to the user's profile page /\n disableLink?: boolean\n / Override the href of the UserBadge component. Default is the Synapse profile page /\n link?: string\n / Shows icons to denote profile certification and validation. Default is false. /\n showAccountLevelIcon?: boolean\n / Whether to open the clicked link in a new tab. Default is false /\n openLinkInNewTab?: boolean\n / Defines the size of the avatar if `withAvatar` is true. Default is 'SMALL' /\n avatarSize?: AvatarSize\n / If true, shows the user's full name. Default is false */\n showFullName?: boolean\n\n className?: string\n\n showModeratorBadge?: boolean\n}\n\nconst TIMER_DELAY_SHOW = 250 // milliseconds\nconst TIMER_DELAY_HIDE = 500\n\nexport function UserBadge(props: UserBadgeProps) {\n const {\n userId,\n showCardOnHover = true,\n disableLink,\n showAccountLevelIcon = false,\n openLinkInNewTab = false,\n withAvatar = false,\n avatarSize = 'SMALL',\n className,\n showFullName = false,\n showModeratorBadge = false,\n } = props\n let { link } = props\n\n const target = useRef(null)\n const certificationOrVerification =\n SynapseConstants.USER_BUNDLE_MASK_IS_CERTIFIED \|\n SynapseConstants.USER_BUNDLE_MASK_IS_VERIFIED\n\n const { userGroupHeader, IconComponent } = useUserOrTeam(userId)\n\n // To show certification/validation status, we need the full bundle. Only fetch if these should be shown.\n const { data: userBundle } = useGetUserBundle(\n userId!,\n certificationOrVerification,\n {\n enabled: Boolean(userId) && showAccountLevelIcon,\n },\n )\n\n const mediumUserCard = useMemo(\n () => <UserCard ownerId={userId} size={'MEDIUM USER CARD'} />,\n [userId],\n )\n\n if (link == null) {\n link = `${PRODUCTION_ENDPOINT_CONFIG.PORTAL}Profile:${userId}`\n }\n\n const { OverlayComponent, toggleShow, toggleHide } = useOverlay(\n mediumUserCard,\n target,\n TIMER_DELAY_SHOW,\n TIMER_DELAY_HIDE,\n { sx: { maxWidth: '425px' } },\n )\n\n const avatar = withAvatar ? (\n <span className=\"SRC-inline-avatar\">\n <IconComponent avatarSize={avatarSize} />\n </span>\n ) : (\n <></>\n )\n\n const accountLevelIcon = (\n <Box\n sx={{\n display: 'flex',\n gap: 1,\n mx: 1,\n }}\n >\n {!userBundle?.isCertified && !userBundle?.isVerified && (\n <IconSvg\n icon=\"accountRegistered\"\n label={'Registered'}\n sx={{ width: '30px', height: '30px' }}\n />\n )}\n {userBundle?.isCertified && (\n <IconSvg\n icon=\"accountCertified\"\n label={'Certified'}\n sx={{ width: '30px', height: '30px' }}\n />\n )}\n {userBundle?.isVerified && (\n <IconSvg\n icon=\"accountValidated\"\n label={'Validated'}\n sx={{ width: '30px', height: '30px' }}\n />\n )}\n </Box>\n )\n\n const displayName = userGroupHeader\n ? getPrincipalDisplayName(userGroupHeader, { showFullName })\n : undefined\n\n const Tag = showCardOnHover \|\| !disableLink ? Link : 'span'\n\n let style: CSSProperties = {}\n if (showCardOnHover) {\n style = { whiteSpace: 'nowrap' }\n } else if (disableLink) {\n style = { cursor: 'unset' }\n }\n\n return (\n <>\n {showCardOnHover && <OverlayComponent />}\n {avatar}\n <Tag\n className={`SRC-userCard UserBadge SRC-boldText ${className ?? ''}`}\n style={style}\n href={disableLink ? undefined : link}\n target={openLinkInNewTab ? '_blank' : ''}\n rel={openLinkInNewTab ? 'noreferrer' : ''}\n ref={target}\n onMouseEnter={() => toggleShow()}\n onMouseLeave={() => toggleHide()}\n >\n {displayName ?? <Skeleton width={'100px'} />}\n {showAccountLevelIcon && accountLevelIcon}\n </Tag>\n {showModeratorBadge && (\n <Chip\n sx={{\n borderRadius: '5px',\n backgroundColor: '#395979',\n color: '#FFF',\n fontWeight: 700,\n fontSize: '12px',\n marginLeft: '8px',\n height: 'unset',\n '& .MuiChip-label': {\n padding: '5px 6px',\n },\n }}\n label=\"Moderator\"\n />\n )}\n </>\n )\n}\n"],"mappings":";;;;;;;;;;;;;AAqCA,IAAM,IAAmB,KACnB,IAAmB;AAEzB,SAAgB,EAAU,GAAuB;CAC/C,IAAM,EACJ,WACA,qBAAkB,IAClB,gBACA,0BAAuB,IACvB,sBAAmB,IACnB,gBAAa,IACb,gBAAa,SACb,cACA,kBAAe,IACf,wBAAqB,OACnB,GACA,EAAE,YAAS,GAET,IAAS,EAAO,IAAI,GAKpB,EAAE,oBAAiB,qBAAkB,EAAc,CAAM,GAGzD,EAAE,MAAM,MAAe,EAC3B,GACA,IACA,EACE,SAAS,EAAQ,KAAW,EAC9B,CACF,GAEM,IAAiB,QACf,kBAAC,GAAD;EAAU,SAAS;EAAQ,MAAM;CAAqB,CAAA,GAC5D,CAAC,CAAM,CACT;CAEA,AACE,MAAO,GAAG,EAA2B,OAAO,UAAU;CAGxD,IAAM,EAAE,qBAAkB,eAAY,kBAAe,EACnD,GACA,GACA,GACA,GACA,EAAE,IAAI,EAAE,UAAU,QAAQ,EAAE,CAC9B,GAEM,IAAS,IACb,kBAAC,QAAD;EAAM,WAAU;YACd,kBAAC,GAAD,EAA2B,cAAa,CAAA;CACpC,CAAA,IAEN,kBAAA,GAAA,CAAI,CAAA,GAGA,IACJ,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,KAAK;GACL,IAAI;EACN;YALF;GAOG,CAAC,GAAY,eAAe,CAAC,GAAY,cACxC,kBAAC,GAAD;IACE,MAAK;IACL,OAAO;IACP,IAAI;KAAE,OAAO;KAAQ,QAAQ;IAAO;GACrC,CAAA;GAEF,GAAY,eACX,kBAAC,GAAD;IACE,MAAK;IACL,OAAO;IACP,IAAI;KAAE,OAAO;KAAQ,QAAQ;IAAO;GACrC,CAAA;GAEF,GAAY,cACX,kBAAC,GAAD;IACE,MAAK;IACL,OAAO;IACP,IAAI;KAAE,OAAO;KAAQ,QAAQ;IAAO;GACrC,CAAA;EAEA;KAGD,IAAc,IAChB,EAAwB,GAAiB,EAAE,gBAAa,CAAC,IACzD,KAAA,GAEE,IAAM,KAAmB,CAAC,IAAc,IAAO,QAEjD,IAAuB,CAAC;CAO5B,OANI,IACF,IAAQ,EAAE,YAAY,SAAS,IACtB,MACT,IAAQ,EAAE,QAAQ,QAAQ,IAI1B,kBAAA,GAAA,EAAA,UAAA;EACG,KAAmB,kBAAC,GAAD,CAAmB,CAAA;EACtC;EACD,kBAAC,GAAD;GACE,WAAW,uCAAuC,KAAa;GACxD;GACP,MAAM,IAAc,KAAA,IAAY;GAChC,QAAQ,IAAmB,WAAW;GACtC,KAAK,IAAmB,eAAe;GACvC,KAAK;GACL,oBAAoB,EAAW;GAC/B,oBAAoB,EAAW;aARjC,CAUG,KAAe,kBAAC,GAAD,EAAU,OAAO,QAAU,CAAA,GAC1C,KAAwB,CACtB;;EACJ,KACC,kBAAC,GAAD;GACE,IAAI;IACF,cAAc;IACd,iBAAiB;IACjB,OAAO;IACP,YAAY;IACZ,UAAU;IACV,YAAY;IACZ,QAAQ;IACR,oBAAoB,EAClB,SAAS,UACX;GACF;GACA,OAAM;EACP,CAAA;CAEH,EAAA,CAAA;AAEN"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"UserCard.js","names":[],"sources":["../../../src/components/UserCard/UserCard.tsx"],"sourcesContent":["import { useGetProfileImage } from '@/synapse-queries/file/useFiles'\nimport {\n useGetPrincipalIdForAlias,\n useGetUserProfile,\n} from '@/synapse-queries/user/useUserBundle'\nimport { SynapseConstants } from '@/utils'\nimport usePreFetchResource, {\n useCreateUrlForData,\n} from '@/utils/hooks/usePreFetchResource'\nimport { UserCardSize } from '@/utils/SynapseConstants'\nimport { AliasType, UserProfile } from '@sage-bionetworks/synapse-types'\nimport { useMemo } from 'react'\nimport { Avatar, AvatarSize } from './Avatar'\nimport { UserBadge } from './UserBadge'\nimport { MenuAction } from './UserCardContextMenu'\nimport UserCardMedium from './UserCardMedium'\n\nexport type UserCardProps = {\n /** A UserProfile may be used for data for the card. You must supply one of `userProfile`, `alias`, `ownerId` /\n userProfile?: UserProfile\n /* An alias that resolves the ownerId for the UserProfile. You must supply one of `userProfile`, `alias`, `ownerId` /\n alias?: string\n /* The unique ownerId of the UserProfile. You must supply one of `userProfile`, `alias`, `ownerId` /\n ownerId?: string\n /* Whether to hide the user's Synapse email address /\n hideEmail?: boolean\n /* If set, the corresponding image will be shown for the user. /\n preSignedURL?: string\n /* Specifies the card size /\n size: UserCardSize\n /* For the small user card or avatar, shows the medium user card on mouseover /\n showCardOnHover?: boolean\n /* @deprecated For the small user card, hides the tooltip observed when hovering over the profile image. /\n hideTooltip?: boolean\n /* Specifies the dropdown menu functionality for the ellipsis on medium/large cards. If field === 'SEPERATOR' then a break will occur in the menu. If left undefined, the menu will not render to the screen. /\n menuActions?: MenuAction[]\n /* The link to point to on the username, defaults to https://www.synapse.org/Profile:${userProfile.ownerId} /\n link?: string\n openLinkInNewTab?: boolean\n /* Disables the `@username` link for the small user card (if `showCardOnHover` is false). For the medium user card, disables linking the user's name to their profile (or other specified destination) /\n disableLink?: boolean\n isCertified?: boolean\n isValidated?: boolean\n /* Determines the size of the avatar when size === 'AVATAR' or (size === 'SMALL' and withAvatar is true) /\n avatarSize?: AvatarSize\n /* Whether to show the avatar with the name for the small user card /\n withAvatar?: boolean\n /* @deprecated Whether to show the full name in the small user card /\n showFullName?: boolean\n className?: string\n /* @deprecated show certification/validation badges for small user card */\n showAccountLevelIcon?: boolean\n}\n\nexport function UserCard(props: UserCardProps) {\n const {\n userProfile: initialProfile,\n preSignedURL: initialPreSignedURL,\n size,\n ownerId,\n alias,\n ...rest\n } = props\n\n // If we were given an alias, fetch the principal ID\n const { data: fetchedPrincipalId, isLoading: isLoadingAliasLookup } =\n useGetPrincipalIdForAlias(\n {\n alias: alias!,\n type: AliasType.USER_NAME,\n },\n { enabled: !!alias },\n )\n\n const principalId = (\n ownerId ??\n initialProfile?.ownerId ??\n fetchedPrincipalId\n )?.toString()\n\n // If we weren't provided an initialProfile, fetch from Synapse\n const { data: fetchedProfile, isLoading: isLoadingProfile } =\n useGetUserProfile(principalId!, {\n enabled: !!principalId && !initialProfile,\n })\n const userProfile = initialProfile ?? fetchedProfile\n\n const { data: avatarData, isLoading: isLoadingAvatar } = useGetProfileImage(\n principalId!,\n {\n // Don't fetch the avatar if `initialPresignedURL` is provided.\n // Also, wait until we have a value for `principalId`\n enabled: !!(!initialPreSignedURL && principalId),\n },\n )\n\n // If a URL was provided, fetch it and create a local data URL\n const providedAvatarURL = usePreFetchResource(initialPreSignedURL)\n // If we fetched the avatar from Synapse, we already have the blob. Create a local data URL\n const fetchedAvatarUrl = useCreateUrlForData(avatarData)\n\n const imageURL = providedAvatarURL ?? fetchedAvatarUrl\n\n const isLoading = isLoadingAliasLookup \|\| isLoadingProfile\n\n const propsForChild = useMemo(\n () => ({\n userProfile: userProfile!,\n imageURL,\n isLoadingAvatar,\n ...rest,\n }),\n [imageURL, isLoadingAvatar, rest, userProfile],\n )\n\n if (isLoading \|\| userProfile == null) {\n return <></>\n }\n\n switch (size) {\n case SynapseConstants.AVATAR:\n return <Avatar {...propsForChild} />\n case SynapseConstants.SMALL_USER_CARD:\n return (\n <UserBadge userId={ownerId ?? userProfile.ownerId} {...propsForChild} />\n )\n case SynapseConstants.MEDIUM_USER_CARD:\n return <UserCardMedium {...propsForChild} />\n case SynapseConstants.LARGE_USER_CARD:\n return <UserCardMedium isLarge={true} {...propsForChild} />\n default:\n console.warn('No size specified for UserCard')\n return <span />\n }\n}\n\nexport default UserCard\n"],"mappings":";;;;;;;;;;;;AAsDA,SAAgB,EAAS,GAAsB;CAC7C,IAAM,EACJ,aAAa,GACb,cAAc,GACd,SACA,YACA,UACA,GAAG,MACD,GAGE,EAAE,MAAM,GAAoB,WAAW,MAC3C,EACE;EACS;EACP,MAAM,EAAU;~~EACjB~~,~~EACD~~,EAAE,SAAS,CAAC,CAAC,~~GAAO~~,CACrB,~~EAEG~~,KACJ,KACA,GAAgB,WAChB,IACC,~~UAAU~~,~~EAGP~~,EAAE,MAAM,GAAgB,WAAW,MACvC,EAAkB,GAAc,EAC9B,SAAS,CAAC,CAAC,KAAe,CAAC,~~GAC5B~~,CAAC,~~EACE~~,IAAc,KAAkB,GAEhC,EAAE,MAAM,GAAY,WAAW,MAAoB,EACvD,GACA,EAGE,SAAS,CAAC,EAAE,CAAC,KAAuB,~~IACrC~~,CACF,~~EAGK~~,IAAoB,EAAoB,~~EAAoB~~,~~EAE5D~~,IAAmB,EAAoB,~~EAAW~~,~~EAElD~~,IAAW,KAAqB,GAEhC,IAAY,KAAwB,GAEpC,IAAgB,SACb;EACQ;EACb;EACA;EACA,GAAG;~~EACJ~~,~~GACD~~;EAAC;EAAU;EAAiB;EAAM;~~EAAY~~,CAC/C;~~AAED~~,~~KAAI~~,KAAa,KAAe,~~KAC9B~~,~~QAAO~~,kBAAA,GAAA,~~EAAK~~,CAAA;~~AAGd~~,~~SAAQ~~,GAAR;EACE,KAAK,~~EACH~~,~~QAAO~~,kBAAC,GAAD,EAAQ,GAAI,~~GAAiB~~,CAAA;~~EACtC~~,KAAK,~~EACH~~,~~QACE~~,kBAAC,GAAD;GAAW,QAAQ,KAAW,EAAY;GAAS,GAAI;~~GAAiB~~,CAAA;~~EAE5E~~,KAAK,~~EACH~~,~~QAAO~~,kBAAC,GAAD,EAAgB,GAAI,~~GAAiB~~,CAAA;~~EAC9C~~,KAAK,~~EACH~~,~~QAAO~~,kBAAC,GAAD;GAAgB,SAAS;GAAM,GAAI;~~GAAiB~~,CAAA;~~EAC7D~~,~~QAEE~~,~~QADA~~,QAAQ,KAAK,~~iCAAiC~~,~~EACvC~~,kBAAC,QAAD,~~EAAQ~~,CAAA"}
1	+ {"version":3,"file":"UserCard.js","names":[],"sources":["../../../src/components/UserCard/UserCard.tsx"],"sourcesContent":["import { useGetProfileImage } from '@/synapse-queries/file/useFiles'\nimport {\n useGetPrincipalIdForAlias,\n useGetUserProfile,\n} from '@/synapse-queries/user/useUserBundle'\nimport { SynapseConstants } from '@/utils'\nimport usePreFetchResource, {\n useCreateUrlForData,\n} from '@/utils/hooks/usePreFetchResource'\nimport { UserCardSize } from '@/utils/SynapseConstants'\nimport { AliasType, UserProfile } from '@sage-bionetworks/synapse-types'\nimport { useMemo } from 'react'\nimport { Avatar, AvatarSize } from './Avatar'\nimport { UserBadge } from './UserBadge'\nimport { MenuAction } from './UserCardContextMenu'\nimport UserCardMedium from './UserCardMedium'\n\nexport type UserCardProps = {\n /** A UserProfile may be used for data for the card. You must supply one of `userProfile`, `alias`, `ownerId` /\n userProfile?: UserProfile\n /* An alias that resolves the ownerId for the UserProfile. You must supply one of `userProfile`, `alias`, `ownerId` /\n alias?: string\n /* The unique ownerId of the UserProfile. You must supply one of `userProfile`, `alias`, `ownerId` /\n ownerId?: string\n /* Whether to hide the user's Synapse email address /\n hideEmail?: boolean\n /* If set, the corresponding image will be shown for the user. /\n preSignedURL?: string\n /* Specifies the card size /\n size: UserCardSize\n /* For the small user card or avatar, shows the medium user card on mouseover /\n showCardOnHover?: boolean\n /* @deprecated For the small user card, hides the tooltip observed when hovering over the profile image. /\n hideTooltip?: boolean\n /* Specifies the dropdown menu functionality for the ellipsis on medium/large cards. If field === 'SEPERATOR' then a break will occur in the menu. If left undefined, the menu will not render to the screen. /\n menuActions?: MenuAction[]\n /* The link to point to on the username, defaults to https://www.synapse.org/Profile:${userProfile.ownerId} /\n link?: string\n openLinkInNewTab?: boolean\n /* Disables the `@username` link for the small user card (if `showCardOnHover` is false). For the medium user card, disables linking the user's name to their profile (or other specified destination) /\n disableLink?: boolean\n isCertified?: boolean\n isValidated?: boolean\n /* Determines the size of the avatar when size === 'AVATAR' or (size === 'SMALL' and withAvatar is true) /\n avatarSize?: AvatarSize\n /* Whether to show the avatar with the name for the small user card /\n withAvatar?: boolean\n /* @deprecated Whether to show the full name in the small user card /\n showFullName?: boolean\n className?: string\n /* @deprecated show certification/validation badges for small user card */\n showAccountLevelIcon?: boolean\n}\n\nexport function UserCard(props: UserCardProps) {\n const {\n userProfile: initialProfile,\n preSignedURL: initialPreSignedURL,\n size,\n ownerId,\n alias,\n ...rest\n } = props\n\n // If we were given an alias, fetch the principal ID\n const { data: fetchedPrincipalId, isLoading: isLoadingAliasLookup } =\n useGetPrincipalIdForAlias(\n {\n alias: alias!,\n type: AliasType.USER_NAME,\n },\n { enabled: !!alias },\n )\n\n const principalId = (\n ownerId ??\n initialProfile?.ownerId ??\n fetchedPrincipalId\n )?.toString()\n\n // If we weren't provided an initialProfile, fetch from Synapse\n const { data: fetchedProfile, isLoading: isLoadingProfile } =\n useGetUserProfile(principalId!, {\n enabled: !!principalId && !initialProfile,\n })\n const userProfile = initialProfile ?? fetchedProfile\n\n const { data: avatarData, isLoading: isLoadingAvatar } = useGetProfileImage(\n principalId!,\n {\n // Don't fetch the avatar if `initialPresignedURL` is provided.\n // Also, wait until we have a value for `principalId`\n enabled: !!(!initialPreSignedURL && principalId),\n },\n )\n\n // If a URL was provided, fetch it and create a local data URL\n const providedAvatarURL = usePreFetchResource(initialPreSignedURL)\n // If we fetched the avatar from Synapse, we already have the blob. Create a local data URL\n const fetchedAvatarUrl = useCreateUrlForData(avatarData)\n\n const imageURL = providedAvatarURL ?? fetchedAvatarUrl\n\n const isLoading = isLoadingAliasLookup \|\| isLoadingProfile\n\n const propsForChild = useMemo(\n () => ({\n userProfile: userProfile!,\n imageURL,\n isLoadingAvatar,\n ...rest,\n }),\n [imageURL, isLoadingAvatar, rest, userProfile],\n )\n\n if (isLoading \|\| userProfile == null) {\n return <></>\n }\n\n switch (size) {\n case SynapseConstants.AVATAR:\n return <Avatar {...propsForChild} />\n case SynapseConstants.SMALL_USER_CARD:\n return (\n <UserBadge userId={ownerId ?? userProfile.ownerId} {...propsForChild} />\n )\n case SynapseConstants.MEDIUM_USER_CARD:\n return <UserCardMedium {...propsForChild} />\n case SynapseConstants.LARGE_USER_CARD:\n return <UserCardMedium isLarge={true} {...propsForChild} />\n default:\n console.warn('No size specified for UserCard')\n return <span />\n }\n}\n\nexport default UserCard\n"],"mappings":";;;;;;;;;;;;AAsDA,SAAgB,EAAS,GAAsB;CAC7C,IAAM,EACJ,aAAa,GACb,cAAc,GACd,SACA,YACA,UACA,GAAG,MACD,GAGE,EAAE,MAAM,GAAoB,WAAW,MAC3C,EACE;EACS;EACP,MAAM,EAAU;CAClB,GACA,EAAE,SAAS,CAAC,CAAC,EAAM,CACrB,GAEI,KACJ,KACA,GAAgB,WAChB,IACC,SAAS,GAGN,EAAE,MAAM,GAAgB,WAAW,MACvC,EAAkB,GAAc,EAC9B,SAAS,CAAC,CAAC,KAAe,CAAC,EAC7B,CAAC,GACG,IAAc,KAAkB,GAEhC,EAAE,MAAM,GAAY,WAAW,MAAoB,EACvD,GACA,EAGE,SAAS,CAAC,EAAE,CAAC,KAAuB,GACtC,CACF,GAGM,IAAoB,EAAoB,CAAmB,GAE3D,IAAmB,EAAoB,CAAU,GAEjD,IAAW,KAAqB,GAEhC,IAAY,KAAwB,GAEpC,IAAgB,SACb;EACQ;EACb;EACA;EACA,GAAG;CACL,IACA;EAAC;EAAU;EAAiB;EAAM;CAAW,CAC/C;CAEA,IAAI,KAAa,KAAe,MAC9B,OAAO,kBAAA,GAAA,CAAI,CAAA;CAGb,QAAQ,GAAR;EACE,KAAK,GACH,OAAO,kBAAC,GAAD,EAAQ,GAAI,EAAgB,CAAA;EACrC,KAAK,GACH,OACE,kBAAC,GAAD;GAAW,QAAQ,KAAW,EAAY;GAAS,GAAI;EAAgB,CAAA;EAE3E,KAAK,GACH,OAAO,kBAAC,GAAD,EAAgB,GAAI,EAAgB,CAAA;EAC7C,KAAK,GACH,OAAO,kBAAC,GAAD;GAAgB,SAAS;GAAM,GAAI;EAAgB,CAAA;EAC5D,SAEE,OADA,QAAQ,KAAK,gCAAgC,GACtC,kBAAC,QAAD,CAAO,CAAA;CAClB;AACF"}

package/dist/components/UserCard/UserCardContextMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UserCardContextMenu.js","names":[],"sources":["../../../src/components/UserCard/UserCardContextMenu.tsx"],"sourcesContent":["import { SEPERATOR } from '@/utils/SynapseConstants'\nimport { Divider, Menu, MenuItem } from '@mui/material'\nimport { UserProfile } from '@sage-bionetworks/synapse-types'\n\nexport type MenuAction = {\n field: string\n callback?: (userProfile: UserProfile) => void\n}\n\nexport type UserCardContextMenuProps = {\n userProfile: UserProfile\n menuActions: MenuAction[]\n open: boolean\n anchorEl?: HTMLElement \| null\n onClose?: () => void\n}\n\nfunction UserCardContextMenu(props: UserCardContextMenuProps) {\n const {\n menuActions = [],\n userProfile,\n open,\n anchorEl = null,\n onClose,\n } = props\n return (\n <Menu open={open} anchorEl={anchorEl} onClose={onClose}>\n {menuActions.map((menuAction, index) => {\n const callback = () => menuAction.callback!(userProfile)\n if (menuAction.field === SEPERATOR) {\n return <Divider key={`${menuAction.field}_${index}`} />\n }\n return (\n <MenuItem role=\"menuitem\" key={menuAction.field} onClick={callback}>\n {menuAction.field}\n </MenuItem>\n )\n })}\n </Menu>\n )\n}\n\nexport default UserCardContextMenu\n"],"mappings":";;;;AAiBA,SAAS,EAAoB,GAAiC;CAC5D,IAAM,EACJ,iBAAc,~~EAAE~~,~~EAChB~~,gBACA,SACA,cAAW,MACX,eACE;~~AACJ~~,~~QACE~~,kBAAC,GAAD;EAAY;EAAgB;EAAmB;YAC5C,EAAY,KAAK,GAAY,MAExB,EAAW,UAAA,cACN,kBAAC,GAAD,~~EAAgD~~,~~EAAlC~~,GAAG,EAAW,MAAM,GAAG,~~IAAW~~,~~GAGvD~~,kBAAC,GAAD;GAAU,MAAK;GAAkC,eAL5B,EAAW,SAAU,~~EAAY~~;~~aAMnD~~,EAAW;~~GACH~~,~~EAFoB~~,EAAW,~~MAE/B~~,CAEb;~~EACG~~,CAAA"}
1	+ {"version":3,"file":"UserCardContextMenu.js","names":[],"sources":["../../../src/components/UserCard/UserCardContextMenu.tsx"],"sourcesContent":["import { SEPERATOR } from '@/utils/SynapseConstants'\nimport { Divider, Menu, MenuItem } from '@mui/material'\nimport { UserProfile } from '@sage-bionetworks/synapse-types'\n\nexport type MenuAction = {\n field: string\n callback?: (userProfile: UserProfile) => void\n}\n\nexport type UserCardContextMenuProps = {\n userProfile: UserProfile\n menuActions: MenuAction[]\n open: boolean\n anchorEl?: HTMLElement \| null\n onClose?: () => void\n}\n\nfunction UserCardContextMenu(props: UserCardContextMenuProps) {\n const {\n menuActions = [],\n userProfile,\n open,\n anchorEl = null,\n onClose,\n } = props\n return (\n <Menu open={open} anchorEl={anchorEl} onClose={onClose}>\n {menuActions.map((menuAction, index) => {\n const callback = () => menuAction.callback!(userProfile)\n if (menuAction.field === SEPERATOR) {\n return <Divider key={`${menuAction.field}_${index}`} />\n }\n return (\n <MenuItem role=\"menuitem\" key={menuAction.field} onClick={callback}>\n {menuAction.field}\n </MenuItem>\n )\n })}\n </Menu>\n )\n}\n\nexport default UserCardContextMenu\n"],"mappings":";;;;AAiBA,SAAS,EAAoB,GAAiC;CAC5D,IAAM,EACJ,iBAAc,CAAC,GACf,gBACA,SACA,cAAW,MACX,eACE;CACJ,OACE,kBAAC,GAAD;EAAY;EAAgB;EAAmB;YAC5C,EAAY,KAAK,GAAY,MAExB,EAAW,UAAA,cACN,kBAAC,GAAD,CAA+C,GAAjC,GAAG,EAAW,MAAM,GAAG,GAAU,IAGtD,kBAAC,GAAD;GAAU,MAAK;GAAkC,eAL5B,EAAW,SAAU,CAAW;aAMlD,EAAW;EACJ,GAFqB,EAAW,KAEhC,CAEb;CACG,CAAA;AAEV"}

package/dist/components/UserCard/UserCardLarge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UserCardLarge.js","names":[],"sources":["../../../src/components/UserCard/UserCardLarge.tsx"],"sourcesContent":["import CertifiedUserIcon from '@/assets/icons/CertifiedUser'\nimport { UserProfile } from '@sage-bionetworks/synapse-types'\n\ntype UserCardLargeProps = {\n userProfile: UserProfile\n isCertified?: boolean\n}\n\n/*\n UserCardLarge wraps around UserCardMedium\n \n @export UserCardLarge\n * @param {UserCardLargeProps} { userProfile }\n */\n// Disable function name because compiler has to know that its a class\n// tslint:disable-next-line:function-name\nexport function UserCardLarge({\n userProfile,\n isCertified,\n}: UserCardLargeProps) {\n const { summary, industry, location, url } = userProfile\n\n return (\n <div className=\"SRC-cardMetaData\">\n <div className=\"SRC-cardMetaData-scroll\">\n {summary && (\n <div>\n <p className=\"SRC-card-metadata-title\"> Bio </p>\n <p>{summary}</p>\n </div>\n )}\n {url && (\n <div>\n <p className=\"SRC-card-metadata-title\"> More Info </p>\n <p>{url}</p>\n </div>\n )}\n {industry && (\n <div>\n <p className=\"SRC-card-metadata-title\"> Industry </p>\n <p>{industry}</p>\n </div>\n )}\n {location && (\n <div>\n <p className=\"SRC-card-metadata-title\"> Location </p>\n <p>{location}</p>\n </div>\n )}\n {isCertified && (\n <div>\n <p className=\"SRC-card-metadata-title\"> Access </p>\n <p>{CertifiedUserIcon} Certified Account</p>\n </div>\n )}\n </div>\n </div>\n )\n}\n"],"mappings":";;;AAgBA,SAAgB,EAAc,EAC5B,gBACA,kBACqB;CACrB,IAAM,EAAE,YAAS,aAAU,aAAU,WAAQ;~~AAE7C~~,~~QACE~~,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACG,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;~~KAAS~~,CAAA,~~EAChD~~,kBAAC,KAAD,EAAA,UAAI,~~GAAY~~,CAAA,CACZ,EAAA,CAAA;~~IAEP~~,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;~~KAAe~~,CAAA,~~EACtD~~,kBAAC,KAAD,EAAA,UAAI,~~GAAQ~~,CAAA,CACR,EAAA,CAAA;~~IAEP~~,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;~~KAAc~~,CAAA,~~EACrD~~,kBAAC,KAAD,EAAA,UAAI,~~GAAa~~,CAAA,CACb,EAAA,CAAA;~~IAEP~~,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;~~KAAc~~,CAAA,~~EACrD~~,kBAAC,KAAD,EAAA,UAAI,~~GAAa~~,CAAA,CACb,EAAA,CAAA;~~IAEP~~,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;~~KAAY~~,CAAA,~~EACnD~~,kBAAC,KAAD,EAAA,UAAA,CAAI,GAAkB,~~qBAAsB~~,EAAA,CAAA,CACxC,EAAA,CAAA;~~IAEJ~~;;~~EACF~~,CAAA"}
1	+ {"version":3,"file":"UserCardLarge.js","names":[],"sources":["../../../src/components/UserCard/UserCardLarge.tsx"],"sourcesContent":["import CertifiedUserIcon from '@/assets/icons/CertifiedUser'\nimport { UserProfile } from '@sage-bionetworks/synapse-types'\n\ntype UserCardLargeProps = {\n userProfile: UserProfile\n isCertified?: boolean\n}\n\n/*\n UserCardLarge wraps around UserCardMedium\n \n @export UserCardLarge\n * @param {UserCardLargeProps} { userProfile }\n */\n// Disable function name because compiler has to know that its a class\n// tslint:disable-next-line:function-name\nexport function UserCardLarge({\n userProfile,\n isCertified,\n}: UserCardLargeProps) {\n const { summary, industry, location, url } = userProfile\n\n return (\n <div className=\"SRC-cardMetaData\">\n <div className=\"SRC-cardMetaData-scroll\">\n {summary && (\n <div>\n <p className=\"SRC-card-metadata-title\"> Bio </p>\n <p>{summary}</p>\n </div>\n )}\n {url && (\n <div>\n <p className=\"SRC-card-metadata-title\"> More Info </p>\n <p>{url}</p>\n </div>\n )}\n {industry && (\n <div>\n <p className=\"SRC-card-metadata-title\"> Industry </p>\n <p>{industry}</p>\n </div>\n )}\n {location && (\n <div>\n <p className=\"SRC-card-metadata-title\"> Location </p>\n <p>{location}</p>\n </div>\n )}\n {isCertified && (\n <div>\n <p className=\"SRC-card-metadata-title\"> Access </p>\n <p>{CertifiedUserIcon} Certified Account</p>\n </div>\n )}\n </div>\n </div>\n )\n}\n"],"mappings":";;;AAgBA,SAAgB,EAAc,EAC5B,gBACA,kBACqB;CACrB,IAAM,EAAE,YAAS,aAAU,aAAU,WAAQ;CAE7C,OACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACG,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;IAAQ,CAAA,GAC/C,kBAAC,KAAD,EAAA,UAAI,EAAW,CAAA,CACZ,EAAA,CAAA;IAEN,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;IAAc,CAAA,GACrD,kBAAC,KAAD,EAAA,UAAI,EAAO,CAAA,CACR,EAAA,CAAA;IAEN,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;IAAa,CAAA,GACpD,kBAAC,KAAD,EAAA,UAAI,EAAY,CAAA,CACb,EAAA,CAAA;IAEN,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;IAAa,CAAA,GACpD,kBAAC,KAAD,EAAA,UAAI,EAAY,CAAA,CACb,EAAA,CAAA;IAEN,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eAA0B;IAAW,CAAA,GAClD,kBAAC,KAAD,EAAA,UAAA,CAAI,GAAkB,oBAAqB,EAAA,CAAA,CACxC,EAAA,CAAA;GAEJ;;CACF,CAAA;AAET"}

package/dist/components/UserCard/UserCardMedium.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UserCardMedium.js","names":[],"sources":["../../../src/components/UserCard/UserCardMedium.tsx"],"sourcesContent":["import IconCopy from '@/assets/icons/IconCopy'\nimport ValidatedProfileIcon from '@/assets/icons/ValidatedProfile'\nimport { useGetUserBundle } from '@/synapse-queries/user/useUserBundle'\nimport { SynapseConstants } from '@/utils'\nimport { PRODUCTION_ENDPOINT_CONFIG } from '@/utils/functions/getEndpoint'\nimport { Card, IconButton, Skeleton, Tooltip } from '@mui/material'\nimport { UserProfile } from '@sage-bionetworks/synapse-types'\nimport {\n MouseEvent,\n MutableRefObject,\n SyntheticEvent,\n useRef,\n useState,\n} from 'react'\nimport IconSvg from '../IconSvg/IconSvg'\nimport { SkeletonTable } from '../Skeleton/SkeletonTable'\nimport { ToastMessage } from '../ToastMessage/ToastMessage'\nimport { Avatar } from './Avatar'\nimport UserCardContextMenu, { MenuAction } from './UserCardContextMenu'\nimport { UserCardLarge } from './UserCardLarge'\nimport { copyStringToClipboard } from '@/utils/functions/StringUtils'\n\nexport type UserCardMediumProps = {\n userProfile: UserProfile\n menuActions?: MenuAction[]\n imageURL?: string\n hideEmail?: boolean\n isLarge?: boolean\n link?: string\n openLinkInNewTab?: boolean\n disableLink?: boolean\n isCertified?: boolean\n isValidated?: boolean\n isLoadingAvatar?: boolean\n}\n\n/*\n Function handles copying to clipboard the user's email address\n \n @param {string} value the email address of the user\n * @returns\n /\nconst copyToClipboard =\n (\n ref: MutableRefObject<HTMLElement \| null>,\n value: string,\n onCopy: () => void,\n ) =>\n (event: SyntheticEvent) => {\n event.preventDefault()\n\n copyStringToClipboard(value).then(() => {\n onCopy()\n })\n }\n\nexport function UserCardMedium({\n userProfile,\n menuActions,\n isLarge = false,\n imageURL,\n hideEmail = false,\n disableLink = false,\n link,\n openLinkInNewTab = false,\n isValidated,\n isCertified,\n isLoadingAvatar,\n}: UserCardMediumProps) {\n const [menuAnchorEl, setMenuAnchorEl] = useState<null \| HTMLElement>(null)\n const isContextMenuOpen = Boolean(menuAnchorEl)\n const handleMenuClick = (event: MouseEvent<HTMLButtonElement>) => {\n setMenuAnchorEl(event.currentTarget)\n }\n const handleMenuClose = () => {\n setMenuAnchorEl(null)\n }\n const [showModal, setShowModal] = useState(false)\n\n const copyToClipboardRef = useRef<HTMLParagraphElement>(null)\n\n const onCopyToClipboard = () => {\n // show modal and hide after 4 seconds, the timing is per Material Design\n setShowModal(true)\n // hide after 4 seconds\n setTimeout(() => {\n setShowModal(false)\n }, 4000)\n }\n\n const { ownerId } = userProfile\n const { displayName, userName, firstName, lastName, position, company } =\n userProfile\n\n const { data: userBundle } = useGetUserBundle(\n ownerId,\n SynapseConstants.USER_BUNDLE_MASK_ORCID,\n )\n\n const ORCID = userBundle?.ORCID\n\n let name = ''\n const linkLocation = link\n ? link\n : `${PRODUCTION_ENDPOINT_CONFIG.PORTAL}Profile:${ownerId}`\n // linkLocation is overriden by custom click handler\n const email = userName ? `${userName}@synapse.org` : undefined\n if (displayName) {\n name = displayName\n } else if (firstName && lastName) {\n name = `${firstName} ${lastName}`\n } else if (userName) {\n name = userName\n }\n const avatar = (\n <Avatar\n userProfile={userProfile}\n imageURL={imageURL}\n avatarSize={'LARGE'}\n isLoadingAvatar={isLoadingAvatar}\n />\n )\n const mediumCard = (\n <>\n {!hideEmail && (\n <ToastMessage\n show={showModal}\n text=\"Email address copied to clipboard\"\n autohide={true}\n ></ToastMessage>\n )}\n {disableLink && avatar}\n {!disableLink && (\n <a\n href={linkLocation}\n target={openLinkInNewTab ? '_blank' : ''}\n rel={openLinkInNewTab ? 'noreferrer' : ''}\n className={`SRC-no-border-bottom-imp ${\n isLarge ? 'SRC-isLargeCard' : ''\n }`}\n >\n {avatar}\n </a>\n )}\n <div className=\"SRC-cardContent\">\n <p className=\"SRC-eqHeightRow SRC-userCardName\">\n {/\n make the header clickable for all cards\n consolidate click events\n /}\n <a\n href={linkLocation}\n target={openLinkInNewTab ? '_blank' : ''}\n rel={openLinkInNewTab ? 'noreferrer' : ''}\n tabIndex={0}\n className={'SRC-hand-cursor'}\n >\n {name}\n </a>\n {isValidated && (\n <Tooltip\n title=\"This user profile has been validated.\"\n placement=\"bottom\"\n enterNextDelay={300}\n >\n <span>{ValidatedProfileIcon}</span>\n </Tooltip>\n )}\n </p>\n {(position \|\| company) && (\n <p>\n {position} {position ? ' / ' : ''} {company}\n </p>\n )}\n {!hideEmail && !!email && (\n <p\n ref={copyToClipboardRef}\n className={`SRC-hand-cursor SRC-eqHeightRow SRC-inlineFlex SRC-emailText SRC-cardSvg`}\n onClick={copyToClipboard(\n copyToClipboardRef,\n email,\n onCopyToClipboard,\n )}\n onKeyPress={copyToClipboard(\n copyToClipboardRef,\n email,\n onCopyToClipboard,\n )}\n tabIndex={0}\n >\n <span style={{ paddingRight: '5px', paddingBottom: '2px' }}>\n <a className={`link`}>{`${userName}@synapse.org`}</a>\n </span>\n <IconCopy />\n </p>\n )}\n {ORCID && (\n <a\n href={ORCID}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n style={{ width: 'fit-content' }}\n tabIndex={0}\n >\n View ORCID\n </a>\n )}\n </div>\n {/ conditionally render menu actions, if there are no actions then we don't show the button */}\n {menuActions && menuActions.length > 0 && (\n <>\n <IconButton\n role=\"menu\"\n tabIndex={0}\n onClick={handleMenuClick}\n sx={{ mx: 1 }}\n >\n <IconSvg icon=\"verticalEllipsis\" wrap={false} />\n </IconButton>\n <UserCardContextMenu\n menuActions={menuActions}\n userProfile={userProfile}\n anchorEl={menuAnchorEl}\n onClose={handleMenuClose}\n open={isContextMenuOpen}\n />\n </>\n )}\n </>\n )\n\n if (!isLarge) {\n return (\n <Card\n className={`SRC-userCard SRC-userCardMediumUp`}\n sx={theme => ({\n [theme.breakpoints.down('sm')]: {\n '&.SRC-userCard': {\n minWidth: 'unset',\n padding: '0 16px',\n width: '100%',\n },\n },\n })}\n >\n {mediumCard}\n </Card>\n )\n }\n // else return medium card inside large component\n // when the component is large we have to set the click handler to wrap both the top and bottom portion\n return (\n <Card>\n <div className={`SRC-userCard SRC-userCardMediumUp`}>{mediumCard}</div>\n {isLarge && (\n <UserCardLarge userProfile={userProfile} isCertified={isCertified} />\n )}\n </Card>\n )\n}\n\nexport function LoadingUserCardMedium() {\n return (\n <Card\n className=\"SRC-userCard SRC-userCardMediumUp\"\n style={{ width: '380px' }}\n >\n <Skeleton variant=\"circular\" width=\"80px\" height=\"80px\" />\n <div style={{ width: '250px' }}>\n <SkeletonTable numCols={1} numRows={2} />\n </div>\n </Card>\n )\n}\n\nexport default UserCardMedium\n"],"mappings":"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"}
1	+ {"version":3,"file":"UserCardMedium.js","names":[],"sources":["../../../src/components/UserCard/UserCardMedium.tsx"],"sourcesContent":["import IconCopy from '@/assets/icons/IconCopy'\nimport ValidatedProfileIcon from '@/assets/icons/ValidatedProfile'\nimport { useGetUserBundle } from '@/synapse-queries/user/useUserBundle'\nimport { SynapseConstants } from '@/utils'\nimport { PRODUCTION_ENDPOINT_CONFIG } from '@/utils/functions/getEndpoint'\nimport { Card, IconButton, Skeleton, Tooltip } from '@mui/material'\nimport { UserProfile } from '@sage-bionetworks/synapse-types'\nimport {\n MouseEvent,\n MutableRefObject,\n SyntheticEvent,\n useRef,\n useState,\n} from 'react'\nimport IconSvg from '../IconSvg/IconSvg'\nimport { SkeletonTable } from '../Skeleton/SkeletonTable'\nimport { ToastMessage } from '../ToastMessage/ToastMessage'\nimport { Avatar } from './Avatar'\nimport UserCardContextMenu, { MenuAction } from './UserCardContextMenu'\nimport { UserCardLarge } from './UserCardLarge'\nimport { copyStringToClipboard } from '@/utils/functions/StringUtils'\n\nexport type UserCardMediumProps = {\n userProfile: UserProfile\n menuActions?: MenuAction[]\n imageURL?: string\n hideEmail?: boolean\n isLarge?: boolean\n link?: string\n openLinkInNewTab?: boolean\n disableLink?: boolean\n isCertified?: boolean\n isValidated?: boolean\n isLoadingAvatar?: boolean\n}\n\n/*\n Function handles copying to clipboard the user's email address\n \n @param {string} value the email address of the user\n * @returns\n /\nconst copyToClipboard =\n (\n ref: MutableRefObject<HTMLElement \| null>,\n value: string,\n onCopy: () => void,\n ) =>\n (event: SyntheticEvent) => {\n event.preventDefault()\n\n copyStringToClipboard(value).then(() => {\n onCopy()\n })\n }\n\nexport function UserCardMedium({\n userProfile,\n menuActions,\n isLarge = false,\n imageURL,\n hideEmail = false,\n disableLink = false,\n link,\n openLinkInNewTab = false,\n isValidated,\n isCertified,\n isLoadingAvatar,\n}: UserCardMediumProps) {\n const [menuAnchorEl, setMenuAnchorEl] = useState<null \| HTMLElement>(null)\n const isContextMenuOpen = Boolean(menuAnchorEl)\n const handleMenuClick = (event: MouseEvent<HTMLButtonElement>) => {\n setMenuAnchorEl(event.currentTarget)\n }\n const handleMenuClose = () => {\n setMenuAnchorEl(null)\n }\n const [showModal, setShowModal] = useState(false)\n\n const copyToClipboardRef = useRef<HTMLParagraphElement>(null)\n\n const onCopyToClipboard = () => {\n // show modal and hide after 4 seconds, the timing is per Material Design\n setShowModal(true)\n // hide after 4 seconds\n setTimeout(() => {\n setShowModal(false)\n }, 4000)\n }\n\n const { ownerId } = userProfile\n const { displayName, userName, firstName, lastName, position, company } =\n userProfile\n\n const { data: userBundle } = useGetUserBundle(\n ownerId,\n SynapseConstants.USER_BUNDLE_MASK_ORCID,\n )\n\n const ORCID = userBundle?.ORCID\n\n let name = ''\n const linkLocation = link\n ? link\n : `${PRODUCTION_ENDPOINT_CONFIG.PORTAL}Profile:${ownerId}`\n // linkLocation is overriden by custom click handler\n const email = userName ? `${userName}@synapse.org` : undefined\n if (displayName) {\n name = displayName\n } else if (firstName && lastName) {\n name = `${firstName} ${lastName}`\n } else if (userName) {\n name = userName\n }\n const avatar = (\n <Avatar\n userProfile={userProfile}\n imageURL={imageURL}\n avatarSize={'LARGE'}\n isLoadingAvatar={isLoadingAvatar}\n />\n )\n const mediumCard = (\n <>\n {!hideEmail && (\n <ToastMessage\n show={showModal}\n text=\"Email address copied to clipboard\"\n autohide={true}\n ></ToastMessage>\n )}\n {disableLink && avatar}\n {!disableLink && (\n <a\n href={linkLocation}\n target={openLinkInNewTab ? '_blank' : ''}\n rel={openLinkInNewTab ? 'noreferrer' : ''}\n className={`SRC-no-border-bottom-imp ${\n isLarge ? 'SRC-isLargeCard' : ''\n }`}\n >\n {avatar}\n </a>\n )}\n <div className=\"SRC-cardContent\">\n <p className=\"SRC-eqHeightRow SRC-userCardName\">\n {/\n make the header clickable for all cards\n consolidate click events\n /}\n <a\n href={linkLocation}\n target={openLinkInNewTab ? '_blank' : ''}\n rel={openLinkInNewTab ? 'noreferrer' : ''}\n tabIndex={0}\n className={'SRC-hand-cursor'}\n >\n {name}\n </a>\n {isValidated && (\n <Tooltip\n title=\"This user profile has been validated.\"\n placement=\"bottom\"\n enterNextDelay={300}\n >\n <span>{ValidatedProfileIcon}</span>\n </Tooltip>\n )}\n </p>\n {(position \|\| company) && (\n <p>\n {position} {position ? ' / ' : ''} {company}\n </p>\n )}\n {!hideEmail && !!email && (\n <p\n ref={copyToClipboardRef}\n className={`SRC-hand-cursor SRC-eqHeightRow SRC-inlineFlex SRC-emailText SRC-cardSvg`}\n onClick={copyToClipboard(\n copyToClipboardRef,\n email,\n onCopyToClipboard,\n )}\n onKeyPress={copyToClipboard(\n copyToClipboardRef,\n email,\n onCopyToClipboard,\n )}\n tabIndex={0}\n >\n <span style={{ paddingRight: '5px', paddingBottom: '2px' }}>\n <a className={`link`}>{`${userName}@synapse.org`}</a>\n </span>\n <IconCopy />\n </p>\n )}\n {ORCID && (\n <a\n href={ORCID}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n style={{ width: 'fit-content' }}\n tabIndex={0}\n >\n View ORCID\n </a>\n )}\n </div>\n {/ conditionally render menu actions, if there are no actions then we don't show the button */}\n {menuActions && menuActions.length > 0 && (\n <>\n <IconButton\n role=\"menu\"\n tabIndex={0}\n onClick={handleMenuClick}\n sx={{ mx: 1 }}\n >\n <IconSvg icon=\"verticalEllipsis\" wrap={false} />\n </IconButton>\n <UserCardContextMenu\n menuActions={menuActions}\n userProfile={userProfile}\n anchorEl={menuAnchorEl}\n onClose={handleMenuClose}\n open={isContextMenuOpen}\n />\n </>\n )}\n </>\n )\n\n if (!isLarge) {\n return (\n <Card\n className={`SRC-userCard SRC-userCardMediumUp`}\n sx={theme => ({\n [theme.breakpoints.down('sm')]: {\n '&.SRC-userCard': {\n minWidth: 'unset',\n padding: '0 16px',\n width: '100%',\n },\n },\n })}\n >\n {mediumCard}\n </Card>\n )\n }\n // else return medium card inside large component\n // when the component is large we have to set the click handler to wrap both the top and bottom portion\n return (\n <Card>\n <div className={`SRC-userCard SRC-userCardMediumUp`}>{mediumCard}</div>\n {isLarge && (\n <UserCardLarge userProfile={userProfile} isCertified={isCertified} />\n )}\n </Card>\n )\n}\n\nexport function LoadingUserCardMedium() {\n return (\n <Card\n className=\"SRC-userCard SRC-userCardMediumUp\"\n style={{ width: '380px' }}\n >\n <Skeleton variant=\"circular\" width=\"80px\" height=\"80px\" />\n <div style={{ width: '250px' }}>\n <SkeletonTable numCols={1} numRows={2} />\n </div>\n </Card>\n )\n}\n\nexport default UserCardMedium\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"UserCardList.js","names":[],"sources":["../../../src/components/UserCardList/UserCardList.tsx"],"sourcesContent":["import { UserProfileList } from '@/synapse-client/SynapseClient'\nimport { getUserProfileWithProfilePicAttached } from '@/utils/functions/getUserData'\nimport { MEDIUM_USER_CARD, UserCardSize } from '@/utils/SynapseConstants'\nimport {\n ColumnTypeEnum,\n RowSet,\n UserProfile,\n} from '@sage-bionetworks/synapse-types'\nimport { without } from 'lodash-es'\nimport { Component } from 'react'\nimport UserCard from '../UserCard/UserCard'\n\nexport type UserCardListProps = {\n /* The list of user IDs or null values to render. For null values, the card will be rendered with table data supplied by `firstName`, `lastName`, and `institution` columns supplied by the data prop. /\n list: (string \| null)[]\n size?: UserCardSize\n // Data should not be needed, however, it gives the option to fill in a user profile with other column\n // fields. This is required specifically by AMP-AD Explore/People page\n rowSet?: RowSet\n}\n\nexport type UserCardListState = {\n userProfileMap: Record<string, UserProfile>\n}\nexport class UserCardList extends Component<\n UserCardListProps,\n UserCardListState\n> {\n constructor(props: UserCardListProps) {\n super(props)\n this.state = {\n userProfileMap: {},\n }\n this.update = this.update.bind(this)\n }\n\n componentDidMount() {\n const { list } = this.props\n this.update(list)\n }\n\n componentDidUpdate(prevProps: UserCardListProps) {\n const priorListOfIds = prevProps.list\n const newValues = without(\n this.props.list.filter(el => el),\n ...priorListOfIds,\n )\n // check that the props have changed by seeing that at least one element is different\n if (newValues.length > 0) {\n this.update(newValues)\n }\n }\n\n update(list: (string \| null)[]) {\n getUserProfileWithProfilePicAttached(\n list.filter((el): el is string => !!el),\n )\n .then((data: UserProfileList) => {\n const newEntries: Record<string, UserProfile> = {}\n data.list.forEach(el => {\n const { ownerId } = el\n newEntries[ownerId] = el\n })\n this.setState({\n userProfileMap: { ...this.state.userProfileMap, ...newEntries },\n })\n })\n .catch((err: string) => {\n console.error('Error on batch call =', err)\n })\n }\n\n /\n Given data this will find rows where there is no userId columnType and create faux user profiles\n * using firstName, lastName, and institution (company in UserProfile object).\n * @param {RowSet} rowSet\n * @returns list of UserProfiles with firstName, lastName, company, userName (first letter of firstName) filled out.\n * @memberof UserCardList\n */\n manuallyExtractData(rowSet: RowSet) {\n const firstNameIndex = rowSet.headers.findIndex(\n el => el.name === 'firstName',\n )\n const lastNameIndex = rowSet.headers.findIndex(el => el.name === 'lastName')\n const institutionIndex = rowSet.headers.findIndex(\n el => el.name === 'institution',\n )\n const ownerId = rowSet.headers.findIndex(\n el => el.columnType === ColumnTypeEnum.USERID,\n )\n const nullOwnerIdsRows = rowSet.rows.filter(el => !el.values[ownerId])\n return nullOwnerIdsRows.map<Omit<UserProfile, 'ownerId'>>(el => {\n const values = el.values\n return {\n firstName: values[firstNameIndex] ?? '',\n lastName: values[lastNameIndex] ?? '',\n company: values[institutionIndex] ?? undefined,\n ownerId: null,\n userName: values[firstNameIndex]\n ? (values[firstNameIndex][0] ?? '')\n : '',\n }\n })\n }\n\n render() {\n const { size = MEDIUM_USER_CARD, rowSet, list } = this.props\n const { userProfileMap = {} } = this.state\n const fauxUserProfilesList = rowSet && this.manuallyExtractData(rowSet)\n let fauxUserProfileIndex = 0\n return (\n <div className=\"SRC-card-grid-row\">\n {\n // we loop through the list from the props because thats the 'active set of data' whereas the data stored in state could be stale\n list.map(ownerId => {\n const userProfile = ownerId != null ? userProfileMap[ownerId] : null\n if (userProfile) {\n return (\n <div\n key={JSON.stringify(userProfile)}\n className=\"SRC-grid-item SRC-narrow-grid-item\"\n >\n <UserCard\n size={size}\n preSignedURL={userProfile.clientPreSignedURL}\n userProfile={userProfile}\n />\n </div>\n )\n }\n const fauxUserProfile =\n fauxUserProfilesList && fauxUserProfilesList[fauxUserProfileIndex]\n if (!fauxUserProfile) {\n // This could happen in one of two cases:\n // - The props just updated with a new userlist where the data is being gathered for this particular user\n // OR there is no mapping for this user\n return false\n }\n fauxUserProfileIndex += 1\n return (\n <div\n key={JSON.stringify(fauxUserProfile)}\n className=\"SRC-grid-item SRC-narrow-grid-item\"\n >\n <UserCard\n disableLink={true}\n hideEmail={true}\n size={size}\n // TODO: Modify UserCard to accept a fake profile with no ownerId field, and remove this cast.\n userProfile={fauxUserProfile as UserProfile}\n />\n </div>\n )\n })\n }\n </div>\n )\n }\n}\nexport default UserCardList\n"],"mappings":";;;;;;;;AAwBA,IAAa,IAAb,cAAkC,EAGhC;CACA,YAAY,GAA0B;~~AAKpC~~,~~EAJA~~,MAAM,~~EAAM~~,~~EACZ~~,KAAK,QAAQ,EACX,gBAAgB,~~EAAE~~,EACnB,~~EACD~~,KAAK,SAAS,KAAK,OAAO,KAAK,~~KAAK;;CAGtC~~,oBAAoB;EAClB,IAAM,EAAE,YAAS,KAAK;~~AACtB~~,~~OAAK~~,OAAO,~~EAAK;;CAGnB~~,mBAAmB,GAA8B;EAC/C,IAAM,IAAiB,EAAU,MAC3B,IAAY,EAChB,KAAK,MAAM,KAAK,QAAO,MAAM,~~EAAG~~,~~EAChC~~,GAAG,~~EACJ~~;~~AAED~~,~~EAAI~~,EAAU,SAAS,KACrB,KAAK,OAAO,~~EAAU;;CAI1B~~,OAAO,GAAyB;~~AAC9B~~,~~IACE~~,EAAK,QAAQ,MAAqB,CAAC,CAAC,~~EAAG~~,CACxC,~~CACE~~,MAAM,MAA0B;GAC/B,IAAM,IAA0C,~~EAAE~~;~~AAKlD~~,~~GAJA~~,EAAK,KAAK,SAAQ,MAAM;IACtB,IAAM,EAAE,eAAY;~~AACpB~~,~~MAAW~~,KAAW;~~KACtB~~,~~EACF~~,KAAK,SAAS,EACZ,gBAAgB;IAAE,GAAG,KAAK,MAAM;IAAgB,GAAG;~~IAAY~~,EAChE,CAAC;~~IACF~~,~~CACD~~,OAAO,MAAgB;~~AACtB~~,~~WAAQ~~,MAAM,yBAAyB,~~EAAI~~;~~IAC3C;;CAUN~~,oBAAoB,GAAgB;EAClC,IAAM,IAAiB,EAAO,QAAQ,WACpC,MAAM,EAAG,SAAS,~~YACnB~~,~~EACK~~,IAAgB,EAAO,QAAQ,WAAU,MAAM,EAAG,SAAS,~~WAAW~~,~~EACtE~~,IAAmB,EAAO,QAAQ,WACtC,MAAM,EAAG,SAAS,~~cACnB~~,~~EACK~~,IAAU,EAAO,QAAQ,WAC7B,MAAM,EAAG,eAAe,EAAe,~~OACxC~~;~~AAED~~,~~SADyB~~,EAAO,KAAK,QAAO,MAAM,CAAC,EAAG,OAAO,~~GACtD~~,~~CAAiB~~,KAAkC,MAAM;GAC9D,IAAM,IAAS,EAAG;~~AAClB~~,~~UAAO~~;IACL,WAAW,EAAO,MAAmB;IACrC,UAAU,EAAO,MAAkB;IACnC,SAAS,EAAO,MAAqB,KAAA;IACrC,SAAS;IACT,UAAU,EAAO,KACZ,EAAO,GAAgB,MAAM,KAC9B;~~IACL~~;~~IACD;;CAGJ~~,SAAS;EACP,IAAM,EAAE,UAAO,GAAkB,WAAQ,YAAS,KAAK,OACjD,EAAE,oBAAiB,~~EAAE~~,~~KAAK~~,KAAK,OAC/B,IAAuB,KAAU,KAAK,oBAAoB,~~EAAO~~,~~EACnE~~,IAAuB;~~AAC3B~~,~~SACE~~,kBAAC,OAAD;GAAK,WAAU;aAGX,EAAK,KAAI,MAAW;IAClB,IAAM,IAAc,KAAW,OAAiC,OAA1B,EAAe;~~AACrD~~,~~QAAI~~,~~EACF~~,~~QACE~~,kBAAC,OAAD;KAEE,WAAU;eAEV,kBAAC,GAAD;MACQ;MACN,cAAc,EAAY;MACb;~~MACb~~,CAAA;~~KACE~~,~~EARC~~,KAAK,UAAU,~~EAAY~~,CAQ5B;~~IAGV~~,IAAM,IACJ,KAAwB,EAAqB;~~AAQ~~/C,~~WAPK~~,KAML,KAAwB,GAEtB,kBAAC,OAAD;KAEE,WAAU;eAEV,kBAAC,GAAD;MACE,aAAa;MACb,WAAW;MACL;MAEN,aAAa;~~MACb~~,CAAA;~~KACE~~,~~EAVC~~,KAAK,UAAU,~~EAAgB~~,CAUhC,~~IAfC~~;~~KAiBT~~;~~GAEA~~,CAAA"}
1	+ {"version":3,"file":"UserCardList.js","names":[],"sources":["../../../src/components/UserCardList/UserCardList.tsx"],"sourcesContent":["import { UserProfileList } from '@/synapse-client/SynapseClient'\nimport { getUserProfileWithProfilePicAttached } from '@/utils/functions/getUserData'\nimport { MEDIUM_USER_CARD, UserCardSize } from '@/utils/SynapseConstants'\nimport {\n ColumnTypeEnum,\n RowSet,\n UserProfile,\n} from '@sage-bionetworks/synapse-types'\nimport { without } from 'lodash-es'\nimport { Component } from 'react'\nimport UserCard from '../UserCard/UserCard'\n\nexport type UserCardListProps = {\n /* The list of user IDs or null values to render. For null values, the card will be rendered with table data supplied by `firstName`, `lastName`, and `institution` columns supplied by the data prop. /\n list: (string \| null)[]\n size?: UserCardSize\n // Data should not be needed, however, it gives the option to fill in a user profile with other column\n // fields. This is required specifically by AMP-AD Explore/People page\n rowSet?: RowSet\n}\n\nexport type UserCardListState = {\n userProfileMap: Record<string, UserProfile>\n}\nexport class UserCardList extends Component<\n UserCardListProps,\n UserCardListState\n> {\n constructor(props: UserCardListProps) {\n super(props)\n this.state = {\n userProfileMap: {},\n }\n this.update = this.update.bind(this)\n }\n\n componentDidMount() {\n const { list } = this.props\n this.update(list)\n }\n\n componentDidUpdate(prevProps: UserCardListProps) {\n const priorListOfIds = prevProps.list\n const newValues = without(\n this.props.list.filter(el => el),\n ...priorListOfIds,\n )\n // check that the props have changed by seeing that at least one element is different\n if (newValues.length > 0) {\n this.update(newValues)\n }\n }\n\n update(list: (string \| null)[]) {\n getUserProfileWithProfilePicAttached(\n list.filter((el): el is string => !!el),\n )\n .then((data: UserProfileList) => {\n const newEntries: Record<string, UserProfile> = {}\n data.list.forEach(el => {\n const { ownerId } = el\n newEntries[ownerId] = el\n })\n this.setState({\n userProfileMap: { ...this.state.userProfileMap, ...newEntries },\n })\n })\n .catch((err: string) => {\n console.error('Error on batch call =', err)\n })\n }\n\n /\n Given data this will find rows where there is no userId columnType and create faux user profiles\n * using firstName, lastName, and institution (company in UserProfile object).\n * @param {RowSet} rowSet\n * @returns list of UserProfiles with firstName, lastName, company, userName (first letter of firstName) filled out.\n * @memberof UserCardList\n */\n manuallyExtractData(rowSet: RowSet) {\n const firstNameIndex = rowSet.headers.findIndex(\n el => el.name === 'firstName',\n )\n const lastNameIndex = rowSet.headers.findIndex(el => el.name === 'lastName')\n const institutionIndex = rowSet.headers.findIndex(\n el => el.name === 'institution',\n )\n const ownerId = rowSet.headers.findIndex(\n el => el.columnType === ColumnTypeEnum.USERID,\n )\n const nullOwnerIdsRows = rowSet.rows.filter(el => !el.values[ownerId])\n return nullOwnerIdsRows.map<Omit<UserProfile, 'ownerId'>>(el => {\n const values = el.values\n return {\n firstName: values[firstNameIndex] ?? '',\n lastName: values[lastNameIndex] ?? '',\n company: values[institutionIndex] ?? undefined,\n ownerId: null,\n userName: values[firstNameIndex]\n ? (values[firstNameIndex][0] ?? '')\n : '',\n }\n })\n }\n\n render() {\n const { size = MEDIUM_USER_CARD, rowSet, list } = this.props\n const { userProfileMap = {} } = this.state\n const fauxUserProfilesList = rowSet && this.manuallyExtractData(rowSet)\n let fauxUserProfileIndex = 0\n return (\n <div className=\"SRC-card-grid-row\">\n {\n // we loop through the list from the props because thats the 'active set of data' whereas the data stored in state could be stale\n list.map(ownerId => {\n const userProfile = ownerId != null ? userProfileMap[ownerId] : null\n if (userProfile) {\n return (\n <div\n key={JSON.stringify(userProfile)}\n className=\"SRC-grid-item SRC-narrow-grid-item\"\n >\n <UserCard\n size={size}\n preSignedURL={userProfile.clientPreSignedURL}\n userProfile={userProfile}\n />\n </div>\n )\n }\n const fauxUserProfile =\n fauxUserProfilesList && fauxUserProfilesList[fauxUserProfileIndex]\n if (!fauxUserProfile) {\n // This could happen in one of two cases:\n // - The props just updated with a new userlist where the data is being gathered for this particular user\n // OR there is no mapping for this user\n return false\n }\n fauxUserProfileIndex += 1\n return (\n <div\n key={JSON.stringify(fauxUserProfile)}\n className=\"SRC-grid-item SRC-narrow-grid-item\"\n >\n <UserCard\n disableLink={true}\n hideEmail={true}\n size={size}\n // TODO: Modify UserCard to accept a fake profile with no ownerId field, and remove this cast.\n userProfile={fauxUserProfile as UserProfile}\n />\n </div>\n )\n })\n }\n </div>\n )\n }\n}\nexport default UserCardList\n"],"mappings":";;;;;;;;AAwBA,IAAa,IAAb,cAAkC,EAGhC;CACA,YAAY,GAA0B;EAKpC,AAJA,MAAM,CAAK,GACX,KAAK,QAAQ,EACX,gBAAgB,CAAC,EACnB,GACA,KAAK,SAAS,KAAK,OAAO,KAAK,IAAI;CACrC;CAEA,oBAAoB;EAClB,IAAM,EAAE,YAAS,KAAK;EACtB,KAAK,OAAO,CAAI;CAClB;CAEA,mBAAmB,GAA8B;EAC/C,IAAM,IAAiB,EAAU,MAC3B,IAAY,EAChB,KAAK,MAAM,KAAK,QAAO,MAAM,CAAE,GAC/B,GAAG,CACL;EAEA,AAAI,EAAU,SAAS,KACrB,KAAK,OAAO,CAAS;CAEzB;CAEA,OAAO,GAAyB;EAC9B,EACE,EAAK,QAAQ,MAAqB,CAAC,CAAC,CAAE,CACxC,EACG,MAAM,MAA0B;GAC/B,IAAM,IAA0C,CAAC;GAKjD,AAJA,EAAK,KAAK,SAAQ,MAAM;IACtB,IAAM,EAAE,eAAY;IACpB,EAAW,KAAW;GACxB,CAAC,GACD,KAAK,SAAS,EACZ,gBAAgB;IAAE,GAAG,KAAK,MAAM;IAAgB,GAAG;GAAW,EAChE,CAAC;EACH,CAAC,EACA,OAAO,MAAgB;GACtB,QAAQ,MAAM,yBAAyB,CAAG;EAC5C,CAAC;CACL;CASA,oBAAoB,GAAgB;EAClC,IAAM,IAAiB,EAAO,QAAQ,WACpC,MAAM,EAAG,SAAS,WACpB,GACM,IAAgB,EAAO,QAAQ,WAAU,MAAM,EAAG,SAAS,UAAU,GACrE,IAAmB,EAAO,QAAQ,WACtC,MAAM,EAAG,SAAS,aACpB,GACM,IAAU,EAAO,QAAQ,WAC7B,MAAM,EAAG,eAAe,EAAe,MACzC;EAEA,OADyB,EAAO,KAAK,QAAO,MAAM,CAAC,EAAG,OAAO,EACtD,EAAiB,KAAkC,MAAM;GAC9D,IAAM,IAAS,EAAG;GAClB,OAAO;IACL,WAAW,EAAO,MAAmB;IACrC,UAAU,EAAO,MAAkB;IACnC,SAAS,EAAO,MAAqB,KAAA;IACrC,SAAS;IACT,UAAU,EAAO,KACZ,EAAO,GAAgB,MAAM,KAC9B;GACN;EACF,CAAC;CACH;CAEA,SAAS;EACP,IAAM,EAAE,UAAO,GAAkB,WAAQ,YAAS,KAAK,OACjD,EAAE,oBAAiB,CAAC,MAAM,KAAK,OAC/B,IAAuB,KAAU,KAAK,oBAAoB,CAAM,GAClE,IAAuB;EAC3B,OACE,kBAAC,OAAD;GAAK,WAAU;aAGX,EAAK,KAAI,MAAW;IAClB,IAAM,IAAc,KAAW,OAAiC,OAA1B,EAAe;IACrD,IAAI,GACF,OACE,kBAAC,OAAD;KAEE,WAAU;eAEV,kBAAC,GAAD;MACQ;MACN,cAAc,EAAY;MACb;KACd,CAAA;IACE,GARE,KAAK,UAAU,CAAW,CAQ5B;IAGT,IAAM,IACJ,KAAwB,EAAqB;IAQ/C,OAPK,KAML,KAAwB,GAEtB,kBAAC,OAAD;KAEE,WAAU;eAEV,kBAAC,GAAD;MACE,aAAa;MACb,WAAW;MACL;MAEN,aAAa;KACd,CAAA;IACE,GAVE,KAAK,UAAU,CAAe,CAUhC,KAfE;GAiBX,CAAC;EAEA,CAAA;CAET;AACF"}

package/dist/components/UserCardList/UserCardListGroups/UserCardListGroups.Desktop.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UserCardListGroups.Desktop.js","names":[],"sources":["../../../../src/components/UserCardList/UserCardListGroups/UserCardListGroups.Desktop.tsx"],"sourcesContent":["import { useState } from 'react'\nimport UserCardListRotate from '../UserCardListRotate'\nimport { FacetColumnValuesRequest } from '@sage-bionetworks/synapse-types'\nimport { UserCardListGroupsProps } from './UserCardListGroups'\n\nexport default function UserCardListGroupsDesktop(\n props: UserCardListGroupsProps,\n) {\n const [selectedGroupIndex, setSelectedGroupIndex] = useState<number>(0)\n const { columnName, facetValues, ...rest } = props\n const selectedFacet: FacetColumnValuesRequest = {\n columnName,\n facetValues: [facetValues[selectedGroupIndex]],\n concreteType:\n 'org.sagebionetworks.repo.model.table.FacetColumnValuesRequest',\n }\n return (\n <div className=\"control-container\">\n <div className=\"button-container\">\n {facetValues?.map((el, curIndex) => {\n return (\n <button\n className={selectedGroupIndex === curIndex ? 'isSelected' : ''}\n onClick={() => setSelectedGroupIndex(curIndex)}\n key={el}\n >\n {el}\n </button>\n )\n })}\n {/\n This button keeps the border line in the button container running from top to bottom,\n it doesn't have any functionality.\n /}\n <button className=\"gap-fill\" />\n </div>\n <div className=\"content-container\">\n <UserCardListRotate\n key={`UserCardListGroup-${selectedGroupIndex}`}\n {...rest}\n selectedFacets={[selectedFacet]}\n />\n </div>\n </div>\n )\n}\n"],"mappings":";;;;AAKA,SAAwB,EACtB,GACA;CACA,IAAM,CAAC,GAAoB,KAAyB,EAAiB,~~EAAE~~,~~EACjE~~,EAAE,eAAY,gBAAa,GAAG,MAAS,GACvC,IAA0C;EAC9C;EACA,aAAa,CAAC,EAAY,~~GAAoB~~;~~EAC9C~~,cACE;~~EACH~~;~~AACD~~,~~QACE~~,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,GAAa,KAAK,GAAI,MAEnB,kBAAC,UAAD;IACE,WAAW,MAAuB,IAAW,eAAe;IAC5D,eAAe,EAAsB,~~EAAS~~;~~cAG7C~~;~~IACM~~,~~EAHF~~,~~EAGE~~,CAEX,~~EAKF~~,kBAAC,UAAD,EAAQ,WAAU,~~YAAa~~,CAAA,CAC3B;~~MACN~~,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IAEE,GAAI;IACJ,gBAAgB,CAAC,~~EAAc~~;~~IAC~~/B,~~EAHK~~,qBAAqB,~~IAG1B~~;~~GACE~~,CAAA,CACF"}
1	+ {"version":3,"file":"UserCardListGroups.Desktop.js","names":[],"sources":["../../../../src/components/UserCardList/UserCardListGroups/UserCardListGroups.Desktop.tsx"],"sourcesContent":["import { useState } from 'react'\nimport UserCardListRotate from '../UserCardListRotate'\nimport { FacetColumnValuesRequest } from '@sage-bionetworks/synapse-types'\nimport { UserCardListGroupsProps } from './UserCardListGroups'\n\nexport default function UserCardListGroupsDesktop(\n props: UserCardListGroupsProps,\n) {\n const [selectedGroupIndex, setSelectedGroupIndex] = useState<number>(0)\n const { columnName, facetValues, ...rest } = props\n const selectedFacet: FacetColumnValuesRequest = {\n columnName,\n facetValues: [facetValues[selectedGroupIndex]],\n concreteType:\n 'org.sagebionetworks.repo.model.table.FacetColumnValuesRequest',\n }\n return (\n <div className=\"control-container\">\n <div className=\"button-container\">\n {facetValues?.map((el, curIndex) => {\n return (\n <button\n className={selectedGroupIndex === curIndex ? 'isSelected' : ''}\n onClick={() => setSelectedGroupIndex(curIndex)}\n key={el}\n >\n {el}\n </button>\n )\n })}\n {/\n This button keeps the border line in the button container running from top to bottom,\n it doesn't have any functionality.\n /}\n <button className=\"gap-fill\" />\n </div>\n <div className=\"content-container\">\n <UserCardListRotate\n key={`UserCardListGroup-${selectedGroupIndex}`}\n {...rest}\n selectedFacets={[selectedFacet]}\n />\n </div>\n </div>\n )\n}\n"],"mappings":";;;;AAKA,SAAwB,EACtB,GACA;CACA,IAAM,CAAC,GAAoB,KAAyB,EAAiB,CAAC,GAChE,EAAE,eAAY,gBAAa,GAAG,MAAS,GACvC,IAA0C;EAC9C;EACA,aAAa,CAAC,EAAY,EAAmB;EAC7C,cACE;CACJ;CACA,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,GAAa,KAAK,GAAI,MAEnB,kBAAC,UAAD;IACE,WAAW,MAAuB,IAAW,eAAe;IAC5D,eAAe,EAAsB,CAAQ;cAG5C;GACK,GAHD,CAGC,CAEX,GAKD,kBAAC,UAAD,EAAQ,WAAU,WAAY,CAAA,CAC3B;MACL,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IAEE,GAAI;IACJ,gBAAgB,CAAC,CAAa;GAC/B,GAHM,qBAAqB,GAG3B;EACE,CAAA,CACF;;AAET"}

package/dist/components/UserCardList/UserCardListGroups/UserCardListGroups.Mobile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UserCardListGroups.Mobile.js","names":[],"sources":["../../../../src/components/UserCardList/UserCardListGroups/UserCardListGroups.Mobile.tsx"],"sourcesContent":["import UserCardListRotate from '../UserCardListRotate'\nimport { FacetColumnValuesRequest } from '@sage-bionetworks/synapse-types'\nimport ExpandableContent from '../../home_page/ExpandableContent'\nimport { UserCardListGroupsProps } from './UserCardListGroups'\n\nexport default function UserCardListGroupsMobile(\n props: UserCardListGroupsProps,\n) {\n const { columnName, facetValues, ...rest } = props\n return (\n <div>\n {facetValues?.map((el, curIndex) => {\n const facetValue = facetValues[curIndex]\n const selectedFacet: FacetColumnValuesRequest = {\n columnName,\n facetValues: [facetValue],\n concreteType:\n 'org.sagebionetworks.repo.model.table.FacetColumnValuesRequest',\n }\n const content = (\n <UserCardListRotate {...rest} selectedFacets={[selectedFacet]} />\n )\n const title = <> {facetValue} </>\n return (\n <ExpandableContent\n key={`UserCardListGroup-Mobile-${curIndex}`}\n title={title}\n content={content}\n />\n )\n })}\n </div>\n )\n}\n"],"mappings":";;;;AAKA,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,eAAY,gBAAa,GAAG,MAAS;~~AAC7C~~,~~QACE~~,kBAAC,OAAD,EAAA,UACG,GAAa,KAAK,GAAI,MAAa;EAClC,IAAM,IAAa,EAAY,IACzB,IAA0C;GAC9C;GACA,aAAa,CAAC,~~EAAW~~;~~GACzB~~,cACE;~~GACH~~,~~EACK~~,IACJ,kBAAC,GAAD;GAAoB,GAAI;GAAM,gBAAgB,CAAC,~~EAAc~~;~~GAAI~~,CAAA;~~AAGnE~~,~~SACE~~,kBAAC,GAAD;GAES,OAJG,kBAAA,GAAA,EAAA,UAAA;IAAE;IAAE;IAAW;~~IAAI~~,EAAA,~~CAItB~~;GACE;~~GACT~~,~~EAHK~~,4BAA4B,~~IAGjC~~;~~GAEJ~~,EACE,CAAA"}
1	+ {"version":3,"file":"UserCardListGroups.Mobile.js","names":[],"sources":["../../../../src/components/UserCardList/UserCardListGroups/UserCardListGroups.Mobile.tsx"],"sourcesContent":["import UserCardListRotate from '../UserCardListRotate'\nimport { FacetColumnValuesRequest } from '@sage-bionetworks/synapse-types'\nimport ExpandableContent from '../../home_page/ExpandableContent'\nimport { UserCardListGroupsProps } from './UserCardListGroups'\n\nexport default function UserCardListGroupsMobile(\n props: UserCardListGroupsProps,\n) {\n const { columnName, facetValues, ...rest } = props\n return (\n <div>\n {facetValues?.map((el, curIndex) => {\n const facetValue = facetValues[curIndex]\n const selectedFacet: FacetColumnValuesRequest = {\n columnName,\n facetValues: [facetValue],\n concreteType:\n 'org.sagebionetworks.repo.model.table.FacetColumnValuesRequest',\n }\n const content = (\n <UserCardListRotate {...rest} selectedFacets={[selectedFacet]} />\n )\n const title = <> {facetValue} </>\n return (\n <ExpandableContent\n key={`UserCardListGroup-Mobile-${curIndex}`}\n title={title}\n content={content}\n />\n )\n })}\n </div>\n )\n}\n"],"mappings":";;;;AAKA,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,eAAY,gBAAa,GAAG,MAAS;CAC7C,OACE,kBAAC,OAAD,EAAA,UACG,GAAa,KAAK,GAAI,MAAa;EAClC,IAAM,IAAa,EAAY,IACzB,IAA0C;GAC9C;GACA,aAAa,CAAC,CAAU;GACxB,cACE;EACJ,GACM,IACJ,kBAAC,GAAD;GAAoB,GAAI;GAAM,gBAAgB,CAAC,CAAa;EAAI,CAAA;EAGlE,OACE,kBAAC,GAAD;GAES,OAJG,kBAAA,GAAA,EAAA,UAAA;IAAE;IAAE;IAAW;GAAG,EAAA,CAIrB;GACE;EACV,GAHM,4BAA4B,GAGlC;CAEL,CAAC,EACE,CAAA;AAET"}

package/dist/components/UserCardList/UserCardListGroups/UserCardListGroups.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UserCardListGroups.js","names":[],"sources":["../../../../src/components/UserCardList/UserCardListGroups/UserCardListGroups.tsx"],"sourcesContent":["import LargeButton from '@/components/styled/LargeButton'\nimport useShowDesktop from '@/utils/hooks/useShowDesktop'\nimport { UserCardSize } from '@/utils/SynapseConstants'\nimport UserCardListGroupsDesktop from './UserCardListGroups.Desktop'\nimport UserCardListGroupsMobile from './UserCardListGroups.Mobile'\n\nexport type UserCardListGroupsProps = {\n sql: string\n columnName: string\n facetValues: string[]\n size: UserCardSize\n summaryLink?: string\n summaryLinkText?: string\n count: number\n useQueryResultUserData?: boolean\n}\n\nexport default function UserCardListGroups(props: UserCardListGroupsProps) {\n const { summaryLink, summaryLinkText, ...rest } = props\n const showDesktop = useShowDesktop()\n return (\n <div className={`UserCardListGroups${showDesktop ? '__Desktop' : ''}`}>\n <div>\n {showDesktop ? (\n <UserCardListGroupsDesktop {...rest} />\n ) : (\n <UserCardListGroupsMobile {...rest} />\n )}\n {summaryLink && summaryLinkText && (\n <div className=\"UserCardListGroups__summary\">\n <LargeButton\n color=\"secondary\"\n variant=\"contained\"\n href={summaryLink}\n >\n {summaryLinkText}\n </LargeButton>\n </div>\n )}\n </div>\n </div>\n )\n}\n"],"mappings":";;;;;;AAiBA,SAAwB,EAAmB,GAAgC;CACzE,IAAM,EAAE,gBAAa,oBAAiB,GAAG,MAAS,GAC5C,IAAc,~~GAAgB~~;~~AACpC~~,~~QACE~~,kBAAC,OAAD;EAAK,WAAW,qBAAqB,IAAc,cAAc;YAC/D,kBAAC,OAAD,EAAA,UAAA,CAEI,EADD,IACE,IAEA,GAFD,EAA2B,GAAI,~~GAAQ~~,CAED,~~EAEvC~~,KAAe,KACd,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IACE,OAAM;IACN,SAAQ;IACR,MAAM;cAEL;~~IACW~~,CAAA;~~GACV~~,CAAA,CAEJ,EAAA,CAAA;~~EACF~~,CAAA"}
1	+ {"version":3,"file":"UserCardListGroups.js","names":[],"sources":["../../../../src/components/UserCardList/UserCardListGroups/UserCardListGroups.tsx"],"sourcesContent":["import LargeButton from '@/components/styled/LargeButton'\nimport useShowDesktop from '@/utils/hooks/useShowDesktop'\nimport { UserCardSize } from '@/utils/SynapseConstants'\nimport UserCardListGroupsDesktop from './UserCardListGroups.Desktop'\nimport UserCardListGroupsMobile from './UserCardListGroups.Mobile'\n\nexport type UserCardListGroupsProps = {\n sql: string\n columnName: string\n facetValues: string[]\n size: UserCardSize\n summaryLink?: string\n summaryLinkText?: string\n count: number\n useQueryResultUserData?: boolean\n}\n\nexport default function UserCardListGroups(props: UserCardListGroupsProps) {\n const { summaryLink, summaryLinkText, ...rest } = props\n const showDesktop = useShowDesktop()\n return (\n <div className={`UserCardListGroups${showDesktop ? '__Desktop' : ''}`}>\n <div>\n {showDesktop ? (\n <UserCardListGroupsDesktop {...rest} />\n ) : (\n <UserCardListGroupsMobile {...rest} />\n )}\n {summaryLink && summaryLinkText && (\n <div className=\"UserCardListGroups__summary\">\n <LargeButton\n color=\"secondary\"\n variant=\"contained\"\n href={summaryLink}\n >\n {summaryLinkText}\n </LargeButton>\n </div>\n )}\n </div>\n </div>\n )\n}\n"],"mappings":";;;;;;AAiBA,SAAwB,EAAmB,GAAgC;CACzE,IAAM,EAAE,gBAAa,oBAAiB,GAAG,MAAS,GAC5C,IAAc,EAAe;CACnC,OACE,kBAAC,OAAD;EAAK,WAAW,qBAAqB,IAAc,cAAc;YAC/D,kBAAC,OAAD,EAAA,UAAA,CAEI,EADD,IACE,IAEA,GAFD,EAA2B,GAAI,EAAO,CAED,GAEtC,KAAe,KACd,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IACE,OAAM;IACN,SAAQ;IACR,MAAM;cAEL;GACU,CAAA;EACV,CAAA,CAEJ,EAAA,CAAA;CACF,CAAA;AAET"}