Maximize option to card

panel/template/react/__init__.py

@@ -67,7 +67,7 @@ def _update_render_items(self, event):
             if x1 is None: x1 = 12
             if y0 is None: y0 = 0
             if y1 is None: y1 = self.main.nrows
-            layouts.append({'x': x0, 'y': y0, 'w': x1-x0, 'h': y1-y0, 'i': str(i+1)})
+            layouts.append({'x': x0, 'y': y0, 'w': x1-x0, 'h': y1-y0, 'i': str(i+1), 'minH':4})
         self._render_variables['layouts'] = {'lg': layouts, 'md': layouts}
 
     @depends('cols', 'breakpoints', 'row_height', 'compact', watch=True)

panel/template/react/react.css

@@ -94,7 +94,7 @@ a.navbar-brand {
 
 p.bk.card-button {
   display: none;
-}  
+}
 
 .sidenav {
   overflow-x: hidden;
@@ -198,6 +198,27 @@ p.bk.card-button {
   opacity: 1;
 }
 
+.maximize{
+  position: absolute;
+  top: 24px;
+  right: 2px;
+  width: 24px;
+  height: 24px;
+  z-index: 10000;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='7 10.073 27.163 26.308' xmlns='http://www.w3.org/2000/svg'%3E%3Cg style='' transform='matrix(0.106995, 0, 0, 0.103603, 6.25104, 9.02985)'%3E%3Cpath d='M 85.5 11.4 C 81.8 13 76.3 19.1 75.3 22.8 C 74.8 24.3 74.5 52.8 74.5 86.1 C 74.5 144.4 74.6 146.9 76.4 148.9 C 78.7 151.4 80.8 151.6 83.8 149.4 L 86 147.9 L 86 87.6 C 86 28.1 86 27.2 88.1 24.6 L 90.1 22 L 167.6 22 C 243.7 22 245 22 247 24 C 249 26 249 27.3 249 103.4 L 249 180.9 L 246.4 182.9 C 243.8 185 242.9 185 183.4 185 L 123.1 185 L 121.6 187.2 C 119.6 190.1 119.6 191.3 121.8 194 L 123.6 196.2 L 186 196 C 246.5 195.9 248.5 195.9 252 193.9 C 253.9 192.8 256.7 190.3 258 188.3 L 260.5 184.6 L 260.8 105.6 C 261 52.5 260.8 25.3 260 22.9 C 258.6 17.8 255.3 14.1 250.6 11.9 C 246.7 10.1 242.3 10 167.5 10.1 C 104.4 10.1 87.9 10.3 85.5 11.4 Z' fill='%23000000' stroke='none'/%3E%3Cpath d='M 167.7 39.8 C 165.3 42.4 165.6 46.6 168.2 48.4 C 170.1 49.7 174.1 50 191.5 50 L 212.5 50 L 123.7 138.8 C 51.9 210.6 35 228 35 230.1 C 35 233.3 37.8 236 41.1 236 C 42.9 236 63.7 215.8 132.2 147.3 L 221 58.5 L 221 79.5 C 221 102.8 221.5 105 226.9 105 C 232.9 105 233 104.4 233 71.3 C 233 43.5 232.9 41.2 231.2 39.7 C 229.6 38.2 225.9 38 199.3 38 C 171.5 38 169.2 38.1 167.7 39.8 Z' fill='%23000000' stroke='none'/%3E%3Cpath d='M 15.6 159.3 C 13.1 160.7 10.8 163.2 9.3 165.9 C 7 170.3 7 170.4 7 210.1 C 7 235.8 7.4 250.9 8.1 252.7 C 9.5 256.5 13.8 261 17.7 262.6 C 20.3 263.7 29.2 264 60.8 264 C 100.6 264 100.7 264 105.1 261.7 C 107.8 260.2 110.3 257.9 111.7 255.4 C 113.9 251.7 114 250.4 114 229.4 C 114 213.3 113.7 207 112.8 205.8 C 110.6 203.1 107.5 202.8 104.7 205.1 L 102 207.1 L 102 228.5 C 102 248.7 101.9 250 100.1 251 C 98.8 251.6 84.4 252 60.2 252 C 24.8 252 22.2 251.9 20.7 250.2 C 19.2 248.5 19 244.3 19 210.6 C 19 186.5 19.4 172.2 20 170.9 C 21 169.1 22.3 169 42.5 169 L 63.9 169 L 65.9 166.3 C 68.2 163.5 67.9 160.4 65.2 158.2 C 64 157.3 57.7 157 41.6 157 C 20.6 157 19.3 157.1 15.6 159.3 Z' fill='%23000000' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
+  opacity: 0;
+  transition-delay: 0.5s;
+  transition: 0.5s;
+}
+
+.maximize:hover {
+  transition: 0.5s;
+  opacity: 1;
+  }
+
+.maximize:focus{opacity: 1;
+}
+
 .react-resizable {
   position: relative;
 }

panel/template/react/react.html

@@ -126,56 +126,160 @@
 
 <script type="text/babel">
 const divStyle = {borderRadius: '5px'};
+const ResponsiveGridLayout = ReactGridLayout.WidthProvider(ReactGridLayout.Responsive);
 
-const ResponsiveGridLayout = ReactGridLayout.WidthProvider(ReactGridLayout.Responsive)
-
-function resize_layout(obj, old_, new_, p, e, element) {
-  window.dispatchEvent(new Event("resize"))
-}
-
-function resize_layout_stop(obj, old_, new_, p, e, element) {
-  setTimeout(function(){
-    window.dispatchEvent(new Event("resize"))
-  }, 50);
-}
-
-function ResponsiveGrid(props) {
-    const layouts = {{layouts}};
-    return (
-        <ResponsiveGridLayout
-		  className={"layout"}
-          cols={ {{cols}} }
-          breakpoints={ {{breakpoints}} }
-          draggableHandle={".drag-handle"}
-          onResize={resize_layout}
-          onResizeStop={resize_layout_stop}
-		  draggableCancel={".bk-root"}
-          rowHeight={ {{rowHeight}} }
-          layouts={layouts}
-          {% if compact == "both" %}
-          compactType={"horizontal"}
-          {% elif compact == "horizontal" %}
-          verticalCompact={false}
-          compactType={"horizontal"}
-          {% elif compact is none %}
-          verticalCompact={false}
-          {% endif %}
-        >
-          {% set count = [] %}
-          {% for doc in docs %}{% for root in doc.roots %}{% if "main" in root.tags %}
-            <div key="{{count|length + 1 }}" style={divStyle} >
-			  <span className="drag-handle"></span>
-              {{ embed(root) | indent(4) | replace("class", "className") }}
-            </div>
-            {% set __ = count.append(1) %}
-          {% endif %}{% endfor %}{% endfor %}
-        </ResponsiveGridLayout>
-    );
-}
+
+class ResponsiveGrid extends React.Component {
+  constructor(props) {
+        super(props);
+        this.state= {
+            layouts: {{layouts}},
+            resizedWidgets: {},
+        };
+    }
+
+
+  resize_layout(resized_layouts) {
+        const { layouts, resizedWidgets } = this.state;
+
+        const newLayout = layouts;
+        newLayout['lg']=resized_layouts;
+        newLayout['md']=resized_layouts
+        // reinitilize all widgets maximized state to false if there is some kind of manual resizing event
+        Object.keys(resizedWidgets).map(function(key, index) {
+                                        resizedWidgets[key] = false;  });
+
+        this.setState({layouts:newLayout, });
+        window.dispatchEvent(new Event("resize"));
+    }
+
+
+  resize_layout_stop(resized_layouts) {
+        console.log(resized_layouts, window.innerWidth);
+        const { layouts, resizedWidgets } = this.state;
+
+        const newLayout = layouts;
+        newLayout['lg']=resized_layouts;
+        newLayout['md']=resized_layouts
+
+        var myObject = resizedWidgets;
+        Object.keys(myObject).map(function(key, index) {
+            myObject[key] = false;
+            });
+        console.log(myObject);
+
+        this.setState({layouts:newLayout, });
+        setTimeout(function(){
+            window.dispatchEvent(new Event("resize"));
+        }, 100);
+    }
+
+
+  toggleWidget(id){
+      const newState = {...this.state.resizedWidgets};
+      const maximized = typeof newState[id] === 'boolean' ? newState[id] : false;
+      newState[id] = !maximized;
+
+      this.setState({resizedWidgets: newState,}, () => {
+                    window.dispatchEvent(new Event("resize"));
+         });
+  }
+
+
+  getModifiedLayouts() {
+      const N_COLS = {{cols}}
+      const ROW_HEIGHT = {{rowHeight}}
+      const { layouts, resizedWidgets } = this.state;
+
+      const layout_LG = layouts.lg
+      const layout_MD = layouts.md
+
+      const height_header = 70
+      const margin_rgl = 10
+      const N_viewport_rows = parseInt((window.innerHeight-height_header)/(ROW_HEIGHT+margin_rgl))
+      const N_trues = Object.values(resizedWidgets).reduce((a, item) => a + item, 0)
+
+      const newLayouts_LG = layout_LG.map(layout => {
+                    const newLayout = { ...layout };
+
+                    if (N_trues > 0) {
+                      if (resizedWidgets[newLayout.i]) {
+                          console.log('int', parseInt(window.innerHeight/ROW_HEIGHT));
+                          newLayout.h = N_viewport_rows ;
+                          newLayout.w = N_COLS['lg'];
+                          newLayout.y= 0;
+                      }
+                      else {
+                          newLayout.y= 100
+                      };
+                    };
+                    return newLayout;
+                });
+
+      const newLayouts_MD = layout_MD.map(layout => {
+                    const newLayout = { ...layout };
+                    console.log('modified',newLayout);
+                    if (N_trues > 0) {
+                      if (resizedWidgets[newLayout.i]) {
+                          console.log('int', parseInt(window.innerHeight/ROW_HEIGHT));
+                          newLayout.h = N_viewport_rows ;
+                          newLayout.w = N_COLS['md'];
+                          newLayout.y= 0;
+                      }
+                      else {
+                          newLayout.y= 100
+                      };
+                    };
+                    return newLayout;
+                });
+
+      const newLayouts = {};
+      newLayouts['lg'] =  newLayouts_LG
+      newLayouts['md'] =  newLayouts_MD
+      return newLayouts
+
+    }
+
+
+  render() {
+    const modifiedLayouts = this.getModifiedLayouts();
+      return (
+          <ResponsiveGridLayout
+              className = {"layout"}
+              {...this.props}
+              cols = { {{cols}} }
+              breakpoints = { {{breakpoints}} }
+              draggableHandle = {".drag-handle"}
+              onResize = {this.resize_layout.bind(this)}
+              onResizeStop = {this.resize_layout_stop.bind(this)}
+              draggableCancel = {".bk-root"}
+              rowHeight = { {{rowHeight}} }
+              layouts = {modifiedLayouts}
+              verticalCompact = {true}
+              compactType = {"horizontal"}
+              >
+
+              {% set count = [] %}
+              {% for doc in docs %}{% for root in doc.roots %}{% if "main" in root.tags %}
+                <div key="{{count|length + 1 }}" style={divStyle} >
+                  <span className="drag-handle"></span>
+                  <span className="maximize"   onClick={() =>
+                        this.toggleWidget("{{count|length + 1 }}")}></span>
+                  {{ embed(root) | indent(4) | replace("class", "className") }}
+                </div>
+              {% set __ = count.append(1) %}
+              {% endif %}{% endfor %}{% endfor %}
+
+          </ResponsiveGridLayout>
+        );
+    };
+  }
 
 ReactDOM.render(<ResponsiveGrid />, document.getElementById('responsive-grid'))
+
 </script>
 
+
 {{ embed(roots.js_area) }}
 {{ embed(roots.location) }}