Merge pull request #1181 from plotly/folded-by-default

Support link in logo; Folds folded by default

package.json

@@ -1,7 +1,7 @@
 {
  "name": "react-chart-editor",
  "description": "plotly.js chart editor react component UI",
- "version": "0.46.0",
+ "version": "0.46.1",
  "author": "Plotly, Inc.",
  "bugs": {
  "url": "https://github.com/plotly/react-chart-editor/issues"
@@ -49,32 +49,32 @@
  "tinycolor2": "^1.6.0"
  },
  "devDependencies": {
- "@babel/cli": "7.22.15",
- "@babel/core": "7.22.15",
+ "@babel/cli": "7.23.0",
+ "@babel/core": "7.23.2",
  "@babel/eslint-parser": "7.22.15",
- "@babel/node": "7.22.15",
+ "@babel/node": "7.22.19",
  "@babel/plugin-proposal-object-rest-spread": "7.20.7",
- "@babel/preset-env": "7.22.15",
+ "@babel/preset-env": "7.23.2",
  "@babel/preset-react": "7.22.15",
- "@babel/traverse": "7.22.15",
+ "@babel/traverse": "7.23.2",
  "@hot-loader/react-dom": "16.14.0",
  "@percy/cli": "1.26.3",
  "@percy/storybook": "4.3.6",
  "@storybook/blocks": "7.4.1",
  "@storybook/react": "7.4.1",
  "@storybook/react-webpack5": "7.4.1",
  "@storybook/source-loader": "^7.4.1",
- "autoprefixer": "10.4.15",
+ "autoprefixer": "10.4.16",
  "babel-jest": "26.6.3",
  "babel-loader": "9.1.3",
  "babel-plugin-module-resolver": "5.0.0",
  "css-loader": "6.8.1",
  "cssnano": "6.0.1",
  "enzyme": "3.11.0",
  "enzyme-adapter-react-16": "1.15.7",
- "eslint": "8.48.0",
- "eslint-config-prettier": "8.6.0",
- "eslint-plugin-import": "2.28.1",
+ "eslint": "8.53.0",
+ "eslint-config-prettier": "9.0.0",
+ "eslint-plugin-import": "2.29.0",
  "eslint-plugin-jsx": "0.1.0",
  "eslint-plugin-react": "7.33.2",
  "eslint-plugin-react-percy": "0.2.4",
@@ -83,12 +83,12 @@
  "jest": "26.6.3",
  "jest-cli": "26.6.3",
  "mkdirp": "3.0.1",
- "plotly.js": "2.26.0",
- "postcss": "8.4.29",
+ "plotly.js": "2.27.0",
+ "postcss": "8.4.31",
  "postcss-cli": "10.1.0",
  "postcss-combine-duplicated-selectors": "10.0.3",
  "postcss-import": "15.1.0",
- "postcss-preset-env": "9.1.3",
+ "postcss-preset-env": "9.3.0",
  "prettier": "2.8.4",
  "react": "16.14.0",
  "react-ace": "7.0.5",
@@ -97,12 +97,12 @@
  "react-inspector": "5.1.1",
  "react-test-renderer": "16.14.0",
  "request": "2.88.2",
- "rimraf": "5.0.1",
- "sass": "1.66.1",
+ "rimraf": "5.0.5",
+ "sass": "1.69.5",
  "sass-loader": "13.3.2",
  "storybook": "7.4.1",
  "style-loader": "3.3.3",
- "webpack": "5.88.2",
+ "webpack": "5.89.0",
  "webpack-cli": "5.1.4",
  "webpack-dev-server": "4.15.1"
  },

src/DefaultEditor.js

@@ -78,19 +78,20 @@ class DefaultEditor extends Component {
 
  render() {
  const _ = this.context.localize;
- const logo = this.props.logoSrc && <Logo src={this.props.logoSrc} />;
+ const {logoSrc, logoLinkUrl, menuPanelOrder, children} = this.props;
+ const logo = logoSrc && <Logo src={logoSrc} link={logoLinkUrl} />;
 
  return (
- <PanelMenuWrapper menuPanelOrder={this.props.menuPanelOrder}>
- {logo ? logo : null}
+ <PanelMenuWrapper menuPanelOrder={menuPanelOrder}>
+ {logo || null}
  <GraphCreatePanel group={_('Structure')} name={_('Traces')} />
  <GraphSubplotsPanel group={_('Structure')} name={_('Subplots')} />
  {this.hasTransforms() && (
  <GraphTransformsPanel group={_('Structure')} name={_('Transforms')} />
  )}
- <StyleLayoutPanel group={_('Style')} name={_('General')} />
+ <StyleLayoutPanel group={_('Style')} name={_('General')} collapsedOnStart />
  <StyleTracesPanel group={_('Style')} name={_('Traces')} />
- {this.hasAxes() && <StyleAxesPanel group={_('Style')} name={_('Axes')} />}
+ {this.hasAxes() && <StyleAxesPanel group={_('Style')} name={_('Axes')} collapsedOnStart />}
  {this.hasMaps() && <StyleMapsPanel group={_('Style')} name={_('Maps')} />}
  {this.hasLegend() && <StyleLegendPanel group={_('Style')} name={_('Legend')} />}
  {this.hasColorbars() && <StyleColorbarsPanel group={_('Style')} name={_('Color Bars')} />}
@@ -99,7 +100,7 @@ class DefaultEditor extends Component {
  <StyleImagesPanel group={_('Annotate')} name={_('Images')} />
  {this.hasSliders() && <StyleSlidersPanel group={_('Control')} name={_('Sliders')} />}
  {this.hasMenus() && <StyleUpdateMenusPanel group={_('Control')} name={_('Menus')} />}
- {this.props.children ? this.props.children : null}
+ {children || null}
  </PanelMenuWrapper>
  );
  }
@@ -108,6 +109,7 @@ class DefaultEditor extends Component {
 DefaultEditor.propTypes = {
  children: PropTypes.node,
  logoSrc: PropTypes.string,
+ logoLinkUrl: PropTypes.string,
  menuPanelOrder: PropTypes.array,
 };
 

src/components/containers/PlotlyPanel.js

@@ -68,7 +68,7 @@ export class Panel extends Component {
  });
 
  if (this.state.individualFoldStates.length !== numFolds) {
- const newFoldStates = new Array(numFolds).fill(false);
+ const newFoldStates = new Array(numFolds).fill(this.props.collapsedOnStart);
  this.setState({
  individualFoldStates: this.props.addAction
  ? newFoldStates.map((e, i) => i !== numFolds - 1)
@@ -129,10 +129,12 @@ Panel.propTypes = {
  noPadding: PropTypes.bool,
  showExpandCollapse: PropTypes.bool,
  canReorder: PropTypes.bool,
+ collapsedOnStart: PropTypes.bool,
 };
 
 Panel.defaultProps = {
  showExpandCollapse: true,
+ collapsedOnStart: false,
 };
 
 Panel.contextTypes = {

src/components/widgets/Logo.js

@@ -3,12 +3,15 @@ import React, {Component} from 'react';
 
 export default class Logo extends Component {
  render() {
- return <img className="sidebar__logo" src={this.props.src} />;
+ const {link, src} = this.props;
+ const image = <img className="sidebar__logo" src={src} />;
+ return link ? <a href={this.props.link}>{image}</a> : image;
  }
 }
 
 Logo.plotly_editor_traits = {sidebar_element: true};
 
 Logo.propTypes = {
  src: PropTypes.string,
+ link: PropTypes.string,
 };

src/default_panels/StyleAxesPanel.js

@@ -27,7 +27,7 @@ class StyleAxesPanel extends Component {
  render() {
  const {localize: _} = this.context;
  return (
- <LayoutPanel>
+ <LayoutPanel {...this.props}>
  <AxesFold
  name={_('Titles')}
  axisFilter={(axis) => !(axis._name.includes('angular') || axis._subplot.includes('geo'))}

src/default_panels/StyleLayoutPanel.js

@@ -21,7 +21,7 @@ import {HoverColor} from '../components/fields/derived';
 import DataSelector from '../components/fields/DataSelector';
 
 const StyleLayoutPanel = (props, {localize: _}) => (
- <LayoutPanel>
+ <LayoutPanel {...props}>
  <PlotlyFold name={_('Defaults')}>
  <ColorPicker label={_('Plot Background')} attr="plot_bgcolor" />
  <ColorPicker label={_('Margin Color')} attr="paper_bgcolor" />