From 712f7c7c7b7003bb578f67b6551035c2907ccb3d Mon Sep 17 00:00:00 2001 From: Carlos Cruz Date: Wed, 28 Feb 2024 13:42:45 +0000 Subject: [PATCH] [Platform]: AotF state refactor - Row Context menu (#329) --- .vscode/launch.json | 18 ++ .../AssociationsToolkit/Table/CellName.jsx | 208 ++++++++++++------ .../AssociationsToolkit/Table/ColoredCell.jsx | 4 +- .../Table/TableAssociations.jsx | 76 +++---- .../AssociationsToolkit/Table/TableBody.jsx | 10 +- ...ntext.jsx => AssociationsStateContext.jsx} | 181 +++++++++------ .../hooks/useAotfContext.js | 2 +- .../hooks/useAssociationsData.js | 105 ++++++--- .../components/AssociationsToolkit/index.js | 4 +- .../components/AssociationsToolkit/layout.jsx | 8 +- .../AssociationsToolkit/utils/index.js | 10 + apps/platform/src/index.scss | 54 ++--- apps/platform/src/theme.js | 100 +-------- packages/ui/package.json | 6 +- .../components/GlobalSearch/GlobalSearch.jsx | 2 +- yarn.lock | 176 +++++++++++++++ 16 files changed, 629 insertions(+), 335 deletions(-) create mode 100644 .vscode/launch.json rename apps/platform/src/components/AssociationsToolkit/context/{AssociationsContext.jsx => AssociationsStateContext.jsx} (63%) diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 000000000..5ef287e20 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,18 @@ +{ + "version": "0.1.0", + "configurations": [ + { + "command": "yarn dev:platform", + "name": "Run platform dev", + "request": "launch", + "type": "node-terminal" + }, + { + "type": "chrome", + "request": "launch", + "name": "Launch Platform Chrome against localhost", + "url": "http://localhost:3000", + "webRoot": "${workspaceFolder}/apps/platform/src/" + } + ] +} diff --git a/apps/platform/src/components/AssociationsToolkit/Table/CellName.jsx b/apps/platform/src/components/AssociationsToolkit/Table/CellName.jsx index 0da879dc6..a9cb2f883 100644 --- a/apps/platform/src/components/AssociationsToolkit/Table/CellName.jsx +++ b/apps/platform/src/components/AssociationsToolkit/Table/CellName.jsx @@ -1,112 +1,194 @@ -import { useState } from "react"; -import { styled, Typography } from "@mui/material"; -import { faDna, faStethoscope, faThumbTack, faXmark } from "@fortawesome/free-solid-svg-icons"; +import { useState, useRef } from "react"; +import { + styled, + Typography, + MenuList, + MenuItem, + ListItemText, + ListItemIcon, + Divider, + Popover, + Box, + Fade, +} from "@mui/material"; +import { + faThumbTack, + faEllipsisVertical, + faArrowUpRightFromSquare, + faTrashCan, + faBezierCurve, +} from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Link } from "ui"; -import Tooltip from "./AssocTooltip"; - +import { useHistory } from "react-router-dom"; import useAotfContext from "../hooks/useAotfContext"; +import { ENTITIES } from "../utils"; +import { grey } from "@mui/material/colors"; + +const StyledMenuItem = styled(MenuItem)({ + "&>.MuiListItemIcon-root>svg": { + fontSize: "1rem", + }, +}); const NameContainer = styled("div")({ position: "relative", display: "flex", alignItems: "center", justifyContent: "space-between", + marginLeft: 5, "&:hover": { cursor: "pointer", }, - "&:hover > .PinnedContainer": { + "&:hover > .ContextMenuContainer": { opacity: 1, }, }); +const ScoreIndicator = styled("div")({ + width: "16px", + height: "16px", +}); + const TextContainer = styled("div")({ display: "block", overflow: "hidden", textAlign: "end", textOverflow: "ellipsis", - maxWidth: "120px", "&:hover span": { textDecoration: "underline", }, }); -const LinksTooltipContent = styled("span")({ - display: "flex", - flexDirection: "column", - gap: "5px", -}); - -const PinnedContainer = styled("div", { +const ContextMenuContainer = styled("div", { shouldForwardProp: prop => prop !== "active", })(({ active }) => ({ opacity: active ? "1" : "0", cursor: "pointer", - marginLeft: "5px", + borderRadius: 1, + "&:hover": { + backgroundColor: grey[200], + }, })); -function TooltipContent({ id, entity, name, icon }) { - const profileURL = `/${entity}/${id}`; - const associationsURL = `/${entity}/${id}/associations`; - return ( - - - {name} - - - Go to Profile - - - Go to Associations - - - ); -} - -function CellName({ name, rowId, row, tablePrefix }) { - const [open, setOpen] = useState(false); +function CellName({ cell, colorScale }) { + const history = useHistory(); + const contextMenuRef = useRef(); const { entityToGet, pinnedEntries, setPinnedEntries } = useAotfContext(); + const { loading } = cell.table.getState(); + const name = cell.getValue(); + const { id } = cell.row; + const { score } = cell.row.original; + const scoreIndicatorColor = colorScale(score); + const [openContext, setOpenContext] = useState(false); - const rowData = row.original; + const isPinned = pinnedEntries.find(e => e === id); + const profileURL = `/${entityToGet}/${id}`; + const associationsURL = `/${entityToGet}/${id}/associations`; - const isPinned = pinnedEntries.find(e => e === rowData.id); - const rowEntity = entityToGet === "target" ? "target" : "disease"; - const icon = rowEntity === "target" ? faDna : faStethoscope; + const handleClose = () => { + setOpenContext(false); + }; - const pinnedIcon = tablePrefix === "body" ? faThumbTack : faXmark; + const handleToggle = () => { + setOpenContext(true); + }; const handleClickPin = () => { if (isPinned) { - const newPinnedData = pinnedEntries.filter(e => e !== rowData.id); + const newPinnedData = pinnedEntries.filter(e => e !== id); setPinnedEntries(newPinnedData); } else { - setPinnedEntries([...pinnedEntries, rowData.id]); + setPinnedEntries([...pinnedEntries, id]); } }; + const handleNavigateToProfile = () => { + history.push(profileURL); + }; + + const handleNavigateToAssociations = () => { + history.push(associationsURL); + }; + + if (loading) return null; + return ( - setOpen(false)} - placement="top" - arrow - title={} - > - { - setOpen(true); + + + + {name} + + + + + + - - - - - - {name} - - - - + + + + + + {name} + + + {!isPinned && ( + + + + + Pin {entityToGet} + + )} + {isPinned && ( + + + + + Unpin {entityToGet} + + )} + {entityToGet === ENTITIES.TARGET && ( + + + + + Target network associations + + )} + + + + + + Navigate to profile + + + + + + Navigate to associations + + + + ); } diff --git a/apps/platform/src/components/AssociationsToolkit/Table/ColoredCell.jsx b/apps/platform/src/components/AssociationsToolkit/Table/ColoredCell.jsx index a5f36c002..3954bfb68 100644 --- a/apps/platform/src/components/AssociationsToolkit/Table/ColoredCell.jsx +++ b/apps/platform/src/components/AssociationsToolkit/Table/ColoredCell.jsx @@ -16,10 +16,8 @@ function ColoredCell({ isAssociations = true, hasValue = false, tablePrefix = null, + colorScale, }) { - // if(!hasValue) return null - const colorScale = getScale(isAssociations); - const onClickHandler = onClick ? () => onClick(cell, tablePrefix) : () => ({}); const backgroundColor = hasValue ? colorScale(scoreValue) : "#fafafa"; const borderColor = hasValue ? colorScale(scoreValue) : "#e0dede"; diff --git a/apps/platform/src/components/AssociationsToolkit/Table/TableAssociations.jsx b/apps/platform/src/components/AssociationsToolkit/Table/TableAssociations.jsx index e86b068c3..8992edc58 100644 --- a/apps/platform/src/components/AssociationsToolkit/Table/TableAssociations.jsx +++ b/apps/platform/src/components/AssociationsToolkit/Table/TableAssociations.jsx @@ -7,7 +7,7 @@ import { createColumnHelper, } from "@tanstack/react-table"; -import { styled, Skeleton, Typography } from "@mui/material"; +import { styled, Skeleton, Typography, Box } from "@mui/material"; import dataSourcesCols from "../static_datasets/dataSourcesAssoc"; import prioritizationCols from "../static_datasets/prioritisationColumns"; @@ -22,7 +22,14 @@ import TableFooter from "./TableFooter"; import TableBody from "./TableBody"; import useAotfContext from "../hooks/useAotfContext"; -import { cellHasValue, isPartnerPreview, tableCSSVariables } from "../utils"; +import { + DISPLAY_MODE, + ENTITIES, + cellHasValue, + getScale, + isPartnerPreview, + tableCSSVariables, +} from "../utils"; const TableElement = styled("main")({ maxWidth: "1600px", @@ -37,7 +44,7 @@ const TableDivider = styled("div")({ const columnHelper = createColumnHelper(); /* Build table columns bases on displayed table */ -function getDatasources({ expanderHandler, displayedTable }) { +function getDatasources({ expanderHandler, displayedTable, colorScale }) { const isAssociations = displayedTable === "associations"; const baseCols = isAssociations ? dataSourcesCols : prioritizationCols; const dataProp = isAssociations ? "dataSources" : "prioritisations"; @@ -60,20 +67,21 @@ function getDatasources({ expanderHandler, displayedTable }) { aggregation, isPrivate, docsLink, - cell: row => { - const { prefix, loading } = row.table.getState(); + cell: cell => { + const { prefix, loading } = cell.table.getState(); if (loading) return ; - const hasValue = cellHasValue(row.getValue()); + const hasValue = cellHasValue(cell.getValue()); return hasValue ? ( ) : ( @@ -93,7 +101,6 @@ function TableAssociations() { count, loading: associationsLoading, tableExpanded, - expanded, pagination, expanderHandler, handlePaginationChange, @@ -106,6 +113,9 @@ function TableAssociations() { } = useAotfContext(); const rowNameEntity = entity === "target" ? "name" : "approvedSymbol"; + const isAssociations = displayedTable === "associations"; + const colorScale = getScale(isAssociations); + const associationsColorScale = getScale(true); const columns = useMemo( () => [ @@ -116,17 +126,8 @@ function TableAssociations() { columnHelper.accessor(row => row[entityToGet][rowNameEntity], { id: "name", enableSorting: false, - cell: row => { - const { loading, prefix } = row.table.getState(); - if (loading) return null; - return ( - - ); + cell: cell => { + return ; }, header: () => { const label = entityToGet === "target" ? "Target" : "Disease"; @@ -140,13 +141,16 @@ function TableAssociations() { const { loading } = row.table.getState(); if (loading) return ; return ( - + + + ); }, }), @@ -155,7 +159,7 @@ function TableAssociations() { columnHelper.group({ header: "entities", id: "entity-cols", - columns: [...getDatasources({ expanderHandler, displayedTable })], + columns: [...getDatasources({ expanderHandler, displayedTable, colorScale })], }), ], [expanderHandler, displayedTable, entityToGet, rowNameEntity] @@ -224,21 +228,11 @@ function TableAssociations() {
{/* BODY CONTENT */} - + {pinnedData.length > 0 && } - +
{/* FOOTER */} diff --git a/apps/platform/src/components/AssociationsToolkit/Table/TableBody.jsx b/apps/platform/src/components/AssociationsToolkit/Table/TableBody.jsx index 6af166c51..8eb529ad2 100644 --- a/apps/platform/src/components/AssociationsToolkit/Table/TableBody.jsx +++ b/apps/platform/src/components/AssociationsToolkit/Table/TableBody.jsx @@ -30,21 +30,21 @@ function ExpandableContainer({ rowExpanded, isExpandedInTable, loading, children return {children}; } -function TableBody({ core, expanded, cols }) { - const { id, entity, entityToGet, displayedTable, resetExpandler } = useAotfContext(); +function TableBody({ core, cols }) { + const { id, entity, entityToGet, displayedTable, resetExpandler, expanded } = useAotfContext(); const { rows } = core.getRowModel(); if (rows.length < 1) return null; - const flatCols = cols.map(c => c.id); + const flatCols = ["name", ...cols.map(c => c.id)]; const rowNameEntity = entity === "target" ? "name" : "approvedSymbol"; const highLevelHeaders = core.getHeaderGroups()[0].headers; const { prefix, loading } = core.getState(); const isExpandedInTable = expanded[3] === prefix && flatCols.includes(expanded[1]); - const handleClickAway = (e) => { - if(e.srcElement.className === "CodeMirror-hint CodeMirror-hint-active"){ + const handleClickAway = e => { + if (e.srcElement.className === "CodeMirror-hint CodeMirror-hint-active") { return; } resetExpandler(); diff --git a/apps/platform/src/components/AssociationsToolkit/context/AssociationsContext.jsx b/apps/platform/src/components/AssociationsToolkit/context/AssociationsStateContext.jsx similarity index 63% rename from apps/platform/src/components/AssociationsToolkit/context/AssociationsContext.jsx rename to apps/platform/src/components/AssociationsToolkit/context/AssociationsStateContext.jsx index d046b1c5d..654090cb4 100644 --- a/apps/platform/src/components/AssociationsToolkit/context/AssociationsContext.jsx +++ b/apps/platform/src/components/AssociationsToolkit/context/AssociationsStateContext.jsx @@ -1,21 +1,26 @@ import { createContext, useState, useMemo, useEffect } from "react"; import { isEqual } from "lodash"; import { useStateParams } from "ui"; -import { defaulDatasourcesWeigths, getControlChecked, getCellId, checkBoxPayload } from "../utils"; import dataSources from "../static_datasets/dataSourcesAssoc"; +import { + defaulDatasourcesWeigths, + getControlChecked, + getCellId, + checkBoxPayload, + ENTITIES, + DEFAULT_TABLE_PAGINATION_STATE, + DEFAULT_TABLE_SORTING_STATE, + DISPLAY_MODE, +} from "../utils"; import useAssociationsData from "../hooks/useAssociationsData"; -const AssociationsContext = createContext(); +const AssociationsStateContext = createContext(); -const initialIndirect = entity => entity !== "target"; -const initialPagination = { - pageIndex: 0, - pageSize: 50, -}; +const initialIndirect = entity => entity !== ENTITIES.TARGET; -function AssociationsProvider({ children, entity, id, query }) { - const [{ pageIndex, pageSize }, setPagination] = useState(initialPagination); +function AssociationsStateProvider({ children, entity, id, query }) { + const [{ pageIndex, pageSize }, setPagination] = useState(DEFAULT_TABLE_PAGINATION_STATE); const pagination = useMemo( () => ({ @@ -39,14 +44,14 @@ function AssociationsProvider({ children, entity, id, query }) { const [dataSourcesRequired, setDataSourcesRequired] = useState([]); const [modifiedSourcesDataControls, setModifiedSourcesDataControls] = useState(false); const [searhFilter, setSearhFilter] = useState(""); - const [sorting, setSorting] = useState([{ id: "score", desc: true }]); + const [sorting, setSorting] = useState(DEFAULT_TABLE_SORTING_STATE); // Data controls UI const [activeHeadersControlls, setActiveHeadersControlls] = useState(false); // only two posible (associations || prioritisations) const [displayedTable, setDisplayedTable] = useStateParams( - "associations", + DISPLAY_MODE.ASSOCIATIONS, "table", arr => arr, str => str @@ -83,11 +88,11 @@ function AssociationsProvider({ children, entity, id, query }) { query, options: { id, + enableIndirect, + entity, size: pinnedEntries.length, sortBy: sorting[0].id, - enableIndirect, datasources: dataSourcesWeights, - entity, aggregationFilters: dataSourcesRequired, rowsFilter: pinnedEntries.toSorted(), }, @@ -105,6 +110,7 @@ function AssociationsProvider({ children, entity, id, query }) { aggregationDatasources.forEach(e => { if (getControlChecked(dataSourcesRequired, e.id) === false) { isAllActive = false; + return; } }); if (isAllActive) { @@ -129,12 +135,12 @@ function AssociationsProvider({ children, entity, id, query }) { } }; - const entityToGet = entity === "target" ? "disease" : "target"; + const entityToGet = entity === ENTITIES.TARGET ? ENTITIES.DISEASE : ENTITIES.TARGET; const resetToInitialPagination = () => { setTableExpanded({}); setExpanded([]); - setPagination(initialPagination); + setPagination(DEFAULT_TABLE_PAGINATION_STATE); }; const handlePaginationChange = newPagination => { @@ -146,7 +152,7 @@ function AssociationsProvider({ children, entity, id, query }) { const handleSortingChange = newSortingFunc => { const newSorting = newSortingFunc(); if (newSorting[0].id === sorting[0].id) { - setSorting([{ id: "score", desc: true }]); + setSorting(DEFAULT_TABLE_SORTING_STATE); return; } setSorting(newSorting); @@ -154,10 +160,15 @@ function AssociationsProvider({ children, entity, id, query }) { const handleSearchInputChange = newSearchFilter => { if (newSearchFilter !== searhFilter) { + setPagination(DEFAULT_TABLE_PAGINATION_STATE); setSearhFilter(newSearchFilter); } }; + const handleActiveRow = (rowid, tablePrefix) => { + setExpanded([rowid, "", "", tablePrefix]); + }; + const expanderHandler = tableExpanderController => (cell, tablePrefix) => { const expandedId = getCellId(cell, entityToGet, displayedTable, tablePrefix); if (expanded.join("-") === expandedId.join("-")) { @@ -183,57 +194,97 @@ function AssociationsProvider({ children, entity, id, query }) { setTableExpanded({}); }; - const contextVariables = useMemo(() => ({ - query, - id, - entity, - entityToGet, - count, - data, - loading, - initialLoading, - tableExpanded, - pagination, - expanded, - activeHeadersControlls, - enableIndirect, - error, - dataSourcesWeights, - dataSourcesRequired, - displayedTable, - pinnedData, - searhFilter, - sorting, - modifiedSourcesDataControls, - tablePinExpanded, - pinnedLoading, - pinnedError, - pinnedCount, - pinExpanded, - pinnedEntries, - resetToInitialPagination, - setPinnedEntries, - setPinExpanded, - setTablePinExpanded, - resetDatasourceControls, - handleSortingChange, - handleSearchInputChange, - setDisplayedTable, - setDataSourcesWeights, - setDataSourcesRequired, - handlePaginationChange, - expanderHandler, - setTableExpanded, - setEnableIndirect, - setActiveHeadersControlls, - resetExpandler, - handleAggregationClick, - })); + const contextVariables = useMemo( + () => ({ + query, + id, + entity, + entityToGet, + count, + data, + loading, + initialLoading, + tableExpanded, + pagination, + expanded, + activeHeadersControlls, + enableIndirect, + error, + dataSourcesWeights, + dataSourcesRequired, + displayedTable, + pinnedData, + searhFilter, + sorting, + modifiedSourcesDataControls, + tablePinExpanded, + pinnedLoading, + pinnedError, + pinnedCount, + pinExpanded, + pinnedEntries, + handleActiveRow, + resetToInitialPagination, + setPinnedEntries, + setPinExpanded, + setTablePinExpanded, + resetDatasourceControls, + handleSortingChange, + handleSearchInputChange, + setDisplayedTable, + setDataSourcesWeights, + setDataSourcesRequired, + handlePaginationChange, + expanderHandler, + setTableExpanded, + setEnableIndirect, + setActiveHeadersControlls, + resetExpandler, + handleAggregationClick, + }), + [ + activeHeadersControlls, + count, + data, + dataSourcesRequired, + dataSourcesWeights, + displayedTable, + enableIndirect, + entity, + entityToGet, + error, + expanded, + expanderHandler, + handleAggregationClick, + handleSearchInputChange, + handleSortingChange, + id, + initialLoading, + loading, + modifiedSourcesDataControls, + pagination, + pinExpanded, + pinnedCount, + pinnedData, + pinnedEntries, + pinnedError, + pinnedLoading, + query, + searhFilter, + setDisplayedTable, + setPinnedEntries, + sorting, + tableExpanded, + tablePinExpanded, + ] + ); return ( - {children} + + {children} + ); } -export default AssociationsContext; -export { AssociationsProvider }; +export default AssociationsStateContext; +export { AssociationsStateProvider }; diff --git a/apps/platform/src/components/AssociationsToolkit/hooks/useAotfContext.js b/apps/platform/src/components/AssociationsToolkit/hooks/useAotfContext.js index 0d4c5828b..515df365f 100644 --- a/apps/platform/src/components/AssociationsToolkit/hooks/useAotfContext.js +++ b/apps/platform/src/components/AssociationsToolkit/hooks/useAotfContext.js @@ -1,5 +1,5 @@ import { useContext } from "react"; -import AssociationsContext from "../context/AssociationsContext"; +import AssociationsContext from "../context/AssociationsStateContext"; function useAotfContext() { return useContext(AssociationsContext); diff --git a/apps/platform/src/components/AssociationsToolkit/hooks/useAssociationsData.js b/apps/platform/src/components/AssociationsToolkit/hooks/useAssociationsData.js index 6c7cd80f6..ecf48f478 100644 --- a/apps/platform/src/components/AssociationsToolkit/hooks/useAssociationsData.js +++ b/apps/platform/src/components/AssociationsToolkit/hooks/useAssociationsData.js @@ -1,22 +1,82 @@ /* eslint-disable */ import { useEffect, useState } from "react"; import client from "../../../client"; +import { ENTITIES } from "../utils"; -// Select and parsed data from API response from fixed Target -const getAssociatedDiseasesData = data => { +/*********** + * HELPERS * + ***********/ +const diseaseAssociationsTargetSelector = data => data[ENTITIES.DISEASE].associatedTargets.rows; +const targetAssociationsDiseaseSelector = data => data[ENTITIES.TARGET].associatedDiseases.rows; + +const diseasePrioritisationTargetsSelector = data => data[ENTITIES.TARGET].prioritisation.items; + +const getPrioritisationData = data => { + const dataRows = diseasePrioritisationTargetsSelector(data); + const prioritisations = dataRows.reduce( + (acc, curr) => ((acc[curr.key] = parseFloat(curr.value)), acc), + {} + ); + return { prioritisations }; +}; + +const getDataSourcesData = data => { + const sources = data.datasourceScores.reduce( + (acc, curr) => ((acc[curr.componentId] = curr.score), acc), + {} + ); + return sources; +}; + +const getDataRowMetadata = (parentEntity, row, fixedEntity) => { + let targetSymbol, diseaseName, id; + switch (fixedEntity) { + case ENTITIES.DISEASE: + id = row.target.id; + targetSymbol = row.target.approvedSymbol; + diseaseName = parentEntity.disease.name; + break; + case ENTITIES.TARGET: + id = row.disease.id; + targetSymbol = parentEntity.target.approvedSymbol; + diseaseName = row.disease.name; + default: + return { targetSymbol, diseaseName }; + } + return { targetSymbol, diseaseName }; +}; + +const getAllDataCount = (fixedEntity, data) => { + switch (fixedEntity) { + case ENTITIES.TARGET: + return data[ENTITIES.TARGET].associatedDiseases.count; + case ENTITIES.DISEASE: + return data[ENTITIES.DISEASE].associatedTargets.count; + default: + return 0; + } +}; + +const getAssociationsData = (fixedEntity, data) => { if (!data) return []; - return data.target.associatedDiseases.rows.map(d => { - const sources = d.datasourceScores.reduce( - (acc, curr) => ((acc[curr.componentId] = curr.score), acc), - {} - ); + const withPrioritisation = fixedEntity === ENTITIES.DISEASE; + const dataRows = + fixedEntity === ENTITIES.DISEASE + ? diseaseAssociationsTargetSelector(data) + : targetAssociationsDiseaseSelector(data); + + return dataRows.map(row => { + const dataSources = getDataSourcesData(row); + const { targetSymbol, diseaseName, id } = getDataRowMetadata(data, row, fixedEntity); return { - id: d.disease.id, - score: d.score, - disease: d.disease, - targetSymbol: data.target.approvedSymbol, - diseaseName: d.disease.name, - dataSources: sources, + score: row.score, + id, + targetSymbol, + diseaseName, + dataSources, + ...(!withPrioritisation && { disease: row.disease }), + ...(withPrioritisation && { target: row.target }), + ...(withPrioritisation && getPrioritisationData(row)), }; }); }; @@ -47,17 +107,7 @@ const getAssociatedTargetsData = data => { }); }; -const getParsedData = (entity, apiResponse) => { - if (entity === "target") return getAssociatedDiseasesData(apiResponse); - if (entity === "disease") return getAssociatedTargetsData(apiResponse); -}; - -const getAllDataCount = (entity, apiResponse) => { - if (entity === "target") return apiResponse.target.associatedDiseases.count; - if (entity === "disease") return apiResponse.disease.associatedTargets.count; -}; - -const initialState = { +const INITIAL_USE_ASSOCIATION_STATE = { loading: false, error: false, data: [], @@ -65,6 +115,9 @@ const initialState = { count: 0, }; +/******** + * HOOK * + ********/ function useAssociationsData({ query, options: { @@ -80,7 +133,7 @@ function useAssociationsData({ entity, }, }) { - const [state, setState] = useState(initialState); + const [state, setState] = useState(INITIAL_USE_ASSOCIATION_STATE); useEffect(() => { let isCurrent = true; @@ -103,7 +156,7 @@ function useAssociationsData({ })), }, }); - const parsedData = getParsedData(entity, resData.data); + const parsedData = getAssociationsData(entity, resData.data); const dataCount = getAllDataCount(entity, resData.data); setState({ count: dataCount, diff --git a/apps/platform/src/components/AssociationsToolkit/index.js b/apps/platform/src/components/AssociationsToolkit/index.js index 37c04b1fb..a30c07344 100644 --- a/apps/platform/src/components/AssociationsToolkit/index.js +++ b/apps/platform/src/components/AssociationsToolkit/index.js @@ -6,7 +6,7 @@ export { default as DataDownloader } from "./DataDownloader"; export { default as DataUploader } from "./DataUploader/DataUploader"; export { default as AssociationsContext, - AssociationsProvider, -} from "./context/AssociationsContext"; + AssociationsStateProvider as AssociationsProvider, +} from "./context/AssociationsStateContext"; export { default as useAotfContext } from "./hooks/useAotfContext"; export * from "./layout"; diff --git a/apps/platform/src/components/AssociationsToolkit/layout.jsx b/apps/platform/src/components/AssociationsToolkit/layout.jsx index 3716b0104..97367943f 100644 --- a/apps/platform/src/components/AssociationsToolkit/layout.jsx +++ b/apps/platform/src/components/AssociationsToolkit/layout.jsx @@ -65,10 +65,10 @@ export const RowContainer = styled("div", { "&:hover": { backgroundColor: "var(--row-hover-color)", border: "0.7px solid #666", - }, - "&:hover .pinnedIcon": { - opacity: 1, - cursor: "pointer", + ".PinnedContainer": { + opacity: 1, + cursor: "pointer", + }, }, })); diff --git a/apps/platform/src/components/AssociationsToolkit/utils/index.js b/apps/platform/src/components/AssociationsToolkit/utils/index.js index 31bdd89be..c3b058df5 100644 --- a/apps/platform/src/components/AssociationsToolkit/utils/index.js +++ b/apps/platform/src/components/AssociationsToolkit/utils/index.js @@ -9,6 +9,16 @@ const ASSOCIATION_LEGEND_LABEL = "Association score"; const PRIORITISATION_LEGEND_LABEL = "Prioritisation indicator"; const TARGE_PRIORITISATION_LEGEND_TICKS = ["Unfavourable", "Favourable"]; +export const DEFAULT_TABLE_PAGE_INDEX = 0; +export const DEFAULT_TABLE_PAGE_SIZE = 50; + +export const DEFAULT_TABLE_PAGINATION_STATE = { + pageIndex: DEFAULT_TABLE_PAGE_INDEX, + pageSize: DEFAULT_TABLE_PAGE_SIZE, +}; + +export const DEFAULT_TABLE_SORTING_STATE = [{ id: 'score', desc: true }]; + export const DISPLAY_MODE = { PRIORITISATION: "prioritisations", ASSOCIATIONS: "associations", diff --git a/apps/platform/src/index.scss b/apps/platform/src/index.scss index 33e543dfe..9239b452e 100644 --- a/apps/platform/src/index.scss +++ b/apps/platform/src/index.scss @@ -1,24 +1,22 @@ body { margin: 0; padding: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", + "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scrollbar-gutter: stable; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } /* Rules for Bibliography abstract highlight */ -[data-entity='TARGET&DISEASE'], -[data-entity='DISEASE'], -[data-entity='DRUG'], -[data-entity='GENE'] { +[data-entity="TARGET&DISEASE"], +[data-entity="DISEASE"], +[data-entity="DRUG"], +[data-entity="GENE"] { padding: 0.15em; margin: 0 0.25em; line-height: 1; @@ -27,10 +25,10 @@ code { border: 1px solid; } -[data-entity='TARGET&DISEASE']:after, -[data-entity='DISEASE']:after, -[data-entity='DRUG']:after, -[data-entity='GENE']:after { +[data-entity="TARGET&DISEASE"]:after, +[data-entity="DISEASE"]:after, +[data-entity="DRUG"]:after, +[data-entity="GENE"]:after { box-sizing: border-box; font-size: 0.6em; line-height: 1; @@ -42,38 +40,38 @@ code { margin: 0 0 0.1rem 0.5rem; } -[data-entity][data-entity='DRUG'] { +[data-entity][data-entity="DRUG"] { background: #d8eddc; border-color: #9ccca6; } -[data-entity][data-entity='DRUG']:after { +[data-entity][data-entity="DRUG"]:after { background: #d8eddc; } -[data-entity][data-entity='DISEASE'] { +[data-entity][data-entity="DISEASE"] { background: #f3e1d9; border-color: #e7b1a0; } -[data-entity][data-entity='DISEASE']:after { +[data-entity][data-entity="DISEASE"]:after { background: #f3e1d9; } -[data-entity][data-entity='TARGET&DISEASE'] { +[data-entity][data-entity="TARGET&DISEASE"] { background: #d0ddeb; border-color: #82b0ca; } -[data-entity][data-entity='TARGET&DISEASE']:after { +[data-entity][data-entity="TARGET&DISEASE"]:after { background: #d0ddeb; } -[data-entity][data-entity='GENE'] { +[data-entity][data-entity="GENE"] { background: #e3d1e2; border-color: #bc8cb5; } -[data-entity][data-entity='GENE']:after { +[data-entity][data-entity="GENE"]:after { background: #e3d1e2; } @@ -214,11 +212,15 @@ code { .TAssociations .group-naiming-cols { display: flex; align-items: center; + justify-content: space-between; width: var(--table-left-column-width); } +.TAssociations .header-score { + margin-right: 10px; +} + .TAssociations .group-entity-cols { - /* border-left: 1px solid var(--entities-border-color); */ align-items: center; height: 32px; } @@ -230,9 +232,9 @@ code { } .TAssociations .name-cell { - width: var(--table-header-max-width); + width: 100%; white-space: nowrap; - margin: 0 0.5rem 0 0; + margin: 0 5px 0 0; text-align: left; } @@ -326,13 +328,13 @@ code { .TAssociations .weights-controlls .name-empty-controll { width: 230px; - content: ' '; + content: " "; } .TAssociations .weights-controlls .score-empty-controll { height: 25px; width: 30px; - content: ' '; + content: " "; margin-right: 20px; } diff --git a/apps/platform/src/theme.js b/apps/platform/src/theme.js index d0439586e..33d0739dd 100644 --- a/apps/platform/src/theme.js +++ b/apps/platform/src/theme.js @@ -61,6 +61,11 @@ const theme = { }, }, }, + MuiMenuItem: { + defaultProps: { + disableRipple: true, + }, + }, MuiToggleButton: { defaultProps: { disableRipple: true, @@ -124,101 +129,6 @@ const theme = { }, }, }, - - // overrides: { - // MuiButton: { - // root: { - // borderRadius: 0, - // border: 0, - // padding: '6px 12px', - // minWidth: '32px', - // minHeight: '32px', - // height: '32px', - // textTransform: 'none', - // color: '#000', - // borderColor: 'rgb(196,196,196)', - // }, - // }, - // MuiCard: { - // root: { - // border: `1px solid #ddd`, - // }, - // }, - // MuiIconButton: { - // root: { - // width: '32px', - // height: '32px', - // padding: '0px', - // }, - // }, - // MuiTablePagination: { - // root: { - // height: '36px', - // minHeight: '36px', - // }, - // toolbar: { - // height: '36px', - // minHeight: '36px', - // }, - // }, - // MuiTabs: { - // root: { - // borderBottom: '1px solid #616161', - // }, - // indicator: { - // display: 'none', - // }, - // }, - // MuiTab: { - // root: { - // textTransform: 'none', - // minWidth: '10px !important', - // '&$selected': { - // backgroundColor: PRIMARY, - // color: 'white', - // '&:hover': { backgroundColor: PRIMARY }, - // }, - // '&:hover': { backgroundColor: lighten(0.3, PRIMARY) }, - // }, - // }, - // MuiTypography: { - // // colorSecondary: { - // // color: '#E2DFDF', - // // }, - // colorError: { - // color: SECONDARY, - // }, - // }, - // MuiExpansionPanelSummary: { - // root: { - // padding: 0, - // paddingRight: '32px', - // minHeight: 0, - // '&$expanded': { - // minHeight: 0, - // margin: 0, - // }, - // }, - // content: { - // width: '100%', - // margin: 0, - // '&$expanded': { - // margin: 0, - // }, - // }, - // }, - // MuiExpansionPanelDetails: { - // root: { - // padding: 0, - // paddingRight: '32px', - // }, - // }, - // MuiLinearProgress: { - // root: { - // height: '1px', - // }, - // }, - // }, }; export default theme; diff --git a/packages/ui/package.json b/packages/ui/package.json index e8e5b2e60..8c8c4c9f9 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -12,9 +12,9 @@ "@apollo/client": "^3.8.3", "@fortawesome/free-solid-svg-icons": "^6.4.2", "@fortawesome/react-fontawesome": "^0.2.0", - "@mui/lab": "^5.0.0-alpha.137", - "@mui/material": "^5.14.1", - "@mui/styles": "^5.14.1", + "@mui/lab": "^5.0.0-alpha.165", + "@mui/material": "^5.15.9", + "@mui/styles": "^5.15.9", "classnames": "^2.3.2", "d3-format": "^3.1.0", "file-saver": "^2.0.5", diff --git a/packages/ui/src/components/GlobalSearch/GlobalSearch.jsx b/packages/ui/src/components/GlobalSearch/GlobalSearch.jsx index 7fa0b562d..08830f7b1 100644 --- a/packages/ui/src/components/GlobalSearch/GlobalSearch.jsx +++ b/packages/ui/src/components/GlobalSearch/GlobalSearch.jsx @@ -1,5 +1,5 @@ import { useEffect, useContext } from "react"; -import { Box, Grow, styled } from "@mui/material"; +import { Box, styled } from "@mui/material"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons"; diff --git a/yarn.lock b/yarn.lock index de86d6093..0e05d326e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1203,6 +1203,13 @@ dependencies: regenerator-runtime "^0.14.0" +"@babel/runtime@^7.23.9": + version "7.23.9" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7" + integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.10.4", "@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.22.15", "@babel/template@^7.22.5", "@babel/template@^7.3.3", "@babel/template@^7.4.4": version "7.22.15" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38" @@ -1593,6 +1600,13 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@floating-ui/core@^1.0.0": + version "1.6.0" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1" + integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g== + dependencies: + "@floating-ui/utils" "^0.2.1" + "@floating-ui/core@^1.4.2": version "1.5.0" resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c" @@ -1608,6 +1622,14 @@ "@floating-ui/core" "^1.4.2" "@floating-ui/utils" "^0.1.3" +"@floating-ui/dom@^1.6.1": + version "1.6.3" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef" + integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw== + dependencies: + "@floating-ui/core" "^1.0.0" + "@floating-ui/utils" "^0.2.0" + "@floating-ui/react-dom@^2.0.2": version "2.0.2" resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.2.tgz#fab244d64db08e6bed7be4b5fcce65315ef44d20" @@ -1615,11 +1637,23 @@ dependencies: "@floating-ui/dom" "^1.5.1" +"@floating-ui/react-dom@^2.0.8": + version "2.0.8" + resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.8.tgz#afc24f9756d1b433e1fe0d047c24bd4d9cefaa5d" + integrity sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw== + dependencies: + "@floating-ui/dom" "^1.6.1" + "@floating-ui/utils@^0.1.3": version "0.1.6" resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9" integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A== +"@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1": + version "0.2.1" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2" + integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q== + "@fontsource/inter@^4.5.1": version "4.5.15" resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-4.5.15.tgz#eed1873d68755d3b52d6fcfcfa3493118430a512" @@ -2548,11 +2582,29 @@ clsx "^2.0.0" prop-types "^15.8.1" +"@mui/base@5.0.0-beta.36": + version "5.0.0-beta.36" + resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.36.tgz#29ca2de9d387f6d3943b6f18a84415c43e5f206c" + integrity sha512-6A8fYiXgjqTO6pgj31Hc8wm1M3rFYCxDRh09dBVk0L0W4cb2lnurRJa3cAyic6hHY+we1S58OdGYRbKmOsDpGQ== + dependencies: + "@babel/runtime" "^7.23.9" + "@floating-ui/react-dom" "^2.0.8" + "@mui/types" "^7.2.13" + "@mui/utils" "^5.15.9" + "@popperjs/core" "^2.11.8" + clsx "^2.1.0" + prop-types "^15.8.1" + "@mui/core-downloads-tracker@^5.14.13": version "5.14.13" resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.13.tgz#4b87e28aec6e568613683517ce4b7a7f75fa681a" integrity sha512-3ZUbzcH4yloLKlV6Y+S0Edn2wef9t+EGHSfEkwVCn8E0ULdshifEFgfEroKRegQifDIwcKS/ofccxuZ8njTAYg== +"@mui/core-downloads-tracker@^5.15.10": + version "5.15.10" + resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.10.tgz#616bfb54e3860268d56ff59cd187d47044d954f3" + integrity sha512-qPv7B+LeMatYuzRjB3hlZUHqinHx/fX4YFBiaS19oC02A1e9JFuDKDvlyRQQ5oRSbJJt0QlaLTlr0IcauVcJRQ== + "@mui/lab@^5.0.0-alpha.137": version "5.0.0-alpha.148" resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.148.tgz#3cd05cabedc11e96022f77e365e1847c4e669dfb" @@ -2567,6 +2619,19 @@ clsx "^2.0.0" prop-types "^15.8.1" +"@mui/lab@^5.0.0-alpha.165": + version "5.0.0-alpha.165" + resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.165.tgz#7fd60d26597f60b1dbf7d3ddbd646fcece276385" + integrity sha512-8/zJStT10nh9yrAzLOPTICGhpf5YiGp/JpM0bdTP7u5AE+YT+X2u6QwMxuCrVeW8/WVLAPFg0vtzyfgPcN5T7g== + dependencies: + "@babel/runtime" "^7.23.9" + "@mui/base" "5.0.0-beta.36" + "@mui/system" "^5.15.9" + "@mui/types" "^7.2.13" + "@mui/utils" "^5.15.9" + clsx "^2.1.0" + prop-types "^15.8.1" + "@mui/material@^5.14.1": version "5.14.13" resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.13.tgz#d2df8270cafaa0cae595e843a01e8a9047a05e8e" @@ -2585,6 +2650,24 @@ react-is "^18.2.0" react-transition-group "^4.4.5" +"@mui/material@^5.15.9": + version "5.15.10" + resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.10.tgz#6533ba53edbd0790dbc5bb7e9e173f6069ffd7e6" + integrity sha512-YJJGHjwDOucecjDEV5l9ISTCo+l9YeWrho623UajzoHRYxuKUmwrGVYOW4PKwGvCx9SU9oklZnbbi2Clc5XZHw== + dependencies: + "@babel/runtime" "^7.23.9" + "@mui/base" "5.0.0-beta.36" + "@mui/core-downloads-tracker" "^5.15.10" + "@mui/system" "^5.15.9" + "@mui/types" "^7.2.13" + "@mui/utils" "^5.15.9" + "@types/react-transition-group" "^4.4.10" + clsx "^2.1.0" + csstype "^3.1.3" + prop-types "^15.8.1" + react-is "^18.2.0" + react-transition-group "^4.4.5" + "@mui/private-theming@^5.14.13": version "5.14.13" resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.13.tgz#10cb55a6e2caaf568dfaae894969a933c037da80" @@ -2594,6 +2677,15 @@ "@mui/utils" "^5.14.13" prop-types "^15.8.1" +"@mui/private-theming@^5.15.9": + version "5.15.9" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.15.9.tgz#3ea3514ed2f6bf68541dbe9206665a82cd89cb01" + integrity sha512-/aMJlDOxOTAXyp4F2rIukW1O0anodAMCkv1DfBh/z9vaKHY3bd5fFf42wmP+0GRmwMinC5aWPpNfHXOED1fEtg== + dependencies: + "@babel/runtime" "^7.23.9" + "@mui/utils" "^5.15.9" + prop-types "^15.8.1" + "@mui/styled-engine@^5.14.13": version "5.14.13" resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.13.tgz#4ab4ef7d86ffe8709bdce4b8b2e3dba9090da199" @@ -2604,6 +2696,16 @@ csstype "^3.1.2" prop-types "^15.8.1" +"@mui/styled-engine@^5.15.9": + version "5.15.9" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.9.tgz#444605039ec3fe456bdd5d5cb94330183be62b91" + integrity sha512-NRKtYkL5PZDH7dEmaLEIiipd3mxNnQSO+Yo8rFNBNptY8wzQnQ+VjayTq39qH7Sast5cwHKYFusUrQyD+SS4Og== + dependencies: + "@babel/runtime" "^7.23.9" + "@emotion/cache" "^11.11.0" + csstype "^3.1.3" + prop-types "^15.8.1" + "@mui/styles@^5.14.1": version "5.14.13" resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.14.13.tgz#f1491e804bc96734d3a1678016486fa97479366b" @@ -2627,6 +2729,29 @@ jss-plugin-vendor-prefixer "^10.10.0" prop-types "^15.8.1" +"@mui/styles@^5.15.9": + version "5.15.10" + resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.15.10.tgz#78c5ded89cc7a1a0d35cbf3ef53c300ab71a1140" + integrity sha512-VUl9rCK89lkCZ+ctYv1hSCN9gBke9CfnXF9BtGPkw9jTxPkrW6fQQYep2wcHdzLORE3w96oq9BbSXDqrOnSEPA== + dependencies: + "@babel/runtime" "^7.23.9" + "@emotion/hash" "^0.9.1" + "@mui/private-theming" "^5.15.9" + "@mui/types" "^7.2.13" + "@mui/utils" "^5.15.9" + clsx "^2.1.0" + csstype "^3.1.3" + hoist-non-react-statics "^3.3.2" + jss "^10.10.0" + jss-plugin-camel-case "^10.10.0" + jss-plugin-default-unit "^10.10.0" + jss-plugin-global "^10.10.0" + jss-plugin-nested "^10.10.0" + jss-plugin-props-sort "^10.10.0" + jss-plugin-rule-value-function "^10.10.0" + jss-plugin-vendor-prefixer "^10.10.0" + prop-types "^15.8.1" + "@mui/system@^5.14.13": version "5.14.13" resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.13.tgz#6c7a3cb28e45e3b66eb162ee5b292a6cf80efb8e" @@ -2641,6 +2766,25 @@ csstype "^3.1.2" prop-types "^15.8.1" +"@mui/system@^5.15.9": + version "5.15.9" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.9.tgz#8a34ac0ab133af2550cc7ab980a35174142fd265" + integrity sha512-SxkaaZ8jsnIJ77bBXttfG//LUf6nTfOcaOuIgItqfHv60ZCQy/Hu7moaob35kBb+guxVJnoSZ+7vQJrA/E7pKg== + dependencies: + "@babel/runtime" "^7.23.9" + "@mui/private-theming" "^5.15.9" + "@mui/styled-engine" "^5.15.9" + "@mui/types" "^7.2.13" + "@mui/utils" "^5.15.9" + clsx "^2.1.0" + csstype "^3.1.3" + prop-types "^15.8.1" + +"@mui/types@^7.2.13": + version "7.2.13" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.13.tgz#d1584912942f9dc042441ecc2d1452be39c666b8" + integrity sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g== + "@mui/types@^7.2.6": version "7.2.6" resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.6.tgz#d72b9e9eb0032e107e76033932d65c3f731d2608" @@ -2656,6 +2800,16 @@ prop-types "^15.8.1" react-is "^18.2.0" +"@mui/utils@^5.15.9": + version "5.15.9" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.15.9.tgz#2bdf925e274d87cbe90c14eb52d0835318205e86" + integrity sha512-yDYfr61bCYUz1QtwvpqYy/3687Z8/nS4zv7lv/ih/6ZFGMl1iolEvxRmR84v2lOYxlds+kq1IVYbXxDKh8Z9sg== + dependencies: + "@babel/runtime" "^7.23.9" + "@types/prop-types" "^15.7.11" + prop-types "^15.8.1" + react-is "^18.2.0" + "@mui/x-tree-view@6.0.0-alpha.1": version "6.0.0-alpha.1" resolved "https://registry.yarnpkg.com/@mui/x-tree-view/-/x-tree-view-6.0.0-alpha.1.tgz#fe499f8c43c01d28aca95cfb17491746ffcc3080" @@ -3674,6 +3828,11 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.8.tgz#805eae6e8f41bd19e88917d2ea200dc992f405d3" integrity sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ== +"@types/prop-types@^15.7.11": + version "15.7.11" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563" + integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng== + "@types/q@^1.5.1": version "1.5.6" resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.6.tgz#a6edffe8283910e46dc7a573621f928e6b47fa56" @@ -3751,6 +3910,13 @@ dependencies: "@types/react" "*" +"@types/react-transition-group@^4.4.10": + version "4.4.10" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac" + integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@>=16.9.11", "@types/react@^18.0.28": version "18.2.28" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.28.tgz#86877465c0fcf751659a36c769ecedfcfacee332" @@ -5920,6 +6086,11 @@ clsx@^2.0.0: resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b" integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q== +clsx@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb" + integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg== + co@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184" @@ -6772,6 +6943,11 @@ csstype@^3.0.2, csstype@^3.1.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== +csstype@^3.1.3: + version "3.1.3" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81" + integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw== + currently-unhandled@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"