Merge branch 'ac-frontend' of https://github.com/vs9h/Desbordante int…

…o ac-frontend

web-app/client/.stylelintrc

@@ -4,7 +4,7 @@
     "indentation": 2,
     "string-quotes": "double",
     "no-duplicate-selectors": true,
-    "color-hex-case": "upper",
+    "color-hex-case": "lower",
     "color-hex-length": "long",
     "color-named": "never",
     "selector-combinator-space-after": "always",

web-app/client/src/constants/colors.ts

@@ -0,0 +1,54 @@
+import variables from '@styles/common/variables.module.scss';
+
+const colors = {
+  primary: {
+    100: variables.primary100,
+    75: variables.primary75,
+    50: variables.primary50,
+    25: variables.primary25,
+    10: variables.primary10,
+    5: variables.primary05,
+  },
+  black: {
+    100: variables.black100,
+    75: variables.black75,
+    50: variables.black50,
+    25: variables.black25,
+    10: variables.black10,
+    5: variables.black05,
+  },
+  white: {
+    100: variables.white100,
+    75: variables.white75,
+    50: variables.white50,
+    25: variables.white25,
+    10: variables.white10,
+    5: variables.white05,
+  },
+  success: {
+    100: variables.success100,
+    75: variables.success75,
+    50: variables.success50,
+    25: variables.success25,
+    10: variables.success10,
+    5: variables.success05,
+  },
+  error: {
+    100: variables.error100,
+    75: variables.error75,
+    50: variables.error50,
+    25: variables.error25,
+    10: variables.error10,
+    5: variables.error05,
+  },
+  info: {
+    100: variables.info100,
+    75: variables.info75,
+    50: variables.info50,
+    25: variables.info25,
+    10: variables.info10,
+    5: variables.info05,
+  },
+} as const;
+
+export default colors;

web-app/client/src/constants/descriptionAC.tsx

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+
+const DescriptionAC: FC = () => {
+  return (
+    <>
+      Simply put, algebraic constraint is a relation between two columns, such
+      that some binary operation b = {'{ +, -, /, * }'} (applied to each row)
+      has most of its results within several ranges. For example, an algebraic
+      constraint for a table containing ShipDate and DeliveryDate columns with b
+      = {'{ - }'} will result in three clusters defined by a shipping method. In
+      this scenario outliers will be rows with rare events such as dockers
+      strike, typo in address, etc. This task discovers all algebraic
+      constraints for a specified operation and a provided table. Also, it
+      detects and visualizes outlier rows. For more information check{' '}
+      <a href="https://vldb.org/conf/2003/papers/S20P03.pdf">
+        “BHUNT: Automatic Discovery of Fuzzy Algebraic Constraints in Relational
+        Data”
+      </a>{' '}
+      by P.G. Brown and P.J. Haas.
+    </>
+  );
+};
+
+export default DescriptionAC;

web-app/client/src/constants/primitiveInfoType.ts → web-app/client/src/constants/primitiveInfoType.tsx

@@ -1,14 +1,16 @@
+import { ReactNode } from 'react';
 import { MainPrimitiveType } from 'types/globalTypes';
+import DescriptionAC from './descriptionAC';
 
 export type PrimitiveInfoType = {
   label: string;
-  description: string;
+  description: ReactNode;
   link?: string;
 };
 
 const primitiveInfo: Partial<Record<MainPrimitiveType, PrimitiveInfoType>> = {
   [MainPrimitiveType.FD]: {
-    label: 'Functional Dependencies',
+    label: 'Functional Dependency Discovery',
     description:
       'Functional dependencies are crucial metadata for performing schema normalization, data cleaning and various data profiling tasks. A single FD represents a relationship between two disjoint sets of attributes, which states that the values from one set uniquely determine the values of another. Such hidden patterns provide a great start to get to know your data.',
     link: 'https://mstrutov.github.io/Desbordante/guides/fd-mining.html',
@@ -37,9 +39,8 @@ const primitiveInfo: Partial<Record<MainPrimitiveType, PrimitiveInfoType>> = {
       'Metric verification is a process of checking whether a specific metric functional dependency (MFD) holds on data or not. MFD is a relaxed form of classic functional dependencies which allows small variations in the values of the right hand side of a dependency. It other words, for MFD X⟶Y we still expect two different tuples to agree on values of attributes in X, but their values on Y can differ no more than some threshold. MFD can be verified for numeric and string types using different metrics. Currently available are: Euclidean, Levenshtein and Cosine. Results of metric verification process are presented as clusters of records which share the same left hand side, but differ in the right one. If distance of records\' values too far from any points of the same cluster, they are tagged with an "X" mark. A check mark is used otherwise.',
   },
   [MainPrimitiveType.AC]: {
-    label: 'Algebraic Constraints',
-    description:
-      'Description Description Description Description Description Description Description Description Description Description Description Description Description Description',
+    label: 'Algebraic Constraint Discovery',
+    description: <DescriptionAC />,
   },
 } as const;
 

web-app/client/src/styles/common/_mixins.scss

@@ -75,7 +75,6 @@
     color: $primary-0;
     text-decoration: underline;
   }
