From cdc89e9b499626567d10212b738fccb34df1e246 Mon Sep 17 00:00:00 2001
From: Nicolas Kruchten <nicolas@datacratic.com>
Date: Tue, 14 Aug 2018 16:31:24 -0700
Subject: [PATCH 1/3] fix menus crash on hide

---
 .../containers/UpdateMenuAccordion.js         | 14 ++----
 src/default_panels/StyleUpdateMenusPanel.js   | 50 ++++++++++---------
 2 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/src/components/containers/UpdateMenuAccordion.js b/src/components/containers/UpdateMenuAccordion.js
index 594e588f0..735c1e9fb 100644
--- a/src/components/containers/UpdateMenuAccordion.js
+++ b/src/components/containers/UpdateMenuAccordion.js
@@ -21,18 +21,12 @@ class UpdateMenuAccordion extends Component {
           dropdown: _('Dropdown'),
           buttons: _('Buttons'),
         };
-        const updateMenuType =
-          localizedType[upd.type] || localizedType.dropdown;
-        const activeElementLabel = upd.buttons.filter(
-          b => b._index === upd.active
-        )[0].label;
+        const menuType = localizedType[upd.type] || localizedType.dropdown;
+        const activeBtn = upd.buttons.filter(b => b._index === upd.active)[0];
+        const foldName = menuType + (activeBtn ? ': ' + activeBtn.label : '');
 
         return (
-          <UpdateMenuFold
-            key={i}
-            updateMenuIndex={i}
-            name={updateMenuType + ': ' + activeElementLabel}
-          >
+          <UpdateMenuFold key={i} updateMenuIndex={i} name={foldName}>
             {children}
           </UpdateMenuFold>
         );
diff --git a/src/default_panels/StyleUpdateMenusPanel.js b/src/default_panels/StyleUpdateMenusPanel.js
index 3ec9001ce..e08ffd5ed 100644
--- a/src/default_panels/StyleUpdateMenusPanel.js
+++ b/src/default_panels/StyleUpdateMenusPanel.js
@@ -4,42 +4,44 @@ import {
   ColorPicker,
   FontSelector,
   Numeric,
-  Radio,
   PlotlySection,
   UpdateMenuAccordion,
   UpdateMenuButtons,
+  VisibilitySelect,
 } from '../components';
 
 const StyleUpdateMenusPanel = (props, {localize: _}) => (
   <UpdateMenuAccordion>
-    <Radio
+    <VisibilitySelect
       attr="visible"
       options={[
         {label: _('Show'), value: true},
         {label: _('Hide'), value: false},
       ]}
-    />
-    <PlotlySection name={_('Button Labels')}>
-      <UpdateMenuButtons attr="buttons" />
-    </PlotlySection>
-    <PlotlySection name={_('Background')}>
-      <ColorPicker label={_('Color')} attr="bgcolor" />
-    </PlotlySection>
-    <PlotlySection name={_('Font')}>
-      <FontSelector label={_('Typeface')} attr="font.family" />
-      <Numeric label={_('Size')} attr="font.size" />
-      <ColorPicker label={_('Color')} attr="font.color" />
-    </PlotlySection>
-    <PlotlySection name={_('Border')}>
-      <Numeric label={_('Width')} attr="borderwidth" />
-      <ColorPicker label={_('Color')} attr="bordercolor" />
-    </PlotlySection>
-    <PlotlySection name={_('Padding')}>
-      <Numeric label={_('Top')} attr="pad.t" units="px" />
-      <Numeric label={_('Bottom')} attr="pad.b" units="px" />
-      <Numeric label={_('Left')} attr="pad.l" units="px" />
-      <Numeric label={_('Right')} attr="pad.r" units="px" />
-    </PlotlySection>
+      showOn={true}
+    >
+      <PlotlySection name={_('Button Labels')}>
+        <UpdateMenuButtons attr="buttons" />
+      </PlotlySection>
+      <PlotlySection name={_('Background')}>
+        <ColorPicker label={_('Color')} attr="bgcolor" />
+      </PlotlySection>
+      <PlotlySection name={_('Font')}>
+        <FontSelector label={_('Typeface')} attr="font.family" />
+        <Numeric label={_('Size')} attr="font.size" />
+        <ColorPicker label={_('Color')} attr="font.color" />
+      </PlotlySection>
+      <PlotlySection name={_('Border')}>
+        <Numeric label={_('Width')} attr="borderwidth" />
+        <ColorPicker label={_('Color')} attr="bordercolor" />
+      </PlotlySection>
+      <PlotlySection name={_('Padding')}>
+        <Numeric label={_('Top')} attr="pad.t" units="px" />
+        <Numeric label={_('Bottom')} attr="pad.b" units="px" />
+        <Numeric label={_('Left')} attr="pad.l" units="px" />
+        <Numeric label={_('Right')} attr="pad.r" units="px" />
+      </PlotlySection>
+    </VisibilitySelect>
   </UpdateMenuAccordion>
 );
 

From 96d9e1bc9363966d6a554416075672a742dffd9c Mon Sep 17 00:00:00 2001
From: Nicolas Kruchten <nicolas@datacratic.com>
Date: Tue, 14 Aug 2018 16:47:00 -0700
Subject: [PATCH 2/3] add basic positioning for menus

