Various fixes in the guide. (#149)

Improved the guide according to feedback from the manual test session.

package.json

@@ -15,7 +15,7 @@
     "test:unit": "aw --glob test/unit/*.spec.js --src src/logic/*.js --coverage",
     "test:comp": "aw -c ./test/comp/aw.config.js && nyc report -t ./coverage/.nyc_output -r lcov -r text",
     "test:e2e": "aw puppeteer -c ./test/e2e/aw.config.js",
-    "test:e2e:local": "cross-env CI=true aw puppeteer -c ./test/e2e/aw.config.local.js",
+    "test:e2e:dev": "cross-env CI=true aw puppeteer -c ./test/e2e/aw.config.local.js",
     "coverage:html": "nyc report -t ./coverage/.nyc_output -r html",
     "lint": "eslint --ext .js,.jsx . && stylelint src/.",
     "lint:fix": "eslint --ext .js,.jsx --fix . && stylelint --fix src/."

src/components/app.jsx

@@ -58,7 +58,7 @@ export default function App() {
         <Guide ref={guideRef} />
         <TopBar app={app} appLayout={appLayout} startGuide={() => guideRef.current.startGuideFunc()} />
         <Model app={app} appLayout={appLayout} />
-        <Cubes app={app} />
+        <Cubes app={app} closeOnClickOutside={() => !guideRef.current.isGuideRunning()} />
       </div>
       {reloadSplasher}
     </AppContext.Provider>

src/components/cube-column-chooser.jsx

@@ -17,14 +17,15 @@ function findAttribute(event, attrName) {
 }
 
 export default function CubeColumnChooser({
-  alignTo, arrowStyle, chooseColumn, selectableColumns,
+  alignTo, arrowStyle, chooseColumn, selectableColumns, closeOnClickOutside,
 }) {
   const [filter, setFilter] = useState('');
   const inputRef = useRef(null);
   const selfRef = useRef(null);
-
-  useClickOutside(selfRef, true, () => {
-    chooseColumn(null);
+  useClickOutside(selfRef, closeOnClickOutside(), () => {
+    if (closeOnClickOutside()) {
+      chooseColumn(null);
+    }
   });
 
   const filteredColumnsOptions = selectableColumns.filter(item => item.title.toLowerCase().indexOf(filter) >= 0);
@@ -75,8 +76,10 @@ CubeColumnChooser.propTypes = {
   arrowStyle: PropTypes.string,
   chooseColumn: PropTypes.func.isRequired,
   selectableColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  closeOnClickOutside: PropTypes.func,
 };
 
 CubeColumnChooser.defaultProps = {
   arrowStyle: '',
+  closeOnClickOutside: () => true,
 };

src/components/cube.jsx

@@ -7,7 +7,7 @@ import HypercubeTable from './hypercube-table';
 
 import './cube.pcss';
 
-export default function Cube({ app, tableData: { initialColumns } }) {
+export default function Cube({ app, tableData: { initialColumns }, closeOnClickOutside }) {
   const selectableColumns = useColumnOptions(app);
   const [columns, setColumns] = useState(initialColumns);
   const currentHeader = useRef(null);
@@ -55,8 +55,7 @@ export default function Cube({ app, tableData: { initialColumns } }) {
     toggleAdd(event);
   }
 
-  const popup = addOpen.current ? <CubeColumnChooser alignTo={currentHeader.current} selectableColumns={selectableColumns} chooseColumn={addColumn} /> : null;
-
+  const popup = addOpen.current ? <CubeColumnChooser alignTo={currentHeader.current} selectableColumns={selectableColumns} chooseColumn={addColumn} closeOnClickOutside={closeOnClickOutside} /> : null;
 
   const measures = columns.filter(column => column.type === 'measure');
   const dimensions = columns.filter(column => column.type === 'dimension' || column.type === 'field');
@@ -78,7 +77,12 @@ export default function Cube({ app, tableData: { initialColumns } }) {
   );
 }
 
+Cube.defaultProps = {
+  closeOnClickOutside: () => true,
+};
+
 Cube.propTypes = {
   app: PropTypes.object.isRequired,
   tableData: PropTypes.object.isRequired,
+  closeOnClickOutside: PropTypes.func,
 };

src/components/cubes.jsx

@@ -9,7 +9,7 @@ import CubeColumnChooser from './cube-column-chooser';
 
 import './cubes.pcss';
 
-export function Cubes({ app }) {
+export function Cubes({ app, closeOnClickOutside }) {
   const [count, setCount] = useState(1);
   const [cubeList, setCubeList] = useState([]);
   const [, forceUpdate] = useState(null);
@@ -42,14 +42,14 @@ export function Cubes({ app }) {
     forceUpdate();
   }
 
-  const popup = addOpen.current ? <CubeColumnChooser arrowStyle="arrowRight" alignTo={addButtonRef.current} selectableColumns={selectableColumns} chooseColumn={column => addCube(column)} /> : null;
+  const popup = addOpen.current ? <CubeColumnChooser arrowStyle="arrowRight" alignTo={addButtonRef.current} selectableColumns={selectableColumns} chooseColumn={column => addCube(column)} closeOnClickOutside={closeOnClickOutside} /> : null;
   const cubeDivs = cubeList.map(cube => (
     <div key={cube.id} className="card">
       <div className="top-bar">
         <div className="title">HYPERCUBE</div>
         <SVGInline {...closeButton} onClick={() => removeCube(cube.id)} />
       </div>
-      <Cube app={app} tableData={cube} />
+      <Cube app={app} tableData={cube} closeOnClickOutside={closeOnClickOutside} />
     </div>
   ));
   return (
@@ -67,6 +67,7 @@ export function Cubes({ app }) {
 
 Cubes.propTypes = {
   app: PropTypes.object.isRequired,
+  closeOnClickOutside: PropTypes.func.isRequired,
 };
 
 export default Cubes;

src/components/guide-steps.jsx

@@ -6,7 +6,7 @@ const steps = [
       <div>
         <h2>Welcome to catwalk!</h2>
         <p>
-          catwalk lets you explore your data model to gain
+          With catwalk it is possible to explore your data model to gain
           insights about fields, associations and how interactions
           with the data impacts the model.
         </p>
@@ -31,7 +31,7 @@ const steps = [
           {' '}
           <code>engine_url</code>
           {' '}
-          points to the app containing the data model. Change this to explore another data model.
+          points to the engine and the app containing the data model. Change this to explore another data model.
         </p>
       </div>
     ),
@@ -41,10 +41,9 @@ const steps = [
   {
     content: (
       <div>
-        <p>
-          The highlighted area represents a table in the data model.
-        </p>
+        <p>The highlighted area represents a table in the data model.</p>
         <p>On the top we can see the table name, together with the number of rows in the table.</p>
+        <p>Clicking the table header will reorder the tables, the clicked table will be sorted as the leftmost table.</p>
       </div>
     ),
     placement: 'right-start',
@@ -58,17 +57,31 @@ const steps = [
           Fields, the data-carrying entities in the data model, are represented with a box like this.
         </p>
         <p>
-          The field name and the number of field values are visible.
+          The field name and the number of field values are visible. The number of field values are
+          presented in the form of
         </p>
+        <code>X of Y</code>
+        <p> or </p>
+        <code>X of Y(Z)</code>
         <p>
-          The number of field values are presented in the form of X of Y(Z), where X is the number
-          of field values valid in the current selection, Y is the values in total and Z is the number
-          of values present in this table.
+          where
+          {' '}
+          <code>X</code>
+          {' '}
+          is the number of field values valid in the current selection,
+          {' '}
+          <code>Y</code>
+          {' '}
+          is the values in total and
+          {' '}
+          <code>Z</code>
+          {' '}
+          is the number of values present in this table.
         </p>
       </div>
     ),
     placement: 'right',
-    target: '.vertcell.keycell',
+    target: '.table-field',
     title: 'Field',
   },
   {
@@ -112,7 +125,7 @@ const steps = [
       <div>
         <p>
           The fields are clickable. When clicking on a field, it unfolds and displays the field values with the possibility to make
-          selections. Selections can be helpful when trying to figure out the data model, and to find errors in the data model.
+          selections. Selections can be helpful when exploring the data structure in the app, to see how fields and tables are related.
         </p>
         <p>
           Go ahead, click the field and make a selection!
@@ -121,7 +134,7 @@ const steps = [
     ),
     spotlightClicks: true,
     placement: 'right',
-    target: '.vertcell.keycell',
+    target: '.table-field',
     title: 'Field',
   },
   {
@@ -136,13 +149,38 @@ const steps = [
         </p>
       </div>
     ),
-    spotlightClicks: true,
     placement: 'bottom',
     target: '.selection-field',
     title: 'Selections',
   },
   {
-    content: 'This shows the association between two fields, with basic frequency information on each end of the association line (*, 1 or 0/1).',
+    content: (
+      <div>
+        <p>
+          This shows the association between two fields, with basic frequency information on each end of the association line (
+          <code>1, 0/1</code>
+          {' '}
+          or
+          {' '}
+          <code>*</code>
+          ).
+        </p>
+        <p>
+          <code>1</code>
+          {' '}
+          - a row in the associated table matches exact one value in this table.
+        </p>
+        <p>
+          <code>0/1</code>
+          {' '}
+          - rows in the associated table have zero or one matching row in this table.
+        </p>
+        <p>
+          <code>*</code>
+          {' '}
+          - a single value may identify several rows in the associated table.
+        </p>
+      </div>),
     target: '.association-to-right-b',
     title: 'Associations',
   },
@@ -161,8 +199,7 @@ const steps = [
       </div>
     ),
     spotlightClicks: true,
-    disableOverlayClose: true,
-    hideFooter: true,
+    placement: 'left-end',
     target: '.add-button',
     title: 'Hypercube builder',
   },
@@ -174,8 +211,6 @@ const steps = [
         <p>Click on an entity to select it.</p>
       </div>
     ),
-    disableOverlayClose: true,
-    hideFooter: true,
     spotlightClicks: true,
     target: '.cube-column-chooser',
     title: 'Hypercube builder',
@@ -186,32 +221,31 @@ const steps = [
       <div>
         <p>
           A cube is created with the selected entity as the first column. All the entity values are shown
-          and it is possible to spot any errande values. If selections are applied, only the selected values
+          and it is possible to spot any bad values. If selections are applied, only the selected values
           are displayed.
         </p>
         <p>Add another column by clicking the plus button.</p>
       </div>
     ),
-    disableOverlayClose: true,
-    hideFooter: true,
     spotlightClicks: true,
-    target: '.card',
+    hideBackButton: true,
+    target: '.card:last-child',
     title: 'Hypercube builder',
   },
   {
     step: 'selectAnotherEntity',
     content: 'Click an entity to add it as a column in the cube.',
     placement: 'left',
-    disableOverlayClose: true,
-    hideFooter: true,
     spotlightClicks: true,
+    hideBackButton: true,
     target: '.cube-column-chooser',
     title: 'Hypercube builder',
   },
   {
     step: 'cubeFinished',
     content: 'More columns can be added to the cube. To close the cube, just click the button in the upper corner.',
-    target: '.card',
+    hideBackButton: true,
+    target: '.card:last-child',
     title: 'Hypercube builder',
   },
   {