-
 }
 
 // Small devices

web-app/client/src/styles/common/index.scss

@@ -1,2 +1,2 @@
 @import "variables.module";
-@import "mixins";
+@import "mixins";

web-app/client/src/styles/common/variables.module.scss

@@ -3,66 +3,93 @@ $font-display: "Palanquin", sans-serif;
 $font-content: "Roboto", sans-serif;
 
 /* Shades */
-$black: #251E29;
-$white: #FFFFFF;
+$black: #251e29;
+$white: #ffffff;
 
 /* Semantics */
 $error: rgb(230, 72, 91);
-$error-10: rgba(230, 72, 91, 0.1);
-$info: #48BDFF;
-$success: #00C1A4;
-$warning: #FAB005;
+$info: #508ce5;
+$success: #00c1a4;
+$warning: #fab005;
 $button-white: rgb(2, 2, 2);
 $button-black: #101010;
 
 /* Primary */
-$primary-0: #7600D1;
-$primary-1: #59009E;
-$primary-2: #9327E7;
+$primary-0: #7600d1;
+$primary: $primary-0;
+$primary-1: #59009e;
+$primary-2: #9327e7;
 
 $secondary-0: transparent;
 $secondary-1: rgba(118, 0, 209, 0.05);
 $secondary-2: rgba(118, 0, 209, 0.1);
 
