Mobile experience improvements (#4694)

* Allow touch action on dashboard grid

* Deactivate touch when resizing widgets

* Disable touch interactions on Plotly

* Update Plotly and use dragmode: false

* Remove autoFocus from ItemsList search

* Fix spacing for queries and dashboard favorites

* Make sure admin pages don't go over 100% width

client/app/components/admin/layout.less

@@ -1,4 +1,6 @@
 .admin-page-layout {
+  max-width: 100%;
+
   &-tabs.ant-tabs {
     > .ant-tabs-bar {
       margin: 0;

client/app/components/dashboards/dashboard-grid.less

@@ -126,6 +126,12 @@
 
 // react-grid-layout overrides
 .react-grid-item {
+  touch-action: initial !important; // react-draggable disables touch by default
+
+  &.react-draggable {
+    touch-action: none !important;
+  }
+
   // placeholder color
   &.react-grid-placeholder {
     border-radius: 3px;

client/app/components/items-list/components/Sidebar.jsx

@@ -19,7 +19,6 @@ export function SearchInput({ placeholder, value, showIcon, onChange }) {
         placeholder={placeholder}
         defaultValue={value}
         onChange={event => onChange(event.target.value)}
-        autoFocus
       />
     </div>
   );

client/app/pages/home/Home.jsx

@@ -14,6 +14,8 @@ import notification from "@/services/notification";
 import { Dashboard } from "@/services/dashboard";
 import { Query } from "@/services/query";
 
+import "./Home.less";
+
 function DeprecatedEmbedFeatureAlert() {
   return (
     <Alert
@@ -109,8 +111,8 @@ function DashboardAndQueryFavoritesList() {
   return (
     <div className="tile">
       <div className="t-body tb-padding">
-        <div className="row">
-          <div className="col-sm-6">
+        <div className="row home-favorites-list">
+          <div className="col-sm-6 m-t-20">
             <FavoriteList
               title="Favorite Dashboards"
               resource={Dashboard}
@@ -125,7 +127,7 @@ function DashboardAndQueryFavoritesList() {
               }
             />
           </div>
-          <div className="col-sm-6">
+          <div className="col-sm-6 m-t-20">
             <FavoriteList
               title="Favorite Queries"
               resource={Query}

client/app/pages/home/Home.less

@@ -0,0 +1,3 @@
+.home-favorites-list {
+  margin-top: -20px;
+}

client/app/visualizations/chart/Renderer/PlotlyChart.jsx

@@ -1,5 +1,6 @@
 import { isArray, isObject } from "lodash";
 import React, { useState, useEffect, useContext } from "react";
+import useMedia from "use-media";
 import { ErrorBoundaryContext } from "@/components/ErrorBoundary";
 import { RendererPropTypes } from "@/visualizations/prop-types";
 import resizeObserver from "@/services/resizeObserver";
@@ -20,6 +21,7 @@ function catchErrors(func, errorHandler) {
 export default function PlotlyChart({ options, data }) {
   const [container, setContainer] = useState(null);
   const errorHandler = useContext(ErrorBoundaryContext);
+  const isMobile = useMedia({ maxWidth: 768 });
 
   useEffect(
     catchErrors(() => {
@@ -28,7 +30,7 @@ export default function PlotlyChart({ options, data }) {
 
         const chartData = getChartData(data.rows, options);
         const plotlyData = prepareData(chartData, options);
-        const plotlyLayout = prepareLayout(container, options, plotlyData);
+        const plotlyLayout = { ...prepareLayout(container, options, plotlyData), dragmode: !isMobile ? "zoom" : false };
 
         // It will auto-purge previous graph
         Plotly.newPlot(container, plotlyData, plotlyLayout, plotlyOptions).then(
@@ -58,7 +60,7 @@ export default function PlotlyChart({ options, data }) {
         return unwatch;
       }
     }, errorHandler),
-    [options, data, container]
+    [options, data, container, isMobile]
   );
 
   // Cleanup when component destroyed

package.json

@@ -65,7 +65,7 @@
     "mustache": "^2.3.0",
     "numeral": "^2.0.6",
     "pace-progress": "git+https://github.com/getredash/pace.git",
-    "plotly.js": "1.41.3",
+    "plotly.js": "1.43.2",
     "prop-types": "^15.6.1",
     "query-string": "^6.9.0",
     "react": "^16.8.3",