TTC
Theo's Typesafe Cult•3w ago
$ cd ./villard

Determining what renders based on multiple conditions

So, I could really use some help here. I'm coming back to a data structure problem at work, and I'm trying to find inspiration to improve how we define a set of values, the conditions necessary to return those values, and the algorithm we need to run the conditions through. I'm trying to figure this out in the abstract in hopes of applying it to a web component-based header I work on full time. The header itself has become the victim of a lot of tech debt due to shifting and expanding responsibilities. In its early versions, rushed out the door due to product, it was keyed on a single platform property that could be passed down to a number of nested web components. Each of those components, based on the platform property, would set its own config property to a class derived from the platform property. The template code could then get the data for links to render, for example, from a config.items property. Unfortunately, due to changing and expanding product requirements with short deadlines, a lot of tacked-on functions, flags, and spaghetti code thrown into the classes and template strings. It's now a mess of strung together conditionals, some literally adding code only to remove it later to avoid headaches. I've been struggling to figure out how to make this a better developer experience so that, if and when I leave this project, I don't have my ears burning from the next guy cursing my name and lineage. Just to be clear, I'm not asking for a solution to my exact problem. I've tried, and it's a hard nut to crack. What I'm hoping for is that if we discuss this from a DSA perspective rather than a frontend one, we can identify something that will help when applied to frontend. To attempt to paint the picture, I'm going to boil the problem down to a flat, simplified version. Imagine a list of values that each have multiple sets of conditions that need to be met to return them through an algorithm. Some of these conditions are boolean, but many have multiple options. 
const slugs = { 'FOO', 'BAR', 'BAZ' };
const platform = { 'red', 'blue', 'green' };
const service = { 'ABC', 'DEF', 'GHI' };

const values = {
  "home",      // Can render with all elements
  "services",  // Can only be returned on blue and green platforms in 'ABC' service
  "devices",   // Can only be returned in 'red' platform in 'ABC' and 'DEF'
  "manage",    // Can only be returned in 'red' and 'green' platforms with 'FOO' slug' and 'DEF' service
}
const slugs = { 'FOO', 'BAR', 'BAZ' };
const platform = { 'red', 'blue', 'green' };
const service = { 'ABC', 'DEF', 'GHI' };

const values = {
  "home",      // Can render with all elements
  "services",  // Can only be returned on blue and green platforms in 'ABC' service
  "devices",   // Can only be returned in 'red' platform in 'ABC' and 'DEF'
  "manage",    // Can only be returned in 'red' and 'green' platforms with 'FOO' slug' and 'DEF' service
}
This is the best example I can come up with at 11pm my time, but I think it gives at least some small idea of what I'm dealing with. Effectively, each of the values have a number of ephemeral conditions that can potentially return them. Ideal world, we'd be able to do this with SSR and some backend code and RBAC, but we don't have that luxury with this project. It's all frontend, based on what the applications pass to us. Hence why I need to find a more DSA based approach.
1 Reply
Max
Max•2w ago
it sounds like a solution for sets and intersections. if you can flatten the requirements into one big set of flags that change, you can model each value as requiring a set of flags that fully intersect with the flags that are set according to navigation state. 
const FLAGS = new Set([
  // slugs
  'FOO', 'BAR', 'BAZ',
  // platforms
  'red', 'blue', 'green',
  // services
  'ABC', 'DEF', 'GHI'
]);

const ROUTES = {
  home: new Set(FLAGS), // can render with everything

  services: new Set([
    'blue', 'green',
    'ABC',
    'FOO', 'BAR', 'BAZ'
  ]),

  devices: new Set([
    'red',
    'ABC', 'DEF',
    'FOO', 'BAR', 'BAZ'
  ]),

  manage: new Set([
    'red', 'green',
    'DEF',
    'FOO' 
  ])
};
const FLAGS = new Set([
  // slugs
  'FOO', 'BAR', 'BAZ',
  // platforms
  'red', 'blue', 'green',
  // services
  'ABC', 'DEF', 'GHI'
]);

const ROUTES = {
  home: new Set(FLAGS), // can render with everything

  services: new Set([
    'blue', 'green',
    'ABC',
    'FOO', 'BAR', 'BAZ'
  ]),

  devices: new Set([
    'red',
    'ABC', 'DEF',
    'FOO', 'BAR', 'BAZ'
  ]),

  manage: new Set([
    'red', 'green',
    'DEF',
    'FOO' 
  ])
};
then you can validate routes like so 
function isAllowed(route: keyof typeof ROUTES, flags: string[]): boolean {
  const allowed = ROUTES[route];
  return flags.every(flag => allowed.has(flag));
} //for one route

function getValidRoutes(flags: string[]) {
  return Object.keys(ROUTES).filter(route => isAllowed(route as keyof typeof ROUTES, flags));
} //for all routes
function isAllowed(route: keyof typeof ROUTES, flags: string[]): boolean {
  const allowed = ROUTES[route];
  return flags.every(flag => allowed.has(flag));
} //for one route

function getValidRoutes(flags: string[]) {
  return Object.keys(ROUTES).filter(route => isAllowed(route as keyof typeof ROUTES, flags));
} //for all routes
im not sure if this is the best way to do it in typescript since im much more used to python sets but it should be fast regardless unless you have a couple hundred thousand routes

Did you find this page helpful?