-$primary-gradient-0: linear-gradient(53.13deg, #8200D1 9.04%, #534AC2 89.96%);
-$primary-gradient-1: linear-gradient(53.13deg, #6A00AB 9.04%, #433B9C 89.96%);
+$primary-gradient-0: linear-gradient(53.13deg, #8200d1 9.04%, #534ac2 89.96%);
+$primary-gradient-1: linear-gradient(53.13deg, #6a00ab 9.04%, #433b9c 89.96%);
 
-$primary-shadow-0: 0 75px 92px rgba(0, 0, 0, 0.12), 0 31.3332px 38.4354px rgba(0, 0, 0, 0.0862625), 0 16.7522px 20.5494px rgba(0, 0, 0, 0.0715329), 0 9.39116px 11.5198px rgba(0, 0, 0, 0.06), 0 4.98758px 6.11809px rgba(0, 0, 0, 0.0484671), 0 2.07544px 2.54588px rgba(0, 0, 0, 0.0337375);
-$primary-shadow-1: 0 0 8px $info, 0 75px 92px rgba(0, 0, 0, 0.12), 0 31.3332px 38.4354px rgba(0, 0, 0, 0.0862625), 0 16.7522px 20.5494px rgba(0, 0, 0, 0.0715329), 0 9.39116px 11.5198px rgba(0, 0, 0, 0.06), 0 4.98758px 6.11809px rgba(0, 0, 0, 0.0484671), 0 2.07544px 2.54588px rgba(0, 0, 0, 0.0337375);
+$primary-shadow-0:
+  0 75px 92px rgba(0, 0, 0, 0.12),
+  0 31.3332px 38.4354px rgba(0, 0, 0, 0.0862625),
+  0 16.7522px 20.5494px rgba(0, 0, 0, 0.0715329),
+  0 9.39116px 11.5198px rgba(0, 0, 0, 0.06),
+  0 4.98758px 6.11809px rgba(0, 0, 0, 0.0484671),
+  0 2.07544px 2.54588px rgba(0, 0, 0, 0.0337375);
+$primary-shadow-1:
+  0 0 8px $info,
+  0 75px 92px rgba(0, 0, 0, 0.12),
+  0 31.3332px 38.4354px rgba(0, 0, 0, 0.0862625),
+  0 16.7522px 20.5494px rgba(0, 0, 0, 0.0715329),
+  0 9.39116px 11.5198px rgba(0, 0, 0, 0.06),
+  0 4.98758px 6.11809px rgba(0, 0, 0, 0.0484671),
+  0 2.07544px 2.54588px rgba(0, 0, 0, 0.0337375);
 
-$primary-complementary-gradient: linear-gradient(53.13deg, #7600D1 9.04%, #00C1A4 89.96%);
+$primary-complementary-gradient: linear-gradient(
+  53.13deg,
+  #7600d1 9.04%,
+  #00c1a4 89.96%
+);
 
 /* Opacity variants */
 $black-75: rgba($black, 0.75);
-$black-50: rgba($black, 0.50);
+$black-50: rgba($black, 0.5);
 $black-25: rgba($black, 0.25);
-$black-10: rgba($black, 0.10);
+$black-10: rgba($black, 0.1);
 $black-05: rgba($black, 0.05);
 
 $white-75: rgba($white, 0.75);
-$white-50: rgba($white, 0.50);
+$white-50: rgba($white, 0.5);
 $white-25: rgba($white, 0.25);
-$white-10: rgba($white, 0.10);
+$white-10: rgba($white, 0.1);
 $white-05: rgba($white, 0.05);
 
-$primary-75: rgba($primary-0, 0.75);
-$primary-50: rgba($primary-0, 0.50);
-$primary-25: rgba($primary-0, 0.25);
-$primary-10: rgba($primary-0, 0.10);
+$primary-75: rgba($primary, 0.75);
+$primary-50: rgba($primary, 0.5);
+$primary-25: rgba($primary, 0.25);
+$primary-10: rgba($primary, 0.1);
+$primary-05: rgba($primary, 0.05);
+$primary-02: rgba($primary, 0.02);
 $primary-no-alpha-10: rgb(239, 224, 250);
-$primary-05: rgba($primary-0, 0.05);
-$primary-02: rgba($primary-0, 0.02);
 
-$error-100: rgba($error, 1.00);
+$error-100: rgba($error, 1);
+$error-75: rgba($error, 0.75);
+$error-50: rgba($error, 0.5);
 $error-25: rgba($error, 0.25);
-$error-10: rgba($error, 0.10);
+$error-10: rgba($error, 0.1);
 $error-05: rgba($error, 0.05);
 
-$success-100: rgba($success, 1.00);
+$success-100: rgba($success, 1);
+$success-75: rgba($success, 0.75);
+$success-50: rgba($success, 0.5);
 $success-25: rgba($success, 0.25);
-$success-10: rgba($success, 0.10);
+$success-10: rgba($success, 0.1);
 $success-05: rgba($success, 0.05);
 
+$info-75: rgba($info, 0.75);
+$info-50: rgba($info, 0.5);
+$info-25: rgba($info, 0.25);
+$info-10: rgba($info, 0.1);
+$info-05: rgba($info, 0.05);
+
 $background: rgb(242, 245, 251);
 
 /* Breakpoints */
@@ -71,10 +98,46 @@ $screen-md-min: $screen-sm-max + 1px;
 
 /* stylelint-disable */
 :export {
-  primary100: $primary-0;
+  primary100: $primary;
   primary75: $primary-75;
+  primary50: $primary-50;
+  primary25: $primary-25;
+  primary10: $primary-10;
+  primary05: $primary-05;
+
+  black100: $black;
+  black75: $black-75;
   black50: $black-50;
   black25: $black-25;
-  black75: $black-75;
+  black10: $black-10;
+  black05: $black-05;
+
+  white100: $white;
+  white75: $white-75;
+  white50: $white-50;
+  white25: $white-25;
+  white10: $white-10;
+  white05: $white-05;
+
+  success100: $success;
+  success75: $success-75;
+  success50: $success-50;
+  success25: $success-25;
+  success10: $success-10;
+  success05: $success-05;
+
+  error100: $error;
+  error75: $error-75;
+  error50: $error-50;
+  error25: $error-25;
+  error10: $error-10;
+  error05: $error-05;
+
+  info100: $info;
+  info75: $info-75;
+  info50: $info-50;
+  info25: $info-25;
+  info10: $info-10;
+  info05: $info-05;
 }
 /* stylelint-enable */