---
 src/default_panels/StyleUpdateMenusPanel.js | 27 +++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/default_panels/StyleUpdateMenusPanel.js b/src/default_panels/StyleUpdateMenusPanel.js
index e08ffd5ed..a9154e0de 100644
--- a/src/default_panels/StyleUpdateMenusPanel.js
+++ b/src/default_panels/StyleUpdateMenusPanel.js
@@ -8,6 +8,7 @@ import {
   UpdateMenuAccordion,
   UpdateMenuButtons,
   VisibilitySelect,
+  Radio,
 } from '../components';
 
 const StyleUpdateMenusPanel = (props, {localize: _}) => (
@@ -35,6 +36,32 @@ const StyleUpdateMenusPanel = (props, {localize: _}) => (
         <Numeric label={_('Width')} attr="borderwidth" />
         <ColorPicker label={_('Color')} attr="bordercolor" />
       </PlotlySection>
+
+      <PlotlySection name={_('Horizontal Positioning')} attr={'x'}>
+        <Numeric label={_('Position')} attr={'x'} showSlider step={0.02} />
+        <Radio
+          label={_('Anchor')}
+          attr={'xanchor'}
+          options={[
+            {label: _('Left'), value: 'left'},
+            {label: _('Center'), value: 'center'},
+            {label: _('Right'), value: 'right'},
+          ]}
+        />
+      </PlotlySection>
+      <PlotlySection name={_('Vertical Positioning')} attr={'y'}>
+        <Numeric label={_('Position')} attr={'y'} showSlider step={0.02} />
+        <Radio
+          label={_('Anchor')}
+          attr={'yanchor'}
+          options={[
+            {label: _('Top'), value: 'top'},
+            {label: _('Middle'), value: 'middle'},
+            {label: _('Bottom'), value: 'bottom'},
+          ]}
+        />
+      </PlotlySection>
+
       <PlotlySection name={_('Padding')}>
         <Numeric label={_('Top')} attr="pad.t" units="px" />
         <Numeric label={_('Bottom')} attr="pad.b" units="px" />

From b7f97417c9f901b8b46feabd38615e2aa90fdf25 Mon Sep 17 00:00:00 2001
From: Nicolas Kruchten <nicolas@datacratic.com>
Date: Tue, 14 Aug 2018 16:54:21 -0700
Subject: [PATCH 3/3] slider tweaks

---
 src/default_panels/StyleSlidersPanel.js | 38 ++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/default_panels/StyleSlidersPanel.js b/src/default_panels/StyleSlidersPanel.js
index 309bdd7ad..fad8e7983 100644
--- a/src/default_panels/StyleSlidersPanel.js
+++ b/src/default_panels/StyleSlidersPanel.js
@@ -6,6 +6,7 @@ import {
   Numeric,
   Radio,
   PlotlySection,
+  Dropdown,
   SliderAccordion,
 } from '../components';
 
@@ -31,6 +32,41 @@ const StyleSlidersPanel = (props, {localize: _}) => (
       <Numeric label={_('Size')} attr="font.size" />
       <ColorPicker label={_('Color')} attr="font.color" />
     </PlotlySection>
+    <PlotlySection name={_('Length')} attr={'len'}>
+      <Numeric label={_('Length')} attr={'len'} step={0.02} />
+      <Dropdown
+        label={_('Length Mode')}
+        attr={'lenmode'}
+        options={[
+          {label: _('Fraction of canvas'), value: 'fraction'},
+          {label: _('Pixels'), value: 'pixels'},
+        ]}
+      />
+    </PlotlySection>
+    <PlotlySection name={_('Horizontal Positioning')} attr={'x'}>
+      <Numeric label={_('Position')} attr={'x'} showSlider step={0.02} />
+      <Radio
+        label={_('Anchor')}
+        attr={'xanchor'}
+        options={[
+          {label: _('Left'), value: 'left'},
+          {label: _('Center'), value: 'center'},
+          {label: _('Right'), value: 'right'},
+        ]}
+      />
+    </PlotlySection>
+    <PlotlySection name={_('Vertical Positioning')} attr={'y'}>
+      <Numeric label={_('Position')} attr={'y'} showSlider step={0.02} />
+      <Radio
+        label={_('Anchor')}
+        attr={'yanchor'}
+        options={[
+          {label: _('Top'), value: 'top'},
+          {label: _('Middle'), value: 'middle'},
+          {label: _('Bottom'), value: 'bottom'},
+        ]}
+      />
+    </PlotlySection>
     <PlotlySection name={_('Padding')}>
       <Numeric label={_('Top')} attr="pad.t" units="px" />
       <Numeric label={_('Bottom')} attr="pad.b" units="px" />
@@ -39,7 +75,7 @@ const StyleSlidersPanel = (props, {localize: _}) => (
     </PlotlySection>
     <PlotlySection name={_('Ticks')}>
       <ColorPicker label={_('Color')} attr="tickcolor" />
-      <Numeric label={_('Legth')} attr="ticklen" />
+      <Numeric label={_('Length')} attr="ticklen" />
       <Numeric label={_('Width')} attr="tickwidth" />
     </PlotlySection>
   </SliderAccordion>