Merge pull request #549 from inab/participant-metrics

Participant metrics

components/Challenges/ChallengeParticipantMetricsTable.vue

@@ -0,0 +1,63 @@
+<template>
+	<div>
+		<v-data-table
+			dense
+			:headers="headers"
+			:items="items"
+			:items-per-page="15"
+			:search="search"
+			item-key="_id"
+			:loading="
+				$store.state.challenge.loading.participants ||
+				$store.state.challenge.loading.metrics
+			"
+		>
+			<template #top>
+				<v-text-field
+					v-model="search"
+					label="Search"
+					class="mx-4"
+				></v-text-field>
+			</template>
+		</v-data-table>
+	</div>
+</template>
+
+<script>
+export default {
+	components: {},
+	props: {
+		metricsTable: { type: Object, required: true },
+	},
+	data() {
+		const headers = this.metricsTable.metrics.map((metric, metricsI) => {
+			return {
+				text: metric.metrics_label,
+				align: 'start',
+				value: `metricsValues[${metricsI}].value`,
+			};
+		});
+		headers.unshift({
+			text: 'Participant',
+			align: 'start',
+			value: 'participant.participant_label',
+		});
+
+		const items = this.metricsTable.participants.map(
+			(participant, participantI) => {
+				return {
+					_id: participant._id,
+					participant,
+					metricsValues: this.metricsTable.dataMatrix[participantI],
+				};
+			}
+		);
+
+		return {
+			search: '',
+			headers,
+			items,
+		};
+	},
+};
+</script>

components/Communities/CommunityClassificationTable.vue

@@ -53,6 +53,9 @@
 				<nuxt-link :to="item._id" append>
 					{{ item.acronym }}
 				</nuxt-link>
+				(<nuxt-link :to="item._id + '/participants'" append>
+					participants </nuxt-link
+				>)
 			</template>
 		</v-data-table>
 	</div>

nuxt.config.js

@@ -203,6 +203,19 @@ export default {
 				path: '/scientific/:community/:id',
 				component: resolve(__dirname, 'pages/benchmarking/_community/_id'),
 			});
