From e5b882e51303f5377cd509cd95cb54f11e31eeff Mon Sep 17 00:00:00 2001
From: Achin Goyal <achingoyal@clearwateranalytics.com>
Date: Fri, 21 Jan 2022 13:54:21 +0530
Subject: [PATCH 1/3] Primary key addition and title description changes

---
 package.json                   |   6 ++
 src/components/Schema.tsx      |   2 +-
 src/components/SchemaField.tsx | 164 +++++++++++++++------------------
 src/helpers.ts                 |  45 ++++++++-
 src/styles/schema.css          |   7 +-
 5 files changed, 128 insertions(+), 96 deletions(-)

diff --git a/package.json b/package.json
index 4e15bf3..f2bfc57 100644
--- a/package.json
+++ b/package.json
@@ -33,10 +33,16 @@
     "update": "ncu -u"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "5.15.4",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/react-fontawesome": "0.1.16",
     "@types/lodash": "^4.14.168",
     "@types/marked": "^2.0.1",
     "@types/uuid": "^8.3.0",
     "classnames": "^2.3.1",
+    "font-awesome-icons": "1.6.0",
     "jsonschema": "^1.4.0",
     "jszip": "^3.6.0",
     "lodash": "^4.17.21",
diff --git a/src/components/Schema.tsx b/src/components/Schema.tsx
index 9f0f09b..43f1c78 100644
--- a/src/components/Schema.tsx
+++ b/src/components/Schema.tsx
@@ -81,7 +81,7 @@ export function Schema(props: ISchemaProps) {
     const column = find(columns, (column) => column.id === id)
     if (column) {
       column.field[name] = value
-      setColumns([...columns])
+      setColumns([...columns])     
     }
   }
 
diff --git a/src/components/SchemaField.tsx b/src/components/SchemaField.tsx
index 4213a5a..49ac855 100644
--- a/src/components/SchemaField.tsx
+++ b/src/components/SchemaField.tsx
@@ -1,7 +1,8 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { IDict } from '../common'
 import * as helpers from '../helpers'
