diff --git a/public/images/graph/age.svg b/public/images/graph/age.svg index fdeb314..fd6f908 100644 --- a/public/images/graph/age.svg +++ b/public/images/graph/age.svg @@ -1,38 +1,38 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/graph/dataset.svg b/public/images/graph/dataset.svg index 0bd9038..569b878 100644 --- a/public/images/graph/dataset.svg +++ b/public/images/graph/dataset.svg @@ -1,3 +1,223 @@ - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/graph/sex.svg b/public/images/graph/sex.svg index 435d97e..81b2c4b 100644 --- a/public/images/graph/sex.svg +++ b/public/images/graph/sex.svg @@ -1,33 +1,33 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/graph/species.svg b/public/images/graph/species.svg index 2c9fc42..4f749df 100644 --- a/public/images/graph/species.svg +++ b/public/images/graph/species.svg @@ -1,36 +1,36 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/graph/strains.svg b/public/images/graph/strains.svg index 0c7d29d..9181a41 100644 --- a/public/images/graph/strains.svg +++ b/public/images/graph/strains.svg @@ -1,38 +1,38 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/EmptyContainer.js b/src/components/EmptyContainer.js index fdd04f3..7064492 100644 --- a/src/components/EmptyContainer.js +++ b/src/components/EmptyContainer.js @@ -18,7 +18,7 @@ const EmptyContainer = (props) => { color='primary' onClick={() => props.setOpenDatasetsListDialog(true)} > - + { SPARC_DATASETS } + + { IMPORT_TEXT } } diff --git a/src/components/GraphViewer/GraphViewer.js b/src/components/GraphViewer/GraphViewer.js index 787f68d..cc20597 100644 --- a/src/components/GraphViewer/GraphViewer.js +++ b/src/components/GraphViewer/GraphViewer.js @@ -2,21 +2,21 @@ import * as d3 from 'd3-force-3d' import Menu from '@material-ui/core/Menu'; import { IconButton, Tooltip,Typography, Box, Link, MenuItem, CircularProgress } from '@material-ui/core'; import React, { useState, useEffect } from 'react'; -import ZoomInIcon from '@material-ui/icons/ZoomIn'; import LayersIcon from '@material-ui/icons/Layers'; import HelpIcon from '@material-ui/icons/Help'; -import ZoomOutIcon from '@material-ui/icons/ZoomOut'; import RefreshIcon from '@material-ui/icons/Refresh'; import UnfoldMoreIcon from '@material-ui/icons/UnfoldMore'; import UnfoldLessIcon from '@material-ui/icons/UnfoldLess'; import BugReportIcon from '@material-ui/icons/BugReport'; import { selectInstance } from '../../redux/actions'; import { useSelector, useDispatch } from 'react-redux'; -import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter'; import GeppettoGraphVisualization from '@metacell/geppetto-meta-ui/graph-visualization/Graph'; import { GRAPH_SOURCE } from '../../constants'; import { rdfTypes, typesModel } from '../../utils/graphModel'; import config from "./../../config/app.json"; +import AddRoundedIcon from '@material-ui/icons/AddRounded'; +import RemoveRoundedIcon from '@material-ui/icons/RemoveRounded'; +import {ViewTypeIcon} from "../../images/Icons"; const NODE_FONT = '500 5px Inter, sans-serif'; const ONE_SECOND = 1000; @@ -585,7 +585,7 @@ const GraphViewer = (props) => {
- + { zoomIn()}> - + zoomOut()}> - + resetCamera()}> @@ -621,7 +621,7 @@ const GraphViewer = (props) => {
- + Version 1 window.open(config.issues_url, '_blank')}> diff --git a/src/components/Sidebar/Footer.js b/src/components/Sidebar/Footer.js index c6c9409..cd97cfa 100644 --- a/src/components/Sidebar/Footer.js +++ b/src/components/Sidebar/Footer.js @@ -1,6 +1,5 @@ -import Plus from '../../images/plus.svg'; import { ADD_DATASET } from '../../constants'; -import { Box, Button, Typography } from '@material-ui/core'; +import {Box, Button, Divider, Typography} from '@material-ui/core'; import config from "./../../config/app.json"; @@ -8,30 +7,35 @@ const SidebarFooter = (props) => { return ( + { props.local ? : null } - - Powered by MetaCell - + + + { + props.expand && + Powered by MetaCell + + } + ); }; diff --git a/src/components/Sidebar/Header.js b/src/components/Sidebar/Header.js index 6d6b272..fb7ad49 100644 --- a/src/components/Sidebar/Header.js +++ b/src/components/Sidebar/Header.js @@ -7,11 +7,10 @@ import { InputAdornment, Button, } from '@material-ui/core'; -import ToggleRight from '../../images/toggle-right.svg'; import Logo from '../../images/logo.svg'; import ToggleLeft from '../../images/toggle-left.svg'; import Search from '../../images/search.svg'; - +import KeyboardTabIcon from '@material-ui/icons/KeyboardTab'; const SidebarHeader = (props) => { const { expand, setExpand, setSearchTerm, searchTerm } = props; const handleChange = ( e ) => { @@ -21,8 +20,8 @@ const SidebarHeader = (props) => { return ( Logo - setExpand(!expand)}> - Toggle + setExpand(!expand)} className='shrink-btn'> + {!expand ? : Toggle} {expand && ( diff --git a/src/components/Sidebar/List.js b/src/components/Sidebar/List.js index 60c51d2..d992d49 100644 --- a/src/components/Sidebar/List.js +++ b/src/components/Sidebar/List.js @@ -3,11 +3,10 @@ import { Box, IconButton, } from '@material-ui/core'; -import Search from '../../images/search.svg'; import Typography from '@material-ui/core/Typography'; import InstancesTreeView from './TreeView/InstancesTreeView'; import { useSelector } from 'react-redux' - +import SearchRoundedIcon from '@material-ui/icons/SearchRounded'; const SidebarContent = (props) => { const { expand, setExpand, searchTerm } = props; const datasets = useSelector(state => state.sdsState.datasets); @@ -39,8 +38,9 @@ const SidebarContent = (props) => { setExpand(!expand)} + className='shrink-btn' > - Search + ) : ( renderContent() ) } diff --git a/src/config/app.json b/src/config/app.json index 03fae6e..4ff6e31 100644 --- a/src/config/app.json +++ b/src/config/app.json @@ -14,7 +14,7 @@ } }, "text" : { - "datasetsButtonText" : "SPARC Datasets", + "datasetsButtonText" : "Import a new dataset", "datasetsDialogSearchText" : "Search datasets by label or id", "datasetsButtonSubtitleText" : "Select a dataset to load" } diff --git a/src/constants.js b/src/constants.js index 99540b2..86a10af 100644 --- a/src/constants.js +++ b/src/constants.js @@ -1,5 +1,5 @@ -export const IMPORT_TEXT = 'Load a new dataset'; -export const ADD_DATASET = 'Load Dataset'; +export const IMPORT_TEXT = 'Import a new dataset'; +export const ADD_DATASET = 'Import Dataset'; export const LIST_DATASETS = 'List Datasets'; export const SPARC_DATASETS = 'SPARC Datasets'; export const FILE_UPLOAD_PARAMS = { diff --git a/src/flexlayout.css b/src/flexlayout.css index 19700f2..3ff7e66 100644 --- a/src/flexlayout.css +++ b/src/flexlayout.css @@ -450,8 +450,8 @@ width: 24px; height: 24px; background: #ffffff; - border: 2px solid #11bffe; - color : #11bffe; + border: 1px solid #E1E3E8; + color : #435070; box-sizing: border-box; box-shadow: 0px 0px 27px rgba(0, 0, 0, 0.05); border-radius: 24px; @@ -478,7 +478,7 @@ height: 25px; } -.graph-view_controls .MuiIconButton-root:nth-child(4) { +.graph-view_controls .MuiIconButton-root:nth-child(4) , .graph-view_controls .MuiIconButton-root:nth-child(5){ margin-top: 8px; } diff --git a/src/images/Icons.js b/src/images/Icons.js index 7b76e8b..4354e17 100644 --- a/src/images/Icons.js +++ b/src/images/Icons.js @@ -4,4 +4,16 @@ export const DatasetIcon = (props) => ( +); + +export const ViewTypeIcon = (props) => ( + + + +); + +export const LabelIcon = (props) => ( + + + ); \ No newline at end of file diff --git a/src/styles/constant.js b/src/styles/constant.js index 3998e97..fdf6c1c 100644 --- a/src/styles/constant.js +++ b/src/styles/constant.js @@ -11,7 +11,7 @@ const vars = { noInstanceColor: 'rgba(255, 255, 255, 0.6)', inputTextColor: 'rgba(255, 255, 255, 0.8)', iconButtonHover: 'rgba(255, 255, 255, 0.2)', - radius: 8, + radius: '.5rem', gutter: 16, whiteColor: '#FFFFFF', sidebarIconColor: 'rgba(221, 221, 221, 0.8)', @@ -40,7 +40,14 @@ const vars = { scrollbarBg: 'rgba(0, 0, 0, 0.24)', gray800: '#0F162B', gray400: '#586482', - gray25: '#F0F1F2' + gray25: '#F0F1F2', + grey700: '#212B45', + grey500: '#435070', + grey100: '#C9CDD6', + grey400: '#586482', + grey50: '#E1E3E8', + grey25: '#F0F1F2', + grey600: '#2E3A59', }; export default vars; diff --git a/src/theme.js b/src/theme.js index 467fc82..e88487e 100644 --- a/src/theme.js +++ b/src/theme.js @@ -43,6 +43,13 @@ const { chipBgColor, progressErrorBg, treeBorderColor, + grey700, + grey500, + grey100, + grey400, + grey50, + grey25, + grey600, gray800, gray400, gray25 @@ -311,12 +318,12 @@ const theme = createTheme({ MuiFilledInput: { root: { fontFamily, - backgroundColor: lightBorderColor, + backgroundColor: grey500, height: '2.375rem', - borderRadius: `${radius}px !important`, + borderRadius: `${radius} !important`, paddingRight: `0.4375rem !important`, '&:hover': { - backgroundColor: lightBorderColor, + backgroundColor: grey500, }, '& .MuiInputAdornment-positionStart': { marginTop: `0 !important`, @@ -327,9 +334,11 @@ const theme = createTheme({ paddingBottom: 0, fontSize: '0.75rem', letterSpacing: '-0.01em', - color: inputTextColor, + color: grey100, '&::placeholder': { - color: inputTextColor, + color: grey100, + fontWeight: '400', + fontSize: '.75rem' }, }, adornedEnd: { @@ -363,6 +372,7 @@ const theme = createTheme({ label: { textTransform: 'none', display: 'flex', + fontWeight: 600, '& img': { marginRight: '.25rem', }, @@ -381,6 +391,7 @@ const theme = createTheme({ outlinedPrimary: { borderColor: primaryColor, color: primaryColor, + padding: '0.75rem', '&:hover': { backgroundColor: outlinedButtonHover, }, @@ -398,6 +409,9 @@ const theme = createTheme({ display: 'flex', overflow: 'hidden', }, + '.sidebar-body': { + boxShadow: '0px -75px 49px -41px #212B45 inset', + }, '.scrollbar': { overflow: 'auto', '&::-webkit-scrollbar': { @@ -471,7 +485,7 @@ const theme = createTheme({ '.sidebar': { width: '18.75rem', overflow: 'hidden', - backgroundColor: secondaryColor, + backgroundColor: grey700, height: '100vh', flexShrink: 0, padding: '1rem 0.75rem', @@ -506,10 +520,17 @@ const theme = createTheme({ padding: 0, width: '2.25rem', minWidth: '0.0625rem', - fontSize: 0, margin: '0 auto', display: 'block', height: '2.25rem', + '&.shrink-btn': { + backgroundColor: grey25, + color: grey600, + + '& .MuiSvgIcon-root': { + fontSize: '1rem', + } + } }, }, '&:not(.shrink)': { @@ -648,7 +669,7 @@ const theme = createTheme({ }, '& .labelCaption': { height: '1rem', - backgroundColor: lightBorderColor, + backgroundColor: grey400, padding: '0 0.25rem', display: 'flex', alignItems: 'center', @@ -658,7 +679,7 @@ const theme = createTheme({ lineHeight: '0.75rem', minWidth: '2rem', justifyContent: 'center', - color: noInstanceColor, + color: grey50, letterSpacing: '-0.01em', '& img': { marginLeft: '0.125rem', @@ -809,7 +830,7 @@ const theme = createTheme({ height: '100%', fontWeight: '600', letterSpacing: '-0.01em', - color: noInstanceColor, + color: grey100, textAlign: 'center', }, }, @@ -1200,6 +1221,7 @@ const theme = createTheme({ bottom: '0', right : '0rem', zIndex: '100', + padding: '.5rem' }, }, },