[READ-ONLY] Mirror of https://github.com/FoxxMD/blog.
blog.foxxmd.dev
feat(modernms): Add transformer problem
+35
-8
+35
-8
_drafts/modernizing-multi-scrobbler.md
+35
-8
_drafts/modernizing-multi-scrobbler.md
···
43
43
44
44
Of the features listed above, the web dashboard was one of the [first features added](https://github.com/FoxxMD/multi-scrobbler/releases/tag/0.3.6) and has also been the least updated. Since it's inception the *design* has barely changed, despite being ported from expressjs templates to basic react + tailwind.
45
45
46
-
It consists of a landing page that:
46
+
It consists of a:
47
47
48
-
* lists all Sources/Clients, with some basic stats and a slew of link-buttons
48
+
* A landing page with lists all Sources/Clients, with some basic stats and a slew of link-buttons
49
49
* Sources show an emulated Player, if player state is available
50
-
* a live log
50
+
* a live log
51
+
* one page for displaying recently played/scrobbled per Source/Client
52
+
* one page for displaying failed scrobbles per Client
51
53
52
54
{: width="700" }
53
-
54
-
Navigating to Discovered/Scrobbled tracks shows a static page with a simple list of all Plays *in-memory* with some simple formatting.
55
+
_Landing page_
55
56
56
57
{: width="700" }
57
-
58
-
Finally, navigating to Failed Scrobbles renders a simple list of the track and mono-font display of some of the attributes of an error stored on the track.
59
-
58
+
_Navigating to Discovered/Scrobbled tracks shows a static page with a simple list of all Plays *in-memory* with some simple formatting._
60
59
61
60
{: width="700" }
61
+
_Navigating to Failed Scrobbles renders a simple list of the track and mono-font display of some of the attributes of an error stored on the track._
62
62
63
63
You've probably already guessed but this site does not handle small/mobile screens very well. It is *readable* but certainly not a good experience.
64
64
···
66
66
{: width="400" .w-25 .normal}
67
67
{: width="400" .w-25 .normal}
68
68
69
+
## Why Fix What Isn't Broken?
70
+
71
+
Despite its lack of charm and modern functionality, the frontend _does work_. Moreover, MS is designed to be a "set and forget" application: once it's configured you should not need to visit the UI for any ongoing maintenance or updates. The ideal scenario for an end user is that they get everything setup and then never look at it again. So then why update anything at all? The effort vs. reward for a new UI is low considering how little users will actually be using it.
72
+
73
+
### Pipelines are Cool But...
74
+
75
+
One of the last features I [highlighted](#multi-scrobbler-today) is relatively new, [**Scrobble Transforms.**](https://docs.multi-scrobbler.app/configuration/transforms/) This feature allows users to configure automated steps to modify their data in any individual Source/Client, before it is sent anywhere else. The steps can be hooked into various "stages" of the data lifecycle allowing very granular control of how the data is modified, when, where, and how. Some reasons a user might want to do this (and what it would do):
76
+
77
+
* A Source's service often incorrectly adds data to some field IE `My Title (Album Version)` when the title should just be `My Title`
78
+
* ID3 tags in your music collection are dirty or have repeating garbage IE `[YourMusicSource.com] My Artist - My Title` => get rid of `[YourMusicSource.com]`
79
+
* Correcting *any* track to match to the "canonical" version found on [Musicbrainz](https://musicbrainz.org/) so all data is normalized
80
+
81
+
This feature is powerful and extremely useful for users who want tight control over how their data is presented. However, it also adds a degree of uncertainty to what MS is actually doing. While MS does log everything, the logs are mostly meant for dev debugging, are ephemeral, noisy, and don't present a clear, linear story of what a Transformer is doing.
82
+
83
+
To put it another way...
84
+
85
+
**Before Transformers**, all the end user needed to know to have a mental model of MS's behavior was that Input X from Source A was parsed to a Scrobble like `this`.
86
+
87
+
**After Transformers**, the mental model needs to be able to compute that Input X from Source A was parsed to a Scrobble like `this`, then modified by Transformer Stage 1 to be `this + and this change`, and then modified by Transformer Stage 2 to be `this + and this change - this different change`, etc... getting more complicated for each additional transformer.
88
+
89
+
### The Siren's Call
90
+
91
+
It isn't tenable to display this in logs. I wrote a stop-gap JSON debug output, that contained all the steps and their diffs, that users could provide in an issue to help me troubleshoot and this did work for a while...but the root issue still remained.
92
+
93
+
Many users were creating issues for *relatively easy* transformer problems because their mental model could not follow the full journey of a scrobble through MS without some kind of linear aid.
94
+
95
+
In order to enable users to help themselves **the UI needed an update that could show a user the ordered steps, and results of modification, for scrobble data passing through MS.**