Tool:Interaction Timeline

From Wikitech
Jump to navigation Jump to search
Toolforge tools
Crystal Clear app package utilities.png Interaction Timeline
Interaction Timeline Logo.svg
Website https://interaction-timeline.toolforge.org/
Description Chronological history for two users on pages where they have both made edits.

Help

Maintainer(s) Anti-Harassment Tools (View all)
Source code https://github.com/wikimedia/InteractionTimeline
License GNU General Public License 3.0
Issues Open tasks · Report a bug

The Interaction Timeline shows a chronological history for two users on pages where they have both made edits. The original development plan can be found on meta.

Technical Details

The tool is a React application that uses Redux for state management and Redux Observable for side effects. It attempts to do as much as it can on the client or by using MediaWiki's API directly. Unfortunately, MediaWiki's API does not provide a mechanism to query two users and get a single contribution history. A small PHP application using Slim was created to query the Toolforge Replicas.

During deployment, the client application is generated as static HTML, CSS, and JavaScript. Lighttpd handles the HTTP requests and routes the requests to either the static HTML page or the server application which handles the custom API requests. The tool uses the PHP Kubernetes backend in order to use a newer version of PHP then what is available on the tool itself. Likewise, the client application use the Node Kubernetes backend in order to use a newer version of Node.js.

Technical Debt

Immutable JS

Immutability is a good thing, especially in React. However the Immutable JS library that is used is no longer maintained. Ideally it should be removed and replaced with JavaScript built-ins that maintain immutability.

Redux & Redux Observable

Since the release of React 16.8, it has been possible to use a reducer for state management without using another library. Likewise, side effects can be handled with React's useEffect hook. It seems wise to remove Redux and Redux Observable and replace them with the native React alternatives (See T226995). This would also mean moving away from class-based React components to functional components since only functional components support Hooks.

React

Since Wikimedia has chosen Vue as its preferred JavaScript framework, it might be wise to migrate the application to Vue. This might provide a learning opportunity for anyone who is familiar with React, but not with Vue.

PHP

It is somewhat clumsy that the tool is split into a "server" and a "client" application. It may be better to unify the server and client into a single JavaScript application. To that end, it would be worth considering using a "full stack" framework like Next (React) or Nuxt (Vue) that can support both the front-end as well as the server-side code in a single application.