diff --git a/src/components/guide-steps.jsx b/src/components/guide-steps.jsx index bb57e1b7..90b2bf0d 100644 --- a/src/components/guide-steps.jsx +++ b/src/components/guide-steps.jsx @@ -6,7 +6,7 @@ const steps = [

Welcome to catwalk!

- catwalk lets you explore your data model to gain + Catwalk lets you explore your data model to gain insights about fields, associations and how interactions with the data impacts the model.

@@ -31,7 +31,7 @@ const steps = [ {' '} engine_url {' '} - 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.

), @@ -41,10 +41,9 @@ const steps = [ { content: (
-

- The highlighted area represents a table in the data model. -

+

The highlighted area represents a table in the data model.

On the top we can see the table name, together with the number of rows in the table.

+

Clicking the table header will reorder the tables, the clicked table will be sorted as the leftmost table.

), placement: 'right-start', @@ -58,12 +57,26 @@ const steps = [ Fields, the data-carrying entities in the data model, are represented with a box like this.

- 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

+ X of Y +

or

+ X of Y(Z)

- 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 + {' '} + 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.

), @@ -112,7 +125,7 @@ const steps = [

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.

Go ahead, click the field and make a selection! @@ -142,7 +155,15 @@ const steps = [ 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: ( +

+

+ This shows the association between two fields, with basic frequency information on each end of the association line (1, 0/1 or *). +

+

1 - a row in the associated table matches exact one value in this table.

+

0/1 - rows in the associated table have zero or one matching row in this table.

+

* - a single value may identify several rows in the associated table.

+
), target: '.association-to-right-b', title: 'Associations', }, @@ -186,7 +207,7 @@ const steps = [

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.

Add another column by clicking the plus button.

diff --git a/src/components/guide.jsx b/src/components/guide.jsx index 4d0c83e4..db28f7a8 100644 --- a/src/components/guide.jsx +++ b/src/components/guide.jsx @@ -100,6 +100,12 @@ const Guide = forwardRef((props, ref) => { options: { primaryColor: '#398ab5', }, + buttonClose: { + display: 'none', + }, + buttonSkip: { + color: '#398ab5', + }, }} steps={steps} />