webui: Rewrite visualise page

This commit rewrites the visualise page to use React instead of
AngularJS. Besides the migration to React this simplified and cleans up
a lot of the existing code. Additionally it includes a few layout
changes on the page. These have two aims:
1) Make the page more pleasant to use for visitors of a database who are
   not interested in creating or modifying visualisations. They only
   want to see the preconfigured visualisations, select them, and see
   the plots. For them all the buttons should be mostly hidden.
2) Make creating, updating, and maintaining the publicly visible
   visualisations easier for the database owner. For this the owner
   needs more tools and a better overview for configuring
   visualisations.

Author: MKleusberg

.gitignore

@@ -63,11 +63,13 @@ webui/js/db-header.js
 webui/js/discussion-comments.js
 webui/js/discussion-create-mr.js
 webui/js/discussion-list.js
+webui/js/export-data.js
 webui/js/format.js
 webui/js/markdown-editor.js
 webui/js/profile-page.js
 webui/js/sql-terminal.js
 webui/js/user-page.js
+webui/js/visualisation-editor.js
 
 # Local secrets
 .env

common/postgresql.go

@@ -2483,8 +2483,8 @@ func GetUsernameFromEmail(email string) (userName, avatarURL string, err error)
 	return
 }
 
-// GetVisualisationParams returns a saved set of visualisation parameters
-func GetVisualisationParams(dbOwner, dbName, visName string) (params VisParamsV2, ok bool, err error) {
+// GetVisualisations returns the saved visualisations for a given database
+func GetVisualisations(dbOwner, dbName string) (visualisations map[string]VisParamsV2, err error) {
 	dbQuery := `
 		WITH u AS (
 			SELECT user_id
@@ -2496,44 +2496,7 @@ func GetVisualisationParams(dbOwner, dbName, visName string) (params VisParamsV2
 			WHERE db.user_id = u.user_id
 				AND db_name = $2
 		)
-		SELECT parameters
-		FROM vis_params as vis, u, d
-		WHERE vis.db_id = d.db_id
-			AND vis.user_id = u.user_id
-			AND vis.name = $3`
-	e := pdb.QueryRow(context.Background(), dbQuery, dbOwner, dbName, visName).Scan(&params)
-	if e != nil {
-		if errors.Is(e, pgx.ErrNoRows) {
-			// There weren't any saved parameters for this database visualisation
-			return
-		}
-
-		// A real database error occurred
-		err = e
-		log.Printf("Retrieving visualisation parameters for '%s/%s', visualisation '%s' failed: %v",
-			SanitiseLogString(dbOwner), SanitiseLogString(dbName), SanitiseLogString(visName), e)
-		return
-	}
-
-	// Parameters were successfully retrieved
-	ok = true
-	return
-}
-
-// GetVisualisations returns the list of saved visualisations for a given database
-func GetVisualisations(dbOwner, dbName string) (visNames []string, err error) {
-	dbQuery := `
-		WITH u AS (
-			SELECT user_id
-			FROM users
-			WHERE lower(user_name) = lower($1)
-		), d AS (
-			SELECT db.db_id
-			FROM sqlite_databases AS db, u
-			WHERE db.user_id = u.user_id
-				AND db_name = $2
-		)
-		SELECT name
+		SELECT name, parameters
 		FROM vis_params as vis, u, d
 		WHERE vis.db_id = d.db_id
 			AND vis.user_id = u.user_id
@@ -2552,14 +2515,17 @@ func GetVisualisations(dbOwner, dbName string) (visNames []string, err error) {
 	}
 	defer rows.Close()
 
-	var s string
+	visualisations = make(map[string]VisParamsV2)
 	for rows.Next() {
-		err = rows.Scan(&s)
+		var n string
+		var p VisParamsV2
+		err = rows.Scan(&n, &p)
 		if err != nil {
 			log.Printf("Error retrieving visualisation list: %v", err.Error())
 			return
 		}
-		visNames = append(visNames, s)
+
+		visualisations[n] = p
 	}
 	return
 }
@@ -5263,6 +5229,33 @@ func VisualisationDeleteParams(dbOwner, dbName, visName string) (err error) {
 	return
 }
 
+// VisualisationRename renames an existing saved visualisation
+func VisualisationRename(dbOwner, dbName, visName, visNewName string) (err error) {
+	dbQuery := `
+		WITH u AS (
+			SELECT user_id
+			FROM users
+			WHERE lower(user_name) = lower($1)
+		), d AS (
+			SELECT db.db_id
+			FROM sqlite_databases AS db, u
+			WHERE db.user_id = u.user_id
+				AND db_name = $2
+		)
+		UPDATE vis_params SET name = $4 WHERE user_id = (SELECT user_id FROM u) AND db_id = (SELECT db_id FROM d) AND name = $3`
+	commandTag, err := pdb.Exec(context.Background(), dbQuery, dbOwner, dbName, visName, visNewName)
+	if err != nil {
+		log.Printf("Renaming visualisation '%s' for database '%s/%s' failed: %v", SanitiseLogString(visName),
+			SanitiseLogString(dbOwner), SanitiseLogString(dbName), err)
+		return err
+	}
+	if numRows := commandTag.RowsAffected(); numRows != 1 {
+		log.Printf("Wrong number of rows (%d) affected while renaming visualisation '%s' for database '%s/%s'",
+			numRows, SanitiseLogString(visName), SanitiseLogString(dbOwner), SanitiseLogString(dbName))
+	}
+	return
+}
+
 // VisualisationSaveData saves visualisation result data for later retrieval
 func VisualisationSaveData(dbOwner, dbName, commitID, hash string, visData []VisRowV1) (err error) {
 	var commandTag pgconn.CommandTag

cypress/e2e/1-webui/auth0_dialog.cy.js

@@ -105,7 +105,7 @@ describe('ensure auth0 dialog is available on all pages', () => {
 
   it('visualise page', () => {
     cy.visit('vis/default/Assembly Election 2017.sqlite')
-    cy.get('[data-cy="usersqltext"]')
+    cy.title().should('include', 'Visualisations')
     cy.get('[data-cy="loginlnk"]').click()
     cy.get('.auth0-lock-name').should('contain.text', 'Auth0')
   })

cypress/e2e/1-webui/bugs/002-visualisation-base64url-padding-bug.cy.js

@@ -7,15 +7,16 @@ describe('002-visualisation-base64url-padding-bug', () => {
   // Run a SQL visualisation which used to trigger a base64url encoding padding bug
   it('run a visualisation query whose base64url encoding does not have a padding character', () => {
     cy.visit('/vis/default/Assembly Election 2017 with view.sqlite')
+    cy.get('[data-cy="newvisbtn"]').click()
     cy.get('[data-cy="sqltab"]').click()
-    cy.get('[data-cy="usersqltext"]').type('{selectall}{backspace}').type(
+    cy.get('[name="usersql"]').type('{selectall}{backspace}').type(
       'SELECT Constituency_Name, Constituency_Number\n' +
       'FROM Constituency_Turnout_Information\n' +
       'WHERE Constituency_Number > 0\n' +
       'ORDER BY Constituency_Name ASC\n' +
       'LIMIT 10')
     cy.get('[data-cy="runsqlbtn"]').click()
     cy.wait(150) // Needs a bit of a delay here, otherwise any error status message may be missed
-    cy.get('[data-cy="statusmsg"]').should('contain.text', 'SQL query ran successfully')
+    cy.get('[data-cy="statusmsg"]').should('contain.text', 'successfully')
   })
 })