Create data visualizations for template queries (#103)

This commit adds the feature for generating visualizations for template
queries. There are now two available sections to run queries from:

1. Overview
2. Templates

Templates are pre-filtered by the selected class, and can be further
filtered by selecting a category. Each category displays the total count
of its templates. Note that some templates may be in more than one
category, so tallying the category counts may not match the total count.
The `Show All` category does display the correct total though.

Currently the constraints within the templates fetch their values each
time the popup is opened, and do not cache them when the components
unmount. The same is true for fetching templates. This will be addressed
in another story.

Closes: #102 

Squashed commits:
* Allow switching between default and template views
* Rename "supervisor" to "appManager"
* Lift the default constraints into the app manager component
* Lift switching app views to the app manager component
* Display when no queries have been executed
* Render category tags
* Place category tags in an accordion
* Display just the "Run Query" button for templates
* Filter template constraints per class
* Filter templates by selected categories
* Remove categories with no available templates
* Display the count for each category
* Display only the tags for the selected class view
* Render checkbox items for ONE OF constraints
* Update the template query with the newly selected values
* Run a query and update visualizations
* Fetch values for a template constraint
* Display a tag above a constraint widget for every selected value
* Display the operation next to constraint widget tags
* Display success icon if the template query had been executed
* Display the description when hovering over the info icon
* Disable the QueryController for template view
* Display notification when no constraint items were received
* Extract categories to prevent Template component re-renders
* Update the categories when changing classes

Author: JM-Mendez

.storybook/main.js

@@ -17,11 +17,13 @@ module.exports = {
 		},
 	],
 	stories: [
-		'../README.story.mdx',
-		'../docs/**/*.story.mdx',
-		'../src/**/*.story.jsx',
-		'../docs/**/*.stories.mdx',
-		'../src/**/*.stories.jsx',
+		// Todo: Re-enable these after fixing them
+		// '../README.story.mdx',
+		// '../docs/**/*.story.mdx',
+		// '../docs/**/*.stories.mdx',
+		// '../src/**/*.story.jsx',
+		// '../src/**/*.stories.jsx',
+		'../src/**/TemplateConstraint.stories.jsx',
 	],
 	webpackFinal: async (config, { configType }) => {
 		const { hasFoundAny, matches } = getLoaders(config, loaderByName('babel-loader'))
@@ -47,6 +49,9 @@ module.exports = {
 			)
 		}
 
+		// Allow absolute imports
+		config.resolve.modules = [...(config.resolve.modules || []), path.resolve(__dirname, '..')]
+
 		return config
 	},
 }

src/actionConstants.js

@@ -7,8 +7,8 @@ export const FETCH_INITIAL_SUMMARY = 'global/fetch/initial_summary'
 
 export const LOCK_ALL_CONSTRAINTS = 'global/contraint/limit_reached'
 export const RESET_ALL_CONSTRAINTS = 'global/constraint/remove_all'
-export const APPLY_CONSTRAINT_TO_QUERY = 'global/constraint/addQuery'
-export const DELETE_CONSTRAINT_FROM_QUERY = 'global/constraint/deleteQuery'
+export const APPLY_OVERVIEW_CONSTRAINT_TO_QUERY = 'global/constraint/addToQuery'
+export const DELETE_OVERVIEW_CONSTRAINT_FROM_QUERY = 'global/constraint/deleteQuery'
 export const UNSET_CONSTRAINT = 'global/constraint/unset'
 
 export const SET_AVAILABLE_COLUMNS = 'global/table/set_columns'
@@ -24,22 +24,29 @@ export const ADD_QUERY_CONSTRAINT = 'queryController/constraint/add'
  */
 export const ADD_CONSTRAINT = 'constraintFactory/add'
 export const REMOVE_CONSTRAINT = 'constraintFactory/remove'
-export const APPLY_CONSTRAINT = 'constraintFactory/apply'
+export const APPLY_DATA_BROWSER_CONSTRAINT = 'constraintFactory/apply'
 export const RESET_LOCAL_CONSTRAINT = 'constraintFactory/reset'
 export const FETCH_CONSTRAINT_ITEMS = 'constraintFactory/init'