+			routes.push({
+				name: 'scientific-community-challenge-participants',
+				path: '/scientific/:community/:id/participants',
+				component: resolve(
+					__dirname,
+					'pages/benchmarking/_community/_id/participants'
+				),
+			});
+			// routes.push({
+			//	name: 'scientific-community-challenge-participants',
+			//	path: '/benchmarking/:community/:id/participants',
+			//	component: resolve(__dirname, 'pages/benchmarking/_community/_id/participants'),
+			// });
 		},
 	},
 };

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "openEBench-nuxt",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"private": true,
 	"author": "Dominik Brüchner <dominik.bruchner@bsc.es>, José Mª Fernández <jose.m.fernandez@bsc.es>",
 	"scripts": {

pages/benchmarking/_community/_id.spec.js → pages/benchmarking/_community/_id/index.spec.js

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import Challenge from './_id.vue';
+import Challenge from './index.vue';
 import MockCommunity from '~/test/unit/mockData/Community';
 import MockEvent from '~/test/unit/mockData/Event';
 import MockEvents from '~/test/unit/mockData/Events';

pages/benchmarking/_community/_id.vue → pages/benchmarking/_community/_id/index.vue

@@ -7,18 +7,18 @@
 		/>
 		<div v-else>
 			<h1 class="text-h4">
-				{{ challenge.acronym }}
+				{{ challenge.challenge_label }} ({{ challenge._id }})
 			</h1>
 			<h2 class="text-subtitle-1 mb-5">
 				{{ challenge.name }}
 			</h2>
 			<p class="text--secondary">
 				In this 2D plot two metrics from the challenge
-				{{ challenge.acronym }} are represented in the X and Y axis, showing the
-				results from the participating tools in this challenge. The gray line
-				represents the pareto frontier, which runs over the participants tools,
-				showing the best efficiency, while the arrow in the plot represents the
-				optimal corner.
+				{{ challenge.challenge_label }} are represented in the X and Y axis,
+				showing the results from the participating tools in this challenge. The
+				gray line represents the pareto frontier, which runs over the
+				participants tools, showing the best efficiency, while the arrow in the
+				plot represents the optimal corner.
 			</p>
 			<v-alert class="mt-8" border="left" dense text color="info" type="info">
 				The menu button above the diagram can be used to switch between the
@@ -85,7 +85,7 @@ import ChartBarplotVisualizerWrapper from '~/components/Widgets/ChartBarplotVisu
 import ChartScatterVisualizerWrapper from '~/components/Widgets/ChartScatterVisualizerWrapper';
 
 export default {
-	name: 'CommunityParticipantPage',
+	name: 'CommunityChallengePlotsPage',
 	components: { ChartBarplotVisualizerWrapper, ChartScatterVisualizerWrapper },
 	data() {
 		return {
@@ -117,23 +117,24 @@ export default {
 					to: '/benchmarking',
 				},
 				{
-					text: this.community.acronym
-						? this.community.acronym
-						: this.$route.params.community + ' Events',
+					text:
+						(this.community.acronym
+							? this.community.acronym
+							: this.$route.params.community) + ' Events',
 					disabled: false,
 					exact: true,
-					to: 'events',
+					to: './events',
 				},
 				{
 					text: this.currentEvent
 						? this.currentEvent.name
 						: this.$route.params.community + ' Results',
 					disabled: false,
 					exact: true,
-					to: './',
+					to: './?event=' + this.$route.params.id,
 				},
 				{
-					text: this.challenge ? this.challenge.acronym : '',
+					text: this.challenge ? this.challenge.challenge_label : '',
 					disabled: true,
 					to: this.$route.params.id,
 				},

pages/benchmarking/_community/_id/participants.spec.js

@@ -0,0 +1,142 @@
+import { mount } from '@vue/test-utils';
+import Challenge from './index.vue';
+import MockCommunity from '~/test/unit/mockData/Community';
+import MockEvent from '~/test/unit/mockData/Event';
+import MockEvents from '~/test/unit/mockData/Events';
+import MockChallenge from '~/test/unit/mockData/Challenge';
+/*
+import ChartBarplotVisualizerWrapper from '~/components/Widgets/ChartBarplotVisualizerWrapper';
+import ChartScatterVisualizerWrapper from '~/components/Widgets/ChartScatterVisualizerWrapper';
+*/
+
+const factory = (mockStore) => {
+	return mount(Challenge, {
+		...createComponentMocks({ store: mockStore }),
+		mocks: {
+			$route: { params: { community: 'TESTCOMMUNITY', id: 'TESTID' } },
+			$config: { OEB_LEGACY_ANGULAR_URI: 'https://jest-openebench.bsc.es/' },
+		},
+	});
+};
+
+describe('Community Participant', () => {
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	const mockStore = {
+		community: {
+			getters: {
+				events: () => {
+					return MockEvents;
+				},
+				currentEvent: () => {
+					return MockEvent;
+				},
+				participants: () => {
+					return [];
+				},
+				tools: () => {
+					return [];
+				},
+				community: () => {
+					return MockCommunity;
+				},
+				getEventById: () => {
+					return () => MockEvent;
+				},
+			},
+			actions: {
+				setCurrentEvent: jest.fn(),
+				getCommunity: jest.fn(),
+			},
+			mutations: {
+				setCommunity: jest.fn(),
+				setEvents: jest.fn(),
+				setCurrentEvent: jest.fn(),
+				setParticipants: jest.fn(),
+				setTools: jest.fn(),
+				setLoading: jest.fn(),
+			},
+			state: () => {
+				return {
+					loading: {
+						events: false,
+						tools: false,
+						participants: false,
+						community: false,
+					},
+					community: MockCommunity,
+				};
+			},
+		},
+		challenge: {
+			getters: {
+				participantsList: () => {
+					return [];
+				},
+				challenge: () => {
+					return {};
+				},
+			},
+			actions: {
+				getChallenge: jest.fn(),
+				getParticipants: jest.fn(),
+			},
+			mutations: {
+				setParticipants: jest.fn(),
+				setChallenge: jest.fn(),
+				setLoading: jest.fn(),
+			},
+			state: () => {
+				return {
+					loading: {
+						challenge: false,
+						participants: false,
+					},
+					challenge: MockChallenge,
+				};
+			},
+		},
+	};
+
+	it('is instantiated', async () => {
+		const wrapper = factory(mockStore);
+		expect(wrapper).toBeTruthy();
+		await wrapper.vm.$nextTick();
+	});
+
+	it('calls store actions on mount', () => {
+		const wrapper = factory(mockStore);
+		expect(wrapper).toBeTruthy();
+
+		expect(mockStore.challenge.actions.getChallenge).toHaveBeenCalled();
+	});
+
+	/*
+	it('renders the bar-plot component with the right ID and JSON data structure for rendering', () => {
+		mockStore.challenge.getters.datasetsList = () => {
+			return MockChallengeDatasetsBarplot;
+		};
+		const wrapper = factory(mockStore);
+		expect(wrapper).toBeTruthy();
+		const barplot = wrapper.findComponent(ChartBarplotVisualizerWrapper); // => finds Bar by `name`
+		expect(barplot.exists()).toBe(true);
+		expect(barplot.props().id).toBe(MockChallengeDatasetsBarplot[0]._id);
+		expect(barplot.props().data).toBe(
+			MockChallengeDatasetsBarplot[0].graphData
+		);
+	});
+
+	it('renders the scatter-plot component with the right ID', () => {
+		mockStore.challenge.getters.datasetsList = () => {
+			return MockChallengeDatasetsScatter;
+		};
+		const wrapper = factory(mockStore);
+		expect(wrapper).toBeTruthy();
+		const scatter = wrapper.findComponent(ChartScatterVisualizerWrapper); // => finds Bar by `name`
+		expect(scatter.exists()).toBe(true);
+		expect(scatter.props().id).toBe(MockChallengeDatasetsScatter[0]._id);
+	});
+	*/
+});