Tooltips and display names for inspector elements

frontend/src/Editor/Components/components.js

@@ -6,22 +6,22 @@ export const componentTypes = [
     description: 'Display paginated tabular data',
     component: 'Table',
     properties: {
-      title: { type: 'string' },
-      data: { type: 'code' },
-      visible: { type: 'string' },
-      loadingState: { type: 'string' },
-      columns: { type: 'array' }
+      title: { type: 'string', displayName: 'Title' },
+      data: { type: 'code', displayName: 'Table Data' },
+      visible: { type: 'string', displayName: 'Show when' },
+      loadingState: { type: 'string', displayName: 'Loading state' },
+      columns: { type: 'array', displayName: 'Table Columns' }
     },
     defaultSize: {
-      width: 800,
+      width: 810,
       height: 300
     },
-    events: [
-      'onRowClicked',
-      'onBulkUpdate'
-    ],
+    events: {
+      onRowClicked: { displayName: 'On row clicked'},
+      onBulkUpdate: { displayName: 'Bulk update query'}
+    },
     styles: {
-      textColor: { type: 'color' }
+      textColor: { type: 'color', displayName: 'Text Color' }
     },
     exposedVariables: {
       selectedRow: {},
@@ -70,16 +70,16 @@ export const componentTypes = [
       height: 30
     },
     properties: {
-      text: { type: 'string' },
-      visible: { type: 'string' },
-      loadingState: { type: 'string' }
+      text: { type: 'string', displayName: 'Button Text' },
+      visible: { type: 'string', displayName: 'Show when', tip: 'Widget will be hidden if the value of this field is false.' },
+      loadingState: { type: 'string', displayName: 'Loading State'}
+    },
+    events: {
+      onClick: { displayName: 'On click'},
     },
-    events: [
-      'onClick'
-    ],
     styles: {
-      backgroundColor: { type: 'color' },
-      textColor: { type: 'color' }
+      backgroundColor: { type: 'color', displayName: 'Background color' },
+      textColor: { type: 'color', displayName: 'Text color' }
     },
     exposedVariables: {},
     definition: {
@@ -112,11 +112,9 @@ export const componentTypes = [
       height: 30
     },
     properties: {
-      placeholder: { type: 'string' }
+      placeholder: { type: 'string', displayName: 'Placeholder' }
     },
-    events: [
-
-    ],
+    events: {},
     styles: {
 
     },
@@ -146,13 +144,11 @@ export const componentTypes = [
       height: 60
     },
     properties: {
-      format: { type: 'string' },
-      enableTime: { type: 'string' },
-      enableDate: { type: 'string' }
+      format: { type: 'string', displayName: 'Format' },
+      enableTime: { type: 'string', displayName: 'Enable time selection?' },
+      enableDate: { type: 'string', displayName: 'Enable date selection?' }
     },
-    events: [
-
-    ],
+    events: {},
     styles: {
 
     },
@@ -184,11 +180,9 @@ export const componentTypes = [
       height: 32
     },
     properties: {
-      format: { type: 'string' }
+      format: { type: 'string', displayName: 'Format' }
     },
-    events: [
-
-    ],
+    events: {},
     styles: {
 
     },
@@ -219,11 +213,12 @@ export const componentTypes = [
       height: 60
     },
     properties: {
-      label: { type: 'string' }
+      label: { type: 'string', displayName: 'Label' }
+    },
+    events: {
+        onCheck: { displayName: 'On check'},
+        onUnCheck: { displayName: 'On uncheck'},
     },
-    events: [
-      'onCheck', 'onUnCheck'
-    ],
     styles: {
 
     },
@@ -260,12 +255,10 @@ export const componentTypes = [
       height: 100
     },
     properties: {
-      value: { type: 'string' },
-      placeholder: { type: 'string' }
+      value: { type: 'string', displayName: 'Value' },
+      placeholder: { type: 'string', displayName: 'Placeholder' }
     },
-    events: [
-
-    ],
+    events: {},
     styles: {
 
     },
@@ -292,9 +285,9 @@ export const componentTypes = [
     description: 'Display markdown or HTML',
     component: 'Text',
     properties: {
-      text: { type: 'code' },
-      visible: { type: 'string' },
-      loadingState: { type: 'string' }
+      text: { type: 'code', displayName: 'Text' },
+      visible: { type: 'string', displayName: 'Show when' },
+      loadingState: { type: 'string', displayName: 'Show loading state' }
     },
     defaultSize: {
       width: 100,
@@ -304,7 +297,7 @@ export const componentTypes = [
 
     ],
     styles: {
-      textColor: { type: 'color' }
+      textColor: { type: 'color', displayName: 'Text Color' }
     },
     exposedVariables: {},
     definition: {
@@ -332,12 +325,12 @@ export const componentTypes = [
     },
     component: 'Image',
     properties: {
-      source: { type: 'string' },
-      visible: { type: 'string' }
+      source: { type: 'string', displayName: 'URL' },
+      visible: { type: 'string', displayName: 'Show when' }
+    },
+    events: {
+        onClick: { displayName: 'On click'},
     },
-    events: [
-      'onClick'
-    ],
     styles: {
 
     },
@@ -366,11 +359,9 @@ export const componentTypes = [
     },
     component: 'Container',
     properties: {
-      visible: { type: 'string' }
+      visible: { type: 'string', displayName: 'Show when' }
     },
-    events: [
-
-    ],
+    events: {},
     styles: {
       backgroundColor: { type: 'color' }
     },
@@ -396,14 +387,14 @@ export const componentTypes = [
     },
     component: 'DropDown',
     properties: {
-      label: { type: 'string' },
-      value: { type: 'string' },
-      values: { type: 'json' },
-      display_values: { type: 'string' }
+      label: { type: 'string', displayName: 'Label' },
+      value: { type: 'string', displayName: 'Default value' },
+      values: { type: 'json', displayName: 'Option values' },
+      display_values: { type: 'string', displayName: 'Option labels' }
+    },
+    events: {
+        onSelect: { displayName: 'On select'},
     },
-    events: [
-      'onSelect'
-    ],
     styles: {
 
     },
@@ -437,14 +428,14 @@ export const componentTypes = [
     },
     component: 'Multiselect',
     properties: {
-      label: { type: 'string' },
-      values: { type: 'string' },
-      option_values: { type: 'string' },
-      display_values: { type: 'string' }
+        label: { type: 'string', displayName: 'Label' },
+        value: { type: 'string', displayName: 'Default value' },
+        values: { type: 'json', displayName: 'Option values' },
+        display_values: { type: 'string', displayName: 'Option labels' }
+    },
+    events: {
+        onSelect: { displayName: 'On select'},
     },
-    events: [
-      'onSelect'
-    ],
     styles: {
 
     },
@@ -467,40 +458,6 @@ export const componentTypes = [
       }
     }
   },
-  {
-    icon: 'https://www.svgrepo.com/show/16476/map.svg',
-    name: 'Map',
-    displayName: 'Map',
-    description: 'Display maps with markers.',
-    component: 'Map',
-    properties: {
-      label: { type: 'string' },
-      values: { type: 'string' },
-      display_values: { type: 'string' }
-    },
-    events: [
-      'onMarkerClick', 'onMarkerCreate'
-    ],
-    styles: {
-
-    },
-    exposedVariables: {},
-    definition: {
-      properties: {
-        label: { value: 'https://www.svgrepo.com/show/46775/drop-down-list.svg' },
-        values: [1, 2, 3],
-        display_values: ['one', 'two', 'three'],
-        visible: { value: true }
-      },
-      events: {
-        onMarkerClick: { },
-        onMarkerCreate: { }
-      },
-      styles: {
-
-      }
-    }
-  },
   {
     icon: 'https://www.svgrepo.com/show/5908/text-document.svg',
     name: 'RichTextEditor',
@@ -512,11 +469,9 @@ export const componentTypes = [
       height: 100
     },
     properties: {
-      placeholder: { type: 'string' }
+      placeholder: { type: 'string', displayName: 'Placeholder' }
     },
-    events: [
-
-    ],
+    events: {},
     styles: {
 
     },

frontend/src/Editor/Inspector/Components/Table.jsx

@@ -199,17 +199,18 @@ class Table extends React.Component {
             />
           </div>
           <Color
-            param={{ name: 'backgroundColor' }}
+            param="backgroundColor"
             definition={{ value: action.backgroundColor }}
             onChange={(name, value, color) => this.onActionButtonPropertyChanged(index, 'backgroundColor', color)}
           />
           <Color
-            param={{ name: 'textColor' }}
+            param="textColor"
             definition={{ value: action.textColor }}
             onChange={(name, value, color) => this.onActionButtonPropertyChanged(index, 'textColor', color)}
           />
           <EventSelector
-            param={{ name: 'onClick' }}
+            param="onClick"
+            eventMeta={{ displayName: 'On click'}}
             definition={action.onClick}
             eventUpdated={this.actionButtonEventUpdated}
             dataQueries={this.state.dataQueries}
@@ -357,7 +358,7 @@ class Table extends React.Component {
           </div>
           <hr></hr>
 
-          {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onRowClicked')}
+          {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onRowClicked', componentMeta.events['onRowClicked'])}
 
           <div className="field mb-2 mt-2">
             <label className="form-label mt-2">Bulk update query</label>

frontend/src/Editor/Inspector/Elements/Code.jsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import { CodeBuilder } from '../../CodeBuilder/CodeBuilder';
+import { getToolTipProps } from './utils';
 
 export const Code = ({
-  param, definition, onChange, paramType, dataQueries, components
+  param, definition, onChange, paramType, dataQueries, components, componentMeta
 }) => {
   const initialValue = definition ? definition.value : '';
+  const paramMeta = componentMeta[paramType][param.name];
+  const displayName = paramMeta.displayName || param.name;
 
   function handleCodeChanged(value) {
     onChange(param, 'value', value, paramType);
@@ -12,7 +15,7 @@ export const Code = ({
 
   return (
     <div className="field mb-2">
-      <label className="form-label">{param.name}</label>
+      <label {...getToolTipProps(paramMeta)}  className="form-label">{displayName}</label>
       <CodeBuilder
         initialValue={initialValue}
         components={components}

frontend/src/Editor/Inspector/Elements/Color.jsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { SketchPicker } from 'react-color';
+import { getToolTipProps } from './utils';
 
 export const Color = ({
-  param, definition, onChange, paramType
+  param, definition, onChange, paramType, componentMeta
 }) => {
   const [showPicker, setShowPicker] = useState(false);
 
@@ -14,9 +15,12 @@ export const Color = ({
     left: '0px'
   };
 
+  const paramMeta = componentMeta[paramType][param.name];
+  const displayName = paramMeta.displayName || param.name;
+
   return (
     <div className="field mb-2">
-      <label className="form-label">{param.name}</label>
+      <label {...getToolTipProps(paramMeta)} className="form-label">{displayName}</label>
 
       {showPicker && (
         <div>

frontend/src/Editor/Inspector/Elements/Json.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import CodeMirror from '@uiw/react-codemirror';
 import 'codemirror/theme/duotone-light.css';
+import { getToolTipProps } from './utils';
 
 export const Json = ({
-  param, definition, onChange, paramType
+  param, definition, onChange, paramType, componentMeta
 }) => {
   const value = definition
     ? definition.value
@@ -13,9 +14,12 @@ export const Json = ({
         "email": "hanson@example.com"
       }]`;
 
+  const paramMeta = componentMeta[paramType][param.name];
+  const displayName = paramMeta.displayName || param.name;      
+
   return (
     <div className="field mb-2">
-      <label className="form-label">{param.name}</label>
+      <label {...getToolTipProps(paramMeta)} className="form-label">{displayName}</label>
       <CodeMirror
         height="300px"
         fontSize="2"

frontend/src/Editor/Inspector/Elements/Text.jsx

@@ -1,13 +1,16 @@
 import React from 'react';
+import { getToolTipProps } from './utils';
 
 export const Text = ({
-  param, definition, onChange, paramType
+  param, definition, onChange, paramType, componentMeta
 }) => {
   const value = definition ? definition.value : '';
-
+  const paramMeta = componentMeta[paramType][param.name];
+  const displayName = paramMeta.displayName || param.name;
+  
   return (
-    <div className="field mb-2">
-      <label className="form-label">{param.name}</label>
+    <div className="field mb-3">
+      <label {...getToolTipProps(paramMeta)} className="form-label">{displayName}</label>
       <input
         type="text"
         onChange={(e) => onChange(param, 'value', e.target.value, paramType)}

frontend/src/Editor/Inspector/EventSelector.jsx

@@ -8,7 +8,8 @@ export const EventSelector = ({
   eventUpdated,
   eventOptionUpdated,
   dataQueries,
-  extraData
+  extraData,
+  eventMeta
 }) => {
   function onChange(value) {
     const query = dataQueries.find((dataquery) => dataquery.id === value);
@@ -28,7 +29,7 @@ export const EventSelector = ({
 
   return (
     <div className="field mb-2 mt-1">
-      <label className="form-label">{param.name}</label>
+      <label className="form-label">{eventMeta.displayName}</label>
       <SelectSearch
         options={ActionTypes.map((action) => {
           return { name: action.name, value: action.id };

frontend/src/Editor/Inspector/Inspector.jsx

@@ -4,6 +4,7 @@ import { Table } from './Components/Table';
 import { renderElement, renderEvent } from './Utils';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
+import ReactTooltip from 'react-tooltip';
 
 export const Inspector = ({
   selectedComponent,
@@ -70,6 +71,7 @@ export const Inspector = ({
 
   return (
     <div className="inspector">
+    <ReactTooltip type="dark" effect="solid" place="left" eventOff="click" />
       <div className="header p-2">
         <span className="component-name">
           <span className="p-2">{component.component.name}</span>
@@ -118,7 +120,7 @@ export const Inspector = ({
           {Object.keys(componentMeta.properties).map((property) => renderElement(component, componentMeta, paramUpdated, dataQueries, property, 'properties', components))}
           {Object.keys(componentMeta.styles).map((style) => renderElement(component, componentMeta, paramUpdated, dataQueries, style, 'styles', components))}
           <hr></hr>
-          {componentMeta.events.map((event) => renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, event))}
+          {Object.keys(componentMeta.events).map((eventName) => renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, eventName, componentMeta.events[eventName]))}
         </div>
       )}
     </div>

frontend/src/Editor/Inspector/Utils.js

@@ -27,17 +27,19 @@ export function renderElement(component, componentMeta, paramUpdated, dataQuerie
             onChange={paramUpdated}
             paramType={paramType}
             components={components}
+            componentMeta={componentMeta}
         />
   );
 }
 
-export function renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, param) {
-  let definition = component.component.definition.events[param];
+export function renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, eventName, eventMeta) {
+  let definition = component.component.definition.events[eventName];
   definition = definition || { };
 
   return (
         <EventSelector
-            param={{ name: param, ...component.component.properties[param] }}
+            param={{ name: eventName }}
+            eventMeta={eventMeta}
             definition={definition}
             eventUpdated={eventUpdated}
             dataQueries={dataQueries}