+export const ADD_TEMPLATE_CONSTRAINT = 'constraint/template/add'
+export const TEMPLATE_CONSTRAINT_UPDATED = 'constraint/template/updated'
 
 /**
  * Pie Chart
  */
 export const SET_INITIAL_ORGANISMS = 'pieChart/fetch/initial'
 
 /**
- * Supervisor
+ * AppManager
  */
-export const CHANGE_MINE = 'supervisor/mine/change'
-export const CHANGE_CLASS = 'supervisor/class/change'
+export const CHANGE_MINE = 'appManager/mine/change'
+export const CHANGE_CLASS = 'appManager/class/change'
+export const CHANGE_CONSTRAINT_VIEW = 'appManager/view/change'
+export const TOGGLE_CATEGORY_VISIBILITY = 'appManager/category/visibility'
+export const TOGGLE_VIEW_IS_LOADING = 'appManager/view/isLoading'
 
 /**
  * Table
  */
 export const CHANGE_PAGE = 'table/page/change'
+
+export const UPDATE_TEMPLATE_QUERIES = 'templateView/templates/update'

src/blueprintIcons.js

@@ -7,6 +7,7 @@ exports.usedIcons = [
 	IconNames.UNLOCK,
 	IconNames.LOCK,
 	IconNames.CARET_DOWN,
+	IconNames.CARET_RIGHT,
 	IconNames.ERROR,
 	IconNames.FLASH,
 	IconNames.MOON,
@@ -21,4 +22,5 @@ exports.usedIcons = [
 	IconNames.WARNING_SIGN,
 	IconNames.REMOVE,
 	IconNames.DELETE,
+	IconNames.INFO_SIGN,
 ]

src/components/App.jsx

@@ -4,60 +4,186 @@ import '@emotion/core'
 import { assign } from '@xstate/immer'
 import { enableMapSet } from 'immer'
 import React, { useEffect } from 'react'
-import { CHANGE_CLASS, CHANGE_MINE, FETCH_INITIAL_SUMMARY } from 'src/actionConstants'
+import {
+	CHANGE_CLASS,
+	CHANGE_CONSTRAINT_VIEW,
+	CHANGE_MINE,
+	FETCH_INITIAL_SUMMARY,
+	TOGGLE_CATEGORY_VISIBILITY,
+	TOGGLE_VIEW_IS_LOADING,
+	UPDATE_TEMPLATE_QUERIES,
+} from 'src/actionConstants'
 import { fetchClasses, fetchInstances } from 'src/fetchSummary'
-import { sendToBus, SupervisorServiceContext, useMachineBus } from 'src/machineBus'
-import { Machine } from 'xstate'
+import { AppManagerServiceContext, sendToBus, useMachineBus } from 'src/machineBus'
+import { forwardTo, Machine } from 'xstate'
 
 import { ConstraintSection } from './Layout/ConstraintSection'
 import { ChartSection, TableSection } from './Layout/DataVizSection'
 import { Header } from './Layout/Header'
+import { templateViewMachine } from './templateViewMachine'
 
 enableMapSet()
 
-const isProduction = process.env.NODE_ENV === 'production'
+// Todo: Change this after fixing biotestmine dev environment
+const isProduction = true
 
-const supervisorMachine = Machine(
+/** @type {import('../types').ConstraintConfig[]} */
+const defaultQueries = [
 	{
-		id: 'Supervisor',
+		type: 'checkbox',
+		name: 'Organism',
+		label: 'Or',
+		path: 'organism.shortName',
+		op: 'ONE OF',
+		valuesQuery: {
+			select: ['primaryIdentifier'],
+			model: {
+				name: 'genomic',
+			},
+			where: [],
+		},
+	},
+	{
+		type: 'select',
+		name: 'Pathway Name',
+		label: 'Pn',
+		path: 'pathways.name',
+		op: 'ONE OF',
+		valuesQuery: {
+			select: ['pathways.name', 'primaryIdentifier'],
+			model: {
+				name: 'genomic',
+			},
+			orderBy: [
+				{
+					path: 'pathways.name',
+					direction: 'ASC',
+				},
+			],
+		},
+	},
+	{
+		type: 'select',
+		name: 'GO Annotation',
+		label: 'GA',
+		path: 'goAnnotation.ontologyTerm.name',
+		op: 'ONE OF',
+		valuesQuery: {
+			select: ['goAnnotation.ontologyTerm.name', 'primaryIdentifier'],
+			model: {
+				name: 'genomic',
+			},
+			orderBy: [
+				{
+					path: 'Gene.goAnnotation.ontologyTerm.name',
+					direction: 'ASC',
+				},
+			],
+		},
+	},
+]
+
+const appManagerMachine = Machine(
+	{
+		id: 'AppManager',
 		initial: 'loading',
 		context: {
+			appView: 'defaultView',
 			classView: 'Gene',
 			intermines: [],
 			modelClasses: [],
+			showAllLabel: 'Show All',
+			possibleQueries: defaultQueries,
+			categories: {},
+			viewIsLoading: false,
 			selectedMine: {
 				name: isProduction ? 'HumanMine' : 'biotestmine',
 				rootUrl: isProduction
 					? 'https://www.humanmine.org/humanmine'
 					: 'http://localhost:9999/biotestmine',
 			},
 		},
+		on: {
+			[CHANGE_MINE]: { target: 'loading', actions: 'changeMine' },
+			[CHANGE_CLASS]: { actions: ['changeClass'] },
+			[UPDATE_TEMPLATE_QUERIES]: { actions: 'updateTemplateQueries' },
+			[TOGGLE_VIEW_IS_LOADING]: { actions: 'toggleViewIsLoading' },
+			[TOGGLE_CATEGORY_VISIBILITY]: { actions: 'forwardToTemplateView' },
+			[CHANGE_CONSTRAINT_VIEW]: [
+				{ target: 'defaultView', cond: 'isDefaultView' },
+				{ target: 'templateView', cond: 'isTemplateView' },
+				{ target: 'invalidAppView' },
+			],
+		},
 		states: {
 			loading: {
+				on: {
+					[CHANGE_CLASS]: { actions: 'changeClass' },
+				},
 				invoke: {
 					id: 'fetchMines',
 					src: 'fetchMinesAndClasses',
 					onDone: {
-						target: 'idle',
+						target: 'defaultView',
 						actions: 'setIntermines',
 					},
 					onError: {
-						target: 'idle',
+						target: 'defaultView',
 						actions: (ctx, event) =>
 							console.error('FETCH: could not retrieve intermines', { ctx, event }),
 					},
 				},
 			},
-			idle: {
+			defaultView: {
+				entry: ['setBrowserView', 'setPossibleOverviewQueries'],
 				on: {
-					[CHANGE_MINE]: { target: 'loading', actions: 'changeMine' },
 					[CHANGE_CLASS]: { actions: 'changeClass' },
 				},
 			},
+			templateView: {
+				entry: ['setTemplateView', 'clearPossibleQueries'],
+				on: {
+					[CHANGE_CLASS]: { actions: ['changeClass', 'forwardToTemplateView'] },
+				},
+				invoke: {
+					id: 'templateView',
+					src: templateViewMachine,
+					data: {
+						// Hack until xstate v5 introduces shallow merging
+						...templateViewMachine.context,
+						classView: (ctx) => ctx.classView,
+						showAllLabel: (ctx) => ctx.showAllLabel,
+						rootUrl: (ctx) => ctx.selectedMine.rootUrl,
+					},
+				},
+			},
+			invalidAppView: {},
 		},
 	},
 	{
 		actions: {
+			forwardToTemplateView: forwardTo('templateView'),
+			// @ts-ignore
+			toggleViewIsLoading: assign((ctx, { isLoading }) => {
+				ctx.viewIsLoading = isLoading
+			}),
+			// @ts-ignore
+			updateTemplateQueries: assign((ctx, { queries, categories }) => {
+				ctx.possibleQueries = queries
+				ctx.categories = categories
+			}),
+			setTemplateView: assign((ctx) => {
+				ctx.appView = 'templateView'
+			}),
+			clearPossibleQueries: assign((ctx) => {
+				ctx.possibleQueries = []
+			}),
+			setPossibleOverviewQueries: assign((ctx) => {
+				ctx.possibleQueries = defaultQueries
+			}),
+			setBrowserView: assign((ctx) => {
+				ctx.appView = 'defaultView'
+			}),
 			// @ts-ignore
 			changeMine: assign((ctx, { newMine }) => {
 				ctx.selectedMine = ctx.intermines.find((mine) => mine.name === newMine)
@@ -76,8 +202,22 @@ const supervisorMachine = Machine(
 					.map((cl) => ({ displayName: cl.displayName, name: cl.name }))
 			}),
 		},
+		guards: {
+			// @ts-ignore
+			isDefaultView: (_, { newTabId }) => {
+				return newTabId === 'defaultView'
+			},
+			// @ts-ignore
+			isTemplateView: (_, { newTabId }) => {
+				return newTabId === 'templateView'
+			},
+			// @ts-ignore
+			showAllCategories: (ctx, { tagName }) => {
+				return tagName === ctx.showAllLabel
+			},
+		},
 		services: {
-			fetchMinesAndClasses: async (ctx, event) => {
+			fetchMinesAndClasses: async (ctx) => {
 				let instances
 				let modelClasses
 
@@ -109,27 +249,52 @@ const supervisorMachine = Machine(
 )
 
 export const App = () => {
-	const [state, send] = useMachineBus(supervisorMachine)
+	const [state, send] = useMachineBus(appManagerMachine)
+
+	const {
+		appView,
+		classView,
+		possibleQueries,
+		categories,
+		selectedMine,
+		showAllLabel,
+		viewIsLoading,
+	} = state.context
 
-	const { classView, selectedMine } = state.context
 	const rootUrl = selectedMine.rootUrl
 
 	useEffect(() => {
-		sendToBus({ type: FETCH_INITIAL_SUMMARY, globalConfig: { rootUrl, classView } })
-	}, [rootUrl, classView])
+		if (state.matches('defaultView')) {
+			sendToBus({ type: FETCH_INITIAL_SUMMARY, globalConfig: { rootUrl, classView } })
+		}
+	}, [rootUrl, classView, state])
+
+	const toggleCategory = ({ isVisible, tagName }) => {
+		send({ type: TOGGLE_CATEGORY_VISIBILITY, isVisible, tagName })
+	}
 
 	return (
 		<div className="light-theme">
-			<SupervisorServiceContext.Provider value={{ state, send }}>
+			<AppManagerServiceContext.Provider value={{ state, send }}>
 				<Header />
-			</SupervisorServiceContext.Provider>
+			</AppManagerServiceContext.Provider>
 			<main
 				css={{
 					display: 'grid',
 					gridTemplateColumns: '230px 1fr',
 				}}
 			>
-				<ConstraintSection />
+				<ConstraintSection
+					queries={possibleQueries}
+					view={appView}
+					classCategoryTags={Object.values(categories)}
+					isLoading={viewIsLoading}
+					toggleCategory={toggleCategory}
+					showAllLabel={showAllLabel}
+					classView={classView}
+					rootUrl={rootUrl}
+					showAll={categories[showAllLabel]?.isVisible ?? true}
+				/>
 				<section
 					css={{
 						padding: '10px 30px 0',

src/components/Constraints/CheckboxPopup.jsx

@@ -10,7 +10,7 @@ export const CheckboxPopup = ({ nonIdealTitle = undefined, nonIdealDescription =
 
 	const { availableValues, selectedValues } = state?.context
 
-	if (availableValues.length === 0) {
+	if (availableValues?.length === 0) {
 		return <NoValuesProvided title={nonIdealTitle} description={nonIdealDescription} />
 	}
 
@@ -25,11 +25,12 @@ export const CheckboxPopup = ({ nonIdealTitle = undefined, nonIdealDescription =
 	return (
 		<div>
 			<Label className="sr-only">Select organisms to set constraints</Label>
-			{availableValues.map((value) => {
+			{availableValues?.map((value) => {
+				const label = value.count ? `${value.item} (${value.count})` : `${value.item}`
 				return (
 					<Checkbox
 						key={value.item}
-						label={`${value.item} (${value.count})`}
+						label={label}
 						checked={selectedValues.some((name) => name === value.item)}
 						onChange={onChangeHandler(value.item)}
 					/>