From 9e4eb925ae3e4607afe73154b4cb2f500dac11fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20B=C3=A4uerle?= <alex@a13x.io>
Date: Thu, 28 Sep 2023 14:08:35 +0200
Subject: [PATCH] refactor: rename model to system in ui (#237)

---
 .../encoding/chart-encoding/BeeswarmEncoding.svelte       | 8 ++++----
 .../encoding/chart-encoding/HeatmapEncoding.svelte        | 4 ++--
 .../encoding/chart-encoding/RadarEncoding.svelte          | 6 +++---
 .../encoding/chart-encoding/TableEncoding.svelte          | 6 +++---
 .../encoding/chart-encoding/XCChartEncoding.svelte        | 8 ++++----
 .../chart/chart-types/bar-chart/vegaSpec-bar.ts           | 4 ++--
 .../chart/chart-types/beeswarm-chart/vegaSpec-beeswarm.ts | 6 +++---
 .../chart/chart-types/heatmap-chart/vegaSpec-heatmap.ts   | 4 ++--
 .../chart/chart-types/line-chart/vegaSpec-line.ts         | 4 ++--
 .../chart/chart-types/radar-chart/vegaSpec-radar.ts       | 2 +-
 .../lib/components/chart/chart-types/table/Table.svelte   | 4 ++--
 frontend/src/lib/components/general/Header.svelte         | 4 ++--
 .../components/instance-views/views/views/Codegen.svelte  | 2 +-
 .../src/lib/components/metadata/MetadataHeader.svelte     | 4 ++--
 frontend/src/lib/components/metadata/SliceHeader.svelte   | 2 +-
 .../src/lib/components/popups/SliceFinderPopup.svelte     | 8 ++++----
 16 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/BeeswarmEncoding.svelte b/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/BeeswarmEncoding.svelte
index 710a7fdd..b1c1b943 100644
--- a/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/BeeswarmEncoding.svelte
+++ b/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/BeeswarmEncoding.svelte
@@ -24,8 +24,8 @@
 	}
 
 	function refreshParams(e: CustomEvent, currentParam: Dimensions) {
-		let label = e.detail.label as 'models' | 'slices';
-		let paramExcluMap = { slices: SlicesOrModels.MODELS, models: SlicesOrModels.SLICES };
+		let label = e.detail.label as 'systems' | 'slices';
+		let paramExcluMap = { slices: SlicesOrModels.MODELS, systems: SlicesOrModels.SLICES };
 
 		if (currentParam === Dimensions.y) {
 			parameters.yChannel = e.detail.value;
@@ -124,7 +124,7 @@
 				value={parameters.yChannel}
 				options={[
 					{ label: 'slices', value: SlicesOrModels.SLICES },
-					{ label: 'models', value: SlicesOrModels.MODELS }
+					{ label: 'systems', value: SlicesOrModels.MODELS }
 				]}
 				searchable={false}
 				on:change={refreshY}
@@ -155,7 +155,7 @@
 			value={parameters.colorChannel}
 			options={[
 				{ label: 'slices', value: SlicesOrModels.SLICES },
-				{ label: 'models', value: SlicesOrModels.MODELS }
+				{ label: 'systems', value: SlicesOrModels.MODELS }
 			]}
 			searchable={false}
 			on:change={refreshColor}
diff --git a/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/HeatmapEncoding.svelte b/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/HeatmapEncoding.svelte
index 328dc38a..b0f20327 100644
--- a/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/HeatmapEncoding.svelte
+++ b/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/HeatmapEncoding.svelte
@@ -78,7 +78,7 @@
 			value={parameters.xChannel}
 			options={[
 				{ label: 'slices', value: SlicesOrModels.SLICES },
-				{ label: 'models', value: SlicesOrModels.MODELS }
+				{ label: 'systems', value: SlicesOrModels.MODELS }
 			]}
 			searchable={false}
 			on:change={refreshX}
@@ -100,7 +100,7 @@
 			value={parameters.yChannel}
 			options={[
 				{ label: 'slices', value: SlicesOrModels.SLICES },
-				{ label: 'models', value: SlicesOrModels.MODELS }
+				{ label: 'systems', value: SlicesOrModels.MODELS }
 			]}
 			searchable={false}
 			on:change={refreshY}
diff --git a/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/RadarEncoding.svelte b/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/RadarEncoding.svelte
index c0848109..a2cc13e0 100644
--- a/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/RadarEncoding.svelte
+++ b/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/RadarEncoding.svelte
@@ -117,7 +117,7 @@
 			value={parameters.axisChannel}
 			options={[
 				{ label: 'slices', value: SlicesMetricsOrModels.SLICES },
-				{ label: 'models', value: SlicesMetricsOrModels.MODELS },
+				{ label: 'systems', value: SlicesMetricsOrModels.MODELS },
 				{ label: 'metrics', value: SlicesMetricsOrModels.METRICS }
 			]}
 			searchable={false}
@@ -144,7 +144,7 @@
 			value={parameters.layerChannel}
 			options={[
 				{ label: 'slices', value: SlicesOrModels.SLICES },
-				{ label: 'models', value: SlicesOrModels.MODELS }
+				{ label: 'systems', value: SlicesOrModels.MODELS }
 			]}
 			searchable={false}
 			on:change={refreshLayerParams}
@@ -166,7 +166,7 @@
 			value={parameters.fixedChannel}
 			options={[
 				{ label: 'slices', value: SlicesMetricsOrModels.SLICES },
-				{ label: 'models', value: SlicesMetricsOrModels.MODELS },
+				{ label: 'systems', value: SlicesMetricsOrModels.MODELS },
 				{ label: 'metrics', value: SlicesMetricsOrModels.METRICS }
 			]}
 			searchable={false}
diff --git a/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/TableEncoding.svelte b/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/TableEncoding.svelte
index 66392d17..e8f32316 100644
--- a/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/TableEncoding.svelte
+++ b/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/TableEncoding.svelte
@@ -122,7 +122,7 @@
 			value={parameters.xChannel}
 			options={[
 				{ label: 'slices', value: SlicesMetricsOrModels.SLICES },
-				{ label: 'models', value: SlicesMetricsOrModels.MODELS },
+				{ label: 'systems', value: SlicesMetricsOrModels.MODELS },
 				{ label: 'metrics', value: SlicesMetricsOrModels.METRICS }
 			]}
 			searchable={false}
@@ -149,7 +149,7 @@
 			value={parameters.yChannel}
 			options={[
 				{ label: 'slices', value: SlicesOrModels.SLICES },
-				{ label: 'models', value: SlicesOrModels.MODELS }
+				{ label: 'systems', value: SlicesOrModels.MODELS }
 			]}
 			searchable={false}
 			on:change={yChanged}
@@ -172,7 +172,7 @@
 			slot="component"
 			options={[
 				{ label: 'slices', value: SlicesMetricsOrModels.SLICES },
-				{ label: 'models', value: SlicesMetricsOrModels.MODELS },
+				{ label: 'systems', value: SlicesMetricsOrModels.MODELS },
 				{ label: 'metrics', value: SlicesMetricsOrModels.METRICS }
 			]}
 			searchable={false}
diff --git a/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/XCChartEncoding.svelte b/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/XCChartEncoding.svelte
index bde5f755..d3f91cf8 100644
--- a/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/XCChartEncoding.svelte
+++ b/frontend/src/lib/components/chart/chart-page/encoding/chart-encoding/XCChartEncoding.svelte
@@ -15,8 +15,8 @@
 	}
 
 	function refreshParams(e: CustomEvent, currentParam: Dimensions) {
-		let label = e.detail.label as 'models' | 'slices';
-		let paramExcluMap = { slices: SlicesOrModels.MODELS, models: SlicesOrModels.SLICES };
+		let label = e.detail.label as 'systems' | 'slices';
+		let paramExcluMap = { slices: SlicesOrModels.MODELS, systems: SlicesOrModels.SLICES };
 
 		if (currentParam === Dimensions.x) {
 			parameters.xChannel = e.detail.value;
@@ -66,7 +66,7 @@
 			value={parameters.xChannel}
 			options={[
 				{ label: 'slices', value: SlicesOrModels.SLICES },
-				{ label: 'models', value: SlicesOrModels.MODELS }
+				{ label: 'systems', value: SlicesOrModels.MODELS }
 			]}
 			searchable={false}
 			on:change={xChanged}
@@ -94,7 +94,7 @@
 			value={parameters.colorChannel}
 			options={[
 				{ label: 'slices', value: SlicesOrModels.SLICES },
-				{ label: 'models', value: SlicesOrModels.MODELS }
+				{ label: 'systems', value: SlicesOrModels.MODELS }
 			]}
 			searchable={false}
 			on:change={colorChaned}
diff --git a/frontend/src/lib/components/chart/chart-types/bar-chart/vegaSpec-bar.ts b/frontend/src/lib/components/chart/chart-types/bar-chart/vegaSpec-bar.ts
index 29f18074..72455ace 100644
--- a/frontend/src/lib/components/chart/chart-types/bar-chart/vegaSpec-bar.ts
+++ b/frontend/src/lib/components/chart/chart-types/bar-chart/vegaSpec-bar.ts
@@ -7,8 +7,8 @@ export default function generateSpec(
 	height: number,
 	width: number
 ): VegaLiteSpec {
-	const x_name = parameters.xChannel === SlicesOrModels.MODELS ? 'model' : 'slice';
-	const color_name = parameters.colorChannel === SlicesOrModels.SLICES ? 'slice' : 'model';
+	const x_name = parameters.xChannel === SlicesOrModels.MODELS ? 'system' : 'slice';
+	const color_name = parameters.colorChannel === SlicesOrModels.SLICES ? 'slice' : 'system';
 
 	const spec = {
 		$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
diff --git a/frontend/src/lib/components/chart/chart-types/beeswarm-chart/vegaSpec-beeswarm.ts b/frontend/src/lib/components/chart/chart-types/beeswarm-chart/vegaSpec-beeswarm.ts
index b239d082..375a974b 100644
--- a/frontend/src/lib/components/chart/chart-types/beeswarm-chart/vegaSpec-beeswarm.ts
+++ b/frontend/src/lib/components/chart/chart-types/beeswarm-chart/vegaSpec-beeswarm.ts
@@ -77,7 +77,7 @@ export default function generateSpec(
 			? [
 					{
 						type: 'symbol',
-						title: parameters.colorChannel === SlicesOrModels.SLICES ? 'slice' : 'model',
+						title: parameters.colorChannel === SlicesOrModels.SLICES ? 'slice' : 'system',
 						fill: 'color'
 					}
 			  ]
@@ -109,9 +109,9 @@ export default function generateSpec(
 						zindex: { value: 1 },
 						tooltip: {
 							signal: `{'size': datum.size, '${xLabel}': format(datum.x_value, '.4f'), '${
-								parameters.yChannel === SlicesOrModels.MODELS ? 'model' : 'slice'
+								parameters.yChannel === SlicesOrModels.MODELS ? 'system' : 'slice'
 							}': datum.y_value, '${
-								parameters.colorChannel === SlicesOrModels.MODELS ? 'model' : 'slice'
+								parameters.colorChannel === SlicesOrModels.MODELS ? 'system' : 'slice'
 							}': datum.color_value}`
 						}
 					}
diff --git a/frontend/src/lib/components/chart/chart-types/heatmap-chart/vegaSpec-heatmap.ts b/frontend/src/lib/components/chart/chart-types/heatmap-chart/vegaSpec-heatmap.ts
index cdfcf392..45fcd0ed 100644
--- a/frontend/src/lib/components/chart/chart-types/heatmap-chart/vegaSpec-heatmap.ts
+++ b/frontend/src/lib/components/chart/chart-types/heatmap-chart/vegaSpec-heatmap.ts
@@ -5,8 +5,8 @@ export default function generateSpec(
 	parameters: HeatmapParameters,
 	metricName: string
 ): VegaLiteSpec {
-	const x_name = parameters.xChannel === SlicesOrModels.MODELS ? 'model' : 'slice';
-	const y_name = parameters.yChannel === SlicesOrModels.SLICES ? 'slice' : 'model';
+	const x_name = parameters.xChannel === SlicesOrModels.MODELS ? 'system' : 'slice';
+	const y_name = parameters.yChannel === SlicesOrModels.SLICES ? 'slice' : 'system';
 
 	return {
 		$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
diff --git a/frontend/src/lib/components/chart/chart-types/line-chart/vegaSpec-line.ts b/frontend/src/lib/components/chart/chart-types/line-chart/vegaSpec-line.ts
index 435b4a9e..00d07f0d 100644
--- a/frontend/src/lib/components/chart/chart-types/line-chart/vegaSpec-line.ts
+++ b/frontend/src/lib/components/chart/chart-types/line-chart/vegaSpec-line.ts
@@ -7,8 +7,8 @@ export default function generateSpec(
 	width: number,
 	height: number
 ): VegaLiteSpec {
-	const x_name = parameters.xChannel === SlicesOrModels.MODELS ? 'model' : 'slice';
-	const color_name = parameters.colorChannel === SlicesOrModels.SLICES ? 'slice' : 'model';
+	const x_name = parameters.xChannel === SlicesOrModels.MODELS ? 'system' : 'slice';
+	const color_name = parameters.colorChannel === SlicesOrModels.SLICES ? 'slice' : 'system';
 
 	return {
 		$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
diff --git a/frontend/src/lib/components/chart/chart-types/radar-chart/vegaSpec-radar.ts b/frontend/src/lib/components/chart/chart-types/radar-chart/vegaSpec-radar.ts
index 6698b58e..21c41e7e 100644
--- a/frontend/src/lib/components/chart/chart-types/radar-chart/vegaSpec-radar.ts
+++ b/frontend/src/lib/components/chart/chart-types/radar-chart/vegaSpec-radar.ts
@@ -82,7 +82,7 @@ export default function generateSpec(
 			{
 				fill: 'color',
 				orient: 'none',
-				title: parameters.layerChannel === SlicesOrModels.SLICES ? 'slice' : 'model',
+				title: parameters.layerChannel === SlicesOrModels.SLICES ? 'slice' : 'system',
 				encode: {
 					legend: { update: { x: { value: 300 }, y: { value: -250 } } }
 				}
diff --git a/frontend/src/lib/components/chart/chart-types/table/Table.svelte b/frontend/src/lib/components/chart/chart-types/table/Table.svelte
index 11e50dfb..63bfe420 100644
--- a/frontend/src/lib/components/chart/chart-types/table/Table.svelte
+++ b/frontend/src/lib/components/chart/chart-types/table/Table.svelte
@@ -87,11 +87,11 @@
 		<Head>
 			<Row>
 				<Cell
-					>{parameters.yChannel === SlicesOrModels.SLICES ? 'slices' : 'models'} \ {parameters.xChannel ===
+					>{parameters.yChannel === SlicesOrModels.SLICES ? 'slices' : 'systems'} \ {parameters.xChannel ===
 					SlicesMetricsOrModels.SLICES
 						? 'slices'
 						: parameters.xChannel === SlicesMetricsOrModels.MODELS
-						? 'models'
+						? 'systems'
 						: 'metrics'}</Cell
 				>
 				{#each columns as column}
diff --git a/frontend/src/lib/components/general/Header.svelte b/frontend/src/lib/components/general/Header.svelte
index b474f41c..40f16895 100644
--- a/frontend/src/lib/components/general/Header.svelte
+++ b/frontend/src/lib/components/general/Header.svelte
@@ -51,14 +51,14 @@
 				<div class="flex flex-col mt-3">
 					<HeaderIcon
 						pageName={'explore'}
-						tooltipContent={'Explore your data and model outputs'}
+						tooltipContent={'Explore your data and system outputs'}
 						icon={mdiCompassOutline}
 						on:click={() => goto(`${getProjectRouteFromURL($page.url)}/explore`)}
 					/>
 					{#if $models.length > 1}
 						<HeaderIcon
 							pageName={'compare'}
-							tooltipContent={'Qualitatively compare model outputs'}
+							tooltipContent={'Qualitatively compare system outputs'}
 							icon={mdiCompare}
 							on:click={() => goto(`${getProjectRouteFromURL($page.url)}/compare`)}
 						/>
diff --git a/frontend/src/lib/components/instance-views/views/views/Codegen.svelte b/frontend/src/lib/components/instance-views/views/views/Codegen.svelte
index d2f89629..32415b03 100644
--- a/frontend/src/lib/components/instance-views/views/views/Codegen.svelte
+++ b/frontend/src/lib/components/instance-views/views/views/Codegen.svelte
@@ -23,7 +23,7 @@
 	{/if}
 	{#if entry[modelColumn]}
 		<hr />
-		<pre class="mt-2 mb-0">model prediction</pre>
+		<pre class="mt-2 mb-0">prediction</pre>
 		<HighlightAuto code={entry[modelColumn]} />
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/metadata/MetadataHeader.svelte b/frontend/src/lib/components/metadata/MetadataHeader.svelte
index 51037882..96f22214 100644
--- a/frontend/src/lib/components/metadata/MetadataHeader.svelte
+++ b/frontend/src/lib/components/metadata/MetadataHeader.svelte
@@ -22,7 +22,7 @@
 	{#if $model !== undefined && $models.length > 0}
 		<div class="mr-2.5 flex flex-col w-1/2">
 			<span class="my-1 text-grey-dark w-fit">
-				{$page.url.href.includes('compare') ? 'Model A' : 'Model'}
+				{$page.url.href.includes('compare') ? 'System A' : 'System'}
 			</span>
 			<select
 				class="w-full h-9 border border-grey-light rounded text-sm text-grey"
@@ -51,7 +51,7 @@
 	{/if}
 	{#if $page.url.href.includes('compare')}
 		<div class="flex flex-col w-1/2">
-			<span class="my-1 text-grey-dark">Model B</span>
+			<span class="my-1 text-grey-dark">System B</span>
 			<select
 				class="w-full h-9 border border-grey-light rounded text-sm text-grey"
 				bind:value={$comparisonModel}
diff --git a/frontend/src/lib/components/metadata/SliceHeader.svelte b/frontend/src/lib/components/metadata/SliceHeader.svelte
index 568ec887..b1f55193 100644
--- a/frontend/src/lib/components/metadata/SliceHeader.svelte
+++ b/frontend/src/lib/components/metadata/SliceHeader.svelte
@@ -51,7 +51,7 @@
 				use:tooltip={{
 					content: !$page.url.href.includes('compare')
 						? 'Find underperforming slices'
-						: 'Find slices with the largest output differences between models',
+						: 'Find slices with the largest output differences between systems',
 					position: 'left',
 					theme: 'zeno-tooltip',
 					maxWidth: '150'
diff --git a/frontend/src/lib/components/popups/SliceFinderPopup.svelte b/frontend/src/lib/components/popups/SliceFinderPopup.svelte
index 9002f1e4..a4e7e03f 100644
--- a/frontend/src/lib/components/popups/SliceFinderPopup.svelte
+++ b/frontend/src/lib/components/popups/SliceFinderPopup.svelte
@@ -141,7 +141,7 @@
 				class="w-6 h-6 cursor-help fill-grey-dark"
 				use:tooltip={{
 					content: $page.url.href.includes('compare')
-						? 'Run the SliceLine algorithm to find slices with the largest or smallest average difference in a difference column between two models'
+						? 'Run the SliceLine algorithm to find slices with the largest or smallest average difference in a difference column between two systems'
 						: 'Run the SliceLine algorithm to find slices of data with high or low metrics',
 					position: 'right',
 					theme: 'zeno-tooltip',
@@ -170,7 +170,7 @@
 					style="margin-top: 3px;"
 					use:tooltip={{
 						content: $page.url.href.includes('compare')
-							? 'The column on which to measure model disagreement'
+							? 'The column on which to measure system disagreement'
 							: 'The continuous column to compare slices across',
 						position: 'right',
 						theme: 'zeno-tooltip',
@@ -280,7 +280,7 @@
 					style="margin-top: 3px;"
 					use:tooltip={{
 						content: $page.url.href.includes('compare')
-							? 'Order by slice score, a combination of model difference and size'
+							? 'Order by slice score, a combination of system difference and size'
 							: 'Order by slice score, a combination of size and metric',
 						theme: 'zeno-tooltip',
 						position: 'left',
@@ -296,7 +296,7 @@
 				style="width: 120px; margin-right: 20px"
 				bind:value={orderByIdx}
 				options={$page.url.href.includes('compare')
-					? ['(model) A > B', '(model) B > A']
+					? ['(system) A > B', '(system) B > A']
 					: orderByOptions}
 				placeholder="Order By"
 			/>