From 652ff27d5f538c333f56785fa6c764c00267857b Mon Sep 17 00:00:00 2001 From: Filippo Ledda Date: Tue, 19 May 2020 14:36:01 +0200 Subject: [PATCH 1/9] #147 Styling --- .../definition/cellRules/NetPyNECellRules.js | 18 +-- .../connectivity/NetPyNEConnectivityRules.js | 2 +- .../definition/plots/NetPyNEPlots.js | 2 +- .../populations/NetPyNEPopulations.js | 2 +- .../NetPyNEStimulationSources.js | 2 +- .../NetPyNEStimulationTargets.js | 2 +- .../definition/synapses/NetPyNESynapses.js | 2 +- webapp/components/general/GridLayout.js | 81 +++------- webapp/components/general/NetPyNEHome.js | 15 +- webapp/components/settings/Drawer.js | 2 +- webapp/components/topbar/SwitchPageButton.js | 12 +- webapp/components/topbar/Topbar.js | 10 +- webapp/components/topbar/configuration.js | 37 +++-- webapp/css/colors.less | 28 ++-- webapp/css/flexlayout.less | 148 ++++++++---------- webapp/css/material.less | 4 +- webapp/css/netpyne.less | 38 +++-- webapp/css/tree.less | 8 +- webapp/css/variables.less | 22 +++ webapp/package-lock.json | 15 ++ webapp/package.json | 1 + webapp/redux/middleware/plotMiddleware.js | 2 +- webapp/theme.js | 64 +++++--- webapp/webpack.config.dev.js | 3 +- webapp/webpack.config.js | 11 +- 25 files changed, 276 insertions(+), 255 deletions(-) create mode 100644 webapp/css/variables.less diff --git a/webapp/components/definition/cellRules/NetPyNECellRules.js b/webapp/components/definition/cellRules/NetPyNECellRules.js index ef3d59e1..c3ba6926 100644 --- a/webapp/components/definition/cellRules/NetPyNECellRules.js +++ b/webapp/components/definition/cellRules/NetPyNECellRules.js @@ -3,7 +3,7 @@ import Button from '@material-ui/core/Button'; import ContentAdd from '@material-ui/icons/Add'; import NavigationMoreHoriz from '@material-ui/icons/MoreHoriz'; import Fab from '@material-ui/core/Fab'; - +import Icon from '@material-ui/core/Icon'; import { NetPyNECellRule, @@ -18,7 +18,7 @@ import NetPyNESection from './sections/NetPyNESection'; import NetPyNEMechanism from './sections/mechanisms/NetPyNEMechanism'; import NetPyNENewMechanism from './sections/mechanisms/NetPyNENewMechanism'; -import NavigationChevronRight from '@material-ui/icons/ChevronRight'; + import Dialog from '@material-ui/core/Dialog/Dialog'; import Utils from '../../../Utils'; @@ -653,7 +653,7 @@ export default class NetPyNECellRules extends React.Component {
-
+
this.setState({ page: 'main', selectedCellRule: undefined, selectedSection: undefined, selectedMechanism: undefined })} @@ -670,9 +670,9 @@ export default class NetPyNECellRules extends React.Component {
-
@@ -693,9 +693,9 @@ export default class NetPyNECellRules extends React.Component {
-
-
+
this.setState({ selectedConnectivityRule: undefined })} diff --git a/webapp/components/definition/plots/NetPyNEPlots.js b/webapp/components/definition/plots/NetPyNEPlots.js index 3583e4c1..88d4f4a4 100644 --- a/webapp/components/definition/plots/NetPyNEPlots.js +++ b/webapp/components/definition/plots/NetPyNEPlots.js @@ -123,7 +123,7 @@ export default class NetPyNEPlots extends React.Component {
-
+
diff --git a/webapp/components/definition/populations/NetPyNEPopulations.js b/webapp/components/definition/populations/NetPyNEPopulations.js index baf27e3d..5bb210ef 100644 --- a/webapp/components/definition/populations/NetPyNEPopulations.js +++ b/webapp/components/definition/populations/NetPyNEPopulations.js @@ -201,7 +201,7 @@ export default class NetPyNEPopulations extends React.Component {
-
+
this.setState({ selectedPopulation: undefined })} diff --git a/webapp/components/definition/stimulationSources/NetPyNEStimulationSources.js b/webapp/components/definition/stimulationSources/NetPyNEStimulationSources.js index 24d6b89d..bdfd369b 100644 --- a/webapp/components/definition/stimulationSources/NetPyNEStimulationSources.js +++ b/webapp/components/definition/stimulationSources/NetPyNEStimulationSources.js @@ -177,7 +177,7 @@ export default class NetPyNEStimulationSources extends Component {
-
+
this.setState({ selectedStimulationSource: undefined })} diff --git a/webapp/components/definition/stimulationTargets/NetPyNEStimulationTargets.js b/webapp/components/definition/stimulationTargets/NetPyNEStimulationTargets.js index 9a7a7f22..77e62a99 100644 --- a/webapp/components/definition/stimulationTargets/NetPyNEStimulationTargets.js +++ b/webapp/components/definition/stimulationTargets/NetPyNEStimulationTargets.js @@ -176,7 +176,7 @@ export default class NetPyNEStimulationTargets extends Component {
-
+
this.setState({ selectedStimulationTarget: undefined })} diff --git a/webapp/components/definition/synapses/NetPyNESynapses.js b/webapp/components/definition/synapses/NetPyNESynapses.js index a53edea3..8b030de5 100644 --- a/webapp/components/definition/synapses/NetPyNESynapses.js +++ b/webapp/components/definition/synapses/NetPyNESynapses.js @@ -175,7 +175,7 @@ export default class NetPyNESynapses extends Component {
-
+
this.setState({ selectedSynapse: undefined })} diff --git a/webapp/components/general/GridLayout.js b/webapp/components/general/GridLayout.js index 0dc000c1..b994f073 100644 --- a/webapp/components/general/GridLayout.js +++ b/webapp/components/general/GridLayout.js @@ -1,22 +1,10 @@ import React from 'react' import Grid from '@material-ui/core/Grid' import { makeStyles } from '@material-ui/core/styles' -import Paper from '@material-ui/core/Paper' -import { bgDark } from '../../theme' +import Card from '@material-ui/core/Card'; +import CardContent from '@material-ui/core/CardContent'; -const useStyles = makeStyles(({ spacing, palette }) => ({ - container:{ height: 'calc(100% - 8px)', alignItems: 'stretch' }, - grid: { - flex: '1 0 0', - minWidth: 400, - minHeight: 350, - maxHeight: '100%', - marginRight: spacing(1), - marginBottom: spacing(1) - }, - paper: { height: '100%', backgroundColor: bgDark }, - root: { height: '100%', overflowY: 'visible', overflowX: 'hidden', marginRight: -spacing(1) } -})) +const useStyles = makeStyles(({ spacing, palette }) => ({})) export default function GridLayout ({ children }) { const classes = useStyles() @@ -24,63 +12,30 @@ export default function GridLayout ({ children }) { const [lhst, lhsb, rhs, ...others] = children return (
- + - - - + + + {lhst} {lhsb} - - + + - - - - {[rhs]} - - - - + { rhs + ? + + + {[rhs]} + + + : '' + } {others}
) } - -const useComponentStyles = makeStyles(({ spacing }) => ({ - container: { - display: 'flex', - flexDirection: 'column', - height: '100%', - margin: `0px ${spacing(1)}px`, - paddingTop: spacing(1) - }, - element: { - overflowY:'auto', - overflowX:'hidden', - maxHeight: '100%', - // height: '100%' - } -})) - -function SingleComponent ({ children = [] }) { - const classes = useComponentStyles() - const [topChild, ...otherChildren] = children - - return ( -
-
- {otherChildren.length > 0 ? topChild : null} -
- -
- {otherChildren.length > 0 ? otherChildren : topChild} -
-
- ) - -} \ No newline at end of file diff --git a/webapp/components/general/NetPyNEHome.js b/webapp/components/general/NetPyNEHome.js index 1516e0ff..cccde5b2 100644 --- a/webapp/components/general/NetPyNEHome.js +++ b/webapp/components/general/NetPyNEHome.js @@ -1,16 +1,14 @@ import React from 'react'; import Icon from '@material-ui/core/Icon'; -import NavigationChevronRight from '@material-ui/icons/ChevronRight'; import { makeStyles } from '@material-ui/core/styles' import Tooltip from '../general/Tooltip' const useStyles = makeStyles(({ spacing, palette }) => ({ - rightArrow : { marginLeft: spacing(1) }, home: { }, root: { display: 'flex', alignItems: 'center' }, - icon: { color: palette.common.white, fontSize: 40 } + icon: { fontSize: 40, fontWeight: 'bold' } })) @@ -27,14 +25,17 @@ export default ({ handleClick, selection }) => { }} >
- - - + +
) diff --git a/webapp/components/settings/Drawer.js b/webapp/components/settings/Drawer.js index fbd9106a..d6164703 100644 --- a/webapp/components/settings/Drawer.js +++ b/webapp/components/settings/Drawer.js @@ -117,7 +117,7 @@ export default ({ newWidget, editMode, activateWidget, updateWidget }) => { }; return ( - +
diff --git a/webapp/components/topbar/SwitchPageButton.js b/webapp/components/topbar/SwitchPageButton.js index e686bfcd..40792c89 100644 --- a/webapp/components/topbar/SwitchPageButton.js +++ b/webapp/components/topbar/SwitchPageButton.js @@ -10,14 +10,14 @@ import { TOPBAR_CONSTANTS } from '../../constants' const styles = ({ palette, shape, spacing, typography }) => ({ - container: { - flexGrow: 1, - position: 'fixed', - top: 0, - right:0 + container: {}, + button: { + textTransform: 'uppercase', + letterSpacing: 2, + fontSize: '1rem', + borderRadius: 0 }, icon: { color: palette.common.white }, - menu: { position: "absolute", top: "6px", right: "28px" } }) diff --git a/webapp/components/topbar/Topbar.js b/webapp/components/topbar/Topbar.js index 09b40dd0..f2e8f218 100644 --- a/webapp/components/topbar/Topbar.js +++ b/webapp/components/topbar/Topbar.js @@ -15,7 +15,15 @@ import UploadDownloadFilesDialog from './dialogs/UploadDownloadFiles'; import { TOPBAR_CONSTANTS } from '../../constants'; import { withStyles } from '@material-ui/core/styles' import { SwitchPageButton } from 'netpyne/components' -const styles = () => ({ topbar: { backgroundColor: bgDark } }) + +const styles = () => ({ + topbar: { + backgroundColor: bgDark, + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between' + } +}); class Topbar extends Component { diff --git a/webapp/components/topbar/configuration.js b/webapp/components/topbar/configuration.js index e6ce3b72..89e6d0de 100644 --- a/webapp/components/topbar/configuration.js +++ b/webapp/components/topbar/configuration.js @@ -1,4 +1,4 @@ -import { bgLight, bgRegular, font, bgDark } from '../../theme' +import { bgLight, bgRegular, font, bgDark, fontColor } from '../../theme' import { openTopbarDialog, changePageTransitionMode } from '../../redux/actions/topbar' import { TOPBAR_CONSTANTS } from '../../constants' const style = { @@ -8,25 +8,26 @@ const style = { borderRadius: 0, border: 0, boxShadow: '0px 0px', - color: '#ffffff', - fontSize: '16px', + color: fontColor, + fontSize: '1rem', fontFamily: font, margin: '0px 0px 0px 0px', - minWidth: '44px', - height: '30px', + width: 'auto', textTransform: 'capitalize', textAlign: 'left', justifyContent: 'start', - fontWeight: '300', + fontWeight: '400', + minWidth: 'auto' }, lighter: { background: bgRegular, backgroundColor: bgRegular, }, - padding: { + labels: { fontSize: '14px', paddingTop: '8px', - paddingBottom: '8px' + paddingBottom: '8px', + width: 'auto' } } @@ -39,7 +40,7 @@ export default { menuPadding: 0, fontFamily: font, menuFontSize: "14", - subMenuFontSize: "12", + subMenuFontSize: "14", backgroundColor: bgDark, buttonsStyle: { standard: style.standard, @@ -48,21 +49,32 @@ export default { ...style.lighter } }, + drawersStyle: { + standard: { + borderTop: 'none', + borderBottom: 'none', + borderRight: 'none', + borderLeft: 'none', + fontFamily: font, + }, hover: {} + }, labelsStyle: { - standard: { ...style.padding, }, + standard: { ...style.labels, }, hover: { ...style.lighter, - ...style.padding + ...style.labels } } }, buttons: [ { - label: "NetPyNE-UI", + label: "NetPyNE", position: "bottom-start", + icon: "", list: [ { label: "About...", + icon: "", action: { handlerAction: "", parameters: [] @@ -70,6 +82,7 @@ export default { }, { label: "Contribute", + icon: "", action: { handlerAction: "", parameters: [] diff --git a/webapp/css/colors.less b/webapp/css/colors.less index 8a619921..7c5f8701 100644 --- a/webapp/css/colors.less +++ b/webapp/css/colors.less @@ -1,16 +1,16 @@ -@primary_color: #37ABC8d2; -@secondary_color: #37ABC8; -@complementary_color:rgb(84, 58, 115); -@background_color_body_0: rgb(195, 195, 195); -@background_color_body_50: rgb(195, 195, 195); -@background_color_body_73: rgb(195, 195, 195); -@background_color_body_100: rgb(195, 195, 195); -@background_color_widget: rgb(255,255,255); +@import "variables"; -@box_color: #323232; -@color-link: #b9c680; +@primary_color: @primaryColor; +@secondary_color: @secondaryColor; -@color-light: #616161; -@color-regular: #424242; -@color-dark: #212121; -@color-white: white; \ No newline at end of file + + + + + +@complementary_color:@bgLight; +@background_color_body_0: @bgRegular; +@background_color_body_50: @bgRegular; +@background_color_body_73: @bgRegular; +@background_color_body_100: @bgRegular; +@background_color_widget: rgb(255,255,255); \ No newline at end of file diff --git a/webapp/css/flexlayout.less b/webapp/css/flexlayout.less index 73f92679..e473651d 100644 --- a/webapp/css/flexlayout.less +++ b/webapp/css/flexlayout.less @@ -1,57 +1,32 @@ -@import "colors"; +@import "variables"; -@panelradius: 5px; -@gutter: 16px; -@icon-padding: 12px; -@font-size-panels: 16px; -@font: "Source Sans Pro", sans-serif; -@inputradius: 30px; -@font-weight-content: 300; -@font-weight-label: 400; - -@font-size: 1rem; -@font-size-sm: 0.8rem; -@border-radius: @panelradius; -@tab-spacing: 8px; - -@spacing: 8px; - -@inner-layout-padding: 8px 8px 0px 8px; - -@explorer-tooltip-z-index: 3; -@explorer-tooltip-top: -50px !important; -@explorer-tooltip-margin: 10px; - -@explorer-tooltip-title-font-size: 0.9em; - -@explorer-tooltip-subtitle-font-size: 12px; -@explorer-tooltip-subtitle-font-weight: 100; - -@list-padding: 5px; - -@logo-size: 20px; -@logo-margin: 3px; -@bring-front: 1000; .flexlayout__layout { border-left: none!important; border-right: none!important; - background-color: @color-dark;//color-light + background-color: transparent; top: 0px; margin-top: @gutter / 2; margin-bottom: @gutter / 2; border-top: none; a { - color: @color-link; + color: @colorLink; } .flexlayout__tab { - padding: @inner-layout-padding; - background-color: @color-regular;//color-dark - border-top-right-radius: @panelradius; - border-bottom-right-radius: @panelradius; - border-bottom-left-radius: @panelradius; + padding: @tabSpacing; + background-color: @bgRegular; + border-top-right-radius: @radius; + border-bottom-right-radius: @radius; + border-bottom-left-radius: @radius; + + > div { + width: 100%; + height: 100%; + display: flex; + align-items: stretch; + } .svg-container, .main-svg, @@ -76,69 +51,68 @@ } .flexlayout__tabset { - background-color: @color-dark;//color-light + background-color: transparent;//color-light overflow: visible; - border-radius: 0px @panelradius @panelradius @panelradius; + border-radius: 0px @radius @radius @radius; } .flexlayout__tabset-selected { - background-color: @color-dark;//color-light + background-color: transparent;//color-light } .flexlayout__border_inner_bottom { position: fixed; bottom: 0; left: 0; padding-left: @gutter / 2; - border-top-right-radius: @panelradius; - border-top-left-radius: @panelradius; + border-top-right-radius: @radius; + border-top-left-radius: @radius; } - .flexlayout__tab_button--selected { - background-color: @color-regular;//was color-dark - border-top-right-radius: @panelradius; - border-top-left-radius: @panelradius; - color: @color-white; + .flexlayout__tab_button { + border-top-right-radius: @radius; + border-top-left-radius: @radius; + color: @textColor; display: flex; align-items: flex-start; - margin-right: @tab-spacing; + margin-right: 3px; margin-top: 0px; - .flexlayout__tab_button_content { - color: @secondary_color; + &.flexlayout__tab_button--selected { + background-color: @bgRegular;//was bgDark + + .flexlayout__tab_button_content { + color: @primaryColor; + } + } + + &.flexlayout__tab_button--unselected { + background-color: @bgDarkest; } } - - .flexlayout__tab_button--unselected { - margin-top: 0px; - margin-right: @tab-spacing; - background-color: @color-regular; - border-top-right-radius: @panelradius; - border-top-left-radius: @panelradius; - display: flex; - align-items: flex-start; - } + + .flexlayout__border_bottom { overflow: visible; - background-color: @color-light; + background-color: @bgLight; border: none; - border-top-right-radius: @panelradius; - border-top-left-radius: @panelradius; + border-top-right-radius: @radius; + border-top-left-radius: @radius; } .flexlayout__border_button { .flexlayout__border_button_content { font-family: @font; // font-weight: bold; - color: @secondary_color; + color: @secondaryColor; - font-size: @font-size-panels; + font-size: @fontSizePanels; } visibility: hidden; border: none; margin: 0; - margin-right: @tab-spacing; - border-top-right-radius: @panelradius; - border-top-left-radius: @panelradius; - background-color: @box_color; + margin-right: @tabSpacing; + border-top-right-radius: @radius; + border-top-left-radius: @radius; + background-color: @bgRegular; display: flex; flex-direction: row; align-items: flex-end; @@ -146,16 +120,16 @@ .flexlayout__tab_button_content { margin-top: unset; - color: @secondary_color; + color: @secondaryColor; font-family: @font; - font-size: @font-size-panels; + font-size: @fontSizePanels; padding: 0; font-weight: normal; color: #b9b9b9; } .flexlayout__tab_button_trailing { - margin-left: @spacing; + margin-left: @tabSpacing; margin-top: unset; } @@ -166,10 +140,10 @@ .customIconFlexLayout, .flexlayout__tab_toolbar_button-min, .flexlayout__tab_button_overflow { - color: @color-white; + color: @textColor; &:hover { - color: @color-white; + color: @textColor; } } @@ -184,32 +158,32 @@ background-color: inherit; } .flexlayout__splitter:hover { - background-color: @secondary_color; + background-color: @secondaryColor; } .flexlayout__splitter { - border-radius: @panelradius; + border-radius: @radius; } .flexlayout__splitter_drag { - border: 1px solid @color-white; + border: 1px solid @textColor; } .flexlayout__popup_menu_item { - color: @color-white; - background-color: @box_color; + color: @textColor; + background-color: @bgRegular; } } .flexlayout__tab_header_outer { - background-color: @color-dark;//color-light + background-color: @bgDark;//color-light } .scrollbar { &::-webkit-scrollbar-thumb { - background: @secondary_color; - border-radius: @panelradius; + background: @secondaryColor; + border-radius: @radius; } &::-webkit-scrollbar { width: @gutter / 2; @@ -226,8 +200,8 @@ .MuiAutocomplete-listbox { &::-webkit-scrollbar-thumb { - background: @secondary_color; - border-radius: @panelradius; + background: @secondaryColor; + border-radius: @radius; } &::-webkit-scrollbar { width: @gutter / 2; diff --git a/webapp/css/material.less b/webapp/css/material.less index 0f77e23c..02bbe0b1 100644 --- a/webapp/css/material.less +++ b/webapp/css/material.less @@ -1,4 +1,4 @@ -@spacing: 16px; +@import 'variables'; label { margin-top: 0px; @@ -24,7 +24,7 @@ div.MuiExpansionPanelSummary-root { div.MuiCollapse-container .MuiCollapse-wrapper, div.MuiExpansionPanelSummary-root { - padding: @spacing; + padding: @tabSpacing; } div.MuiExpansionPanel-root.Mui-expanded { margin: 2px; diff --git a/webapp/css/netpyne.less b/webapp/css/netpyne.less index e9b0386d..2d461fe2 100644 --- a/webapp/css/netpyne.less +++ b/webapp/css/netpyne.less @@ -1,9 +1,11 @@ @import "colors"; +@import (css) url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700&display=swap'); + html, body { height: 100%; - background: @color-dark !important; + background: @bgDarker; font-size: 16px; } @@ -51,7 +53,7 @@ button.actionButton { } .selectedActionButton button { - background-color: @primary_color!important; + background-color: @primaryColor!important; } .rectangularActionButton { @@ -81,7 +83,7 @@ button.actionButton { text-align: center; } .selectedRectangularActionButton button { - background-color: @primary_color!important; + background-color: @primaryColor!important; } .addRectangularButton { @@ -105,14 +107,14 @@ button.actionButton { overflow: visible; } .gearThumbButton .gpt-fullgear { - color: @color-light!important; + color: @bgLight!important; font-size: 100px !important; height: 100px !important; width: 100px !important; text-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px; } .selectedGearButton .gpt-fullgear { - color: @primary_color!important; + color: @primaryColor!important; } .gearThumbLabel { font-size: 15px; @@ -140,21 +142,25 @@ button.actionButton { cursor: pointer; } .helpIcon:hover { - color: @primary_color; + color: @primaryColor; } -.breadcrumby { - background-color: @color-regular; +.breadcrumb { display: flex; align-items: center; overflow: visible; + background: transparent; justify-content: flex-start; margin: 0px; - border-radius: 4px; + border-radius: @radius; margin: @gutter / 2; flex-wrap: wrap; + .MuiIcon-colorDisabled { + color: black + } } + .hiddenModal { position: absolute !important; background-color: rgba(0, 0, 0, 0.6); @@ -253,17 +259,17 @@ button.actionButton { margin-top: 43px; margin-right: 5px; font-size: 11px; - color: @secondary_color; + color: @secondaryColor; } .spinner-container { - color: @secondary_color!important; + color: @secondaryColor!important; p { - color: @secondary_color !important; + color: @secondaryColor !important; } } .listIcon { - color: @secondary_color!important; + color: @secondaryColor!important; } .listButtonLarge { @@ -298,7 +304,7 @@ button.actionButton { .rst__rowContents { background: transparent; - color: @secondary_color; + color: @secondaryColor; cursor: pointer; box-shadow: none; @@ -306,7 +312,7 @@ button.actionButton { .activeNode .rst__rowContents { background: transparent; - color: @primary_color; + color: @primaryColor; } .rst__rowLabel { @@ -442,7 +448,7 @@ button.actionButton { } .MuiListItem-root.Mui-selected { - color: @primary_color; + color: @primaryColor; } div.flexlayout__layout{ diff --git a/webapp/css/tree.less b/webapp/css/tree.less index e7037432..4298fe53 100644 --- a/webapp/css/tree.less +++ b/webapp/css/tree.less @@ -620,7 +620,7 @@ box-sizing: border-box; } .rst__placeholder::before { - border: 3px dashed @primary_color; + border: 3px dashed @primaryColor; content: ''; position: absolute; top: 5px; @@ -782,7 +782,7 @@ } .rst__rowContents:hover { - color: @secondary_color !important; + color: @secondaryColor !important; } .rst__rowTitle { @@ -820,10 +820,10 @@ } .nodeSelected:hover { - color: @primary_color; + color: @primaryColor; } .nodeFound { - color: @secondary_color; + color: @secondaryColor; } \ No newline at end of file diff --git a/webapp/css/variables.less b/webapp/css/variables.less new file mode 100644 index 00000000..6aa9f70f --- /dev/null +++ b/webapp/css/variables.less @@ -0,0 +1,22 @@ +@primaryColor: #EB517A; +@secondaryColor: #634B7E; + +@bgLighter: #616161; +@bgLight: #4a4a4a; +@bgRegular: #434343; +@bgDark: #3c3c3c; +@bgDarker: #323232; +@bgDarkest: #2c2c2c; +@bgInputs: #727272; + +@textColor: white; +@fontColor: @textColor; +@colorLink: #b9c680; + +@radius: 5px; +@gutter: 16px; +@iconPadding: 12px; +@fontSizePanels: 16px; +@font: "Source Sans Pro", sans-serif; +@inputradius: 30px; +@tabSpacing: 8px; diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 142ff778..938398c5 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -10603,6 +10603,21 @@ } } }, + "less-vars-to-js": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/less-vars-to-js/-/less-vars-to-js-1.3.0.tgz", + "integrity": "sha512-xeiLLn/IMCGtdyCkYQnW8UuzoW2oYMCKg9boZRaGI58fLz5r90bNJDlqGzmVt/1Uqk75/DxIVtQSNCMkE5fRZQ==", + "requires": { + "strip-json-comments": "^2.0.1" + }, + "dependencies": { + "strip-json-comments": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", + "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=" + } + } + }, "leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", diff --git a/webapp/package.json b/webapp/package.json index 90ea7ee1..f20e20cc 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -21,6 +21,7 @@ "@babel/plugin-proposal-class-properties": "^7.8.3", "@geppettoengine/geppetto-client": "file:./geppetto-client", "@material-ui/icons": "^4.9.1", + "less-vars-to-js": "^1.3.0", "@material-ui/lab": "^4.0.0-alpha.51", "react-redux": "^7.2.0" }, diff --git a/webapp/redux/middleware/plotMiddleware.js b/webapp/redux/middleware/plotMiddleware.js index 6d4c9847..a15ccdc6 100644 --- a/webapp/redux/middleware/plotMiddleware.js +++ b/webapp/redux/middleware/plotMiddleware.js @@ -49,7 +49,7 @@ const plotFigure = async (plotId, plotMethod, plotType = false) => { new Promise((resolve, reject) => { setTimeout(() => { resolve(null) - }, 3000) + }, 10000) })]); console.log('Plot response received for', plotId); if (!response) { diff --git a/webapp/theme.js b/webapp/theme.js index 5aaaf9a9..b3feb8f7 100644 --- a/webapp/theme.js +++ b/webapp/theme.js @@ -1,16 +1,21 @@ import createMuiTheme from '@material-ui/core/styles/createMuiTheme'; +import lessToJs from 'less-vars-to-js'; -// orange -export const primaryColor = '#37ABC8' +// Read the less file in as string: using the raw-loader to override the default loader +export const vars = lessToJs(require('!!raw-loader!./css/variables.less'), { resolveVariables: true, stripPrefix: true }); -export const bgLight = '#4A4A4A'; -export const bgRegular = '#424242'; -export const bgDark = '#353535'; +require('./css/netpyne.less'); +require('./css/material.less'); +require('./css/traceback.less'); +require('./css/flexlayout.less'); +require('./css/tree.less'); -export const font = 'Roboto, Helvetica, Arial, sans-serif' +export const { primaryColor, secondaryColor, font, fontColor, bgLight, bgRegular, bgDark, bgDarker, bgDarkest } = vars; -export default createMuiTheme({ + +const rawTheme = { + darkMode: true, typography: { useNextVariants: true, htmlFontSize: 12, @@ -23,8 +28,11 @@ export default createMuiTheme({ }, palette: { type: 'dark', - primary: { main: primaryColor, }, - secondary: { main: bgLight, }, + primary: { + main: primaryColor, + dark: secondaryColor + }, + secondary: { main: secondaryColor, dark: primaryColor }, }, overrides: { MuiInputLabel: { formControl: { top: '-6px' } }, @@ -34,7 +42,7 @@ export default createMuiTheme({ border: 'none !important', boxShadow: 'none !important', }, - root:{ color: 'white' } + root:{ color: fontColor } }, MuiSelect: { @@ -45,27 +53,35 @@ export default createMuiTheme({ }, select: { "&:focus" :{ background: "none" }, paddingLeft: '4px' }, }, - MuiCard: { root: { height: '100%', backgroundColor: bgRegular, overflowY: 'auto' } }, - MuiBottomNavigation: { root: { backgroundColor: bgRegular, height: 56 } }, - MuiPaper: { root: { color: 'inherit' } }, - MuiBottomNavigationAction: { root: { color: 'white', maxWidth: 'unset', whiteSpace: 'nowrap' } }, + MuiGrid: { + root: { + display: 'flex', + alignItems: 'stretch', + flex: 1 + } + }, + MuiCard: { root: { backgroundColor: bgDarker, overflowY: 'auto', flex: 1 } }, + MuiBottomNavigation: { root: { backgroundColor: bgRegular } }, + MuiPaper: { root: { color: 'inherit', backgroundColor: bgRegular } }, + MuiBottomNavigationAction: { root: { color: fontColor, textTransform: 'uppercase' } }, MuiFab:{ - secondary: { color: 'white' }, - primary: { color: 'white' } + secondary: { color: fontColor }, + primary: { color: fontColor } }, MuiButton: { - containedSecondary: { color: 'white' }, - containedPrimary: { color: 'white' }, + containedSecondary: { color: fontColor }, + containedPrimary: { color: fontColor }, }, - MuiMenuItem: { root: { color: 'white' } }, + MuiMenuItem: { root: { color: fontColor } }, - MuiListItemText: { root: { color: 'white' } }, - MuiDialogTitle: { root: { color: 'white' } }, - MuiTypography: { root: { color: 'white' } }, + MuiListItemText: { root: { color: fontColor } }, + MuiDialogTitle: { root: { color: fontColor } }, + MuiTypography: { root: { color: fontColor } }, MuiCollapse: { container: { padding: 0 }, wrapper: { padding: "0px!important" } }, + MuiIcon: { root: { } }, MuiExpansionPanelSummary: { root: { padding: '0px!important', margin: 0, minHeight: 'unset!important' }, content: { margin: '0px!important', cursor: 'auto' }, @@ -75,4 +91,6 @@ export default createMuiTheme({ MuiExpansionPanel: { root: { padding: 0, margin: '0px!important', minHeight: 'unset' } }, MuiAutocomplete: { popupIndicator: { marginRight: 0 } } } -}); \ No newline at end of file +} + +export default createMuiTheme(rawTheme); \ No newline at end of file diff --git a/webapp/webpack.config.dev.js b/webapp/webpack.config.dev.js index 582a3620..1fa68b69 100644 --- a/webapp/webpack.config.dev.js +++ b/webapp/webpack.config.dev.js @@ -1,5 +1,4 @@ var webpackBaseConfig = require('./webpack.config.js'); -var path = require('path'); var extended = webpackBaseConfig(); extended.devServer = { @@ -8,7 +7,7 @@ extended.devServer = { inline : true, publicPath: '/geppetto/build', - proxy : [ + proxy : [ { path : '/', target : 'http://localhost:8888' diff --git a/webapp/webpack.config.js b/webapp/webpack.config.js index da481c25..77ed421a 100644 --- a/webapp/webpack.config.js +++ b/webapp/webpack.config.js @@ -179,9 +179,18 @@ module.exports = function (env){ { loader: "css-loader" } ] }, + { test: /\.less$/, - loader: 'style-loader!css-loader!less-loader?{"modifyVars":{"url":"\'' + cssThemesPath + '\'"}}' + use: [ + { loader: 'style-loader' }, + { loader: 'css-loader' }, + { + loader: 'less-loader', + options: { modifyVars: { url: path.resolve(__dirname, geppettoConfig.themes) } }, + }, + + ], }, { test: /\.html$/, From 31f278ed40ed954460c7b6aef0436717fcb94361 Mon Sep 17 00:00:00 2001 From: rodriguez-facundo Date: Tue, 19 May 2020 18:47:10 -0300 Subject: [PATCH 2/9] #147 More styling --- .../definition/cellRules/NetPyNECellRule.js | 140 ++++++++++-------- .../definition/cellRules/NetPyNECellRules.js | 8 +- .../configuration/NetPyNESimConfig.js | 8 +- .../populations/NetPyNEPopulation.js | 10 -- webapp/components/general/ExpansionPanel.js | 4 +- webapp/components/general/GridLayout.js | 8 +- webapp/components/general/NetPyNEHome.js | 4 +- webapp/constants.js | 16 +- webapp/css/netpyne.less | 8 +- webapp/theme.js | 3 +- 10 files changed, 107 insertions(+), 102 deletions(-) diff --git a/webapp/components/definition/cellRules/NetPyNECellRule.js b/webapp/components/definition/cellRules/NetPyNECellRule.js index 1f09e530..c9ac437e 100644 --- a/webapp/components/definition/cellRules/NetPyNECellRule.js +++ b/webapp/components/definition/cellRules/NetPyNECellRule.js @@ -13,8 +13,10 @@ import DialogTitle from '@material-ui/core/DialogTitle'; import { NetPyNESelectField, NetPyNEField, NetPyNECoordsRange } from 'netpyne/components'; import Utils from '../../../Utils'; +import ExpansionPanel from '../../general/ExpansionPanel' +import { withStyles } from "@material-ui/core/styles" -export default class NetPyNECellRule extends React.Component { +class NetPyNECellRule extends React.Component { constructor (props) { super(props); @@ -68,7 +70,7 @@ export default class NetPyNECellRule extends React.Component { } render () { - + const { classes } = this.props var dialogPop = (this.state.errorMessage != undefined ? ( -
+
-
- Conditions: -
- - - - - - +
+ Conditions (optional): +
+ + + + + + + + + + - - - - - - - - - - + + + +
{dialogPop}
); } } + + +const styles = ({ shape, spacing }) => ({ + expandable: { + borderRadius: shape.borderRadius, + backgroundColor: 'inherit', + paddingTop: spacing(2), + "&::before": { content: 'unset' } + }, + root: { + display: 'flex', + flexDirection: 'column' + } +}) + +export default withStyles(styles)(NetPyNECellRule) \ No newline at end of file diff --git a/webapp/components/definition/cellRules/NetPyNECellRules.js b/webapp/components/definition/cellRules/NetPyNECellRules.js index c3ba6926..7a382dec 100644 --- a/webapp/components/definition/cellRules/NetPyNECellRules.js +++ b/webapp/components/definition/cellRules/NetPyNECellRules.js @@ -154,10 +154,10 @@ export default class NetPyNECellRules extends React.Component { model[selectedCellRule].secs[selectedSection]['mechs'] = {}; Utils.execPythonMessage('netpyne_geppetto.netParams.cellParams["' + selectedCellRule + '"]["secs"]["' + selectedSection + '"]["mechs"] = {}'); } - var params = {}; Utils .evalPythonMessage("netpyne_geppetto.getMechParams", [mechanism]) .then(response => { + const params = {}; response.forEach(param => params[param] = 0); Utils.execPythonMessage('netpyne_geppetto.netParams.cellParams["' + selectedCellRule + '"]["secs"]["' + selectedSection + '"]["mechs"]["' + mechanism + '"] = ' + JSON.stringify(params)); }) @@ -343,7 +343,7 @@ export default class NetPyNECellRules extends React.Component { */ if (nextPage === page) { if (page === "main") { - this.handleNewCellRule({ 'CellRule': { 'conds':{}, 'secs':{} } }); + this.handleNewCellRule({ 'CellType': { 'conds':{}, 'secs':{} } }); } else if (page === "sections") { this.handleNewSection({ 'Section': { 'geom': {}, 'topol': {}, 'mechs': {} } }); } @@ -672,7 +672,7 @@ export default class NetPyNECellRules extends React.Component {
@@ -695,7 +695,7 @@ export default class NetPyNECellRules extends React.Component { } onClick={() => this.select(2, 'SaveConfiguration')} /> } onClick={() => this.select(3, 'netParams')} /> - +
{contentLeft} {contentRight} @@ -307,12 +307,14 @@ class NetPyNESimConfig extends React.Component { } const styles = ({ shape, spacing }) => ({ - root: { height: `calc(100% - 56px - ${spacing(1)}px)` }, + root: { height: `calc(100% - 56px - ${spacing(1)}px)`, flexDirection: 'column' }, bottomNav: { borderRadius: shape.borderRadius, backgroundColor: bgDark, - marginBottom: spacing(1) + marginBottom: spacing(1), + overflow: 'hidden' }, + layout: { height: "100%", display: 'flex' } }) diff --git a/webapp/components/definition/populations/NetPyNEPopulation.js b/webapp/components/definition/populations/NetPyNEPopulation.js index 4706689c..e1f84091 100644 --- a/webapp/components/definition/populations/NetPyNEPopulation.js +++ b/webapp/components/definition/populations/NetPyNEPopulation.js @@ -164,16 +164,6 @@ class NetPyNEPopulation extends React.Component { model={"netParams.popParams['" + this.props.name + "']['cellType']"} /> - - - { - Utils.evalPythonMessage("netpyne_geppetto.propagate_field_rename", ['cellModel', newValue, oldValue]) - this.props.updateCards() - }} - model={"netParams.popParams['" + this.props.name + "']['cellModel']"} - /> - {dialogPop} diff --git a/webapp/components/general/ExpansionPanel.js b/webapp/components/general/ExpansionPanel.js index 58695464..85be0a31 100644 --- a/webapp/components/general/ExpansionPanel.js +++ b/webapp/components/general/ExpansionPanel.js @@ -14,11 +14,11 @@ class NetPyNEExpansionPanel extends Component { state = { expanded: false } render () { - const { children, classes } = this.props + const { children, classes, ...others } = this.props const [summary, ...details] = children return ( - + this.setState({ expanded: !this.state.expanded }), diff --git a/webapp/components/general/GridLayout.js b/webapp/components/general/GridLayout.js index b994f073..34ec0ef3 100644 --- a/webapp/components/general/GridLayout.js +++ b/webapp/components/general/GridLayout.js @@ -1,17 +1,13 @@ import React from 'react' import Grid from '@material-ui/core/Grid' -import { makeStyles } from '@material-ui/core/styles' import Card from '@material-ui/core/Card'; import CardContent from '@material-ui/core/CardContent'; -const useStyles = makeStyles(({ spacing, palette }) => ({})) - -export default function GridLayout ({ children }) { - const classes = useStyles() +export default function GridLayout ({ children, className = '' }) { // left-hand-side-top - left-hand-side-bottom - right-hand-side - others const [lhst, lhsb, rhs, ...others] = children return ( -
+
diff --git a/webapp/components/general/NetPyNEHome.js b/webapp/components/general/NetPyNEHome.js index cccde5b2..898b4d93 100644 --- a/webapp/components/general/NetPyNEHome.js +++ b/webapp/components/general/NetPyNEHome.js @@ -8,7 +8,7 @@ const useStyles = makeStyles(({ spacing, palette }) => ({ display: 'flex', alignItems: 'center' }, - icon: { fontSize: 40, fontWeight: 'bold' } + icon: { fontSize: 40, fontWeight: 'bold', textAlign: 'center' } })) @@ -33,7 +33,7 @@ export default ({ handleClick, selection }) => {
diff --git a/webapp/constants.js b/webapp/constants.js index 322fe448..0cebfc83 100644 --- a/webapp/constants.js +++ b/webapp/constants.js @@ -325,21 +325,21 @@ export const DEFAULT_NETWORK_WIDGETS = { export const EDIT_WIDGETS = { [PYTHON_CONSOLE_WIDGET.id]: PYTHON_CONSOLE_WIDGET, - 'popParams': { - id: 'popParams', - name: 'Populations', + 'cellParams': { + id: 'cellParams', + name: 'Cell types', status: WidgetStatus.ACTIVE, - component: 'popParams', + component: 'cellParams', panelName: TOP_PANEL, enableRename: false, hideOnClose: true, pos: 0 }, - 'cellParams': { - id: 'cellParams', - name: 'Cell rules', + 'popParams': { + id: 'popParams', + name: 'Populations', status: WidgetStatus.HIDDEN, - component: 'cellParams', + component: 'popParams', panelName: TOP_PANEL, enableRename: false, hideOnClose: true, diff --git a/webapp/css/netpyne.less b/webapp/css/netpyne.less index 2d461fe2..d0326e03 100644 --- a/webapp/css/netpyne.less +++ b/webapp/css/netpyne.less @@ -152,14 +152,18 @@ button.actionButton { background: transparent; justify-content: flex-start; margin: 0px; + padding: @gutter/2; border-radius: @radius; - margin: @gutter / 2; flex-wrap: wrap; .MuiIcon-colorDisabled { color: black } } - +.breadcrumb-spacer { + margin-left: var(--m2); + width: 40px; + text-align: center; +} .hiddenModal { position: absolute !important; diff --git a/webapp/theme.js b/webapp/theme.js index b3feb8f7..1c7f85f2 100644 --- a/webapp/theme.js +++ b/webapp/theme.js @@ -89,7 +89,8 @@ const rawTheme = { }, MuiExpansionPanelDetails: { root: { padding: 0, margin: 0, minHeight: 'unset!important', flexDirection: 'column' } }, MuiExpansionPanel: { root: { padding: 0, margin: '0px!important', minHeight: 'unset' } }, - MuiAutocomplete: { popupIndicator: { marginRight: 0 } } + MuiAutocomplete: { popupIndicator: { marginRight: 0 } }, + MuiCardContent: { root: { padding: 8 } } } } From c46fbf56e79507846fb690ad8070c55ca7b80a97 Mon Sep 17 00:00:00 2001 From: rodriguez-facundo Date: Tue, 26 May 2020 19:24:40 -0300 Subject: [PATCH 3/9] #147 Styling --- .../definition/cellRules/NetPyNECellRule.js | 1 + .../cellRules/sections/NetPyNESection.js | 11 +- .../sections/mechanisms/NetPyNEMechanism.js | 3 +- .../configuration/NetPyNESimConfig.js | 38 +- .../connectivity/NetPyNEConnectivityRule.js | 15 +- .../definition/plots/NetPyNEInclude.js | 1 + .../components/definition/plots/TimeRange.js | 4 +- .../definition/plots/plotTypes/PlotGranger.js | 6 +- .../definition/plots/plotTypes/PlotLFP.js | 12 +- .../definition/plots/plotTypes/PlotRaster.js | 4 +- .../definition/plots/plotTypes/PlotRatePSD.js | 10 +- .../definition/plots/plotTypes/PlotShape.js | 8 +- .../plots/plotTypes/PlotSpikeHist.js | 2 +- .../definition/populations/Dimensions.js | 1 + .../populations/NetPyNEPopulation.js | 3 + .../NetPyNEStimulationSource.js | 18 + .../NetPyNEStimulationTarget.js | 6 + .../definition/synapses/NetPyNESynapse.js | 4 + .../components/general/NetPyNECoordsRange.js | 4 +- webapp/components/general/NetPyNEIcons.js | 620 +----------------- webapp/components/general/Slider.js | 1 + webapp/components/general/Tooltip.js | 2 +- webapp/components/layout/LayoutManager.tsx | 10 +- webapp/components/settings/Drawer.js | 30 +- webapp/components/settings/useStyles.js | 2 +- webapp/components/topbar/SwitchPageButton.js | 5 +- .../topbar/dialogs/ImportCellParams.js | 4 + .../topbar/dialogs/ImportExportHLS.js | 6 + webapp/components/topbar/dialogs/LoadFile.js | 2 + webapp/components/topbar/dialogs/SaveFile.js | 1 + .../topbar/dialogs/UploadDownloadFiles.js | 1 + webapp/css/flexlayout.less | 5 +- webapp/css/material.less | 1 - webapp/css/netpyne.less | 10 + webapp/geppetto.ejs | 104 +++ webapp/static/icons/2DNetPlot.svg | 3 + webapp/static/icons/D3Canvas.svg | 3 + webapp/static/icons/LFPLocationsPlot.svg | 4 + webapp/static/icons/LFPPSDPlot.svg | 4 + webapp/static/icons/LFPSpectrogramPlot.svg | 4 + webapp/static/icons/LFPTimeSeriesPlot.svg | 4 + webapp/static/icons/analysis.svg | 3 + webapp/static/icons/cellParams.svg | 3 + webapp/static/icons/connParams.svg | 3 + webapp/static/icons/connectionPlot.svg | 27 + webapp/static/icons/grangerPlot.svg | 4 + webapp/static/icons/pencil.svg | 9 + webapp/static/icons/popParams.svg | 21 + webapp/static/icons/python.svg | 3 + webapp/static/icons/rasterPlot.svg | 51 ++ webapp/static/icons/ratePSDPlot.svg | 3 + webapp/static/icons/rocket.svg | 3 + webapp/static/icons/rxdConcentrationPlot.svg | 3 + webapp/static/icons/shapePlot.svg | 3 + webapp/static/icons/simConfig.svg | 3 + webapp/static/icons/spikePlot.svg | 46 ++ webapp/static/icons/spikeStatsPlot.svg | 3 + webapp/static/icons/stimSourceParams.svg | 10 + webapp/static/icons/stimTargetParams.svg | 12 + webapp/static/icons/synMechParams.svg | 31 + webapp/static/icons/tracesPlot.svg | 3 + webapp/theme.js | 16 +- webapp/webpack.config.js | 22 +- 63 files changed, 543 insertions(+), 716 deletions(-) create mode 100644 webapp/geppetto.ejs create mode 100644 webapp/static/icons/2DNetPlot.svg create mode 100644 webapp/static/icons/D3Canvas.svg create mode 100644 webapp/static/icons/LFPLocationsPlot.svg create mode 100644 webapp/static/icons/LFPPSDPlot.svg create mode 100644 webapp/static/icons/LFPSpectrogramPlot.svg create mode 100644 webapp/static/icons/LFPTimeSeriesPlot.svg create mode 100644 webapp/static/icons/analysis.svg create mode 100644 webapp/static/icons/cellParams.svg create mode 100644 webapp/static/icons/connParams.svg create mode 100644 webapp/static/icons/connectionPlot.svg create mode 100644 webapp/static/icons/grangerPlot.svg create mode 100644 webapp/static/icons/pencil.svg create mode 100644 webapp/static/icons/popParams.svg create mode 100644 webapp/static/icons/python.svg create mode 100644 webapp/static/icons/rasterPlot.svg create mode 100644 webapp/static/icons/ratePSDPlot.svg create mode 100644 webapp/static/icons/rocket.svg create mode 100644 webapp/static/icons/rxdConcentrationPlot.svg create mode 100644 webapp/static/icons/shapePlot.svg create mode 100644 webapp/static/icons/simConfig.svg create mode 100644 webapp/static/icons/spikePlot.svg create mode 100644 webapp/static/icons/spikeStatsPlot.svg create mode 100644 webapp/static/icons/stimSourceParams.svg create mode 100644 webapp/static/icons/stimTargetParams.svg create mode 100644 webapp/static/icons/synMechParams.svg create mode 100644 webapp/static/icons/tracesPlot.svg diff --git a/webapp/components/definition/cellRules/NetPyNECellRule.js b/webapp/components/definition/cellRules/NetPyNECellRule.js index c9ac437e..64907d92 100644 --- a/webapp/components/definition/cellRules/NetPyNECellRule.js +++ b/webapp/components/definition/cellRules/NetPyNECellRule.js @@ -97,6 +97,7 @@ class NetPyNECellRule extends React.Component {
- + - + - + - + @@ -140,6 +141,7 @@ export default class NetPyNESection extends React.Component { @@ -147,6 +149,7 @@ export default class NetPyNESection extends React.Component { diff --git a/webapp/components/definition/cellRules/sections/mechanisms/NetPyNEMechanism.js b/webapp/components/definition/cellRules/sections/mechanisms/NetPyNEMechanism.js index 03580ddc..8b281cbb 100644 --- a/webapp/components/definition/cellRules/sections/mechanisms/NetPyNEMechanism.js +++ b/webapp/components/definition/cellRules/sections/mechanisms/NetPyNEMechanism.js @@ -30,7 +30,7 @@ class NetPyNEMechanism extends React.Component { } else { var tag = "netParams.cellParams['" + this.props.cellRule + "']['secs']['" + this.props.section + "']['mechs']['" + this.state.currentName + "']" return this.state.mechFields.map((name, i) => - + ) } }; @@ -52,6 +52,7 @@ class NetPyNEMechanism extends React.Component { return (
- + - + - + @@ -125,18 +125,18 @@ class NetPyNESimConfig extends React.Component { contentLeft = (
- + { !window.isDocker && - + } - + @@ -144,7 +144,7 @@ class NetPyNESimConfig extends React.Component { - +
@@ -212,7 +212,7 @@ class NetPyNESimConfig extends React.Component { - +
@@ -232,23 +232,23 @@ class NetPyNESimConfig extends React.Component { var contentLeft = (
- + - + - + - + - + @@ -260,27 +260,27 @@ class NetPyNESimConfig extends React.Component { contentRight = (
- + - + - + - + - + - +
diff --git a/webapp/components/definition/connectivity/NetPyNEConnectivityRule.js b/webapp/components/definition/connectivity/NetPyNEConnectivityRule.js index cb70bd22..34104b68 100644 --- a/webapp/components/definition/connectivity/NetPyNEConnectivityRule.js +++ b/webapp/components/definition/connectivity/NetPyNEConnectivityRule.js @@ -134,6 +134,7 @@ export default class NetPyNEConnectivityRule extends React.Component { var content = (
- + - + - + - + - + - + - + {dialogPop}
diff --git a/webapp/components/definition/plots/NetPyNEInclude.js b/webapp/components/definition/plots/NetPyNEInclude.js index 46d94e16..3f03a10b 100644 --- a/webapp/components/definition/plots/NetPyNEInclude.js +++ b/webapp/components/definition/plots/NetPyNEInclude.js @@ -345,6 +345,7 @@ export default class NetPyNEInclude extends Component { return
this.handleMainPopoverOpen(true, e.preventDefault(), e.currentTarget)} diff --git a/webapp/components/definition/plots/TimeRange.js b/webapp/components/definition/plots/TimeRange.js index 4cd3c1bf..a5ee58fc 100644 --- a/webapp/components/definition/plots/TimeRange.js +++ b/webapp/components/definition/plots/TimeRange.js @@ -29,8 +29,8 @@ export default class TimeRange extends Component { } }} > - - + +
); diff --git a/webapp/components/definition/plots/plotTypes/PlotGranger.js b/webapp/components/definition/plots/plotTypes/PlotGranger.js index bde57413..b0ccbd61 100644 --- a/webapp/components/definition/plots/plotTypes/PlotGranger.js +++ b/webapp/components/definition/plots/plotTypes/PlotGranger.js @@ -35,11 +35,11 @@ export default class PlotGranger extends React.Component { - + - + @@ -47,7 +47,7 @@ export default class PlotGranger extends React.Component { - +
); diff --git a/webapp/components/definition/plots/plotTypes/PlotLFP.js b/webapp/components/definition/plots/plotTypes/PlotLFP.js index 4d61109f..2f60d932 100644 --- a/webapp/components/definition/plots/plotTypes/PlotLFP.js +++ b/webapp/components/definition/plots/plotTypes/PlotLFP.js @@ -31,27 +31,27 @@ export default class PlotLFP extends React.Component { - + - + - + - + - + - + diff --git a/webapp/components/definition/plots/plotTypes/PlotRaster.js b/webapp/components/definition/plots/plotTypes/PlotRaster.js index 459bcc69..d71e2631 100644 --- a/webapp/components/definition/plots/plotTypes/PlotRaster.js +++ b/webapp/components/definition/plots/plotTypes/PlotRaster.js @@ -37,7 +37,7 @@ export default class PlotRaster extends React.Component { - + @@ -53,7 +53,7 @@ export default class PlotRaster extends React.Component { - + diff --git a/webapp/components/definition/plots/plotTypes/PlotRatePSD.js b/webapp/components/definition/plots/plotTypes/PlotRatePSD.js index 87314892..a21d96f0 100644 --- a/webapp/components/definition/plots/plotTypes/PlotRatePSD.js +++ b/webapp/components/definition/plots/plotTypes/PlotRatePSD.js @@ -30,23 +30,23 @@ export default class PlotRatePSD extends React.Component { - + - + - + - + - + diff --git a/webapp/components/definition/plots/plotTypes/PlotShape.js b/webapp/components/definition/plots/plotTypes/PlotShape.js index ae836a0f..0ea5a390 100644 --- a/webapp/components/definition/plots/plotTypes/PlotShape.js +++ b/webapp/components/definition/plots/plotTypes/PlotShape.js @@ -27,15 +27,15 @@ export default class PlotShape extends React.Component { - + - + - + @@ -51,7 +51,7 @@ export default class PlotShape extends React.Component { - + diff --git a/webapp/components/definition/plots/plotTypes/PlotSpikeHist.js b/webapp/components/definition/plots/plotTypes/PlotSpikeHist.js index d8ac2d86..c2863b2f 100644 --- a/webapp/components/definition/plots/plotTypes/PlotSpikeHist.js +++ b/webapp/components/definition/plots/plotTypes/PlotSpikeHist.js @@ -31,7 +31,7 @@ export default class PlotSpikeHist extends React.Component { - + diff --git a/webapp/components/definition/populations/Dimensions.js b/webapp/components/definition/populations/Dimensions.js index 6e7b7235..b0e18697 100644 --- a/webapp/components/definition/populations/Dimensions.js +++ b/webapp/components/definition/populations/Dimensions.js @@ -124,6 +124,7 @@ class DimensionsComponent extends Component { ? ( )); @@ -147,6 +148,7 @@ class NetPyNEPopulation extends React.Component { var content = (
{ Utils.evalPythonMessage("netpyne_geppetto.propagate_field_rename", ['cellType', newValue, oldValue]) this.props.updateCards() diff --git a/webapp/components/definition/stimulationSources/NetPyNEStimulationSource.js b/webapp/components/definition/stimulationSources/NetPyNEStimulationSource.js index 9aeb67af..e59a7b64 100644 --- a/webapp/components/definition/stimulationSources/NetPyNEStimulationSource.js +++ b/webapp/components/definition/stimulationSources/NetPyNEStimulationSource.js @@ -144,18 +144,21 @@ class NetPyNEStimulationSource extends React.Component {
@@ -167,12 +170,14 @@ class NetPyNEStimulationSource extends React.Component {
@@ -191,12 +196,14 @@ class NetPyNEStimulationSource extends React.Component { @@ -207,24 +214,28 @@ class NetPyNEStimulationSource extends React.Component {
@@ -236,30 +247,35 @@ class NetPyNEStimulationSource extends React.Component {
@@ -282,6 +298,7 @@ class NetPyNEStimulationSource extends React.Component { @@ -296,6 +313,7 @@ class NetPyNEStimulationSource extends React.Component {
@@ -222,18 +225,21 @@ export default class NetPyNEStimulationTarget extends React.Component { diff --git a/webapp/components/definition/synapses/NetPyNESynapse.js b/webapp/components/definition/synapses/NetPyNESynapse.js index d09ba5b4..08d9d419 100644 --- a/webapp/components/definition/synapses/NetPyNESynapse.js +++ b/webapp/components/definition/synapses/NetPyNESynapse.js @@ -132,6 +132,7 @@ class NetPyNESynapse extends React.Component {
@@ -139,6 +140,7 @@ class NetPyNESynapse extends React.Component { {(this.state.synMechMod == "Exp2Syn") ?
@@ -146,6 +148,7 @@ class NetPyNESynapse extends React.Component { @@ -156,6 +159,7 @@ class NetPyNESynapse extends React.Component { return (
- - + +
: null} diff --git a/webapp/components/general/NetPyNEIcons.js b/webapp/components/general/NetPyNEIcons.js index 59c1901d..2bcd721e 100644 --- a/webapp/components/general/NetPyNEIcons.js +++ b/webapp/components/general/NetPyNEIcons.js @@ -1,127 +1,15 @@ import React from 'react' import SvgIcon from '@material-ui/core/SvgIcon'; -import AdjustIcon from '@material-ui/icons/Adjust'; -import { makeStyles } from '@material-ui/core/styles'; -import { WIDGETS_IDS } from '../../constants'; -import { primaryColor } from '../../theme'; -// Avoid defining properties with css || inline style -const useIconStyles = makeStyles(({ palette }) => ({ icon: { color: props => props.selected ? palette.primary.main : palette.common.white } })) - -export default ({ widgetId, selected }) => { - const classes = useIconStyles({ selected }) - switch (widgetId) { - case WIDGETS_IDS.EDIT_MODE.POP_PARAMS: - return - case WIDGETS_IDS.EDIT_MODE.CELL_PARAMS: - return - case WIDGETS_IDS.EDIT_MODE.SYN_MECH_PARAMS: - return - case WIDGETS_IDS.EDIT_MODE.CONN_PARAMS: - return - case WIDGETS_IDS.EDIT_MODE.STIM_SOURCE_PARAMS: - return - case WIDGETS_IDS.EDIT_MODE.STIM_TARGET_PARAMS: - return - case WIDGETS_IDS.EDIT_MODE.SIM_CONFIG: - return - case WIDGETS_IDS.EDIT_MODE.ANALYSIS: - return - case WIDGETS_IDS.PYTHON_CONSOLE: - return - case WIDGETS_IDS.EXPLORE_MODE.CONNECTION_PLOT: - return - case WIDGETS_IDS.EXPLORE_MODE.D2_NET_PLOT: - return - case WIDGETS_IDS.EXPLORE_MODE.GRAGER_PLOT: - return - case WIDGETS_IDS.EXPLORE_MODE.LFP_PSD_PLOT: - return - case WIDGETS_IDS.EXPLORE_MODE.LFP_LOCATION_PLOT: - return - case WIDGETS_IDS.EXPLORE_MODE.LFP_SPECTROGRAM_PLOT: - return - case WIDGETS_IDS.EXPLORE_MODE.LFP_TIMESERIES_PLOT: - return - case WIDGETS_IDS.EXPLORE_MODE.RASTER_PLOT: - return - case WIDGETS_IDS.EXPLORE_MODE.RATE_PSD_PLOT: - return - case WIDGETS_IDS.EXPLORE_MODE.RXD_CONCENTRATION_PLOT: - return - case WIDGETS_IDS.EXPLORE_MODE.SHAPE_PLOT: - return - case WIDGETS_IDS.EXPLORE_MODE.SPIKE_PLOT: - return - case WIDGETS_IDS.EXPLORE_MODE.SPIKE_STATS_PLOT: - return - case WIDGETS_IDS.EXPLORE_MODE.TRACES_PLOT: - return - case WIDGETS_IDS.EXPLORE_MODE.MORPHOLOGY: - return - default: - return - } -} - - -export function MorphologyPlotIcon (props) { - return ( - - - - ) -} - -export function ConnectivityPlotIcon (props) { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - +import Icon from '@material-ui/core/Icon'; +const BASE_PATH = 'geppetto/build/static/icons/' - - ) +export default ({ name, selected }) => { + const className = `image-icon ${selected ? 'selected' : ''}` + return ; } -export function ShapePlotIcon (props) { - return ( - - - - ) -} -export function CellTracesPlotIcon (props) { - return ( - - - - ) -} export function MechIcon (props) { @@ -132,501 +20,3 @@ export function MechIcon (props) { ) } - -export function RasterPlotIcon (props) { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} -export function SpikeHistogramPlotIcon (props) { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} -export function SpikeStatsPlotIcon (props) { - return ( - - - - ) -} -export function RatePSDPlotIcon (props) { - return ( - - - - ) -} -export function LFPTimeSeriesPlotIcon (props) { - return ( - - - - - ) -} -export function LFPPSDPlotIcon (props) { - return ( - - - - - ) -} -export function LFPSpectrogramPlotIcon (props) { - return ( - - - - - - ) -} -export function LFPLocPlotIcon (props) { - return ( - - - - - ) -} -export function GrangerPlotIcon (props) { - return ( - - - - - ) -} -export function RxDPlotIcon (props) { - return ( - - - - ) -} -export function BrainRegionIcon (props) { - return ( - - - - - - - - - - - - - - - - ) -} - -export function CellIcon (props) { - return ( - - - - - - ) -} - - -export function CellularIcon (props) { - return ( - - - - - - - - - - - - - - - - ) -} - - -export function CodeIcon (props) { - return ( - - - - ) -} - - -export function CogsIcon (props) { - return ( - - - - - - - - - - ) -} - - -export function SynapseIcon (props) { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} - -export function TargetsIcon (props) { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} - - -export function TargetIcon (props) { - return ( - - - - - - - - - - - - - - - ) -} - - -export function SystemIcon (props) { - return ( - - - - - - - - - - - - - ) -} - - -export function SubCellularIcon (props) { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} - - -export function SourceIcon (props) { - return ( - - - - - - - - - - - - - - ) -} - - -export function SliderHIcon (props) { - return ( - - - - ) -} - - -export function PopulationIcon (props) { - return ( - - - - - - - - - - - - - - - - - - - - - - - ) -} - -export function OrganIcon (props) { - return ( - - - - - - ) -} - - -export function NetworkIcon (props) { - return ( - - - - - - ) -} - - -export function ExploreIcon (props) { - return ( - - - - - - ) -} - -export function MolecularIcon (props) { - return ( - - - - - - - - - - - - - - ) -} diff --git a/webapp/components/general/Slider.js b/webapp/components/general/Slider.js index 7d160c4f..b23e9207 100644 --- a/webapp/components/general/Slider.js +++ b/webapp/components/general/Slider.js @@ -39,6 +39,7 @@ export default class NetPyNESlider extends Component { /> this.handleSlider(event, event.target.value)} diff --git a/webapp/components/general/Tooltip.js b/webapp/components/general/Tooltip.js index 38dfa2fd..25e65af1 100644 --- a/webapp/components/general/Tooltip.js +++ b/webapp/components/general/Tooltip.js @@ -10,5 +10,5 @@ const tooltipStyle = makeStyles(({ palette, typography }) => ({ export default function CustomTooltip (props) { const classes = tooltipStyle(); - return ; + return ; } \ No newline at end of file diff --git a/webapp/components/layout/LayoutManager.tsx b/webapp/components/layout/LayoutManager.tsx index 7696d3a9..18b2e0b1 100644 --- a/webapp/components/layout/LayoutManager.tsx +++ b/webapp/components/layout/LayoutManager.tsx @@ -90,9 +90,13 @@ class LayoutManager { onRenderTabSet = (panel, renderValues) => { if (panel.getType() === "tabset" && this.enableMinimize) { if (panel.getId() != 'leftPanel' && panel.getChildren().length > 0){ - renderValues.buttons.push(
{ - this.minimizeWidget(panel.getSelectedNode().getId()) - }} />); + renderValues.buttons.push( +
this.minimizeWidget(panel.getSelectedNode().getId())} + /> + ); } } } diff --git a/webapp/components/settings/Drawer.js b/webapp/components/settings/Drawer.js index d6164703..60fa34c4 100644 --- a/webapp/components/settings/Drawer.js +++ b/webapp/components/settings/Drawer.js @@ -22,7 +22,7 @@ import useStyles from './useStyles'; import Tooltip from '../general/Tooltip' const drawerOpenWidth = 200; -const drawerCloseWidth = 48; +const drawerCloseWidth = 44; const DrawerItem = ({ id, name, widget, expanded, createOrFocusWidget, classes }) => { @@ -36,7 +36,7 @@ const DrawerItem = ({ id, name, widget, expanded, createOrFocusWidget, classes } onClick={() => createOrFocusWidget(id)} > - + {name} @@ -125,18 +125,24 @@ export default ({ newWidget, editMode, activateWidget, updateWidget }) => {
- + +
- { - setExpand(!expand) - setTimeout(() => window.dispatchEvent(new Event('resize')), 400) - }} - > - {expand ? : } - + + { + setExpand(!expand) + setTimeout(() => window.dispatchEvent(new Event('resize')), 400) + }} + > + {expand ? : } + +
+ +
) diff --git a/webapp/components/settings/useStyles.js b/webapp/components/settings/useStyles.js index 34be778a..a1fedd4b 100644 --- a/webapp/components/settings/useStyles.js +++ b/webapp/components/settings/useStyles.js @@ -24,7 +24,7 @@ export default makeStyles(({ transitions, palette, spacing }) => ({ button: { color: 'white', marginBottom: spacing(1), - marginRight: props => props.expand ? spacing(1) : 0, + marginRight: spacing(1), }, text: { paddingLeft: spacing(1) }, container: { diff --git a/webapp/components/topbar/SwitchPageButton.js b/webapp/components/topbar/SwitchPageButton.js index 40792c89..2f52c9ed 100644 --- a/webapp/components/topbar/SwitchPageButton.js +++ b/webapp/components/topbar/SwitchPageButton.js @@ -5,7 +5,7 @@ import Menu from "@material-ui/core/Menu"; import { withStyles } from '@material-ui/core/styles' import Button from '@material-ui/core/Button' -import Icon from '@material-ui/core/Icon' +import Icon from '../general/NetPyNEIcons' import { TOPBAR_CONSTANTS } from '../../constants' @@ -52,11 +52,10 @@ class SwitchPageButton extends Component {
diff --git a/webapp/components/topbar/dialogs/ImportCellParams.js b/webapp/components/topbar/dialogs/ImportCellParams.js index ba02614d..b6c5c077 100644 --- a/webapp/components/topbar/dialogs/ImportCellParams.js +++ b/webapp/components/topbar/dialogs/ImportCellParams.js @@ -87,6 +87,7 @@ class ImportCellParams extends React.Component { >
this.setState({ cellName: event.target.value })} @@ -114,6 +116,7 @@ class ImportCellParams extends React.Component { this.setState({ fileName: event.target.value })} /> @@ -134,6 +137,7 @@ class ImportCellParams extends React.Component { this.setState({ modFolder: event.target.value })} /> diff --git a/webapp/components/topbar/dialogs/ImportExportHLS.js b/webapp/components/topbar/dialogs/ImportExportHLS.js index b0baeed1..f0797a81 100644 --- a/webapp/components/topbar/dialogs/ImportExportHLS.js +++ b/webapp/components/topbar/dialogs/ImportExportHLS.js @@ -171,6 +171,7 @@ class ImportExportHLS extends React.Component { this.onNetParamsPathChange(event.target.value)} @@ -189,6 +190,7 @@ class ImportExportHLS extends React.Component { this.onSimConfigPathChange(event.target.value)} @@ -208,6 +210,7 @@ class ImportExportHLS extends React.Component { this.setState({ netParamsVariable: event.target.value })} /> this.changeDownloadFilePathsDisplayText(event.target.value)} diff --git a/webapp/css/flexlayout.less b/webapp/css/flexlayout.less index e473651d..e0b31556 100644 --- a/webapp/css/flexlayout.less +++ b/webapp/css/flexlayout.less @@ -85,6 +85,9 @@ &.flexlayout__tab_button--unselected { background-color: @bgDarkest; + .flexlayout__tab_button_content { + color: @textColor; + } } } @@ -120,12 +123,10 @@ .flexlayout__tab_button_content { margin-top: unset; - color: @secondaryColor; font-family: @font; font-size: @fontSizePanels; padding: 0; font-weight: normal; - color: #b9b9b9; } .flexlayout__tab_button_trailing { diff --git a/webapp/css/material.less b/webapp/css/material.less index 02bbe0b1..f8bb7a45 100644 --- a/webapp/css/material.less +++ b/webapp/css/material.less @@ -75,7 +75,6 @@ label.MuiInputLabel-root label.MuiInputLabel-root, label.MuiFormLabel-root{ font-weight: bold; color: rgba(255, 255, 255, 0.7); - padding: 4px } .MuiSelect-select{ diff --git a/webapp/css/netpyne.less b/webapp/css/netpyne.less index d0326e03..ca395787 100644 --- a/webapp/css/netpyne.less +++ b/webapp/css/netpyne.less @@ -461,4 +461,14 @@ div.flexlayout__layout{ #simple-popper{ z-index: 1500; +} + + +.image-icon { + width: 100%; + filter: brightness(0) invert(1); + &.selected, + &:hover { + filter: none; + } } \ No newline at end of file diff --git a/webapp/geppetto.ejs b/webapp/geppetto.ejs new file mode 100644 index 00000000..ba275a39 --- /dev/null +++ b/webapp/geppetto.ejs @@ -0,0 +1,104 @@ + + + + + <%=htmlWebpackPlugin.options.GEPPETTO_CONFIGURATION.properties.title%> + + + + + + + + <% var cssPaths = '/'; %> + + <% if (htmlWebpackPlugin.options.GEPPETTO_CONFIGURATION.contextPath != "/") { %> + + <% var cssPaths = ''; %> + <% } %> + + + + + + + + <% if(htmlWebpackPlugin.options.GEPPETTO_CONFIGURATION.properties.icon.indexOf("http") !== -1){ %> + + <% } else{ %> + + <% } %> + + + + + + + +
+ +
+ + + +
+
+ + +
+
+
+
+
+
+
+
+
+
+ +
+ + +
+
+
+
+
+ +
+ + + + + + + \ No newline at end of file diff --git a/webapp/static/icons/2DNetPlot.svg b/webapp/static/icons/2DNetPlot.svg new file mode 100644 index 00000000..0fa1d360 --- /dev/null +++ b/webapp/static/icons/2DNetPlot.svg @@ -0,0 +1,3 @@ + + + diff --git a/webapp/static/icons/D3Canvas.svg b/webapp/static/icons/D3Canvas.svg new file mode 100644 index 00000000..9c28e48b --- /dev/null +++ b/webapp/static/icons/D3Canvas.svg @@ -0,0 +1,3 @@ + + + diff --git a/webapp/static/icons/LFPLocationsPlot.svg b/webapp/static/icons/LFPLocationsPlot.svg new file mode 100644 index 00000000..437c79af --- /dev/null +++ b/webapp/static/icons/LFPLocationsPlot.svg @@ -0,0 +1,4 @@ + + + + diff --git a/webapp/static/icons/LFPPSDPlot.svg b/webapp/static/icons/LFPPSDPlot.svg new file mode 100644 index 00000000..ea453c53 --- /dev/null +++ b/webapp/static/icons/LFPPSDPlot.svg @@ -0,0 +1,4 @@ + + + + diff --git a/webapp/static/icons/LFPSpectrogramPlot.svg b/webapp/static/icons/LFPSpectrogramPlot.svg new file mode 100644 index 00000000..a0eb7252 --- /dev/null +++ b/webapp/static/icons/LFPSpectrogramPlot.svg @@ -0,0 +1,4 @@ + + + + diff --git a/webapp/static/icons/LFPTimeSeriesPlot.svg b/webapp/static/icons/LFPTimeSeriesPlot.svg new file mode 100644 index 00000000..06cd4aed --- /dev/null +++ b/webapp/static/icons/LFPTimeSeriesPlot.svg @@ -0,0 +1,4 @@ + + + + diff --git a/webapp/static/icons/analysis.svg b/webapp/static/icons/analysis.svg new file mode 100644 index 00000000..14ae1614 --- /dev/null +++ b/webapp/static/icons/analysis.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/webapp/static/icons/cellParams.svg b/webapp/static/icons/cellParams.svg new file mode 100644 index 00000000..a3ce8fc5 --- /dev/null +++ b/webapp/static/icons/cellParams.svg @@ -0,0 +1,3 @@ + + + diff --git a/webapp/static/icons/connParams.svg b/webapp/static/icons/connParams.svg new file mode 100644 index 00000000..0fa1d360 --- /dev/null +++ b/webapp/static/icons/connParams.svg @@ -0,0 +1,3 @@ + + + diff --git a/webapp/static/icons/connectionPlot.svg b/webapp/static/icons/connectionPlot.svg new file mode 100644 index 00000000..cd29003a --- /dev/null +++ b/webapp/static/icons/connectionPlot.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/webapp/static/icons/grangerPlot.svg b/webapp/static/icons/grangerPlot.svg new file mode 100644 index 00000000..188d197a --- /dev/null +++ b/webapp/static/icons/grangerPlot.svg @@ -0,0 +1,4 @@ + + + + diff --git a/webapp/static/icons/pencil.svg b/webapp/static/icons/pencil.svg new file mode 100644 index 00000000..19bcf105 --- /dev/null +++ b/webapp/static/icons/pencil.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/webapp/static/icons/popParams.svg b/webapp/static/icons/popParams.svg new file mode 100644 index 00000000..7d231a6c --- /dev/null +++ b/webapp/static/icons/popParams.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/webapp/static/icons/python.svg b/webapp/static/icons/python.svg new file mode 100644 index 00000000..7d6b98a1 --- /dev/null +++ b/webapp/static/icons/python.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/webapp/static/icons/rasterPlot.svg b/webapp/static/icons/rasterPlot.svg new file mode 100644 index 00000000..7de9bc71 --- /dev/null +++ b/webapp/static/icons/rasterPlot.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/webapp/static/icons/ratePSDPlot.svg b/webapp/static/icons/ratePSDPlot.svg new file mode 100644 index 00000000..32c9cfb2 --- /dev/null +++ b/webapp/static/icons/ratePSDPlot.svg @@ -0,0 +1,3 @@ + + + diff --git a/webapp/static/icons/rocket.svg b/webapp/static/icons/rocket.svg new file mode 100644 index 00000000..f5d348f7 --- /dev/null +++ b/webapp/static/icons/rocket.svg @@ -0,0 +1,3 @@ + + + diff --git a/webapp/static/icons/rxdConcentrationPlot.svg b/webapp/static/icons/rxdConcentrationPlot.svg new file mode 100644 index 00000000..c38f7cc6 --- /dev/null +++ b/webapp/static/icons/rxdConcentrationPlot.svg @@ -0,0 +1,3 @@ + + + diff --git a/webapp/static/icons/shapePlot.svg b/webapp/static/icons/shapePlot.svg new file mode 100644 index 00000000..931ca212 --- /dev/null +++ b/webapp/static/icons/shapePlot.svg @@ -0,0 +1,3 @@ + + + diff --git a/webapp/static/icons/simConfig.svg b/webapp/static/icons/simConfig.svg new file mode 100644 index 00000000..437f7c7f --- /dev/null +++ b/webapp/static/icons/simConfig.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/webapp/static/icons/spikePlot.svg b/webapp/static/icons/spikePlot.svg new file mode 100644 index 00000000..b8a48b29 --- /dev/null +++ b/webapp/static/icons/spikePlot.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/webapp/static/icons/spikeStatsPlot.svg b/webapp/static/icons/spikeStatsPlot.svg new file mode 100644 index 00000000..eb0bce90 --- /dev/null +++ b/webapp/static/icons/spikeStatsPlot.svg @@ -0,0 +1,3 @@ + + + diff --git a/webapp/static/icons/stimSourceParams.svg b/webapp/static/icons/stimSourceParams.svg new file mode 100644 index 00000000..ce587422 --- /dev/null +++ b/webapp/static/icons/stimSourceParams.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/webapp/static/icons/stimTargetParams.svg b/webapp/static/icons/stimTargetParams.svg new file mode 100644 index 00000000..b2fbe2a5 --- /dev/null +++ b/webapp/static/icons/stimTargetParams.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/webapp/static/icons/synMechParams.svg b/webapp/static/icons/synMechParams.svg new file mode 100644 index 00000000..455b29ec --- /dev/null +++ b/webapp/static/icons/synMechParams.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/webapp/static/icons/tracesPlot.svg b/webapp/static/icons/tracesPlot.svg new file mode 100644 index 00000000..e4e586ca --- /dev/null +++ b/webapp/static/icons/tracesPlot.svg @@ -0,0 +1,3 @@ + + + diff --git a/webapp/theme.js b/webapp/theme.js index 1c7f85f2..9e497d8f 100644 --- a/webapp/theme.js +++ b/webapp/theme.js @@ -11,7 +11,10 @@ require('./css/traceback.less'); require('./css/flexlayout.less'); require('./css/tree.less'); -export const { primaryColor, secondaryColor, font, fontColor, bgLight, bgRegular, bgDark, bgDarker, bgDarkest } = vars; +export const { + primaryColor, secondaryColor, font, fontColor, + bgLight, bgRegular, bgDark, bgDarker, bgDarkest, bgInputs +} = vars; const rawTheme = { @@ -32,7 +35,10 @@ const rawTheme = { main: primaryColor, dark: secondaryColor }, - secondary: { main: secondaryColor, dark: primaryColor }, + secondary: { + main: secondaryColor, + dark: primaryColor + } }, overrides: { MuiInputLabel: { formControl: { top: '-6px' } }, @@ -69,6 +75,10 @@ const rawTheme = { primary: { color: fontColor } }, MuiButton: { + contained: { + color: fontColor, + backgroundColor: bgInputs + }, containedSecondary: { color: fontColor }, containedPrimary: { color: fontColor }, }, @@ -81,7 +91,7 @@ const rawTheme = { container: { padding: 0 }, wrapper: { padding: "0px!important" } }, - MuiIcon: { root: { } }, + MuiIcon: { fontSizeLarge: { fontSize: '1.75rem' } }, MuiExpansionPanelSummary: { root: { padding: '0px!important', margin: 0, minHeight: 'unset!important' }, content: { margin: '0px!important', cursor: 'auto' }, diff --git a/webapp/webpack.config.js b/webapp/webpack.config.js index 77ed421a..0b910016 100644 --- a/webapp/webpack.config.js +++ b/webapp/webpack.config.js @@ -34,6 +34,7 @@ if ( isWin ) { const availableExtensions = [ { from: path.resolve(__dirname, geppetto_client_path, "static/*"), to: 'static', flatten: true }, { from: path.resolve(__dirname, "images/*"), to: '', flatten: true }, + { from: path.resolve(__dirname, "static"), to: 'static' }, ]; module.exports = function (env){ @@ -62,7 +63,7 @@ module.exports = function (env){ var entries = { main: path.resolve(__dirname, "Main.js"), - admin: path.resolve(__dirname, geppetto_client_path, "js/pages/admin/admin.js"), + // admin: path.resolve(__dirname, geppetto_client_path, "js/pages/admin/admin.js"), }; console.log("\nThe Webpack entries are:"); @@ -99,7 +100,7 @@ module.exports = function (env){ new CopyWebpackPlugin(availableExtensions), new HtmlWebpackPlugin({ filename: 'geppetto.vm', - template: path.resolve(__dirname, geppetto_client_path, 'js/pages/geppetto/geppetto.ejs'), + template: path.resolve(__dirname, 'geppetto.ejs'), GEPPETTO_CONFIGURATION: geppettoConfig, /* * chunks: ['main'] Not specifying the chunk since its not possible @@ -108,23 +109,6 @@ module.exports = function (env){ */ chunks: [] }), - new HtmlWebpackPlugin({ - filename: 'admin.vm', - template: path.resolve(__dirname, geppetto_client_path, 'js/pages/admin/admin.ejs'), - GEPPETTO_CONFIGURATION: geppettoConfig, - /* - * chunks: ['admin'] Not specifying the chunk since its not possible - * yet (need to go to Webpack2) to specify UTF-8 as charset without - * which we have errors - */ - chunks: [] - }), - new HtmlWebpackPlugin({ - filename: 'dashboard.vm', - template: path.resolve(__dirname, geppetto_client_path, 'js/pages/dashboard/dashboard.ejs'), - GEPPETTO_CONFIGURATION: geppettoConfig, - chunks: [] - }), new HtmlWebpackPlugin({ filename: '../WEB-INF/web.xml', template: path.resolve(__dirname, 'WEB-INF/web.ejs'), From b4950d7e05c8050c4665f20f468df61ad86e23cc Mon Sep 17 00:00:00 2001 From: rodriguez-facundo Date: Wed, 27 May 2020 15:24:46 -0300 Subject: [PATCH 4/9] #147 Stying --- utilities/install.py | 2 +- webapp/components/NetPyNE.js | 7 +- .../definition/populations/Dimensions.js | 36 ++++--- webapp/components/general/Checkbox.js | 26 +++-- webapp/components/general/List.js | 97 ++++++++---------- webapp/components/general/Select.js | 2 +- webapp/components/settings/Drawer.js | 2 +- webapp/components/topbar/Topbar.js | 4 +- webapp/components/topbar/configuration.js | 98 ++++++++++++------- webapp/css/material.less | 1 + webapp/css/netpyne.less | 8 +- webapp/theme.js | 24 ++++- 12 files changed, 180 insertions(+), 127 deletions(-) diff --git a/utilities/install.py b/utilities/install.py index 01b441b3..1a87dc8b 100644 --- a/utilities/install.py +++ b/utilities/install.py @@ -71,7 +71,7 @@ def main(argv): clone_repo(project='openworm', repo_name='geppetto-client', folder='geppetto-client', - default_branch='feature/178', + default_branch='development', cwdp='webapp/', recursive=False, ) diff --git a/webapp/components/NetPyNE.js b/webapp/components/NetPyNE.js index bf94f613..c73cfd4f 100644 --- a/webapp/components/NetPyNE.js +++ b/webapp/components/NetPyNE.js @@ -17,7 +17,12 @@ const styles = ({ zIndex, palette, spacing }) => ({ flexDirection: "column" }, topbar: { position: "relative", zIndex: zIndex.drawer + 1 }, - content: { flexGrow:1, display: 'flex', flexDirection: 'row', position: 'relative' } + content: { + flexGrow:1, + display: 'flex', + flexDirection: 'row', + position: 'relative' + } }); import { EDIT_WIDGETS, PYTHON_CONSOLE_WIDGET, WidgetStatus } from '../constants' diff --git a/webapp/components/definition/populations/Dimensions.js b/webapp/components/definition/populations/Dimensions.js index b0e18697..bbd7cbf2 100644 --- a/webapp/components/definition/populations/Dimensions.js +++ b/webapp/components/definition/populations/Dimensions.js @@ -11,10 +11,7 @@ import { } from 'netpyne/components'; const styles = ({ spacing }) => ({ - selectField: { - marginTop: spacing(3), - width: '100%' - }, + selectField: { width: '100%' }, field:{ width: '95%!important', marginLeft: spacing(3) @@ -103,7 +100,7 @@ class DimensionsComponent extends Component {
this.setState({ dimension: event.target.value })} - > - {(this.popDimensionsOptions != undefined) - ? this.popDimensionsOptions.map(popDimensionsOption => ( - - {popDimensionsOption.label} - - )) : null} - + + + Dimension type + + + + { this.state.dimension != undefined && this.state.dimension != "" && ( - - { - this.props.updateCards() - }} - /> - + + + { + this.props.updateCards() + }} + /> + + + ) }
diff --git a/webapp/components/definition/populations/NetPyNEPopulation.js b/webapp/components/definition/populations/NetPyNEPopulation.js index 64aa98c6..000b500a 100644 --- a/webapp/components/definition/populations/NetPyNEPopulation.js +++ b/webapp/components/definition/populations/NetPyNEPopulation.js @@ -3,7 +3,7 @@ import TextField from '@material-ui/core/TextField'; import { BottomNavigation, BottomNavigationAction } from '@material-ui/core'; import FontIcon from '@material-ui/core/Icon'; import Utils from '../../../Utils'; - +import Box from '@material-ui/core/Box' import Dialog from '@material-ui/core/Dialog/Dialog'; import Button from '@material-ui/core/Button'; @@ -146,20 +146,23 @@ class NetPyNEPopulation extends React.Component { : undefined if (this.state.sectionId == "General") { var content = ( -
- +
+ + + + { Utils.evalPythonMessage("netpyne_geppetto.propagate_field_rename", ['cellType', newValue, oldValue]) this.props.updateCards() @@ -214,10 +217,9 @@ class NetPyNEPopulation extends React.Component { return (
- + {this.getModelParameters()} -
{content}
); diff --git a/webapp/components/definition/stimulationSources/NetPyNEStimulationSource.js b/webapp/components/definition/stimulationSources/NetPyNEStimulationSource.js index e59a7b64..41536586 100644 --- a/webapp/components/definition/stimulationSources/NetPyNEStimulationSource.js +++ b/webapp/components/definition/stimulationSources/NetPyNEStimulationSource.js @@ -1,8 +1,7 @@ import React from 'react'; import MenuItem from '@material-ui/core/MenuItem'; import TextField from '@material-ui/core/TextField'; -import Utils from '../../../Utils'; -import Select from '../../general/Select'; +import Box from '@material-ui/core/Box'; import Dialog from '@material-ui/core/Dialog/Dialog'; import Button from '@material-ui/core/Button'; @@ -13,11 +12,14 @@ import DialogContent from '@material-ui/core/DialogContent'; import DialogContentText from '@material-ui/core/DialogContentText'; import DialogTitle from '@material-ui/core/DialogTitle'; + import { NetPyNEField, NetPyNETextField, ListComponent } from 'netpyne/components'; +import Utils from '../../../Utils'; +import Select from '../../general/Select'; const styles = ({ spacing }) => ({ selectField: { @@ -144,21 +146,24 @@ class NetPyNEStimulationSource extends React.Component {
@@ -170,14 +175,16 @@ class NetPyNEStimulationSource extends React.Component {
@@ -196,14 +203,16 @@ class NetPyNEStimulationSource extends React.Component { @@ -214,28 +223,32 @@ class NetPyNEStimulationSource extends React.Component {
@@ -247,35 +260,40 @@ class NetPyNEStimulationSource extends React.Component {
@@ -298,7 +316,8 @@ class NetPyNEStimulationSource extends React.Component { @@ -312,20 +331,21 @@ class NetPyNEStimulationSource extends React.Component { return (
- -
+ + + + - {childrenWithExtraProp} -
+ + {childrenWithExtraProp[0]} + {childrenWithExtraProp[1]} + ) } } \ No newline at end of file diff --git a/webapp/components/general/List.js b/webapp/components/general/List.js index 8a55066b..d35f6f31 100644 --- a/webapp/components/general/List.js +++ b/webapp/components/general/List.js @@ -5,10 +5,11 @@ import Icon from '@material-ui/core/Icon'; import Tooltip from './Tooltip' import Chip from '@material-ui/core/Chip' import Grid from '@material-ui/core/Grid' +import { withStyles } from '@material-ui/core/styles' /** * Generic List/Dict Component */ -export default class ListComponent extends Component { +class ListComponent extends Component { constructor (props) { super(props); @@ -220,9 +221,10 @@ export default class ListComponent extends Component { }); + const { classes } = this.props return ( - + @@ -258,3 +261,8 @@ export default class ListComponent extends Component { ) } } + + +const styles = () => ({ addButton: { height: 48 } }) + +export default withStyles(styles)(ListComponent) \ No newline at end of file diff --git a/webapp/components/general/NetPyNECoordsRange.js b/webapp/components/general/NetPyNECoordsRange.js index 6a70dd9c..be692f3f 100644 --- a/webapp/components/general/NetPyNECoordsRange.js +++ b/webapp/components/general/NetPyNECoordsRange.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import MenuItem from '@material-ui/core/MenuItem'; import TextField from '@material-ui/core/TextField'; - +import Box from '@material-ui/core/Box' import SelectField from './Select'; import Utils from '../../Utils'; @@ -102,7 +102,7 @@ export default class NetPyNECoordsRange extends Component { {(this.state.rangeType != undefined) - ?
+ ? { @@ -122,12 +122,11 @@ export default class NetPyNECoordsRange extends Component { } } > - - + + -
+ : null} -
); } diff --git a/webapp/components/general/NetPyNEField.js b/webapp/components/general/NetPyNEField.js index fb3ceb17..aedd0192 100644 --- a/webapp/components/general/NetPyNEField.js +++ b/webapp/components/general/NetPyNEField.js @@ -9,6 +9,9 @@ import DialogActions from '@material-ui/core/DialogActions'; import DialogContent from '@material-ui/core/DialogContent'; import DialogContentText from '@material-ui/core/DialogContentText'; import DialogTitle from '@material-ui/core/DialogTitle'; +import { Tooltip } from 'netpyne/components' +import Grid from '@material-ui/core/Grid' +import Box from '@material-ui/core/Box' export default class NetPyNEField extends Component { constructor (props) { @@ -65,12 +68,16 @@ export default class NetPyNEField extends Component { var help = Utils.getMetadataField(this.props.id, "help"); if (help != undefined && help != '') { var helpComponent = ( -
-