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

Support link in logo; Folds folded by default

Author: dmt0

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"
   },

renovate.json

@@ -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,
 };
 

scripts/translationKeys/combined-translation-keys.txt

@@ -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 = {

scripts/translationKeys/translation-keys.txt

@@ -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/DefaultEditor.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/components/containers/PlotlyPanel.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" />