From 511ef0105cbc6a08298cd63320283bf41090d4e3 Mon Sep 17 00:00:00 2001
From: Amine Hilaly <hilalyamine@gmail.com>
Date: Thu, 16 May 2019 20:46:30 +0200
Subject: Webui: use grahql response to create labels colors

---
 webui/src/Label.js | 36 +++++++++---------------------------
 1 file changed, 9 insertions(+), 27 deletions(-)

(limited to 'webui/src/Label.js')

diff --git a/webui/src/Label.js b/webui/src/Label.js
index 826d21f5..de2ccd61 100644
--- a/webui/src/Label.js
+++ b/webui/src/Label.js
@@ -4,43 +4,25 @@ import {
   getContrastRatio,
   darken,
 } from '@material-ui/core/styles/colorManipulator';
-import * as allColors from '@material-ui/core/colors';
 import { common } from '@material-ui/core/colors';
 
-// JS's modulo returns negative numbers sometimes.
-// This ensures the result is positive.
-const mod = (n, m) => ((n % m) + m) % m;
-
 // Minimum contrast between the background and the text color
 const contrastThreshold = 2.5;
 
-// Filter out the "common" color
-const labelColors = Object.entries(allColors)
-  .filter(([key, value]) => value !== common)
-  .map(([key, value]) => value);
-
-// Generate a hash (number) from a string
-const hash = string =>
-  string.split('').reduce((a, b) => ((a << 5) - a + b.charCodeAt(0)) | 0, 0);
-
-// Get the background color from the label
-const getColor = label =>
-  labelColors[mod(hash(label), labelColors.length)][500];
-
 // Guess the text color based on the background color
 const getTextColor = background =>
   getContrastRatio(background, common.white) >= contrastThreshold
     ? common.white // White on dark backgrounds
     : common.black; // And black on light ones
 
-const _genStyle = background => ({
-  backgroundColor: background,
-  color: getTextColor(background),
-  borderBottomColor: darken(background, 0.2),
-});
+const _rgb = color => 'rgb(' + color.R + ',' + color.G + ',' + color.B + ')';
 
-// Generate a style object (text, background and border colors) from the label
-const genStyle = label => _genStyle(getColor(label));
+// Create a style object from the label RGB colors
+const createStyle = color => ({
+  backgroundColor: _rgb(color),
+  color: getTextColor(_rgb(color)),
+  borderBottomColor: darken(_rgb(color), 0.2),
+});
 
 const useStyles = makeStyles(theme => ({
   label: {
@@ -58,8 +40,8 @@ const useStyles = makeStyles(theme => ({
 function Label({ label }) {
   const classes = useStyles();
   return (
-    <span className={classes.label} style={genStyle(label)}>
-      {label}
+    <span className={classes.label} style={createStyle(label.color)}>
+      {label.name}
     </span>
   );
 }
-- 
cgit 


From aa6247ce870075922a1309718e8fafee321ef51d Mon Sep 17 00:00:00 2001
From: Amine Hilaly <hilalyamine@gmail.com>
Date: Fri, 17 May 2019 12:43:17 +0200
Subject: webui: Add Label gql fragment

---
 webui/src/Label.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

(limited to 'webui/src/Label.js')

diff --git a/webui/src/Label.js b/webui/src/Label.js
index de2ccd61..fc8a3a22 100644
--- a/webui/src/Label.js
+++ b/webui/src/Label.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import gql from 'graphql-tag';
 import { makeStyles } from '@material-ui/styles';
 import {
   getContrastRatio,
@@ -46,4 +47,15 @@ function Label({ label }) {
   );
 }
 
+Label.fragment = gql`
+  fragment Label on Label {
+    name
+    color {
+      R
+      G
+      B
+    }
+  }
+`;
+
 export default Label;
-- 
cgit