-
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
 export interface ISchemaFieldProps {
   column: IDict
   metadata: IDict
@@ -12,13 +13,13 @@ export interface ISchemaFieldProps {
 export function SchemaField(props: ISchemaFieldProps) {
   const types = helpers.getFieldTypes()
   const formats = helpers.getFieldFormats(props.column.field.type)
-  const [isDetails, setIsDetails] = useState(false)
+  
   return (
     <div className="tableschema-ui-editor-field">
       {/* General */}
       <div className="row">
         {/* Name */}
-        <div className="col-md-4 name">
+        <div className="col-md-2 name">
           <div className="handle">&equiv;</div>
           <div className="input-group">
             <div className="input-group-addon">
@@ -33,8 +34,38 @@ export function SchemaField(props: ISchemaFieldProps) {
           </div>
         </div>
 
+        {/* Title */}
+        <div className="col-md-2 title">
+          <div className="input-group">
+            <div className="input-group-addon">
+              <div>Title</div>
+            </div>
+            <input
+              type="text"
+              className="form-control"
+              defaultValue={props.column.field.title}
+              onBlur={(ev) => props.updateField(props.column.id, 'title', ev.target.value)}
+            />
+          </div>
+        </div>
+
+         {/* Description */}
+         <div className="col-md-2">
+          <div className="input-group">
+            <div className="input-group-addon">
+              <div>Description</div>
+            </div>
+            <input
+              type="text"
+              className="form-control"
+              defaultValue={props.column.field.description}
+              onBlur={(ev) => props.updateField(props.column.id, 'description', ev.target.value)}
+            />
+          </div>
+        </div>
+
         {/* Type */}
-        <div className="col-md-3 type">
+        <div className="col-md-2 type">
           <div className="input-group">
             <div className="input-group-addon">
               <div>Type</div>
@@ -55,7 +86,7 @@ export function SchemaField(props: ISchemaFieldProps) {
         </div>
 
         {/* Format */}
-        <div className="col-md-3 format">
+        <div className="col-md-2">
           <div className="input-group">
             <div className="input-group-addon">
               <div>Format</div>
@@ -70,18 +101,22 @@ export function SchemaField(props: ISchemaFieldProps) {
           </div>
         </div>
 
-        {/* Controls */}
-        <div className="col-md-2 controls">
-          {/* Details */}
-          <button
-            type="button"
-            className="btn btn-light btn-lg button-details"
-            aria-expanded="false"
-            onClick={() => setIsDetails(!isDetails)}
-          >
-            Details
-          </button>
+         {/* PrimaryKey */}
+         <div className="col-md-1">
+          <div className="input-group">
+            <div className="input-group-addon">
+              <div>Primary Key</div>
+            </div>
+            <Checkbox
+              format={props.column.field.primaryKey}
+              onChange={(ev: any) => {
+                props.updateField(props.column.id, 'primaryKey', ev.currentTarget.checked)
+              }}
+            />
+          </div>       
+        </div>
 
+        <div className="col-md-1">        
           {/* Remove */}
           <button
             type="button"
@@ -91,80 +126,18 @@ export function SchemaField(props: ISchemaFieldProps) {
               props.removeField(props.column.id)
             }}
           >
-            Remove
-          </button>
+          <FontAwesomeIcon
+              onClick={(ev) => {
+                ev.preventDefault()
+                props.removeField(props.column.id)
+              }}
+              icon={faTimesCircle}
+              className="fa-icon"
+          />
+          {/* <i className="danger far fa-times-circle"></i> */}
+           </button>
         </div>
       </div>
-
-      {/* Details */}
-      {isDetails && (
-        <div className="details">
-          <div className="panel panel-default">
-            <div className="panel-body">
-              <div className="row">
-                {/* Extra fields */}
-                <div className="col-md-4 extra">
-                  {/* Title */}
-                  <div className="form-group">
-                    <label htmlFor={`field-title-${props.column.id}`}>Title</label>
-                    <input
-                      type="text"
-                      className="form-control"
-                      id={`field-title-${props.column.id}`}
-                      defaultValue={props.column.field.title}
-                      onBlur={(ev) =>
-                        props.updateField(props.column.id, 'title', ev.target.value)
-                      }
-                    />
-                  </div>
-
-                  {/* Description */}
-                  <div className="form-group">
-                    <label htmlFor={`field-description-${props.column.id}`}>
-                      Description
-                    </label>
-                    <textarea
-                      rows={5}
-                      className="form-control"
-                      id={`field-description-${props.column.id}`}
-                      defaultValue={props.column.field.description}
-                      onBlur={(ev) => {
-                        const value = ev.target.value
-                        props.updateField(props.column.id, 'description', value)
-                      }}
-                    />
-                  </div>
-                </div>
-
-                {/* Sample data */}
-                <div className="col-md-8 data">
-                  {!!(props.column.values || []).length && (
-                    <div className="form-group">
-                      <label>
-                        Data <small>(first 5 values)</small>
-                      </label>
-                      <table className="table table-condensed">
-                        <thead>
-                          <tr>
-                            <th>{props.column.field.name}</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {props.column.values.map((value: any, index: any) => (
-                            <tr key={index}>
-                              <td>{value}</td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </table>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   )
 }
@@ -191,3 +164,16 @@ function Format(props: { formats: string[]; format: string; onChange: any }) {
     )
   }
 }
+
+function Checkbox(props: { format: boolean; onChange: any }) {
+    return (
+      <div className="form-control">
+        <input
+          type="checkbox"
+          checked={props.format}
+          onChange={props.onChange}
+        />
+      </div>
+    )
+  
+}
diff --git a/src/helpers.ts b/src/helpers.ts
index 2931a32..4eb1053 100644
--- a/src/helpers.ts
+++ b/src/helpers.ts
@@ -22,7 +22,8 @@ export async function importSchema(source?: string | File, schema?: IDict | File
       const values = rows
         .map((row: any) => row[index])
         .filter((value: any) => value !== undefined)
-      columns.push(createColumn(index, field, values))
+        const primaryKey = field.name.indexOf(table.schema.descriptor.primaryKey) === -1 ? true : false;
+      columns.push(createColumn(index, field, primaryKey, values))
     }
   }
 
@@ -30,13 +31,45 @@ export async function importSchema(source?: string | File, schema?: IDict | File
   let metadata = {}
   if (table.schema) {
     metadata = omit(table.schema.descriptor, 'fields')
+    metadata = omit(table.schema.descriptor, 'primaryKey')
   }
 
   return { columns, metadata }
 }
 
 export function exportSchema(columns: IDict[], metadata: IDict) {
-  return { fields: columns.map((column) => column.field), ...metadata }
+  let obj = {};
+  let primaryKey = [];
+  metadata = omit(metadata, 'fields')
+  if (columns.some((column) => column.field.primaryKey)) {
+    primaryKey = columns.map((column) => 
+    {
+      if (column.field.primaryKey)
+      { 
+        return column.field.name
+      }
+    }).filter(key => key);
+    obj = {fields: columns.map((column) => {
+      let fieldObj = {
+      description: column.field.description,
+      format: column.field.format,
+      name: column.field.name,
+      title: column.field.title,
+      type: column.field.type,
+      } 
+      return fieldObj}), primaryKey: primaryKey, ...metadata}
+
+  } else {
+    obj = {fields: columns.map((column) => {let fieldObj = {
+      description: column.field.description,
+      format: column.field.format,
+      name: column.field.name,
+      title: column.field.title,
+      type: column.field.type,
+      } 
+      return fieldObj}), ...metadata}
+  }  
+  return obj;
 }
 
 export function getFieldTypes() {
@@ -47,12 +80,14 @@ export function getFieldFormats(type: string) {
   return config.FIELD_TYPES_AND_FORMATS[type] || []
 }
 
-export function createColumn(index: number, field: IDict = {}, values: any[] = []) {
+export function createColumn(index: number, field: IDict = {}, primaryKey: boolean = false, values: any[] = []) {
   const formats = getFieldFormats(field.type)
-  const name = field.name || `field${index + 1}`
+  const name = field.name || `field ${index + 1}`
+  const title = field.title || `Title`
+  const description = field.description || `Description`
   const type = formats.length ? field.type : 'string'
   const format = formats.includes(field.format) ? field.format : 'default'
-  return { id: uuid4(), field: { ...field, name, type, format }, values }
+  return { id: uuid4(), field: { ...field, name, title, description, type, format, primaryKey }, values }
 }
 
 export async function prepareTableSource(source?: string | File) {
diff --git a/src/styles/schema.css b/src/styles/schema.css
index 75d8ab5..59d844c 100644
--- a/src/styles/schema.css
+++ b/src/styles/schema.css
@@ -583,7 +583,7 @@
 }
 
 .frictionless-components-schema .tableschema-ui-editor-field .input-group-addon div {
-	width: 3em;
+	width: 4em;
 }
 
 .frictionless-components-schema .tableschema-ui-editor-field .btn-light {
@@ -612,6 +612,11 @@
 	}
 	.frictionless-components-schema .tableschema-ui-editor-field .name .input-group {
 		margin-left: 2.5em;
+		padding-right: 1em;
+	}
+
+	.frictionless-components-schema .tableschema-ui-editor-field .title {
+		padding-left: 3em;
 	}
 }
 

From 9fd64d7efe6679e48bd791c88a7a67ee91ebffff Mon Sep 17 00:00:00 2001
From: Sushil Kumar <sushilkumar@clearwateranalytics.com>
Date: Fri, 21 Jan 2022 19:05:43 +0530
Subject: [PATCH 2/3] Added schema JSON editor

---
 src/components/Schema.tsx        |  9 +++++++--
 src/components/SchemaPreview.tsx | 23 +++++++++++++++--------
 src/helpers.ts                   | 15 +++++++++++++++
 3 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/components/Schema.tsx b/src/components/Schema.tsx
index 43f1c78..9a2d6a9 100644
--- a/src/components/Schema.tsx
+++ b/src/components/Schema.tsx
@@ -62,6 +62,11 @@ export function Schema(props: ISchemaProps) {
     }
   }
 
+  const setSchemaColumns = (columns: IDict<any>[], primaryKeys: string[] = []) => {
+    const data = helpers.createColumns(columns, primaryKeys)
+    setColumns([...data])
+  }
+
   // Feedback Reset
   const resetFeedback = () => {}
 
@@ -81,7 +86,7 @@ export function Schema(props: ISchemaProps) {
     const column = find(columns, (column) => column.id === id)
     if (column) {
       column.field[name] = value
-      setColumns([...columns])     
+      setColumns([...columns])
     }
   }
 
@@ -207,7 +212,7 @@ export function Schema(props: ISchemaProps) {
                 role="tabpanel"
                 className={classNames('tab-pane', { active: tab === 'preview' })}
               >
-                <SchemaPreview columns={columns} metadata={metadata} />
+                <SchemaPreview setSchemaColumns={setSchemaColumns} columns={columns} metadata={metadata} />
               </div>
             )}
           </div>
diff --git a/src/components/SchemaPreview.tsx b/src/components/SchemaPreview.tsx
index de18347..b832969 100644
--- a/src/components/SchemaPreview.tsx
+++ b/src/components/SchemaPreview.tsx
@@ -1,20 +1,27 @@
-import React from 'react'
-import { IDict } from '../common'
-import * as helpers from '../helpers'
+import React from 'react';
+import { IDict } from '../common';
+import * as helpers from '../helpers';
+import JSONInput from 'react-json-editor-ajrm';
+import locale    from 'react-json-editor-ajrm/locale/en';
 
 export interface ISchemaPreviewProps {
   columns: IDict[]
-  metadata: IDict
+  metadata: IDict,
+  setSchemaColumns: (columns: IDict<any>[], primaryKeys: string[]) => void;
 }
 
 export function SchemaPreview(props: ISchemaPreviewProps) {
   const schema = helpers.exportSchema(props.columns, props.metadata)
   const schemaAsText = JSON.stringify(schema, null, 2)
+  const onBlur = (jsonSchema: IDict) => {
+    if (!jsonSchema.error) {
+      const jsObj = jsonSchema.jsObject
+      props.setSchemaColumns(jsObj.fields, jsObj.primaryKey)
+    }
+  }
   return (
-    <div className="tableschema-ui-editor-preview">
-      <pre>
-        <code>{schemaAsText}</code>
-      </pre>
+    <div>
+      <JSONInput id = 'a_unique_id' placeholder = { schema } locale = { locale } onBlur = {onBlur} height = '550px'/>
     </div>
   )
 }
diff --git a/src/helpers.ts b/src/helpers.ts
index 4eb1053..f65f886 100644
--- a/src/helpers.ts
+++ b/src/helpers.ts
@@ -80,6 +80,21 @@ export function getFieldFormats(type: string) {
   return config.FIELD_TYPES_AND_FORMATS[type] || []
 }
 
+export function createColumns(_fields: IDict[] = [], primaryKeys: string[] = [], values: any[] = []) {
+  const columns: IDict<any>[] = []
+  _fields.forEach(field => {
+    const formats = getFieldFormats(field.type)
+    const name: string = field.name || `field ${index + 1}`
+    const title = field.title || `Title`
+    const description = field.description || `Description`
+    const type = formats.length ? field.type : 'string'
+    const format = formats.includes(field.format) ? field.format : 'default'
+    const primaryKey = primaryKeys.includes(name)
+    columns.push({ id: uuid4(), field: { ...field, name, title, description, type, format, primaryKey }, values })
+  })
+  return columns
+}
+
 export function createColumn(index: number, field: IDict = {}, primaryKey: boolean = false, values: any[] = []) {
   const formats = getFieldFormats(field.type)
   const name = field.name || `field ${index + 1}`

From a4ece7f99568cd737523262cb10a0fcbd3d577e6 Mon Sep 17 00:00:00 2001
From: Achin Goyal <achingoyal@clearwateranalytics.com>
Date: Mon, 7 Feb 2022 14:49:06 +0530
Subject: [PATCH 3/3] Adding constraints window

---
 package.json                     |  20 +-
 src/components/Constraints.tsx   | 160 ++++++
 src/components/Schema.tsx        | 135 ++++-
 src/components/SchemaField.tsx   | 132 +++--
 src/components/SchemaPreview.tsx |  25 +-
 src/components/toggleSwitch.tsx  |  63 +++
 src/constants.ts                 |   4 +
 src/helpers.ts                   | 129 +++--
 src/styles/ToggleSwitch.css      | 121 +++++
 src/styles/index.ts              |   2 +
 src/styles/schema.css            | 883 +++++++++++++++++--------------
 11 files changed, 1177 insertions(+), 497 deletions(-)
 create mode 100644 src/components/Constraints.tsx
 create mode 100644 src/components/toggleSwitch.tsx
 create mode 100644 src/constants.ts
 create mode 100644 src/styles/ToggleSwitch.css

diff --git a/package.json b/package.json
index f2bfc57..080e2c1 100644
--- a/package.json
+++ b/package.json
@@ -19,13 +19,13 @@
   "scripts": {
     "analyze": "NODE_ENV=production webpack --profile --json | webpack-bundle-size-analyzer",
     "build": "npm run compile && npm run bundle",
-    "bundle": "rm -rf dist && webpack --progress && NODE_ENV=production webpack --progress",
-    "compile": "rm -rf lib && tsc && cp -r src/images lib && cp -r src/styles lib",
+    "bundle": "rimraf dist && webpack --progress && NODE_ENV=production webpack --progress",
+    "compile": "rimraf dist && tsc && copy -r src/images lib && copy -r src/styles lib",
     "docs": "build-storybook -o build",
     "start": "start-storybook -p 6006",
     "e2e": "cypress run",
-    "format": "prettier --write '{src,test}/**/*.ts*' && eslint --fix '{src,test}/**/*.ts*'",
-    "lint": "prettier --check '{src,test}/**/*.ts*' && eslint '{src,test}/**/*.ts*'",
+    "format": "prettier --write \"{src,test}/**/*.ts*\" && eslint --fix \"{src,test}/**/*.ts*\"",
+    "lint": "prettier --check \"{src,test}/**/*.ts*\" && eslint \"{src,test}/**/*.ts*\"",
     "prepare": "husky install",
     "pretest": "npm run lint",
     "readme": "doctoc --maxlevel 3 README.md",
@@ -33,21 +33,24 @@
     "update": "ncu -u"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "5.15.4",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
-    "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/react-fontawesome": "0.1.16",
+    "@fortawesome/react-fontawesome": "0.1.17",
     "@types/lodash": "^4.14.168",
     "@types/marked": "^2.0.1",
     "@types/uuid": "^8.3.0",
+    "bootstrap": "5.1.3",
     "classnames": "^2.3.1",
-    "font-awesome-icons": "1.6.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-prettier": "4.0.0",
     "jsonschema": "^1.4.0",
     "jszip": "^3.6.0",
     "lodash": "^4.17.21",
     "marked": "^2.0.1",
+    "react-json-editor-ajrm": "^2.5.13",
     "react-sortable-hoc": "^2.0.0",
+    "reactstrap": "9.0.1",
+    "rimraf": "3.0.2",
     "tableschema": "^1.12.4",
     "use-async-effect": "^2.2.3",
     "uuid": "^8.3.2"
@@ -70,6 +73,7 @@
     "@types/node-fetch": "^2.5.10",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
+    "@types/react-json-editor-ajrm": "^2.5.2",
     "@typescript-eslint/eslint-plugin": "^4.21.0",
     "@typescript-eslint/parser": "^4.21.0",
     "babel-loader": "^8.2.2",
diff --git a/src/components/Constraints.tsx b/src/components/Constraints.tsx
new file mode 100644
index 0000000..633aedf
--- /dev/null
+++ b/src/components/Constraints.tsx
@@ -0,0 +1,160 @@
+import React, { useState } from 'react'
+import { UNIQUE, REQUIRED } from '../constants'
+import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Table } from 'reactstrap'
+import { ToggleSwitch } from './toggleSwitch'
+
+/**
+ *
+ */
+export type MultiSelectProps = {
+  toggleModal: any
+  saveConstraint: any
+  removeConstraint: any
+  column: any
+}
+
+export function Constraints(props: MultiSelectProps) {
+  const [constraint, setConstraint] = useState<string>('')
+  const [toggleConstraint, setToggleConstraint] = useState(false)
+  const [requiredChecked, setRequiredChecked] = useState(true)
+  const [uniqueChecked, setUniqueChecked] = useState(true)
+
+  const toggleDropDown = () => {
+    setToggleConstraint(!toggleConstraint)
+  }
+
+  const selectConstraint = (type: string) => {
+    if (type === REQUIRED) {
+      setConstraint(REQUIRED)
+    }
+    if (type === UNIQUE) {
+      setConstraint(UNIQUE)
+    }
+  }
+
+  const setConstraintChecked = (value: boolean) => {
+    if (constraint === REQUIRED) {
+      setRequiredChecked(value)
+    } else if (constraint === UNIQUE) {
+      setUniqueChecked(value)
+    }
+  }
+
+  const setDropdown = () => {
+    return constraint || props.column.field.constraintsAvailable[0]
+  }
+
+  const currentDate = () => {
+    return new Date().toLocaleString().split(',')[0]
+  }
+
+  return (
+    <div className="multiselect">
+      <div className="multiselect-grid">
+        <div className="multiselect-column seprator">
+          <div className="multiselect-body">
+            {props.column.field ? props.column.field.name : ''}
+            <br />
+            <Dropdown toggle={toggleDropDown} isOpen={toggleConstraint}>
+              <DropdownToggle caret>{setDropdown()}</DropdownToggle>
+              <DropdownMenu>
+                {props.column.field.constraintsAvailable &&
+                  props.column.field.constraintsAvailable.map((constraint: any) => (
+                    <DropdownItem
+                      key={'id-' + constraint}
+                      onClick={() => selectConstraint(constraint)}
+                    >
+                      {constraint}
+                    </DropdownItem>
+                  ))}
+              </DropdownMenu>
+            </Dropdown>
+
+            {constraint === REQUIRED && (
+              <div>
+                Required Constraint: <br />
+                <ToggleSwitch
+                  id="onoffConstraint"
+                  checked={requiredChecked}
+                  onFieldChange={(val: boolean) => setConstraintChecked(val)}
+                  name="toggle"
+                  small={false}
+                  disabled={true}
+                ></ToggleSwitch>
+              </div>
+            )}
+
+            {constraint === UNIQUE && (
+              <div>
+                Unique Constraint: <br />
+                <ToggleSwitch
+                  id="switchUnique"
+                  checked={uniqueChecked}
+                  onFieldChange={(val: boolean) => setConstraintChecked(val)}
+                  name="toggle"
+                  small={false}
+                  disabled={true}
+                ></ToggleSwitch>
+              </div>
+            )}
+          </div>
+
+          <div className="multiselect-footer">
+            <button className="cancel-btn" type="button" onClick={props.toggleModal}>
+              Cancel
+            </button>
+            <button
+              className="save-btn"
+              type="button"
+              disabled={!constraint}
+              onClick={() => {
+                setConstraint('')
+                props.saveConstraint(constraint)
+              }}
+            >
+              Save
+            </button>
+          </div>
+        </div>
+
+        <div className="multiselect-column">
+          <div className="multiselect-header">
+            <h5>Previously added</h5>
+          </div>
+          <div className="multiselect-body">
+            <Table>
+              <thead>
+                <tr>
+                  <th>Constraint</th>
+                  <th>Value</th>
+                  <th>Added By</th>
+                  <th>Effective Date</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {props.column.field.constraintList &&
+                  props.column.field.constraintList.map((value: any) => {
+                    return (
+                      <tr key={value}>
+                        <th scope="row">{value}</th>
+                        <td>true</td>
+                        <td>Mark</td>
+                        <td>{currentDate()}</td>
+                        <td>
+                          <button
+                            className="btn-close"
+                            onClick={() => props.removeConstraint(value)}
+                          ></button>
+                        </td>
+                      </tr>
+                    )
+                  })}
+              </tbody>
+            </Table>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/Schema.tsx b/src/components/Schema.tsx
index 43f1c78..953129e 100644
--- a/src/components/Schema.tsx
+++ b/src/components/Schema.tsx
@@ -1,4 +1,4 @@
-import { find } from 'lodash'
+import { find, omit, entries, forOwn } from 'lodash'
 import classNames from 'classnames'
 import React, { useCallback, useEffect, useState } from 'react'
 import { arrayMove } from 'react-sortable-hoc'
@@ -9,7 +9,7 @@ import { SchemaPreview } from './SchemaPreview'
 import { SchemaField } from './SchemaField'
 import * as helpers from '../helpers'
 import { IDict } from '../common'
-
+import { UNIQUE, REQUIRED } from '../constants'
 export interface ISchemaProps {
   source?: string | File
   schema: IDict | File
@@ -26,7 +26,6 @@ export function Schema(props: ISchemaProps) {
   const [columns, setColumns] = useState([] as IDict[])
   const [metadata, setMetadata] = useState({} as IDict)
   const [feedback] = useState({} as ISchemaFeedbackProps['feedback'])
-
   // Mount
   useAsyncEffect(async () => {
     try {
@@ -36,8 +35,7 @@ export function Schema(props: ISchemaProps) {
       setColumns(columns)
       setMetadata(metadata)
     } catch (error) {
-      // @ts-ignore
-      setError(error)
+      setError(null)
       setLoading(false)
     }
   }, [])
@@ -62,8 +60,15 @@ export function Schema(props: ISchemaProps) {
     }
   }
 
+  const setSchemaColumns = (columns: IDict<any>[], primaryKeys: string[] = []) => {
+    const data = helpers.createColumns(columns, primaryKeys)
+    setColumns([...data])
+  }
+
   // Feedback Reset
-  const resetFeedback = () => {}
+  const resetFeedback = () => {
+    console.log('Feedback')
+  }
 
   // Add Field
   const addField = () => {
@@ -81,7 +86,35 @@ export function Schema(props: ISchemaProps) {
     const column = find(columns, (column) => column.id === id)
     if (column) {
       column.field[name] = value
-      setColumns([...columns])     
+      setColumns([...columns])
+    }
+  }
+
+  // Update Constraint
+  const updateConstraint = (id: number, setConstraint: string, value: any): void => {
+    const column = find(columns, (column) => column.id === id)
+    if (column) {
+      const constrain: any = {}
+      if (setConstraint === REQUIRED) {
+        if (!value) {
+          column.field.constraints = omit(column.field.constraints, REQUIRED)
+        } else {
+          constrain[REQUIRED] = value
+        }
+      }
+      if (setConstraint === UNIQUE) {
+        if (!value) {
+          column.field.constraints = omit(column.field.constraints, UNIQUE)
+        } else {
+          constrain[UNIQUE] = value
+        }
+      }
+      column.field.constraints = { ...column.field.constraints, ...constrain }
+      if (entries(column.field.constraints).length < 1) {
+        column.field = omit(column.field, 'constraints')
+      }
+
+      setColumns([...columns])
     }
   }
 
@@ -92,6 +125,55 @@ export function Schema(props: ISchemaProps) {
 
   const showTabNumber = !props.disablePreview && !props.disableSave
 
+  const saveConstraint = (type: string, column: any) => {
+    const constrain: any = []
+    constrain.push(type)
+    column.field.constraintList = column.field.constraintList
+      ? [...column.field.constraintList, ...constrain]
+      : constrain
+
+    forOwn(column.field.constraintsAvailable, function (value) {
+      if (value === type) {
+        column.field.constraintsAvailable = column.field.constraintsAvailable.filter(
+          (constr: any) => {
+            if (constr !== type) {
+              return constr
+            }
+            return null
+          }
+        )
+      }
+    })
+
+    setColumns([...columns])
+    updateConstraint(column.id, type, true)
+  }
+
+  const removeItem = (type: string, column: any) => {
+    const constrain: any = []
+    constrain.push(type)
+    column.field.constraintsAvailable = [
+      ...column.field.constraintsAvailable,
+      ...constrain,
+    ]
+
+    forOwn(column.field.constraintList, function (value) {
+      if (value === type) {
+        column.field.constraintList = column.field.constraintList.filter(
+          (constr: any) => {
+            if (constr !== type) {
+              return constr
+            }
+            return null
+          }
+        )
+      }
+    })
+
+    setColumns([...columns])
+    updateConstraint(column.id, type, false)
+  }
+
   return (
     <div className="frictionless-components-schema">
       <div className="tableschema-ui-editor-schema">
@@ -179,6 +261,11 @@ export function Schema(props: ISchemaProps) {
                     metadata={metadata}
                     removeField={removeField}
                     updateField={updateField}
+                    updateConstraint={updateConstraint}
+                    saveConstraint={(val: any, column: any) =>
+                      saveConstraint(val, column)
+                    }
+                    removeConstraint={(val: any, column: any) => removeItem(val, column)}
                     helperClass="frictionless-components-schema"
                     onSortEnd={moveField}
                     lockAxis="y"
@@ -207,7 +294,11 @@ export function Schema(props: ISchemaProps) {
                 role="tabpanel"
                 className={classNames('tab-pane', { active: tab === 'preview' })}
               >
-                <SchemaPreview columns={columns} metadata={metadata} />
+                <SchemaPreview
+                  setSchemaColumns={setSchemaColumns}
+                  columns={columns}
+                  metadata={metadata}
+                />
               </div>
             )}
           </div>
@@ -220,7 +311,15 @@ export function Schema(props: ISchemaProps) {
 // Internal
 
 const SortableFields = SortableContainer(
-  (props: { columns: IDict[]; metadata: IDict; removeField: any; updateField: any }) => (
+  (props: {
+    columns: IDict[]
+    metadata: IDict
+    removeField: any
+    updateField: any
+    updateConstraint: any
+    saveConstraint: any
+    removeConstraint: any
+  }) => (
     <ul className="tableschema-ui-editor-sortable-list">
       {props.columns.map((column: IDict, index: number) => (
         <SortableField
@@ -230,6 +329,11 @@ const SortableFields = SortableContainer(
           metadata={props.metadata}
           removeField={props.removeField}
           updateField={props.updateField}
+          updateConstraint={props.updateConstraint}
+          saveConstraint={(val: any, column: any) => props.saveConstraint(val, column)}
+          removeConstraint={(val: any, column: any) =>
+            props.removeConstraint(val, column)
+          }
         />
       ))}
     </ul>
@@ -237,7 +341,15 @@ const SortableFields = SortableContainer(
 )
 
 const SortableField = SortableElement(
-  (props: { column: IDict; metadata: IDict; removeField: any; updateField: any }) => (
+  (props: {
+    column: IDict
+    metadata: IDict
+    removeField: any
+    updateField: any
+    updateConstraint: any
+    saveConstraint: any
+    removeConstraint: any
+  }) => (
     <li className="tableschema-ui-editor-sortable-item">
       <SchemaField
         key={props.column.id}
@@ -245,6 +357,9 @@ const SortableField = SortableElement(
         metadata={props.metadata}
         removeField={props.removeField}
         updateField={props.updateField}
+        updateConstraint={props.updateConstraint}
+        saveConstraint={(val: any, column: any) => props.saveConstraint(val, column)}
+        removeConstraint={(val: any, column: any) => props.removeConstraint(val, column)}
       />
     </li>
   )
diff --git a/src/components/SchemaField.tsx b/src/components/SchemaField.tsx
index 49ac855..7ef8136 100644
--- a/src/components/SchemaField.tsx
+++ b/src/components/SchemaField.tsx
@@ -1,19 +1,34 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { IDict } from '../common'
 import * as helpers from '../helpers'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTimesCircle, faEllipsisV } from '@fortawesome/free-solid-svg-icons'
+import {
+  Modal,
+  ModalBody,
+  ModalHeader,
+  Dropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem
+} from 'reactstrap'
+import { Constraints } from './Constraints'
 export interface ISchemaFieldProps {
   column: IDict
   metadata: IDict
   removeField: any
   updateField: any
+  updateConstraint: any
+  saveConstraint: any
+  removeConstraint: any
 }
 
 export function SchemaField(props: ISchemaFieldProps) {
   const types = helpers.getFieldTypes()
   const formats = helpers.getFieldFormats(props.column.field.type)
-  
+  const [isDetails, setIsDetails] = useState(false)
+  const [modalOpen, setModalOpen] = useState<boolean>(false)
+
   return (
     <div className="tableschema-ui-editor-field">
       {/* General */}
@@ -44,13 +59,15 @@ export function SchemaField(props: ISchemaFieldProps) {
               type="text"
               className="form-control"
               defaultValue={props.column.field.title}
-              onBlur={(ev) => props.updateField(props.column.id, 'title', ev.target.value)}
+              onBlur={(ev) =>
+                props.updateField(props.column.id, 'title', ev.target.value)
+              }
             />
           </div>
         </div>
 
-         {/* Description */}
-         <div className="col-md-2">
+        {/* Description */}
+        <div className="col-md-2">
           <div className="input-group">
             <div className="input-group-addon">
               <div>Description</div>
@@ -59,7 +76,9 @@ export function SchemaField(props: ISchemaFieldProps) {
               type="text"
               className="form-control"
               defaultValue={props.column.field.description}
-              onBlur={(ev) => props.updateField(props.column.id, 'description', ev.target.value)}
+              onBlur={(ev) =>
+                props.updateField(props.column.id, 'description', ev.target.value)
+              }
             />
           </div>
         </div>
@@ -101,8 +120,8 @@ export function SchemaField(props: ISchemaFieldProps) {
           </div>
         </div>
 
-         {/* PrimaryKey */}
-         <div className="col-md-1">
+        {/* PrimaryKey */}
+        <div className="col-md-1">
           <div className="input-group">
             <div className="input-group-addon">
               <div>Primary Key</div>
@@ -113,29 +132,71 @@ export function SchemaField(props: ISchemaFieldProps) {
                 props.updateField(props.column.id, 'primaryKey', ev.currentTarget.checked)
               }}
             />
-          </div>       
+          </div>
         </div>
 
-        <div className="col-md-1">        
-          {/* Remove */}
-          <button
-            type="button"
-            className="btn btn-light btn-lg button-remove"
-            onClick={(ev) => {
-              ev.preventDefault()
-              props.removeField(props.column.id)
-            }}
-          >
-          <FontAwesomeIcon
+        {/* Action Menu */}
+        <div className="col-md-1 ">
+          <span className="menu-options">
+            <span className="menu-dropdown">
+              <Dropdown
+                isOpen={isDetails}
+                toggle={() => setIsDetails(!isDetails)}
+                direction="start"
+              >
+                <DropdownToggle>
+                  <FontAwesomeIcon icon={faEllipsisV} className="fa-icon" />
+                </DropdownToggle>
+                <DropdownMenu>
+                  <DropdownItem onClick={() => setModalOpen(true)}>
+                    Add Schema Constraints
+                  </DropdownItem>
+                  <DropdownItem divider />
+                  <DropdownItem>Another Action</DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
+
+              <Modal
+                centered
+                isOpen={modalOpen}
+                size="xl"
+                toggle={() => setModalOpen(false)}
+              >
+                <ModalHeader toggle={() => setModalOpen(false)}>
+                  Constraints/Validations
+                </ModalHeader>
+                <ModalBody>
+                  <Constraints
+                    column={props.column}
+                    toggleModal={() => setModalOpen(false)}
+                    saveConstraint={(val: any) => props.saveConstraint(val, props.column)}
+                    removeConstraint={(val: any) =>
+                      props.removeConstraint(val, props.column)
+                    }
+                  />
+                </ModalBody>
+              </Modal>
+            </span>
+
+            {/* Remove */}
+            <button
+              type="button"
+              className="btn btn-light btn-lg button-remove"
               onClick={(ev) => {
                 ev.preventDefault()
                 props.removeField(props.column.id)
               }}
-              icon={faTimesCircle}
-              className="fa-icon"
-          />
-          {/* <i className="danger far fa-times-circle"></i> */}
-           </button>
+            >
+              <FontAwesomeIcon
+                onClick={(ev: any) => {
+                  ev.preventDefault()
+                  props.removeField(props.column.id)
+                }}
+                icon={faTimesCircle}
+                className="fa-icon"
+              />
+            </button>
+          </span>
         </div>
       </div>
     </div>
@@ -143,7 +204,6 @@ export function SchemaField(props: ISchemaFieldProps) {
 }
 
 // Internal
-
 function Format(props: { formats: string[]; format: string; onChange: any }) {
   if (!props.formats.includes('custom')) {
     return (
@@ -165,15 +225,11 @@ function Format(props: { formats: string[]; format: string; onChange: any }) {
   }
 }
 
+// Internal
 function Checkbox(props: { format: boolean; onChange: any }) {
-    return (
-      <div className="form-control">
-        <input
-          type="checkbox"
-          checked={props.format}
-          onChange={props.onChange}
-        />
-      </div>
-    )
-  
+  return (
+    <div className="form-control">
+      <input type="checkbox" checked={props.format} onChange={props.onChange} />
+    </div>
+  )
 }
diff --git a/src/components/SchemaPreview.tsx b/src/components/SchemaPreview.tsx
index de18347..5d7dc1c 100644
--- a/src/components/SchemaPreview.tsx
+++ b/src/components/SchemaPreview.tsx
@@ -1,20 +1,35 @@
 import React from 'react'
 import { IDict } from '../common'
 import * as helpers from '../helpers'
+import JSONInput from 'react-json-editor-ajrm'
+import locale from 'react-json-editor-ajrm/locale/en'
 
 export interface ISchemaPreviewProps {
   columns: IDict[]
   metadata: IDict
+  setSchemaColumns: (columns: IDict<any>[], primaryKeys: string[]) => void
 }
 
 export function SchemaPreview(props: ISchemaPreviewProps) {
   const schema = helpers.exportSchema(props.columns, props.metadata)
-  const schemaAsText = JSON.stringify(schema, null, 2)
+  // const schemaAsText = JSON.stringify(schema, null, 2)
+  const onBlur = (jsonSchema: IDict) => {
+    if (!jsonSchema.error) {
+      const jsObj = jsonSchema.jsObject
+      props.setSchemaColumns(jsObj.fields, jsObj.primaryKey)
+    }
+  }
   return (
-    <div className="tableschema-ui-editor-preview">
-      <pre>
-        <code>{schemaAsText}</code>
-      </pre>
+    <div>
+      <JSONInput
+        id="a_unique_id"
+        placeholder={schema}
+        theme="light_mitsuketa_tribute"
+        locale={locale}
+        onBlur={onBlur}
+        height="550px"
+        width="80%"
+      />
     </div>
   )
 }
diff --git a/src/components/toggleSwitch.tsx b/src/components/toggleSwitch.tsx
new file mode 100644
index 0000000..6b2d71c
--- /dev/null
+++ b/src/components/toggleSwitch.tsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import { optionLabels } from './../constants'
+
+export type MultiSelectProps = {
+  id: string
+  checked: boolean
+  onFieldChange: any
+  name: string
+  small: boolean
+  disabled: boolean
+}
+
+export function ToggleSwitch(props: MultiSelectProps) {
+  const handleKeyPress = (e: any) => {
+    if (e.keyCode !== 32) return
+
+    e.preventDefault()
+    props.onFieldChange(!props.checked)
+  }
+
+  return (
+    <div className={'toggle-switch' + (props.small ? ' small-switch' : '')}>
+      <input
+        type="checkbox"
+        name={props.name}
+        className="toggle-switch-checkbox"
+        id={props.id}
+        checked={props.checked}
+        onChange={(e) => props.onFieldChange(e.target.checked)}
+        disabled={props.disabled}
+      />
+      {props.id ? (
+        <label
+          className="toggle-switch-label"
+          htmlFor={props.id}
+          tabIndex={props.disabled ? -1 : 1}
+          onKeyDown={(e) => {
+            handleKeyPress(e)
+          }}
+        >
+          <span
+            className={
+              props.disabled
+                ? 'toggle-switch-inner toggle-switch-disabled'
+                : 'toggle-switch-inner'
+            }
+            data-yes={optionLabels[0]}
+            data-no={optionLabels[1]}
+            tabIndex={-1}
+          />
+          <span
+            className={
+              props.disabled
+                ? 'toggle-switch-switch toggle-switch-disabled'
+                : 'toggle-switch-switch'
+            }
+            tabIndex={-1}
+          />
+        </label>
+      ) : null}
+    </div>
+  )
+}
diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 0000000..93dcb63
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1,4 @@
+export const UNIQUE = 'unique'
+export const REQUIRED = 'required'
+export const constraintsList = ['Select', REQUIRED, UNIQUE]
+export const optionLabels = ['Yes', 'No']
diff --git a/src/helpers.ts b/src/helpers.ts
index 4eb1053..28c50b6 100644
--- a/src/helpers.ts
+++ b/src/helpers.ts
@@ -1,10 +1,9 @@
-import { omit } from 'lodash'
+import { omit, forOwn } from 'lodash'
 import { Readable } from 'stream'
 import { v4 as uuid4 } from 'uuid'
 import { Table } from 'tableschema'
 import { IDict } from './common'
 import * as config from './config'
-
 // Schema
 
 export async function importSchema(source?: string | File, schema?: IDict | File) {
@@ -22,7 +21,9 @@ export async function importSchema(source?: string | File, schema?: IDict | File
       const values = rows
         .map((row: any) => row[index])
         .filter((value: any) => value !== undefined)
-        const primaryKey = field.name.indexOf(table.schema.descriptor.primaryKey) === -1 ? true : false;
+      const primaryKey = table.schema.descriptor.primaryKey
+        ? field.name.indexOf(table.schema.descriptor.primaryKey) === -1
+        : false
       columns.push(createColumn(index, field, primaryKey, values))
     }
   }
@@ -38,38 +39,48 @@ export async function importSchema(source?: string | File, schema?: IDict | File
 }
 
 export function exportSchema(columns: IDict[], metadata: IDict) {
-  let obj = {};
-  let primaryKey = [];
+  let obj = {}
+  const primaryKey: string[] = []
   metadata = omit(metadata, 'fields')
   if (columns.some((column) => column.field.primaryKey)) {
-    primaryKey = columns.map((column) => 
-    {
-      if (column.field.primaryKey)
-      { 
-        return column.field.name
+    columns.forEach((column) => {
+      if (column.field.primaryKey) {
+        primaryKey.push(column.field.name)
       }
-    }).filter(key => key);
-    obj = {fields: columns.map((column) => {
-      let fieldObj = {
-      description: column.field.description,
-      format: column.field.format,
-      name: column.field.name,
-      title: column.field.title,
-      type: column.field.type,
-      } 
-      return fieldObj}), primaryKey: primaryKey, ...metadata}
-
+    })
+    obj = {
+      fields: columns.map((column) => {
+        const fieldObj = {
+          description: column.field.description,
+          format: column.field.format,
+          name: column.field.name,
+          title: column.field.title,
+          type: column.field.type,
+          constraints: column.field.constraints,
+        }
+        return fieldObj
+      }),
+      primaryKey: primaryKey,
+      ...metadata,
+    }
   } else {
-    obj = {fields: columns.map((column) => {let fieldObj = {
-      description: column.field.description,
-      format: column.field.format,
-      name: column.field.name,
-      title: column.field.title,
-      type: column.field.type,
-      } 
-      return fieldObj}), ...metadata}
-  }  
-  return obj;
+    obj = {
+      fields: columns.map((column) => {
+        const fieldObj = {
+          description: column.field.description,
+          format: column.field.format,
+          name: column.field.name,
+          title: column.field.title,
+          type: column.field.type,
+          constraints: column.field.constraints,
+        }
+        return fieldObj
+      }),
+      ...metadata,
+    }
+  }
+
+  return obj
 }
 
 export function getFieldTypes() {
@@ -80,14 +91,62 @@ export function getFieldFormats(type: string) {
   return config.FIELD_TYPES_AND_FORMATS[type] || []
 }
 
-export function createColumn(index: number, field: IDict = {}, primaryKey: boolean = false, values: any[] = []) {
+export function createColumns(
+  _fields: IDict[] = [],
+  primaryKeys: string[] = [],
+  values: any[] = []
+) {
+  const columns: IDict<any>[] = []
+  _fields.forEach((field, index) => {
+    const name = field.name || `field ${index + 1}`
+    const primaryKey = primaryKeys.includes(name)
+    columns.push(createColumn(index, field, primaryKey, values))
+  })
+  return columns
+}
+
+export function createColumn(
+  index: number,
+  field: IDict = {},
+  primaryKey = false,
+  values: any[] = []
+) {
   const formats = getFieldFormats(field.type)
   const name = field.name || `field ${index + 1}`
-  const title = field.title || `Title`
-  const description = field.description || `Description`
+  const title = field.title || 'Title'
+  const description = field.description || 'Description'
   const type = formats.length ? field.type : 'string'
   const format = formats.includes(field.format) ? field.format : 'default'
-  return { id: uuid4(), field: { ...field, name, title, description, type, format, primaryKey }, values }
+  let constraintsAvailable = ['Select', 'required', 'unique']
+  const constraintList: string[] = []
+  if (field.constraints && Object.keys(field.constraints).length) {
+    forOwn(field.constraints, function (key, value) {
+      console.log(key)
+      constraintsAvailable = constraintsAvailable.filter((constr: any) => {
+        if (constr !== value) {
+          return constr
+        } else {
+          constraintList.push(value)
+          return null
+        }
+      })
+    })
+  }
+  return {
+    id: uuid4(),
+    field: {
+      ...field,
+      name,
+      title,
+      description,
+      type,
+      format,
+      constraintsAvailable,
+      constraintList,
+      primaryKey,
+    },
+    values,
+  }
 }
 
 export async function prepareTableSource(source?: string | File) {
diff --git a/src/styles/ToggleSwitch.css b/src/styles/ToggleSwitch.css
new file mode 100644
index 0000000..6f35df5
--- /dev/null
+++ b/src/styles/ToggleSwitch.css
@@ -0,0 +1,121 @@
+.toggle-switch {
+  position: relative;
+  margin-right: 10px;
+  width: 75px;
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  text-align: left;
+}
+.toggle-switch-checkbox {
+  display: none;
+}
+.toggle-switch-label {
+  display: block;
+  overflow: hidden;
+  cursor: pointer;
+  border: 0 solid #bbb;
+  border-radius: 20px;
+  margin: 0;
+}
+.toggle-switch-label:focus {
+  outline: none;
+}
+.toggle-switch-label:focus > span {
+  box-shadow: 0 0 2px 5px red;
+}
+.toggle-switch-label > span:focus {
+  outline: none;
+}
+.toggle-switch-inner {
+  display: block;
+  width: 200%;
+  margin-left: -100%;
+  transition: margin 0.3s ease-in 0s;
+}
+.toggle-switch-inner:before,
+.toggle-switch-inner:after {
+  display: block;
+  float: left;
+  width: 50%;
+  height: 34px;
+  padding: 0;
+  line-height: 34px;
+  font-size: 14px;
+  color: white;
+  font-weight: bold;
+  box-sizing: border-box;
+}
+.toggle-switch-inner:before {
+  content: attr(data-yes);
+  text-transform: uppercase;
+  padding-left: 10px;
+  background-color: #2f855a;
+  color: #fff;
+}
+.toggle-switch-disabled {
+  background-color: #ddd;
+  cursor: not-allowed;
+}
+.toggle-switch-disabled:before {
+  background-color: #ddd;
+  cursor: not-allowed;
+}
+.toggle-switch-inner:after {
+  content: attr(data-no);
+  text-transform: uppercase;
+  padding-right: 10px;
+  background-color: #bbb;
+  color: #fff;
+  text-align: right;
+}
+.toggle-switch-switch {
+  display: block;
+  width: 24px;
+  margin: 5px;
+  background: #fff;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 40px;
+  border: 0 solid #bbb;
+  border-radius: 20px;
+  transition: all 0.3s ease-in 0s;
+}
+.toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-inner {
+  margin-left: 0;
+}
+.toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-switch {
+  right: 0px;
+}
+.toggle-switch.small-switch {
+  width: 40px;
+}
+.toggle-switch.small-switch .toggle-switch-inner:after,
+.toggle-switch.small-switch .toggle-switch-inner:before {
+  content: '';
+  height: 20px;
+  line-height: 20px;
+}
+.toggle-switch.small-switch .toggle-switch-switch {
+  width: 16px;
+  right: 20px;
+  margin: 2px;
+}
+@media screen and (max-width: 991px) {
+  .toggle-switch {
+    transform: scale(0.9);
+  }
+}
+@media screen and (max-width: 767px) {
+  .toggle-switch {
+    transform: scale(0.825);
+  }
+}
+@media screen and (max-width: 575px) {
+  .toggle-switch {
+    transform: scale(0.75);
+  }
+}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 980a7f6..25d0a3d 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1,3 +1,5 @@
 import './report.css'
 import './schema.css'
 import './workflow.css'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import './ToggleSwitch.css'
diff --git a/src/styles/schema.css b/src/styles/schema.css
index 59d844c..abc5d41 100644
--- a/src/styles/schema.css
+++ b/src/styles/schema.css
@@ -1,210 +1,210 @@
 .frictionless-components-schema a {
 	background-color: transparent;
-}
-
-.frictionless-components-schema a:active,
-.frictionless-components-schema a:hover {
+  }
+  
+  .frictionless-components-schema a:active,
+  .frictionless-components-schema a:hover {
 	outline: 0;
-}
-
-.frictionless-components-schema small {
+  }
+  
+  .frictionless-components-schema small {
 	font-size: 80%;
-}
-
-.frictionless-components-schema hr {
+  }
+  
+  .frictionless-components-schema hr {
 	height: 0;
 	-webkit-box-sizing: content-box;
 	-moz-box-sizing: content-box;
 	box-sizing: content-box;
-}
-
-.frictionless-components-schema pre {
+  }
+  
+  .frictionless-components-schema pre {
 	overflow: auto;
-}
-
-.frictionless-components-schema code,
-.frictionless-components-schema pre {
+  }
+  
+  .frictionless-components-schema code,
+  .frictionless-components-schema pre {
 	font-family: monospace, monospace;
 	font-size: 1em;
-}
-
-.frictionless-components-schema button,
-.frictionless-components-schema input,
-.frictionless-components-schema select,
-.frictionless-components-schema textarea {
+  }
+  
+  .frictionless-components-schema button,
+  .frictionless-components-schema input,
+  .frictionless-components-schema select,
+  .frictionless-components-schema textarea {
 	margin: 0;
 	font: inherit;
 	color: inherit;
-}
-
-.frictionless-components-schema button {
+  }
+  
+  .frictionless-components-schema button {
 	overflow: visible;
-}
-
-.frictionless-components-schema button,
-.frictionless-components-schema select {
+  }
+  
+  .frictionless-components-schema button,
+  .frictionless-components-schema select {
 	text-transform: none;
-}
-
-.frictionless-components-schema button {
+  }
+  
+  .frictionless-components-schema button {
 	-webkit-appearance: button;
 	cursor: pointer;
-}
-
-.frictionless-components-schema button::-moz-focus-inner,
-.frictionless-components-schema input::-moz-focus-inner {
+  }
+  
+  .frictionless-components-schema button::-moz-focus-inner,
+  .frictionless-components-schema input::-moz-focus-inner {
 	padding: 0;
 	border: 0;
-}
-
-.frictionless-components-schema input {
+  }
+  
+  .frictionless-components-schema input {
 	line-height: normal;
-}
-
-.frictionless-components-schema textarea {
+  }
+  
+  .frictionless-components-schema textarea {
 	overflow: auto;
-}
-
-.frictionless-components-schema table {
+  }
+  
+  .frictionless-components-schema table {
 	border-spacing: 0;
 	border-collapse: collapse;
-}
-
-.frictionless-components-schema td,
-.frictionless-components-schema th {
+  }
+  
+  .frictionless-components-schema td,
+  .frictionless-components-schema th {
 	padding: 0;
-}
-
-@media print {
+  }
+  
+  @media print {
 	.frictionless-components-schema *,
 	.frictionless-components-schema :after,
 	.frictionless-components-schema :before {
-		color: #000!important;
-		text-shadow: none!important;
-		background: 0 0!important;
-		-webkit-box-shadow: none!important;
-		box-shadow: none!important;
+	  color: #000 !important;
+	  text-shadow: none !important;
+	  background: 0 0 !important;
+	  -webkit-box-shadow: none !important;
+	  box-shadow: none !important;
 	}
 	.frictionless-components-schema a,
 	.frictionless-components-schema a:visited {
-		text-decoration: underline;
+	  text-decoration: underline;
 	}
 	.frictionless-components-schema a[href]:after {
-		content: " (" attr(href) ")";
+	  content: ' (' attr(href) ')';
 	}
-	.frictionless-components-schema a[href^="#"]:after {
-		content: "";
+	.frictionless-components-schema a[href^='#']:after {
+	  content: '';
 	}
 	.frictionless-components-schema pre {
-		border: 1px solid #999;
-		page-break-inside: avoid;
+	  border: 1px solid #999;
+	  page-break-inside: avoid;
 	}
 	.frictionless-components-schema thead {
-		display: table-header-group;
+	  display: table-header-group;
 	}
 	.frictionless-components-schema tr {
-		page-break-inside: avoid;
+	  page-break-inside: avoid;
 	}
 	.frictionless-components-schema h2 {
-		orphans: 3;
-		widows: 3;
+	  orphans: 3;
+	  widows: 3;
 	}
 	.frictionless-components-schema h2 {
-		page-break-after: avoid;
+	  page-break-after: avoid;
 	}
 	.frictionless-components-schema .table {
-		border-collapse: collapse!important;
+	  border-collapse: collapse !important;
 	}
 	.frictionless-components-schema .table td,
 	.frictionless-components-schema .table th {
-		background-color: #fff!important;
+	  background-color: #fff !important;
 	}
-}
-
-.frictionless-components-schema * {
+  }
+  
+  .frictionless-components-schema * {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
-}
-
-.frictionless-components-schema :after,
-.frictionless-components-schema :before {
+  }
+  
+  .frictionless-components-schema :after,
+  .frictionless-components-schema :before {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
-}
-
-.frictionless-components-schema button,
-.frictionless-components-schema input,
-.frictionless-components-schema select,
-.frictionless-components-schema textarea {
+  }
+  
+  .frictionless-components-schema button,
+  .frictionless-components-schema input,
+  .frictionless-components-schema select,
+  .frictionless-components-schema textarea {
 	font-family: inherit;
 	font-size: inherit;
 	line-height: inherit;
-}
-
-.frictionless-components-schema a {
+  }
+  
+  .frictionless-components-schema a {
 	color: #337ab7;
 	text-decoration: none;
-}
-
-.frictionless-components-schema a:focus,
-.frictionless-components-schema a:hover {
+  }
+  
+  .frictionless-components-schema a:focus,
+  .frictionless-components-schema a:hover {
 	color: #23527c;
 	text-decoration: underline;
-}
-
-.frictionless-components-schema a:focus {
+  }
+  
+  .frictionless-components-schema a:focus {
 	outline: 5px auto -webkit-focus-ring-color;
 	outline-offset: -2px;
-}
-
-.frictionless-components-schema hr {
+  }
+  
+  .frictionless-components-schema hr {
 	margin-top: 20px;
 	margin-bottom: 20px;
 	border: 0;
 	border-top: 1px solid #eee;
-}
-
-.frictionless-components-schema h2 {
+  }
+  
+  .frictionless-components-schema h2 {
 	font-family: inherit;
 	font-weight: 500;
 	line-height: 1.1;
 	color: inherit;
-}
-
-.frictionless-components-schema h2 {
+  }
+  
+  .frictionless-components-schema h2 {
 	margin-top: 20px;
 	margin-bottom: 10px;
-}
-
-.frictionless-components-schema h2 {
+  }
+  
+  .frictionless-components-schema h2 {
 	font-size: 30px;
-}
-
-.frictionless-components-schema small {
+  }
+  
+  .frictionless-components-schema small {
 	font-size: 85%;
-}
-
-.frictionless-components-schema ul {
+  }
+  
+  .frictionless-components-schema ul {
 	margin-top: 0;
 	margin-bottom: 10px;
-}
-
-.frictionless-components-schema code,
-.frictionless-components-schema pre {
-	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-}
-
-.frictionless-components-schema code {
+  }
+  
+  .frictionless-components-schema code,
+  .frictionless-components-schema pre {
+	font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+  }
+  
+  .frictionless-components-schema code {
 	padding: 2px 4px;
 	font-size: 90%;
 	color: #c7254e;
 	background-color: #f9f2f4;
 	border-radius: 4px;
-}
-
-.frictionless-components-schema pre {
+  }
+  
+  .frictionless-components-schema pre {
 	display: block;
 	padding: 9.5px;
 	margin: 0 0 10px;
@@ -216,97 +216,101 @@
 	background-color: #f5f5f5;
 	border: 1px solid #ccc;
 	border-radius: 4px;
-}
-
-.frictionless-components-schema pre code {
+  }
+  
+  .frictionless-components-schema pre code {
 	padding: 0;
 	font-size: inherit;
 	color: inherit;
 	white-space: pre-wrap;
 	background-color: transparent;
 	border-radius: 0;
-}
-
-.frictionless-components-schema .row {
+  }
+  
+  .frictionless-components-schema .row {
 	margin-right: -15px;
 	margin-left: -15px;
-}
-
-.frictionless-components-schema .col-md-2,
-.frictionless-components-schema .col-md-3,
-.frictionless-components-schema .col-md-4,
-.frictionless-components-schema .col-md-8 {
+  }
+  
+  .frictionless-components-schema .menu-options {
+	display: inline-flex;
+  }
+  
+  .frictionless-components-schema .col-md-2,
+  .frictionless-components-schema .col-md-3,
+  .frictionless-components-schema .col-md-4,
+  .frictionless-components-schema .col-md-8 {
 	position: relative;
 	min-height: 1px;
 	padding-right: 15px;
 	padding-left: 15px;
-}
-
-@media (min-width:970px) {
+  }
+  
+  @media (min-width: 970px) {
 	.frictionless-components-schema .col-md-2,
 	.frictionless-components-schema .col-md-3,
 	.frictionless-components-schema .col-md-4,
 	.frictionless-components-schema .col-md-8 {
-		float: left;
+	  float: left;
 	}
 	.frictionless-components-schema .col-md-8 {
-		width: 66.66666667%;
+	  width: 66.66666667%;
 	}
 	.frictionless-components-schema .col-md-4 {
-		width: 33.33333333%;
+	  width: 33.33333333%;
 	}
 	.frictionless-components-schema .col-md-3 {
-		width: 25%;
+	  width: 25%;
 	}
 	.frictionless-components-schema .col-md-2 {
-		width: 16.66666667%;
+	  width: 16.66666667%;
 	}
-}
-
-.frictionless-components-schema table {
+  }
+  
+  .frictionless-components-schema table {
 	background-color: transparent;
-}
-
-.frictionless-components-schema th {
+  }
+  
+  .frictionless-components-schema th {
 	text-align: left;
-}
-
-.frictionless-components-schema .table {
+  }
+  
+  .frictionless-components-schema .table {
 	width: 100%;
 	max-width: 100%;
 	margin-bottom: 20px;
-}
-
-.frictionless-components-schema .table>tbody>tr>td,
-.frictionless-components-schema .table>thead>tr>th {
+  }
+  
+  .frictionless-components-schema .table > tbody > tr > td,
+  .frictionless-components-schema .table > thead > tr > th {
 	padding: 8px;
 	line-height: 1.42857143;
 	vertical-align: top;
 	border-top: 1px solid #ddd;
-}
-
-.frictionless-components-schema .table>thead>tr>th {
+  }
+  
+  .frictionless-components-schema .table > thead > tr > th {
 	vertical-align: bottom;
 	border-bottom: 2px solid #ddd;
-}
-
-.frictionless-components-schema .table>thead:first-child>tr:first-child>th {
+  }
+  
+  .frictionless-components-schema .table > thead:first-child > tr:first-child > th {
 	border-top: 0;
-}
-
-.frictionless-components-schema .table-condensed>tbody>tr>td,
-.frictionless-components-schema .table-condensed>thead>tr>th {
+  }
+  
+  .frictionless-components-schema .table-condensed > tbody > tr > td,
+  .frictionless-components-schema .table-condensed > thead > tr > th {
 	padding: 5px;
-}
-
-.frictionless-components-schema label {
+  }
+  
+  .frictionless-components-schema label {
 	display: inline-block;
 	max-width: 100%;
 	margin-bottom: 5px;
 	font-weight: 700;
-}
-
-.frictionless-components-schema .form-control {
+  }
+  
+  .frictionless-components-schema .form-control {
 	display: block;
 	width: 100%;
 	height: 34px;
@@ -318,47 +322,48 @@
 	background-image: none;
 	border: 1px solid #ccc;
 	border-radius: 4px;
-	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-}
-
-.frictionless-components-schema .form-control:focus {
+	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+	-webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
+	-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+	transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  }
+  
+  .frictionless-components-schema .form-control:focus {
 	border-color: #66afe9;
 	outline: 0;
-	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
-	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
-}
-
-.frictionless-components-schema .form-control::-moz-placeholder {
+	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+	  0 0 8px rgba(102, 175, 233, 0.6);
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  }
+  
+  .frictionless-components-schema .form-control::-moz-placeholder {
 	color: #999;
 	opacity: 1;
-}
-
-.frictionless-components-schema .form-control:-ms-input-placeholder {
+  }
+  
+  .frictionless-components-schema .form-control:-ms-input-placeholder {
 	color: #999;
-}
-
-.frictionless-components-schema .form-control::-webkit-input-placeholder {
+  }
+  
+  .frictionless-components-schema .form-control::-webkit-input-placeholder {
 	color: #999;
-}
-
-.frictionless-components-schema .form-control::-ms-expand {
+  }
+  
+  .frictionless-components-schema .form-control::-ms-expand {
 	background-color: transparent;
 	border: 0;
-}
-
-.frictionless-components-schema textarea.form-control {
+  }
+  
+  .frictionless-components-schema textarea.form-control {
 	height: auto;
-}
-
-.frictionless-components-schema .form-group {
+  }
+  
+  .frictionless-components-schema .form-group {
 	margin-bottom: 15px;
-}
-
-.frictionless-components-schema .btn {
+  }
+  
+  .frictionless-components-schema .btn {
 	display: inline-block;
 	padding: 6px 12px;
 	margin-bottom: 0;
@@ -378,73 +383,73 @@
 	background-image: none;
 	border: 1px solid transparent;
 	border-radius: 4px;
-}
-
-.frictionless-components-schema .btn:active:focus,
-.frictionless-components-schema .btn:focus {
+  }
+  
+  .frictionless-components-schema .btn:active:focus,
+  .frictionless-components-schema .btn:focus {
 	outline: 5px auto -webkit-focus-ring-color;
 	outline-offset: -2px;
-}
-
-.frictionless-components-schema .btn:focus,
-.frictionless-components-schema .btn:hover {
+  }
+  
+  .frictionless-components-schema .btn:focus,
+  .frictionless-components-schema .btn:hover {
 	color: #333;
 	text-decoration: none;
-}
-
-.frictionless-components-schema .btn:active {
+  }
+  
+  .frictionless-components-schema .btn:active {
 	background-image: none;
 	outline: 0;
-	-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-	box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-}
-
-.frictionless-components-schema .btn-lg {
+	-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  }
+  
+  .frictionless-components-schema .btn-lg {
 	padding: 10px 16px;
 	font-size: 18px;
 	line-height: 1.3333333;
 	border-radius: 6px;
-}
-
-.frictionless-components-schema .btn-block {
+  }
+  
+  .frictionless-components-schema .btn-block {
 	display: block;
 	width: 100%;
-}
-
-.frictionless-components-schema .collapse {
+  }
+  
+  .frictionless-components-schema .collapse {
 	display: none;
-}
-
-.frictionless-components-schema .input-group {
+  }
+  
+  .frictionless-components-schema .input-group {
 	position: relative;
 	display: table;
 	border-collapse: separate;
-}
-
-.frictionless-components-schema .input-group .form-control {
+  }
+  
+  .frictionless-components-schema .input-group .form-control {
 	position: relative;
 	z-index: 2;
 	float: left;
 	width: 100%;
 	margin-bottom: 0;
-}
-
-.frictionless-components-schema .input-group .form-control:focus {
+  }
+  
+  .frictionless-components-schema .input-group .form-control:focus {
 	z-index: 3;
-}
-
-.frictionless-components-schema .input-group .form-control,
-.frictionless-components-schema .input-group-addon {
+  }
+  
+  .frictionless-components-schema .input-group .form-control,
+  .frictionless-components-schema .input-group-addon {
 	display: table-cell;
-}
-
-.frictionless-components-schema .input-group-addon {
+  }
+  
+  .frictionless-components-schema .input-group-addon {
 	width: 1%;
 	white-space: nowrap;
 	vertical-align: middle;
-}
-
-.frictionless-components-schema .input-group-addon {
+  }
+  
+  .frictionless-components-schema .input-group-addon {
 	padding: 6px 12px;
 	font-size: 14px;
 	font-weight: 400;
@@ -454,235 +459,311 @@
 	background-color: #eee;
 	border: 1px solid #ccc;
 	border-radius: 4px;
-}
-
-.frictionless-components-schema .input-group-addon:first-child {
+  }
+  
+  .frictionless-components-schema .input-group-addon:first-child {
 	border-top-right-radius: 0;
 	border-bottom-right-radius: 0;
-}
-
-.frictionless-components-schema .input-group-addon:first-child {
+  }
+  
+  .frictionless-components-schema .input-group-addon:first-child {
 	border-right: 0;
-}
-
-.frictionless-components-schema .input-group .form-control:last-child {
+  }
+  
+  .frictionless-components-schema .input-group .form-control:last-child {
 	border-top-left-radius: 0;
 	border-bottom-left-radius: 0;
-}
-
-.frictionless-components-schema .nav {
+  }
+  
+  .frictionless-components-schema .nav {
 	padding-left: 0;
 	margin-bottom: 0;
 	list-style: none;
-}
-
-.frictionless-components-schema .nav>li {
+  }
+  
+  .frictionless-components-schema .nav > li {
 	position: relative;
 	display: block;
-}
-
-.frictionless-components-schema .nav>li>a {
+  }
+  
+  .frictionless-components-schema .nav > li > a {
 	position: relative;
 	display: block;
 	padding: 10px 15px;
-}
-
-.frictionless-components-schema .nav>li>a:focus,
-.frictionless-components-schema .nav>li>a:hover {
+  }
+  
+  .frictionless-components-schema .nav > li > a:focus,
+  .frictionless-components-schema .nav > li > a:hover {
 	text-decoration: none;
 	background-color: #eee;
-}
-
-.frictionless-components-schema .nav-pills>li {
+  }
+  
+  .frictionless-components-schema .nav-pills > li {
 	float: left;
-}
-
-.frictionless-components-schema .nav-pills>li>a {
+  }
+  
+  .frictionless-components-schema .nav-pills > li > a {
 	border-radius: 4px;
-}
-
-.frictionless-components-schema .nav-pills>li+li {
+  }
+  
+  .frictionless-components-schema .nav-pills > li + li {
 	margin-left: 2px;
-}
-
-.frictionless-components-schema .nav-pills>li.active>a,
-.frictionless-components-schema .nav-pills>li.active>a:focus,
-.frictionless-components-schema .nav-pills>li.active>a:hover {
+  }
+  
+  .frictionless-components-schema .nav-pills > li.active > a,
+  .frictionless-components-schema .nav-pills > li.active > a:focus,
+  .frictionless-components-schema .nav-pills > li.active > a:hover {
 	color: #fff;
 	background-color: #337ab7;
-}
-
-.frictionless-components-schema .tab-content>.tab-pane {
+  }
+  
+  .frictionless-components-schema .tab-content > .tab-pane {
 	display: none;
-}
-
-.frictionless-components-schema .tab-content>.active {
+  }
+  
+  .frictionless-components-schema .tab-content > .active {
 	display: block;
-}
-
-.frictionless-components-schema .panel {
+  }
+  
+  .frictionless-components-schema .panel {
 	margin-bottom: 20px;
 	background-color: #fff;
 	border: 1px solid transparent;
 	border-radius: 4px;
-	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
-	box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
-}
-
-.frictionless-components-schema .panel-body {
+	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  }
+  
+  .frictionless-components-schema .panel-body {
 	padding: 15px;
-}
-
-.frictionless-components-schema .panel-default {
+  }
+  
+  .frictionless-components-schema .panel-default {
 	border-color: #ddd;
-}
-
-.frictionless-components-schema .nav:after,
-.frictionless-components-schema .nav:before,
-.frictionless-components-schema .panel-body:after,
-.frictionless-components-schema .panel-body:before,
-.frictionless-components-schema .row:after,
-.frictionless-components-schema .row:before {
+  }
+  
+  .frictionless-components-schema .nav:after,
+  .frictionless-components-schema .nav:before,
+  .frictionless-components-schema .panel-body:after,
+  .frictionless-components-schema .panel-body:before,
+  .frictionless-components-schema .row:after,
+  .frictionless-components-schema .row:before {
 	display: table;
-	content: " ";
-}
-
-.frictionless-components-schema .nav:after,
-.frictionless-components-schema .panel-body:after,
-.frictionless-components-schema .row:after {
+	content: ' ';
+  }
+  
+  .frictionless-components-schema .nav:after,
+  .frictionless-components-schema .panel-body:after,
+  .frictionless-components-schema .row:after {
 	clear: both;
-}
-
-.frictionless-components-schema .tableschema-ui-editor-schema .btn-light {
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-schema .btn-light {
 	border: solid 1px #ddd;
 	background-color: #fafafa;
 	font-size: 80%;
 	color: #555;
-}
-
-.frictionless-components-schema .tableschema-ui-editor-schema .btn-light:hover {
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-schema .btn-light:hover {
 	background-color: #eee;
-}
-
-.frictionless-components-schema .tableschema-ui-editor-schema .navigation .title {
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-schema .navigation .title {
 	margin-right: 0.5em;
-}
-
-.frictionless-components-schema .tableschema-ui-editor-schema .navigation .nav-link {
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-schema .title {
+	padding-left: 3em;
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-schema .navigation .nav-link {
 	margin-top: 1.2em;
-}
-
-.frictionless-components-schema .tableschema-ui-editor-field {
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-field {
 	padding: 0.5em 0;
-}
-
-.frictionless-components-schema .tableschema-ui-editor-field .input-group-addon {
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-field .input-group-addon {
 	background-color: #fafafa;
 	font-size: 80%;
 	color: #aaa;
-}
-
-.frictionless-components-schema .tableschema-ui-editor-field .input-group-addon div {
-	width: 4em;
-}
-
-.frictionless-components-schema .tableschema-ui-editor-field .btn-light {
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-field .input-group-addon div {
+	width: 3em;
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-field .btn-light {
 	border: solid 1px #ddd;
 	background-color: #fafafa;
 	font-size: 80%;
 	color: #555;
-}
-
-.frictionless-components-schema .tableschema-ui-editor-field .btn-light:hover {
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-field .btn-light:hover {
 	background-color: #eee;
-}
-
-.frictionless-components-schema .tableschema-ui-editor-field .name .handle {
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-field .name .handle {
 	display: none;
-}
-
-@media (min-width: 970px) {
+  }
+  
+  @media (min-width: 970px) {
 	.frictionless-components-schema .tableschema-ui-editor-field .name .handle {
-		cursor: row-resize;
-		display: block;
-		position: absolute;
-		margin-left: 0.2em;
-		font-size: 175%;
-		color: #aaa;
+	  cursor: row-resize;
+	  display: block;
+	  position: absolute;
+	  margin-left: 0.2em;
+	  font-size: 175%;
+	  color: #aaa;
 	}
 	.frictionless-components-schema .tableschema-ui-editor-field .name .input-group {
-		margin-left: 2.5em;
-		padding-right: 1em;
-	}
-
-	.frictionless-components-schema .tableschema-ui-editor-field .title {
-		padding-left: 3em;
+	  margin-left: 2.5em;
 	}
-}
-
-.frictionless-components-schema .tableschema-ui-editor-field .name input {
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-field .name input {
 	font-weight: bold;
-}
-
-.frictionless-components-schema .tableschema-ui-editor-field .button-details,
-.frictionless-components-schema .tableschema-ui-editor-field .button-remove {
-	width: 50%;
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-field .button-details,
+  .frictionless-components-schema .tableschema-ui-editor-field .button-remove {
+	width: 5%;
 	padding-left: 0;
 	padding-right: 0;
-    line-height: 1.2;
-}
-
-@media (min-width: 970px) {
+	line-height: 1.2;
+	margin-left: 1rem;
+  }
+  
+  @media (min-width: 970px) {
 	.frictionless-components-schema .tableschema-ui-editor-field .button-details,
 	.frictionless-components-schema .tableschema-ui-editor-field .button-remove {
-		width: 4.5vw;
+	  width: 2.5vw;
 	}
 	.frictionless-components-schema .tableschema-ui-editor-field .button-remove {
-		float: right;
+	  float: right;
 	}
-}
-
-@media (min-width: 970px) {
+  }
+  
+  @media (min-width: 970px) {
 	.frictionless-components-schema .tableschema-ui-editor-field .details {
-		margin-left: 2.5em;
+	  margin-left: 2.5em;
 	}
-}
-
-.frictionless-components-schema .tableschema-ui-editor-field .details .card {
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-field .details .card {
 	margin-top: 1em;
-}
-
-.frictionless-components-schema .tableschema-ui-editor-field .details label {
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-field .details label {
 	font-size: 80%;
 	color: #555;
-}
-
-.frictionless-components-schema .tableschema-ui-editor-field .details .panel {
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-field .details .panel {
 	margin-top: 1em;
-}
-
-.frictionless-components-schema .tableschema-ui-editor-field .details .data .form-group {
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-field .details .data .form-group {
 	overflow: hidden;
-}
-
-.frictionless-components-schema .tableschema-ui-editor-preview pre {
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-preview pre {
 	color: #333;
 	background-color: #fff;
 	border: none;
 	font-size: 100%;
-}
-
-.frictionless-components-schema .tableschema-ui-editor-sortable-list {
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-sortable-list {
 	z-index: 10000;
 	margin: 0;
 	padding: 0;
-    margin-bottom: 1em;
-}
-
-.frictionless-components-schema .tableschema-ui-editor-sortable-item {
+	margin-bottom: 1em;
+  }
+  
+  .frictionless-components-schema .tableschema-ui-editor-sortable-item {
 	list-style-type: none;
-}
-
-.frictionless-components-schema .nav-link {
+  }
+  
+  .frictionless-components-schema .nav-link {
 	cursor: pointer;
-}
+  }
+  
+  .modal .modal-dialog .modal-content .modal-body {
+	padding: 0;
+  }
+  
+  .modal .modal-dialog .multiselect {
+	position: relative;
+  }
+  
+  .modal .modal-dialog .multiselect-grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .modal .modal-dialog .multiselect-column {
+	display: flex;
+	flex-direction: column;
+  }
+  
+  .modal .modal-dialog .seprator {
+	border-right: 1px solid #d3d3d3;
+  }
+  
+  .modal .modal-dialog .multiselect-header {
+	display: flex;
+	justify-content: flex-start;
+	align-items: stretch;
+	gap: 1rem;
+	border-bottom: 1px solid #d3d3d3;
+	min-height: 3rem;
+	padding: 0.5rem;
+	background: #e9ecef;
+  }
+  
+  .modal .modal-dialog .multiselect-body {
+	min-height: 250px;
+	max-height: 400px;
+	overflow-y: auto;
+	padding-top: 1rem;
+	padding: 1rem;
+	flex-grow: 1;
+  }
+  
+  .modal .modal-dialog .multiselect-footer .cancel-btn {
+	background: #ffffff;
+	width: 5rem;
+  }
+  
+  .modal .modal-dialog .multiselect-footer .save-btn {
+	background: #0a5eb2;
+	border: none;
+	color: #ffffff;
+	width: 5rem;
+  }
+  
+  .modal .modal-dialog .multiselect-footer {
+	padding: 5% 7% 5% 35%;
+	border-top: 1px solid #d3d3d3;
+	display: flex;
+	justify-content: stretch;
+	gap: 1rem;
+  }
+  
+  .modal .modal-dialog .selected-options {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 0.5rem;
+	align-items: center;
+	padding-left: 0.5rem;
+  }
+  
+  .modal .modal-dialog .modal-content .modal-header {
+	background: #0a5eb2;
+	color: #ffffff;
+  }
+  
\ No newline at end of file