diff --git a/src/common/DV.tsx b/src/common/DV.tsx
index 797796788..be3432d88 100644
--- a/src/common/DV.tsx
+++ b/src/common/DV.tsx
@@ -2,7 +2,7 @@ import {DocString, EdgeHead, ShortAttribETypes as SAType, U} from '../joiner';
 import {GObject, RuntimeAccessible} from '../joiner';
 import React, {ReactElement} from "react";
 // const beautify = require('js-beautify').html; // BEWARE: this adds some newline that might be breaking and introduce syntax errors in our JSX parser
-const beautify = (s: any)=>s;
+const beautify = (s: string) => s;
 let ShortAttribETypes: typeof SAType = (window as any).ShortAttribETypes;
 
 @RuntimeAccessible
@@ -17,7 +17,6 @@ export class DV {
     public static literalView(): string { return beautify(DefaultView.literal()); }
     public static voidView(): string { return beautify(DefaultView.void()); }
     public static operationView(): string { return beautify(DefaultView.operation()); }
-    public static operationViewm1(): string { return beautify(DefaultView.operationm1()); }
     public static objectView(): string { return beautify(DefaultView.object()); }
     public static valueView(): string { return beautify(DefaultView.value()); }
     public static defaultPackage(): string { return beautify(DefaultView.defaultPackage()); }
@@ -155,81 +154,74 @@ class DefaultView {
 
     public static model(): string {
         return `<div className={'root'}>
-            {!data && "Model data missing."}
-            <div className="edges" style={{zIndex:101, position: "absolute", height:0, width:0, overflow: "visible"}}>{[
-                    true && data.suggestedEdges.reference &&
-                    data.suggestedEdges.reference.map(
-                        se => (!se.vertexOverlaps)
-                         && <DamEdge start={se.start.father} end={se.end} view={"Pointer_ViewEdge" + ( se.start.containment && "Composition" || "Association")} key={se.start.node.id+"~"+se.end.node.id}/>)
-                         ,
-                    true && data.suggestedEdges.extend &&
-                    data.suggestedEdges.extend.map(
-                        se => (!se.vertexOverlaps)
-                         && <DamEdge start={se.start} end={se.end} view={"Pointer_ViewEdgeInheritance"} key={se.start.node.id+"~"+se.end.node.id}/>)]
-                }
-            </div>
-             {data && data.packages.map((pkg, index) => {
-                return <DefaultNode key={pkg.id} data={pkg.id}></DefaultNode>
-            })}
-            {data && data.allSubObjects.map((child, index) => {
-                return <DefaultNode key={child.id} data={child.id}></DefaultNode>
-            })}
-        </div>`;
+    {!data && "Model data missing."}
+    <div className="edges" style={{zIndex:101, position: "absolute", height:0, width:0, overflow: "visible"}}>{[
+            true && data.suggestedEdges.reference &&
+            data.suggestedEdges.reference.map(
+                se => (!se.vertexOverlaps)
+                 && <DamEdge start={se.start.father} end={se.end} view={"Pointer_ViewEdge" + ( se.start.containment && "Composition" || "Association")} key={se.start.node.id+"~"+se.end.node.id}/>)
+                 ,
+            true && data.suggestedEdges.extend &&
+            data.suggestedEdges.extend.map(
+                se => (!se.vertexOverlaps)
+                 && <DamEdge start={se.start} end={se.end} view={"Pointer_ViewEdgeInheritance"} key={se.start.node.id+"~"+se.end.node.id}/>)]
+        }
+    </div>
+     {data && data.packages.map((pkg, index) => {
+        return <DefaultNode key={pkg.id} data={pkg.id}></DefaultNode>
+    })}
+    {data && data.allSubObjects.map((child, index) => {
+        return <DefaultNode key={child.id} data={child.id}></DefaultNode>
+    })}
+</div>`;
     }
 
     public static void(): string {
         return `<div className={'round bg-white root void model-less p-1'}>
-            <div>voidvertex element test</div>
-            <div>data: {props.data ? props.data.name : "empty"}</div>
-        </div>`;
+    <div>voidvertex element test</div>
+    <div>data: {props.data ? props.data.name : "empty"}</div>
+</div>`;
     }
     public static package(): string {
         return `<div className={'round bg-white root package'}>
-            { /*<Input jsxLabel={<b className={'my-auto package-name'}>EPackage:</b>} field={'name'} hidden={true} />*/ }
-            { /*console.log("evalcontex:", {thiss: this, pname: pname, c: _context}) && null*/ }
-            {/*<Input jsxLabel={<b>{pname}:</b>} field={'name'} hidden={true} />*/}
-            <hr />
-            <div className={'package-children'}>
-            
-                {data.children.map((child, index) => {
-                    return <DefaultNode key={child.id} data={child.id}></DefaultNode>
-                })}
-            </div>
-        </div>`;
+    <hr />
+    <div className={'package-children'}>
+    
+        {data.children.map((child, index) => {
+            return <DefaultNode key={child.id} data={child.id}></DefaultNode>
+        })}
+    </div>
+</div>`;
     }
 
     public static class(): string {
         return `<div className={'round bg-white root class'}>
-            <Input jsxLabel={<b className={'class-name'}>EClass:</b>} 
-                   data={data.id} field={'name'} hidden={true} autosize={true} />
-            <Input jsxLabel={<b className={'my-auto class-name'}>EClass:</b>}
-                   data={data.id} field={'name'} hidden={true} autosize={true} />
-            <hr/>
-            {/* i kept them separated because i want them in this order. i could have used data.children once, or put all in same container to mix them. */}
-            <div className={'class-children'}>{ data.attributes.map(c => <DefaultNode key={c.id} data={c.id} />) }</div>
-            <div className={'class-children'}>{ data.references.map(c => <DefaultNode key={c.id} data={c.id} />) }</div>
-            <div className={'class-children'}>{ data.operations.map(c => <DefaultNode key={c.id} data={c.id} />) }</div>
-        </div>`;
+    <Input jsxLabel={<b className={'class-name'}>EClass:</b>} 
+           data={data.id} field={'name'} hidden={true} autosize={true} />
+    <hr/>
+    <div className={'class-children'}>{ data.attributes.map(c => <DefaultNode key={c.id} data={c.id} />) }</div>
+    <div className={'class-children'}>{ data.references.map(c => <DefaultNode key={c.id} data={c.id} />) }</div>
+    <div className={'class-children'}>{ data.operations.map(c => <DefaultNode key={c.id} data={c.id} />) }</div>
+</div>`;
     }
 
     public static enum(): string {
         return `<div className={'round bg-white root enumerator'}>
-            <Input jsxLabel={<b className={'my-auto enumerator-name'}>EEnum:</b>} 
-                   data={data.id} field={'name'} hidden={true} autosize={true} />
-            <hr />
-            <div className={'enumerator-children'}>
-                {data.children.map((child, index) => {
-                    return <DefaultNode key={child.id} data={child.id}></DefaultNode>
-                })}
-            </div>
-        </div>`;
+    <Input jsxLabel={<b className={'my-auto enumerator-name'}>EEnum:</b>} 
+           data={data.id} field={'name'} hidden={true} autosize={true} />
+    <hr />
+    <div className={'enumerator-children'}>
+        {data.children.map((child, index) => {
+            return <DefaultNode key={child.id} data={child.id}></DefaultNode>
+        })}
+    </div>
+</div>`;
     }
 
     public static feature(): string {
         return `<div className={'w-100'}>
-            <Select className={'root feature'} data={data} field={'type'} label={data.name} />
-        </div>`;
-        return `<div><Select className={'d-flex p-1'} data={data} field={'type'} label={data.name} /></div>`;
+    <Select className={'p-1 root feature d-flex'} data={data} field={'type'} label={data.name} />
+</div>`;
     }
 
     public static literal(): string {
@@ -239,56 +231,40 @@ class DefaultView {
     public static operation(): string {
         // data.signature
         return `<div className={'w-100'}>
-            <Select className={'root operation'} data={data} field={'type'} 
-                    label={data.name + ' () => '} />
-        </div>`;
-        return `<Select className={'d-flex p-1'} data={data} field={'type'} label={data.name+data.signature} />`;
-    }
-
-
-
-    public static operationm1(): string {
-        return `<div className={'d-flex root operationm1'} style={{paddingRight: "6px"}}>
-             {<label className={'d-block ms-1'}>{props.data.instanceof.name}</label>}
-            <label className={'d-block ms-auto hover-root'} style={{color:` + valuecolormap_str + `[props.data.values.type] || "gray"
-            }}>→→→{
-                <div className="hover-content">{
-                    <ParameterForm operation = {props.data.id} vertical={true} />
-                }
-                }</label>
-        </div>`
+    <Select className={'p-1 root operation d-flex'} data={data} field={'type'} label={data.name + ' () => '} />
+</div>`;
     }
 
     public static object(): string {
         return `<div className={'round bg-white root class'}>
-            <label className={'ms-1'}>
-                <Input jsxLabel={<b className={'my-auto class-name'}>{data.instanceof ? data.instanceof.name : "Object"}:</b>} 
-                   data={data.id} field={'name'} hidden={true} autosize={true}/>
-            </label>
-            <hr />
-            <div className={'object-children'}>
-                {data.features.map((child, index) => {
-                    return <DefaultNode key={child.id} data={child.id}></DefaultNode>
-                })}
-            </div>
-        </div>`;
+    <label className={'ms-1'}>
+        <Input jsxLabel={<b className={'my-auto class-name'}>{data.instanceof ? data.instanceof.name : "Object"}:</b>} 
+           data={data.id} field={'name'} hidden={true} autosize={true}/>
+    </label>
+    <hr />
+    <div className={'object-children'}>
+        {data.features.map((child, index) => {
+            return <DefaultNode key={child.id} data={child.id}></DefaultNode>
+        })}
+    </div>
+</div>`;
     }
 
     public static value() {
         return `<div className={'d-flex root value'} style={{paddingRight: "6px"}}>
-             {props.data.instanceof && <label className={'d-block ms-1'}>{props.data.instanceof.name}</label>}
-             {!props.data.instanceof && <Input asLabel={true} data={data.id} field={'name'} hidden={true} autosize={true} />}
-            <label className={'d-block m-auto'} style={{color:` + valuecolormap_str + `[props.data.values.type] || "gray"
-            }}>: {props.data.valuestring()}</label>
-        </div>`
+     {props.data.instanceof && <label className={'d-block ms-1'}>{props.data.instanceof.name}</label>}
+     {!props.data.instanceof && <Input asLabel={true} data={data.id} field={'name'} hidden={true} autosize={true} />}
+    <label className={'d-block m-auto'} style={{color:` + valuecolormap_str + `[props.data.values.type] || "gray"
+    }}>: {props.data.valuestring()}</label>
+</div>`
     }
 
     public static defaultPackage() {
         return `<div style={{backgroundColor: 'transparent', position: 'fixed', width: '-webkit-fill-available', height: '-webkit-fill-available'}}>
-            {data.children.map((child, index) => {
-            return <DefaultNode key={child.id} data={child.id}></DefaultNode>
-            })}
-        </div>`;
+    {data.children.map((child, index) => {
+    return <DefaultNode key={child.id} data={child.id}></DefaultNode>
+    })}
+</div>`;
     }
 
     public static error(msg: undefined | string | JSX.Element) {
diff --git a/src/components/forEndUser/GenericInput.tsx b/src/components/forEndUser/GenericInput.tsx
index 1f8769b97..0abcda1fa 100644
--- a/src/components/forEndUser/GenericInput.tsx
+++ b/src/components/forEndUser/GenericInput.tsx
@@ -1,5 +1,5 @@
-import React, {Dispatch, InputHTMLAttributes, PureComponent, ReactNode} from "react";
-import { connect } from "react-redux";
+import React, {Dispatch, InputHTMLAttributes, PureComponent, ReactNode} from 'react';
+import { connect } from 'react-redux';
 import './GenericInput.scss';
 import {
     Pointer,
@@ -12,9 +12,9 @@ import {
     Select,
     ShortAttribETypes,
     Input, LViewElement, DViewElement, U
-} from "../../joiner";
-import {DState, DPointerTargetable, LPointerTargetable, RuntimeAccessibleClass} from "../../joiner";
-import {SizeInput} from "./SizeInput";
+} from '../../joiner';
+import {DState, DPointerTargetable, LPointerTargetable, RuntimeAccessibleClass} from '../../joiner';
+import {SizeInput} from './SizeInput';
 
 // private
 interface ThisState {
@@ -30,27 +30,27 @@ class GenericInputComponent extends PureComponent<AllProps, ThisState/*undefined
         let d: DViewElement = ((this.props.data as LPointerTargetable).__raw || this.props.data) as any;
         let l: LViewElement = LPointerTargetable.wrap(this.props.data) as LViewElement;
         let field: keyof LViewElement = this.props.field as any;
-        let infoof: GObject<Info>;
-        if (!this.props.infoof){
+        let info: GObject<Info>;
+        if (!this.props.info){
             let DConstructor: typeof DPointerTargetable = RuntimeAccessibleClass.get(d.className);
             let singleton: GObject<LPointerTargetable> = DConstructor.singleton;
-            infoof = singleton["__info_of__" + this.props.field] ;
-        } else infoof = this.props.infoof;
+            info = singleton['__info_of__' + this.props.field] ;
+        } else info = this.props.info;
 
         let type: string;
-        let enumOptions: Dic<String<"optgroup">, Dic<String<"options">, String<"values">>> = {}; // "Options" entry is a fallback for items without an optgroup
+        let enumOptions: Dic<String<'optgroup'>, Dic<String<'options'>, String<'values'>>> = {}; // 'Options' entry is a fallback for items without an optgroup
         let enumOptionsJSX: JSX.Element | undefined;
-        if (infoof.enum) {
-            type = "EEnum";
-            let prevoptgroup: string = "Options";
+        if (info.enum) {
+            type = 'EEnum';
+            let prevoptgroup: string = 'Options';
             let group: string;
             let option: string;
-            for (let key in infoof.enum) {
-                let val: string = infoof.enum[key];
-                if (key.indexOf("(") === 0) {
-                    let endi = key.indexOf(")");
-                    group = key.substring(1, endi).trim();
-                    option = key.substring(endi+1).trim();
+            for (let key in info.enum) {
+                let val: string = info.enum[key];
+                if (key.indexOf('(') === 0) {
+                    let end = key.indexOf(')');
+                    group = key.substring(1, end).trim();
+                    option = key.substring(end + 1).trim();
                     prevoptgroup = group;
                 } else {
                     option = key;
@@ -64,28 +64,28 @@ class GenericInputComponent extends PureComponent<AllProps, ThisState/*undefined
             enumOptionsJSX = <>
                 {
                     //data-selected={l[field] === unsorted[optkey]}
-                    unsorted && Object.keys(unsorted).map( (optkey: string) => <option value={unsorted[optkey]}>{optkey}</option>)
+                    unsorted && Object.keys(unsorted).map((optKey: string) => <option value={unsorted[optKey]}>{optKey}</option>)
                 }
-                {Object.keys(enumOptions).map((grpkey: string) => <optgroup label={grpkey}>{
-                Object.keys(enumOptions[grpkey]).map( (optkey: string) => <option value={enumOptions[grpkey][optkey]}>{optkey}</option>)
+                {Object.keys(enumOptions).map((grpKey: string) => <optgroup label={grpKey}>{
+                Object.keys(enumOptions[grpKey]).map( (optKey: string) => <option value={enumOptions[grpKey][optKey]}>{optKey}</option>)
             }</optgroup>)}</>;
         }
         else {
-            if (typeof infoof.type === "string") {
-                if (infoof.type.indexOf("Function") === 0) type = "Function";
-                else type = infoof.type;
+            if (typeof info.type === 'string') {
+                if (info.type.indexOf('Function') === 0) type = 'Function';
+                else type = info.type;
             }
             else {
-                if (!infoof.type) { Log.exDevv("missing __info_of__ type for " + d.className + "." + this.props.field, {d, infoof, props:this.props}); return <></>}
-                let infotype: GObject = infoof.type;
-                type = infotype.cname || infotype.className || infotype.name;
-                Log.exDev(!type, "missing type:", {type, infoof});
+                if (!info.type) { Log.exDevv('missing __info_of__ type for ' + d.className + '.' + this.props.field, {d, info, props: this.props}); return <></>}
+                let infoType: GObject = info.type;
+                type = infoType.cname || infoType.className || infoType.name;
+                Log.exDev(!type, 'missing type:', {type, info});
             }
         }
 
-        /*if (type.indexOf("|") !== -1) {
-            type = "EEnum";
-            let options = type.split("|");
+        /*if (type.indexOf('|') !== -1) {
+            type = 'EEnum';
+            let options = type.split('|');
             if (!enumOptions.Option) enumOptions.Option = {};
             for (let o in options){
                 o = o.trim();
@@ -96,90 +96,91 @@ class GenericInputComponent extends PureComponent<AllProps, ThisState/*undefined
         // const otherProps: {[inputattribute:HTMLInputTypeAttribute]: any} = {...this.props};
         const otherProps: InputHTMLAttributes<Event> = {...this.props} as any;
         function setMinMax(max: number): void {
-            if (infoof.min !== undefined) otherProps.min = infoof.min;
-            else otherProps.min = infoof.positive === true ? 0 : -max / 2; // assume false if non specified
+            if (info.min !== undefined) otherProps.min = info.min;
+            else otherProps.min = info.positive === true ? 0 : -max / 2; // assume false if non specified
 
-            if (infoof.max !== undefined) otherProps.max = infoof.max;
-            else otherProps.max = infoof.positive === false ? max/2 - 1 : max-1; // assume true if non specified
+            if (info.max !== undefined) otherProps.max = info.max;
+            else otherProps.max = info.positive === false ? max/2 - 1 : max-1; // assume true if non specified
         }
-        let label = U.uppercaseFirstLetter(infoof.label || this.props.field);
+        let label = U.uppercaseFirstLetter(info.label || this.props.field);
 
         switch (type) {
             default:
-                Log.e("invalid type in GenericInput", {type, props:this.props, infoof, d});
-                return <div {...otherProps as any} className={"danger"} style={{color: "red", border: "1px solid red"}}>Invalid GInput type: "{type}"</div>;
-            case "Point": case "GraphPoint": case "Size": case "GraphSize":
+                Log.e('invalid type in GenericInput', {type, props:this.props, info, d});
+                return <div {...otherProps as any} className={'danger'} style={{color: 'red', border: '1px solid red'}}>Invalid GInput type: '{type}'</div>;
+            case 'Point': case 'GraphPoint': case 'Size': case 'GraphSize':
                 return <SizeInput {...otherProps} data={l} field={this.props.field} label={label} />;
-            case "text": case "Function":
-                return <TextArea inputClassName={"input my-auto ms-auto "} {...otherProps} className={this.props.rootClassName}
+            case 'text': case 'Function':
+                return <TextArea inputClassName={'input my-auto ms-auto '} {...otherProps} className={this.props.rootClassName}
                                  data={this.props.data} field={this.props.field}
-                                 jsxLabel={label} tooltip={infoof.text}></TextArea>;
-            case "EEnum":
-                return <Select inputClassName={"my-auto ms-auto select"} {...otherProps} className={this.props.rootClassName}
+                                 jsxLabel={label} tooltip={this.props.tooltip}></TextArea>;
+            case 'EEnum':
+                return <Select inputClassName={'my-auto ms-auto select'} {...otherProps} className={this.props.rootClassName}
                                data={this.props.data} field={this.props.field} options={enumOptionsJSX}
-                               jsxLabel={label} tooltip={infoof.text} />;
+                               jsxLabel={label} tooltip={this.props.tooltip} />;
                 // <input> natives
-            case "radio":
+            case 'radio':
                 // problem: this would need to return a <form> and multiple inputs generated by a single element.
                 // it should be easy but unlikely it will be needed so i won't do it for now.
-                Log.eDevv("radio input type is unsuppoted"); break;
-            case "datetime": type = "datetime-local"; break;
-            case "color": break;
-            case "email": break;
-            case "image": break; // ?
-            case "password": break;
-            case "range": break;
-            case "month": break;
-            case "week": break;
-            case "datetime-local": break;
-            case "time": break;
-            case "url": break;
+                Log.eDevv('radio input type is unsupported'); break;
+            case 'datetime': type = 'datetime-local'; break;
+            case 'color': break;
+            case 'email': break;
+            case 'image': break; // ?
+            case 'password': break;
+            case 'range': break;
+            case 'month': break;
+            case 'week': break;
+            case 'datetime-local': break;
+            case 'time': break;
+            case 'url': break;
             // ecore
             case ShortAttribETypes.EChar:
-                type = "text";
+                type = 'text';
                 if (undefined === otherProps.minLength) otherProps.minLength = 1;
                 otherProps.maxLength = 1;
-                // otherProps.pattern = "^.{1}$";
+                // otherProps.pattern = '^.{1}$';
                 break;
-            case ShortAttribETypes.EString: type = "text"; break;
-            case ShortAttribETypes.EBoolean: type = "checkbox"; break;
+            case ShortAttribETypes.EString: type = 'text'; break;
+            case ShortAttribETypes.EBoolean: type = 'checkbox'; break;
             case ShortAttribETypes.EByte:
-                type = "number";
+                type = 'number';
                 setMinMax(2**8);
                 break;
             case ShortAttribETypes.EShort:
-                type = "number";
+                type = 'number';
                 setMinMax(2**16);
                 break;
             case ShortAttribETypes.EInt:
-                type = "number";
+                type = 'number';
                 setMinMax(2**32);
                 break;
             case ShortAttribETypes.ELong:
-                type = "number";
+                type = 'number';
                 setMinMax(2**64);
                 break;
             case ShortAttribETypes.EFloat:
             case ShortAttribETypes.EDouble:
-                type = "number";
-                if (!otherProps.step) otherProps.step = infoof.step || 0.1;
-                if (!otherProps.pattern) otherProps.pattern = infoof.pattern || "^[0-9]+\.[0-9]{" + infoof.digits + "}$";
+                type = 'number';
+                if (!otherProps.step) otherProps.step = info.step || 0.1;
+                if (!otherProps.pattern) otherProps.pattern = info.pattern || '^[0-9]+\.[0-9]{' + info.digits + '}$';
                 break;
-            case ShortAttribETypes.EDate: type = "datetime-local"; break;
+            case ShortAttribETypes.EDate: type = 'datetime-local'; break;
         }
         // delete otherProps.field; delete otherProps.data; delete otherProps.infoof;
-        return <Input inputClassName={"my-auto ms-auto input"} {...otherProps} className={this.props.rootClassName}
+        return <Input inputClassName={'my-auto ms-auto input'} {...otherProps} className={this.props.rootClassName}
                       data={this.props.data} field={this.props.field}
-                      jsxLabel={label} tooltip={infoof.text} type={type as any}/>;
+                      jsxLabel={label} tooltip={this.props.tooltip} type={type as any}/>;
     }
 }
 
 // private
-interface OwnProps0 {
+interface _OwnProps {
     // propsRequestedFromJSX_AsAttributes: string;
     data: DPointerTargetable | LPointerTargetable;
     field: string;
-    infoof: Info | undefined;
+    info: Info | undefined;
+    tooltip?: boolean|string;
 
     className?: string;
     rootClassName?: string;
@@ -192,18 +193,18 @@ interface OwnProps0 {
     they might be useful, but can just add them in without declaring all of them. i pass them like <input ...otherprops>
     multiple?: boolean;  // multi value for select! works on file, email (just changes default validation pattern), and maybe others
     size?: ??
-    accept?: string // only for type = "file"
-    capture?: string // only for type = "file"
+    accept?: string // only for type = 'file'
+    capture?: string // only for type = 'file'
     autocomplete?: string; // only for <input> types
     disabled?: boolean;
-    height?: string; // for "image"
+    height?: string; // for 'image'
     list?: string; // datalist
     maxLength?: string; // chars
     */
     // many more skipped mostly for forms
 
 }
-type OwnProps = OwnProps0 & InputHTMLAttributes<Event>; // {[inputattribute:HTMLInputAttribute]: any};
+type OwnProps = _OwnProps & InputHTMLAttributes<Event>; // {[inputattribute:HTMLInputAttribute]: any};
 // private
 interface StateProps {
     // propsFromReduxStateOrOtherKindOfStateManagement: boolean; // flux or custom things too, unrelated to this.state of react.
@@ -259,10 +260,10 @@ Supported __info_of__.type values:
         option2 // assumed still in optgroup1
         option3 // assumed still in optgroup1
         (optgroup2) option4
-        if first option(s) are without optgroup, they are grouped in optgroup "Options"
+        if first option(s) are without optgroup, they are grouped in optgroup 'Options'
 
 NOT SUPPORT
-- "EEnum" string, it is only used internally. pass it the whole enum.
+- 'EEnum' string, it is only used internally. pass it the whole enum.
 native <input> not supported
 - radio
 - tel
diff --git a/src/components/forEndUser/Input.tsx b/src/components/forEndUser/Input.tsx
index b17e623d6..75acb28ce 100644
--- a/src/components/forEndUser/Input.tsx
+++ b/src/components/forEndUser/Input.tsx
@@ -1,29 +1,18 @@
-import React, {Dispatch, ReactElement, ReactNode, useEffect} from "react";
-import {connect} from "react-redux";
-import {DState} from "../../redux/store";
-import {
-    Dictionary,
-    DPointerTargetable, DUser,
-    GObject,
-    LModelElement,
-    LPointerTargetable,
-    Overlap,
-    Pointer,
-    Selectors,
-    U
-} from "../../joiner";
-import toast, {Toaster} from 'react-hot-toast';
-import {useStateIfMounted} from "use-state-if-mounted";
+import React, {Dispatch, ReactElement, ReactNode, useEffect} from 'react';
+import {connect} from 'react-redux';
+import {DState} from '../../redux/store';
+import {DPointerTargetable, GObject, LPointerTargetable, Overlap, Pointer, U} from '../../joiner';
+import {useStateIfMounted} from 'use-state-if-mounted';
+import './style.scss';
 
 
 function InputComponent(props: AllProps) {
     // todo: data can be injected with UX, if field is present, can take type from a metainfo like __info_of__
     const data = props.data;
-    // const selected = props.selected;
-    const fathers = U.fatherChain(data as LModelElement);
     let editable = true;
 
     /*  Uncomment this when we have user authentication: if a user is on a ME, it cannot be edited.
+    const fathers = U.fatherChain(data as LModelElement);
     for(let father of fathers) {
         const user = Object.keys(selected).find(key => selected[key]?.id === father);
         if(user && user !== DUser.current) editable = false;
@@ -37,6 +26,7 @@ function InputComponent(props: AllProps) {
     let __value = (!data) ? 'undefined' : ((getter) ? getter(data) : (data[field] !== undefined) ? data[field] : 'undefined');
     const [value, setValue] = useStateIfMounted(__value);
     const [isTouched, setIsTouched] = useStateIfMounted(false);
+    const [showTooltip, setShowTooltip] = useStateIfMounted(false);
 
     useEffect(() => {
         // I check if the value that I have in my local state is being edited by other <Input />
@@ -53,27 +43,14 @@ function InputComponent(props: AllProps) {
     const type = (props.type) ? props.type : 'text';
     const label: string|undefined = props.label;
     const jsxLabel: ReactNode|undefined = props.jsxLabel;
-    /*
-    let tooltip: string | React.ReactElement | Info = props.tooltip === true ? data["__info_of__" + field] : (props.tooltip || undefined);
-    if (typeof tooltip === "object" && (tooltip as Info).txt) {
-        tooltip = <div className={"tooltip"}>
-            <span className={"type"} style={{color: "orange"}}>{":"+tooltip.type+"\t"}</span>
-            <span className={"txt"}>{(tooltip as Info).txt}</span>
-        </div>;
-    }
-    */
-    let tooltip: string = (props.tooltip === true) ? ((data["__info_of__" + field]) ? data["__info_of__" + field].txt: '') : props.tooltip;
+    let tooltip: string|undefined = (props.tooltip === true) ? ((data['__info_of__' + field]) ? data['__info_of__' + field].txt: '') : props.tooltip;
+    tooltip = (tooltip) ? tooltip : '';
 
     let css = 'my-auto input ';
     css += (jsxLabel) ? 'ms-1' : (label) ? 'ms-auto' : '';
     css += (props.hidden) ? ' hidden-input' : '';
-    let autosize: boolean = props.autosize === undefined ? false : props.autosize; // props.type==="text"
+    let autosize: boolean = props.autosize === undefined ? false : props.autosize; // props.type==='text'
     css += autosize ? ' autosize-input' : '';
-    const notify = () => toast((t: GObject) => (
-        <div onClick={() => toast.dismiss(t.id)}>
-            <label className={'ms-1'}>{tooltip}</label>
-        </div>
-    ));
 
     const change = (evt: React.ChangeEvent<HTMLInputElement>) => {
         const isBoolean = (['checkbox', 'radio'].includes(evt.target.type));
@@ -122,20 +99,27 @@ function InputComponent(props: AllProps) {
                        type={type} value={value} onChange={change} onBlur={blur}
                        checked={(['checkbox', 'radio'].includes(type)) ? !!value : undefined} />
 
-    return(<label className={'p-1'} {...otherprops}
-                  style={{display: (jsxLabel || label) ? 'flex' : 'block', cursor: tooltip ? 'help' : 'auto', ...((props as any).style || {})}}>
+    return(<div className={'p-1'} {...otherprops}
+                  style={{display: (jsxLabel || label) ? 'flex' : 'block', ...(props.style || {})}}>
+
+        <label onMouseEnter={e => setShowTooltip(true)} onMouseLeave={e => setShowTooltip(false)}
+               className={(label || jsxLabel) ? 'd-block' : 'd-none'}>
+            {(label) ? label : (jsxLabel) ? jsxLabel : ''}
+        </label>
 
-        { label && <label className={'my-auto'} onClick={() => {if(tooltip) notify()}}>{label}</label> }
+        {(tooltip && showTooltip) && <div className={'my-tooltip'}>
+            <b className={'text-center text-capitalize'}>{field}</b>
+            <br />
+            <label>{tooltip}</label>
+        </div>}
 
-        {jsxLabel && <label style={{cursor: (tooltip) ? 'help' : 'auto'}} onClick={() => {if(tooltip) notify()}}>{jsxLabel}</label>}
 
-        {autosize ? <div className={ (autosize ? "autosize-input-container" : "") + (props.asLabel ? " labelstyle" : "")}
+        {autosize ? <div className={ (autosize ? 'autosize-input-container' : '') + (props.asLabel ? ' labelstyle' : '')}
                           data-value={value}>{input}</div> : input}
-        {tooltip && <Toaster position={'bottom-center'} /> }
-    </label>);
+    </div>);
 }
 
-InputComponent.cname = "InputComponent";
+InputComponent.cname = 'InputComponent';
 export interface InputOwnProps {
     data: LPointerTargetable | DPointerTargetable | Pointer<DPointerTargetable, 1, 1, LPointerTargetable>;
     field: string;
@@ -194,7 +178,6 @@ export function Input(props: InputOwnProps, children: (string | React.Component)
     return <InputConnected {...{...props, children}} />;
 }
 
-InputComponent.cname = "InputComponent";
-InputConnected.cname = "InputConnected";
-Input.cname = "Input";
-// export default Input____a;
+InputComponent.cname = 'InputComponent';
+InputConnected.cname = 'InputConnected';
+Input.cname = 'Input';
diff --git a/src/components/forEndUser/Select.tsx b/src/components/forEndUser/Select.tsx
index b79b844b7..95584df6a 100644
--- a/src/components/forEndUser/Select.tsx
+++ b/src/components/forEndUser/Select.tsx
@@ -1,41 +1,30 @@
-import type {LClass, DPointerTargetable} from "../../joiner";
-import React, {Dispatch, LegacyRef, ReactElement, ReactNode} from "react";
-import {connect} from "react-redux";
-import toast, {Toaster} from "react-hot-toast";
-import {DState,
-    U,
-    LPointerTargetable,
-    GObject,
-    Pointer,
-    LEnumerator,
-    Selectors,
-    LModelElement,
-    Overlap} from "../../joiner";
+import type {DPointerTargetable, LClass} from '../../joiner';
+import {DState, GObject, LEnumerator, LPointerTargetable, Overlap, Pointer} from '../../joiner';
+import React, {Dispatch, LegacyRef, ReactElement, ReactNode} from 'react';
+import {connect} from 'react-redux';
+import {useStateIfMounted} from 'use-state-if-mounted';
+import './style.scss';
 
 // todo: this is too hardcoded for Pointers and class->attributes etc. need to make it more generic
 function SelectComponent(props: AllProps) {
     const data = props.data;
+    const [showTooltip, setShowTooltip] = useStateIfMounted(false);
     if(!data) return(<></>);
     const field = props.field;
     const readOnly = props.readonly; // || U.getDefaultViewsID().includes(data.id);
     const value = data[field]?.id || data[field] || 'undefined';
     const label: string|undefined = props.label;
     const jsxLabel: ReactNode|undefined = props.jsxLabel;
-    const tooltip = props.tooltip;
+    let tooltip: string|undefined = (props.tooltip === true) ? ((data['__info_of__' + field]) ? data['__info_of__' + field].txt: '') : props.tooltip;
+    tooltip = (tooltip) ? tooltip : '';
     let css = 'my-auto select ';
     css += (jsxLabel) ? 'ms-1' : 'ms-auto';
     css += (props.hidden) ? ' hidden-input' : '';
 
-    const notify = () => toast((t: GObject) => (
-        <div onClick={() => toast.dismiss(t.id)}>
-            <label className={'ms-1'}>{tooltip}</label>
-        </div>
-    ));
-
     function SelectChange(evt: React.ChangeEvent<HTMLSelectElement>) {
         if(readOnly) return;
         const target = evt.target.value;
-        console.log("setting:", {data, field, target});
+        console.log('setting:', {data, field, target});
         data[field] = target;
     }
 
@@ -61,11 +50,19 @@ function SelectComponent(props: AllProps) {
     delete otherprops.primitives;
     delete otherprops.returns;
     delete otherprops.hidden;
-    return(<label ref={props.ref as any} className={'d-flex p-1'} {...otherprops}>
-        {(label || jsxLabel) && <label className={'my-auto'} onClick={() => {if(tooltip) notify()}}>
-            {label}
-            {jsxLabel}
-        </label>}
+    return(<div ref={props.ref as any} className={'d-flex p-1'} {...otherprops}>
+
+        <label onMouseEnter={e => setShowTooltip(true)} onMouseLeave={e => setShowTooltip(false)}
+               className={(label || jsxLabel) ? 'd-block' : 'd-none'}>
+            {(label) ? label : (jsxLabel) ? jsxLabel : ''}
+        </label>
+
+        {(tooltip && showTooltip) && <div className={'my-tooltip'}>
+            <b className={'text-center text-capitalize'}>{field}</b>
+            <br />
+            <label>{tooltip}</label>
+        </div>}
+
         <select {...otherprops}
             className={props.inputClassName || css}
             style={props.inputStyle}
@@ -94,16 +91,15 @@ function SelectComponent(props: AllProps) {
             </optgroup>}
             {props.options}
         </select>
-        {(tooltip) && <Toaster position={'bottom-center'} />}
-    </label>);
+    </div>);
 }
-SelectComponent.cname = "SelectComponent";
+SelectComponent.cname = 'SelectComponent';
 export interface SelectOwnProps {
     data?: DPointerTargetable | Pointer<DPointerTargetable, 1, 1, LPointerTargetable>;
     field: string;
     label?: string;
     jsxLabel?: ReactNode;
-    tooltip?: string;
+    tooltip?: boolean|string;
     hidden?: boolean;
     options?: JSX.Element;
     key?: React.Key | null;
@@ -149,7 +145,7 @@ export const Select = (props: SelectOwnProps, children: (string | React.Componen
 }
 
 
-SelectComponent.cname = "SelectComponent";
-SelectConnected.cname = "SelectConnected";
-Select.cname = "Select";
+SelectComponent.cname = 'SelectComponent';
+SelectConnected.cname = 'SelectConnected';
+Select.cname = 'Select';
 export default Select;
diff --git a/src/components/forEndUser/TextArea.tsx b/src/components/forEndUser/TextArea.tsx
index fc8430d78..488170373 100644
--- a/src/components/forEndUser/TextArea.tsx
+++ b/src/components/forEndUser/TextArea.tsx
@@ -1,13 +1,8 @@
-import React, {Dispatch, ReactElement, ReactNode} from "react";
-import {connect} from "react-redux";
-import {DState,
-    DPointerTargetable,
-    GObject,
-    LPointerTargetable,
-    U,
-    Overlap, Pointer} from "../../joiner";
-import {SelectOwnProps} from "./Select";
-import {useStateIfMounted} from "use-state-if-mounted";
+import React, {Dispatch, ReactElement, ReactNode} from 'react';
+import {connect} from 'react-redux';
+import {DPointerTargetable, DState, GObject, LPointerTargetable, Overlap, Pointer, U} from '../../joiner';
+import {useStateIfMounted} from 'use-state-if-mounted';
+import './style.scss';
 
 
 function TextAreaComponent(props: AllProps) {
@@ -18,9 +13,13 @@ function TextAreaComponent(props: AllProps) {
     const setter = props.setter;
     const label: string|undefined = props.label;
     const jsxLabel: ReactNode|undefined = props.jsxLabel;
+    let tooltip: string|undefined = (props.tooltip === true) ? ((data['__info_of__' + field]) ? data['__info_of__' + field].txt: '') : props.tooltip;
+    tooltip = (tooltip) ? tooltip : '';
     let __value = (!data) ? 'undefined' : ((getter) ? getter(data) : (data[field] !== undefined) ? data[field] : 'undefined');
     const [value, setValue] = useStateIfMounted(__value);
     const [isTouched, setIsTouched] = useStateIfMounted(false);
+    const [showTooltip, setShowTooltip] = useStateIfMounted(false);
+
     if (!data) return(<></>);
     let css = 'my-auto input ';
     css += (jsxLabel) ? 'ms-1' : (label) ? 'ms-auto' : '';
@@ -58,12 +57,17 @@ function TextAreaComponent(props: AllProps) {
     delete otherprops.selected;
 
     return(<div style={{display: (jsxLabel || label) ? 'flex' : 'block'}} className={'p-1'} {...otherprops}>
-        {(label && !jsxLabel) && <label className={'my-auto'}>
-            {label}
-        </label>}
-        {(jsxLabel && !label) && <label className={'my-auto'}>
-            {jsxLabel}
-        </label>}
+        <label onMouseEnter={e => setShowTooltip(true)} onMouseLeave={e => setShowTooltip(false)}
+               className={(label || jsxLabel) ? 'd-block' : 'd-none'}>
+            {(label) ? label : (jsxLabel) ? jsxLabel : ''}
+        </label>
+
+        {(tooltip && showTooltip) && <div className={'my-tooltip'}>
+            <b className={'text-center text-capitalize'}>{field}</b>
+            <br />
+            <label>{tooltip}</label>
+        </div>}
+
         <textarea spellCheck={false} readOnly={readOnly} className={props.inputClassName || css} style={props.inputStyle}
                   onChange={change} onBlur={blur} value={value} />
     </div>);
@@ -77,7 +81,7 @@ export interface TextAreaOwnProps {
     setter?: (value: string|boolean) => void;
     jsxLabel?: ReactNode;
     readonly?: boolean;
-    tooltip?: string;
+    tooltip?: boolean|string;
     hidden?: boolean;
     key?: React.Key | null;
     className?: string;
@@ -114,7 +118,7 @@ export const TextArea = (props: TextAreaOwnProps, children: (string | React.Comp
     return <TextAreaConnected {...{...props, children}} />;
 }
 
-TextAreaComponent.cname = "TextAreaComponent";
-TextAreaConnected.cname = "TextAreaConnected";
-TextArea.cname = "TextArea";
+TextAreaComponent.cname = 'TextAreaComponent';
+TextAreaConnected.cname = 'TextAreaConnected';
+TextArea.cname = 'TextArea';
 export default TextArea;
diff --git a/src/components/forEndUser/style.scss b/src/components/forEndUser/style.scss
index db32c8e47..513bf1b9f 100644
--- a/src/components/forEndUser/style.scss
+++ b/src/components/forEndUser/style.scss
@@ -11,3 +11,16 @@
   & > .DOperation > b {color: $operation-color}
   & > .DParameter > b {color: $parameter-color}
 }
+
+.my-tooltip {
+  position: absolute;
+  z-index: 999;
+  background: white;
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: lightgray;
+  left: 50%; top: 85%;
+  transform: translate(-50%,-50%);
+  padding: 10px;
+}
diff --git a/src/components/navbar/style.scss b/src/components/navbar/style.scss
index 8442c4d4f..1cb9d0fee 100644
--- a/src/components/navbar/style.scss
+++ b/src/components/navbar/style.scss
@@ -54,7 +54,7 @@
   font-size: 12px;
 }
 .tab-item:hover {
-  background-color: #e0e0e0;
+  background-color: #E0E0E0;
 }
 .tab>.extension {
   position: absolute;
diff --git a/src/components/rightbar/jsxEditor/JsxEditor.tsx b/src/components/rightbar/jsxEditor/JsxEditor.tsx
index a0d8f27e6..bd38b59db 100644
--- a/src/components/rightbar/jsxEditor/JsxEditor.tsx
+++ b/src/components/rightbar/jsxEditor/JsxEditor.tsx
@@ -20,7 +20,7 @@ function JsxEditorComponent(props: AllProps) {
     }
 
     return <div style={{height: '20em'}} tabIndex={-1} onBlur={blur}>
-        <label className={'ms-1'}>JSX Editor</label>
+        <label className={'ms-1 mb-1'}>JSX Editor</label>
         <Editor className={'mx-1'} onChange={change}
                 options={{fontSize: 12, scrollbar: {vertical: 'hidden', horizontalScrollbarSize: 5}, minimap: {enabled: false}, readOnly: readOnly}}
                 defaultLanguage={'html'}  value={view.jsxString} />
diff --git a/src/components/rightbar/oclEditor/OclEditor.tsx b/src/components/rightbar/oclEditor/OclEditor.tsx
index 2ba0e7a50..0cb39b76a 100644
--- a/src/components/rightbar/oclEditor/OclEditor.tsx
+++ b/src/components/rightbar/oclEditor/OclEditor.tsx
@@ -1,8 +1,7 @@
-import React, {Dispatch, ReactElement, useEffect} from "react";
+import React, {Dispatch, ReactElement} from "react";
 import {connect} from "react-redux";
 import Editor from "@monaco-editor/react";
-import {U,
-    DState, DPointerTargetable, DViewElement, GObject, LPointerTargetable, LViewElement, Pointer} from "../../../joiner";
+import {DState, DViewElement, LViewElement, Pointer, U} from "../../../joiner";
 
 
 function OclEditorComponent(props: AllProps) {
@@ -14,7 +13,7 @@ function OclEditorComponent(props: AllProps) {
     }
 
     return <div style={{height: '5em'}}>
-        <label className={'ms-1'}>OCL Editor</label>
+        <label className={'ms-1 mb-1'}>OCL Editor</label>
         <Editor className={'mx-1'} onChange={change}
                 options={{fontSize: 12, scrollbar: {vertical: 'hidden', horizontalScrollbarSize: 5}, minimap: {enabled: false}, readOnly: readOnly}}
                 defaultLanguage={'js'} value={view.query} />
diff --git a/src/components/rightbar/viewpointsEditor/ViewpointsEditor.tsx b/src/components/rightbar/viewpointsEditor/ViewpointsEditor.tsx
index b8d888502..18710a1bc 100644
--- a/src/components/rightbar/viewpointsEditor/ViewpointsEditor.tsx
+++ b/src/components/rightbar/viewpointsEditor/ViewpointsEditor.tsx
@@ -35,11 +35,11 @@ function ViewpointsEditorComponent(props: AllProps) {
             </button>
         </div>
         {viewpoints.map((viewpoint, index) => {
-            return <div key={viewpoint.id} className={'d-flex p-1 mt-1 border round'}
+            return <div key={viewpoint.id} className={'d-flex p-1 mt-1 border round mx-1'}
                         onMouseEnter={(e) => setHoverID(viewpoint.id)}
                         onMouseLeave={(e) => setHoverID('')}
-                        style={{ backgroundColor: (selected.id === viewpoint.id) ? 'white' :
-                                (hoverID === viewpoint.id ? "var(--bs-border-color)" : 'transparent')}}>
+                        style={{backgroundColor: (selected.id === viewpoint.id) ? 'white' :
+                                (hoverID === viewpoint.id ? '#E0E0E0' : 'transparent')}}>
                 <input className={'p-0 input hidden-input'} value={viewpoint.name} type={'text'}
                        onChange={(evt) => {editName(evt, viewpoint)}} disabled={index === 0} />
                 <button className={'btn btn-success ms-auto'} disabled={selected.id === viewpoint.id}
diff --git a/src/components/rightbar/viewsEditor/View.tsx b/src/components/rightbar/viewsEditor/View.tsx
index 088613473..23cd2307f 100644
--- a/src/components/rightbar/viewsEditor/View.tsx
+++ b/src/components/rightbar/viewsEditor/View.tsx
@@ -1,15 +1,7 @@
 import React from "react";
-import type {LViewElement, LViewPoint, DViewPoint} from "../../../joiner";
-import {SetFieldAction, SetRootFieldAction} from "../../../redux/action/action";
-import OclEditor from "../oclEditor/OclEditor";
-import JsxEditor from "../jsxEditor/JsxEditor";
-import {U,
-    Select,
-    TextArea,
-    Input,
-    EdgeBendingMode,
-    CoordinateMode} from "../../../joiner";
-import {EdgeGapMode} from "../../../joiner/types";
+import type {LViewElement, LViewPoint} from "../../../joiner";
+import {U} from "../../../joiner";
+import {SetRootFieldAction} from "../../../redux/action/action";
 import InfoData from "./data/InfoData";
 import NodeData from "./data/NodeData";
 import TemplateData from "./data/TemplateData";
@@ -17,6 +9,7 @@ import EdgeData from "./data/EdgeData";
 import EdgePointData from "./data/EdgePointData";
 import {DockLayout} from "rc-dock";
 import {LayoutData} from "rc-dock/lib/DockData";
+import CustomData from "./data/CustomData";
 
 interface Props { view: LViewElement; viewpoints: LViewPoint[]; }
 
@@ -30,18 +23,19 @@ function ViewData(props: Props) {
         { id: '1', title: 'Info', group: '1', closable: false, content: <InfoData view={view} viewpoints={viewpoints} readonly={readOnly} /> },
         { id: '2', title: 'Node', group: '1', closable: false, content: <NodeData view={view} readonly={readOnly} /> },
         { id: '3', title: 'Template', group: '1', closable: false, content: <TemplateData view={view} readonly={readOnly} /> },
-        { id: '4', title: 'Edge', group: '1', closable: false, content: <EdgeData view={view} readonly={readOnly} /> },
-        { id: '5', title: 'EdgePoint', group: '1', closable: false, content: <EdgePointData view={view} readonly={readOnly} /> }
+        { id: '4', title: 'Custom Data', group: '1', closable: false, content: <CustomData viewID={view.id} readonly={readOnly} /> },
+        { id: '5', title: 'Edge', group: '1', closable: false, content: <EdgeData view={view} readonly={readOnly} /> },
+        { id: '6', title: 'EdgePoint', group: '1', closable: false, content: <EdgePointData view={view} readonly={readOnly} /> }
     ];
     layout.dockbox.children.push({tabs});
 
     const back = (evt: React.MouseEvent<HTMLButtonElement>) => {
-        SetRootFieldAction.new('stackViews', undefined, '-=', true);
+        SetRootFieldAction.new('stackViews', [], '', false);
     }
 
     return(<div>
         <div className={'d-flex p-2'}>
-            <b className={'ms-1 my-auto'}>VIEW</b>
+            <b className={'ms-1 my-auto'}>{view.name}</b>
             <button className={'btn btn-danger ms-auto'} onClick={back}>
                 <i className={'p-1 bi bi-arrow-left'}></i>
             </button>
diff --git a/src/components/rightbar/viewsEditor/Views.tsx b/src/components/rightbar/viewsEditor/Views.tsx
index 137c94692..4eaed17b9 100644
--- a/src/components/rightbar/viewsEditor/Views.tsx
+++ b/src/components/rightbar/viewsEditor/Views.tsx
@@ -33,11 +33,12 @@ function ViewsData(props: Props) {
             </button>
         </div>
         {views.map((view, i) => {
-            return <div key={view.id} className={'d-flex p-1 mt-1 border round'}
+            return <div key={view.id} className={'d-flex p-1 mt-1 border round mx-1'}
+                        tabIndex={-1}
                         onMouseEnter={(e) => setHoverID(view.id)}
                         onMouseLeave={(e) => setHoverID('')}
                         onClick={(evt) => {select(evt, view)}}
-                        style={ hoverID === view.id ? { background: "var(--bs-border-color)"} : {}}>
+                        style={{cursor: 'pointer', background: hoverID === view.id ? '#E0E0E0' : 'transparent'}}>
                 <label className={'my-auto'}>{view?.name}</label>
                 <button className={'btn btn-success ms-auto'} onClick={(evt) => {select(evt, view)}}>
                     <i className={'p-1 bi bi-info-lg'}></i>
diff --git a/src/components/rightbar/viewsEditor/data/CustomData.tsx b/src/components/rightbar/viewsEditor/data/CustomData.tsx
new file mode 100644
index 000000000..77fdbcdb9
--- /dev/null
+++ b/src/components/rightbar/viewsEditor/data/CustomData.tsx
@@ -0,0 +1,135 @@
+import React, {Dispatch, ReactElement} from 'react';
+import {DState, DViewElement, LViewElement, Pointer} from '../../../../joiner';
+import {connect} from "react-redux";
+
+function CustomDataComponent(props: AllProps) {
+    const view = props.view;
+    const readOnly = props.readonly;
+    let constants = (view.constants && view.constants !== '{}') ? view.constants?.slice(1, -1).split(',') : [];
+    let variables = (view.preRenderFunc && view.preRenderFunc !== '() => {return{}}') ? view.preRenderFunc?.slice(14, -2).split(',') : [];
+
+
+    const addConst = () => {
+        if(constants.length) view.constants = `${view.constants?.slice(0, -1)}, myConst: 'dummy'}`;
+        else view.constants = `{myConst: 'dummy'}`;
+    }
+
+    const removeConst = (index: number) => {
+        delete constants[index];
+        view.constants = (`{${constants.filter(c => c).toString()}}`);
+    }
+
+    const blurNameConst = (index: number, name: string) => {
+        if(readOnly) return;
+        if(!name) name = 'myConst';
+        const value = constants[index].split(':')[1];
+        constants[index] = `${name.replaceAll(' ', '')}: ${value}`;
+        view.constants = (`{${constants.toString()}}`);
+    }
+
+    const blurValueConst = (index: number, value: string) => {
+        if(readOnly) return;
+        if(!value) value = 'dummy';
+        const name = constants[index].split(':')[0];
+        constants[index] = `${name}: ${value}`;
+        view.constants = (`{${constants.toString()}}`);
+    }
+
+    const addVar = () => {
+        if(variables.length) view.preRenderFunc = `${view.preRenderFunc?.slice(0, -2)}, myVar: 'dummy'}}`;
+        else view.preRenderFunc = `() => {return{myVar: 'dummy'}}`;
+    }
+
+    const removeVar = (index: number) => {
+        delete variables[index];
+        view.preRenderFunc = (`() => {return{${variables.filter(c => c).toString()}}}`);
+    }
+
+    const blurNameVar = (index: number, name: string) => {
+        if(readOnly) return;
+        if(!name) name = 'myVar';
+        const value = variables[index].split(':')[1];
+        variables[index] = `${name.replaceAll(' ', '')}: ${value}`;
+        view.preRenderFunc = (`() => {return{${variables.toString()}}}`);
+    }
+
+    const blurValueVar = (index: number, value: string) => {
+        if(readOnly) return;
+        if(!value) value = 'dummy';
+        const name = variables[index].split(':')[0];
+        variables[index] = `${name}: ${value}`;
+        view.preRenderFunc = (`() => {return{${variables.toString()}}}`);
+    }
+
+
+    return(<section className={'p-3'}>
+        <div className={'d-flex w-100 mb-2'}>
+            <label>Constants (<i>Evaluated Once</i>) </label>
+            <button className={'btn btn-primary ms-auto'} onClick={addConst} disabled={readOnly}>
+                <i className={'p-1 bi bi-plus'}></i>
+            </button>
+        </div>
+        {constants.map((constant, index) => {
+            const c = constant.split(':');
+            const name = c[0].replaceAll(' ', ''); const value = c[1];
+            return(<div className={'d-flex p-1'} key={index}>
+                <input className={'input w-25'} tabIndex={-1} onBlur={e => blurNameConst(index, e.target.value)}
+                       defaultValue={name} readOnly={readOnly} />
+                <b className={'mx-1 my-auto'}>=</b>
+                <input className={'input w-25'} tabIndex={-1} onBlur={e => blurValueConst(index, e.target.value)}
+                       defaultValue={value} readOnly={readOnly} />
+                <button className={'btn btn-danger ms-2'} disabled={readOnly} onClick={e => removeConst(index)}>
+                    <i className={'p-1 bi bi-trash3-fill'}></i>
+                </button>
+            </div>)
+        })}
+
+        <div className={'d-flex w-100 mt-4 mb-2'}>
+            <label>Variables (<i>Evaluated Foreach Render</i>)</label>
+            <button className={'btn btn-primary ms-auto'} onClick={addVar} disabled={readOnly}>
+                <i className={'p-1 bi bi-plus'}></i>
+            </button>
+        </div>
+        {variables.map((variable, index) => {
+            const v = variable.split(':');
+            const name = v[0].replaceAll(' ', ''); const value = v[1];
+            return(<div className={'d-flex p-1'} key={index}>
+                <input className={'input w-25'} tabIndex={-1} onBlur={e => blurNameVar(index, e.target.value)}
+                       defaultValue={name} readOnly={readOnly}  />
+                <b className={'mx-1 my-auto'}>=</b>
+                <input className={'input w-25'} tabIndex={-1} onBlur={e => blurValueVar(index, e.target.value)}
+                       defaultValue={value} readOnly={readOnly} />
+                <button className={'btn btn-danger ms-2'} disabled={readOnly} onClick={e => removeVar(index)}>
+                    <i className={'p-1 bi bi-trash3-fill'}></i>
+                </button>
+            </div>)
+        })}
+    </section>);
+}
+
+interface OwnProps {viewID: Pointer<DViewElement, 1, 1, LViewElement>, readonly: boolean}
+interface StateProps {view: LViewElement}
+interface DispatchProps { }
+type AllProps = OwnProps & StateProps & DispatchProps;
+
+
+function mapStateToProps(state: DState, ownProps: OwnProps): StateProps {
+    const view = LViewElement.fromPointer(ownProps.viewID);
+    return {view};
+}
+
+function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
+    const ret: DispatchProps = {};
+    return ret;
+}
+
+
+export const CustomDataConnected = connect<StateProps, DispatchProps, OwnProps, DState>(
+    mapStateToProps,
+    mapDispatchToProps
+)(CustomDataComponent);
+
+export const CustomData = (props: OwnProps, children: (string | React.Component)[] = []): ReactElement => {
+    return <CustomDataConnected {...{...props, children}} />;
+}
+export default CustomData;
diff --git a/src/components/rightbar/viewsEditor/data/EdgeData.tsx b/src/components/rightbar/viewsEditor/data/EdgeData.tsx
index c132fa7c4..6e2010951 100644
--- a/src/components/rightbar/viewsEditor/data/EdgeData.tsx
+++ b/src/components/rightbar/viewsEditor/data/EdgeData.tsx
@@ -1,42 +1,27 @@
 import React from 'react';
-import {
-    Dictionary,
-    DViewElement,
-    EdgeBendingMode,
-    GenericInput,
-    GObject,
-    Info,
-    Input,
-    LViewElement,
-    LViewPoint
-} from '../../../../joiner';
+import {GenericInput, GObject, Info, LViewElement} from '../../../../joiner';
 
 interface Props {view: LViewElement, readonly: boolean}
-
 function EdgeData(props: Props) {
     const view = props.view;
     const readOnly = props.readonly;
     let l: GObject & LViewElement = LViewElement.singleton as any;
-    let prefixLength = "__info_of__".length;
+    let prefixLength = '__info_of__'.length;
     let rows: JSX.Element[] = [];
-    for (let fullkey in l) {
-        if (fullkey[0] !== "_" || fullkey.indexOf("__info_of__") !== 0) continue;
-        let info: Info = l[fullkey];
+    for (let fullKey in l) {
+        if (fullKey[0] !== '_' || fullKey.indexOf('__info_of__') !== 0) continue;
+        let info: Info = l[fullKey];
         // infos[key] = info;
-        let key: string = fullkey.substring(prefixLength);
+        let key: string = fullKey.substring(prefixLength);
         if (info.hidden || info.obsolete || info.todo) continue;
         if (!info.isEdge) continue;
-        rows.push(//<div className={"d-flex mx-3 mt-1  w-100 capitalize-first-letter"}>{
-            <GenericInput rootClassName={"mx-3 mt-1 d-flex"} className={"d-flex"} data={view} field={key as any} infoof={info} disabled={readOnly}/>
-            // }</div>
-        );
+        rows.push(<GenericInput rootClassName={'mx-3 mt-1 d-flex'} className={'d-flex'} data={view}
+                                field={key as any} tooltip={true} info={info} disabled={readOnly} />);
     }
 
-    return(<>
-        <section>
-            {rows}
-        </section>
-    </>);
+    return(<section className={'p-3'}>
+        {rows}
+    </section>);
 }
 
 export default EdgeData;
diff --git a/src/components/rightbar/viewsEditor/data/EdgePointData.tsx b/src/components/rightbar/viewsEditor/data/EdgePointData.tsx
index 5e1e5b43e..e3be18a07 100644
--- a/src/components/rightbar/viewsEditor/data/EdgePointData.tsx
+++ b/src/components/rightbar/viewsEditor/data/EdgePointData.tsx
@@ -1,42 +1,27 @@
 import React from 'react';
-import {
-    Dictionary,
-    DViewElement,
-    EdgeBendingMode,
-    GenericInput,
-    GObject,
-    Info,
-    Input,
-    LViewElement,
-    LViewPoint
-} from '../../../../joiner';
+import {GenericInput, GObject, Info, LViewElement} from '../../../../joiner';
 
 interface Props {view: LViewElement, readonly: boolean}
-
 function EdgePointData(props: Props) {
     const view = props.view;
     const readOnly = props.readonly;
     let l: GObject & LViewElement = LViewElement.singleton as any;
-    let prefixLength = "__info_of__".length;
+    let prefixLength = '__info_of__'.length;
     let rows: JSX.Element[] = [];
-    for (let fullkey in l) {
-        if (fullkey[0] !== "_" || fullkey.indexOf("__info_of__") !== 0) continue;
-        let info: Info = l[fullkey];
+    for (let fullKey in l) {
+        if (fullKey[0] !== '_' || fullKey.indexOf('__info_of__') !== 0) continue;
+        let info: Info = l[fullKey];
         // infos[key] = info;
-        let key: string = fullkey.substring(prefixLength);
+        let key: string = fullKey.substring(prefixLength);
         if (info.hidden || info.obsolete || info.todo) continue;
         if (!info.isEdgePoint) continue;
-        rows.push(//<div className={"d-flex mx-3 mt-1  w-100"}>{
-            <GenericInput rootClassName={"mx-3 mt-1 d-flex"} className={"d-flex"} data={view} field={key as any} infoof={info} disabled={readOnly}/>
-            // }</div>
-        );
+        rows.push(<GenericInput rootClassName={'mx-3 mt-1 d-flex'} className={'d-flex'} data={view}
+                                field={key as any} tooltip={true} info={info} disabled={readOnly} />);
     }
 
-    return(<>
-        <section>
-            {rows}
-        </section>
-    </>);
+    return(<section className={'p-3'}>
+        {rows}
+    </section>);
 }
 
 export default EdgePointData;
diff --git a/src/components/rightbar/viewsEditor/data/InfoData.tsx b/src/components/rightbar/viewsEditor/data/InfoData.tsx
index 89017125e..34976eead 100644
--- a/src/components/rightbar/viewsEditor/data/InfoData.tsx
+++ b/src/components/rightbar/viewsEditor/data/InfoData.tsx
@@ -20,7 +20,7 @@ function InfoData(props: Props) {
         else SetFieldAction.new(view.id, 'viewpoint', '', '', false);
     }
 
-    return(<>
+    return(<section className={'p-3'}>
         <Input data={view} field={"name"} label={"Name"} type={"text"}/>
         <Input data={view} field={"explicitApplicationPriority"} label={"Priority"} type={"number"}/>
         <div className={'d-flex p-1'}>
@@ -34,15 +34,15 @@ function InfoData(props: Props) {
             </select>
         </div>
         {/* damiano: qui Select component avrebbe fatto comodo al posto del select nativo, ma è troppo poco generica*/}
-        <div className="p-1" style={{display: "flex"}}><label className="my-auto">Appliable to</label>
+        {/*<div className="p-1" style={{display: "flex"}}><label className="my-auto">Appliable to</label>
             <select data-obj={view.id} data-field={'appliableToClasses'} data-label={'Appliable to'} data-options={ classesOptions }
                     value={view.appliableToClasses[0] || ''} onChange={(e) => { view.appliableToClasses = e.target.value as any; }}
                     className={"my-auto ms-auto select"} disabled={readOnly}>
                 {classesOptions}
             </select>
-        </div>
+        </div>*/}
         <OclEditor viewid={view.id} />
-    </>);
+    </section>);
 }
 
 export default InfoData;
diff --git a/src/components/rightbar/viewsEditor/data/NodeData.tsx b/src/components/rightbar/viewsEditor/data/NodeData.tsx
index 393a059be..c707981f0 100644
--- a/src/components/rightbar/viewsEditor/data/NodeData.tsx
+++ b/src/components/rightbar/viewsEditor/data/NodeData.tsx
@@ -17,7 +17,7 @@ function NodeData(props: Props) {
         SetFieldAction.new(view.id, 'forceNodeType', value, '', false);
     }
 
-    return(<>
+    return(<section className={'p-3'}>
         {/*<Select obj={view} field={"useSizeFrom"} options={
             <optgroup label="Node position depends from what?">
                 <option value={EuseSizeFrom.view}>View</option>
@@ -32,7 +32,7 @@ function NodeData(props: Props) {
         <Input data={view} field={"height"} label={"Height"} type={"number"}/>
         {/*<Input data={view} field={"scalezoomx"} label={"Zoom X"} type={"number"}/>*/}
         {/*<Input data={view} field={"scalezoomy"} label={"Zoom Y"} type={"number"}/>*/}
-        <div className={'d-flex p-1'}>
+        {/*<div className={'d-flex p-1'}>
             <label className={'my-auto'}>Force Node</label>
             <select className={'my-auto ms-auto select'} disabled={readOnly}
                     value={view.forceNodeType} onChange={changeFN}>
@@ -41,19 +41,12 @@ function NodeData(props: Props) {
                     return(<option key={index} value={node}>{node}</option>);
                 })}
             </select>
-        </div>
+        </div>*/}
         {/*from damiano: il primo StoreSize tooltip funziona, il secondo no. perchè? l'html viene popolato correttamente ma risulta opacità 0, puoi cercare di risolverlo tu?*/}
         <Input data={view} field={"storeSize"} label={"Store Size"} tooltip={
             <div>"Active: the node position depends from the view currently displayed. Inactive: it depends from the graph."</div>} type={"checkbox"} />
         <Input data={view} field={"lazySizeUpdate"} label={"Lazy Update"} type={"checkbox"} tooltip={true}/>
 
-        <div className="p-1" style={{display: "flex"}}><label className="my-auto">Appliable to</label>
-            <select data-obj={view.id} data-field={'appliableToClasses'} data-label={'Appliable to'} data-options={classesOptions}
-                    value={view.appliableToClasses[0] || ''} onChange={(e) => { view.appliableToClasses = e.target.value as any; }}
-                    className={"my-auto ms-auto select"} disabled={readOnly}>
-                {classesOptions}
-            </select>
-        </div>
         <Input data={view} field={"adaptWidth"} label={"Adapt Width"} type={"checkbox"}/>
         <Input data={view} field={"adaptHeight"} label={"Adapt Height"} type={"checkbox"}/>
         <Input data={view} field={"draggable"} label={"Draggable"} type={"checkbox"}/>
@@ -62,7 +55,7 @@ function NodeData(props: Props) {
         <TextArea data={view} field={'onDragEnd'} label={'OnDragEnd'} />
         <TextArea data={view} field={'onResizeStart'} label={'OnResizeStart'} />
         <TextArea data={view} field={'onResizeEnd'} label={'OnResizeEnd'} />
-    </>);
+    </section>);
 }
 
 export default NodeData;
diff --git a/src/components/rightbar/viewsEditor/data/TemplateData.tsx b/src/components/rightbar/viewsEditor/data/TemplateData.tsx
index 0bdc1a815..bd2b3aeef 100644
--- a/src/components/rightbar/viewsEditor/data/TemplateData.tsx
+++ b/src/components/rightbar/viewsEditor/data/TemplateData.tsx
@@ -8,11 +8,11 @@ function TemplateData(props: Props) {
     const view = props.view;
     const readOnly = props.readonly;
 
-    return(<>
-        <TextArea data={view} field={"constants"} label={"Constants"} />
-        <TextArea data={view} field={"preRenderFunc"} label={"PreRender Function"} />
+    return(<section className={'p-3'}>
+        {/*<TextArea data={view} field={"constants"} label={"Constants"} />*/}
+        {/*<TextArea data={view} field={"preRenderFunc"} label={"PreRender Function"} />*/}
         <JsxEditor viewid={view.id} />
-    </>);
+    </section>);
 }
 
 export default TemplateData;
diff --git a/src/graph/vertex/Vertex.tsx b/src/graph/vertex/Vertex.tsx
index 5138403ec..666ce3ec8 100644
--- a/src/graph/vertex/Vertex.tsx
+++ b/src/graph/vertex/Vertex.tsx
@@ -29,7 +29,7 @@ class ThisStatee extends GraphElementStatee { forceupdate?: number }
 
 var dragHelper = document.createElement("div");
 dragHelper.style.backgroundColor = "transparent";
-dragHelper.style.outline = "4px solid black";
+dragHelper.style.outline = "1px dashed black";
 
 export class VertexComponent<AllProps extends AllPropss = AllPropss, ThisState extends ThisStatee = ThisStatee>
     extends superclassGraphElementComponent<AllProps, ThisState> {
diff --git a/src/joiner/classes.ts b/src/joiner/classes.ts
index f1ab4a188..4053adf9b 100644
--- a/src/joiner/classes.ts
+++ b/src/joiner/classes.ts
@@ -728,8 +728,8 @@ export class Constructors<T extends DPointerTargetable>{
         thiss.appliableToClasses = appliableToClasses;
         thiss.jsxString = jsxString;
         thiss.usageDeclarations = usageDeclarations;
-        thiss.constants = constants;
-        thiss.preRenderFunc = preRenderFunc;
+        thiss.constants = constants ? constants : '{}';
+        thiss.preRenderFunc = preRenderFunc ? preRenderFunc : '() => {return{}}';
         // thiss.__transient = new DViewTransientProperties();
         thiss.subViews = [];
         thiss.oclApplyCondition = '';
diff --git a/src/redux/store.tsx b/src/redux/store.tsx
index 64654bc74..e8196bfc7 100644
--- a/src/redux/store.tsx
+++ b/src/redux/store.tsx
@@ -213,7 +213,6 @@ function makeDefaultGraphViews(): DViewElement[] {
 
     let packageView: DViewElement = DViewElement.new('Package', DV.packageView(), undefined, '', '', '', [DPackage.cname]);
     packageView.defaultVSize = new GraphSize(0, 0, 400, 500);
-    packageView.preRenderFunc = "() => { return {pname: this.data.name+\"pre\"}; }"
 
     let classView: DViewElement = DViewElement.new('Class', DV.classView(), undefined, '', '', '', [DClass.cname]);
     classView.adaptWidth = true;
@@ -247,15 +246,15 @@ function makeDefaultGraphViews(): DViewElement[] {
 
     let edgeViews: DViewElement[] = [];
     let size0: GraphPoint = new GraphPoint(0, 0), size1: GraphPoint = new GraphPoint(20, 20), size2: GraphPoint = new GraphPoint(20, 20); // todo: riportalo in 40,20
-    let edgePreRenderFunc: string = `()=>({
+    let edgePreRenderFunc: string = `() => {return{
             segments: this.edge.segments,
-            strokeColor: "gray",
-            strokeWidth: "2px",
-            strokeColorHover: "black",
-            strokeColorLong: "red",
+            strokeColor: 'gray',
+            strokeWidth: '2px',
+            strokeColorHover: 'black',
+            strokeColorLong: 'red',
             strokeLengthLimit: 300,
-            strokeWidthHover: "4px",
-        })`;
+            strokeWidthHover: '4px'
+        }}`;
     function makeEdgeView(name: string, type: EdgeHead, headSize: GraphPoint | undefined, tailSize: GraphPoint | undefined, dashing: boolean): DViewElement{
         let ev = DViewElement.new2("Edge"+name, DV.edgeView(type,
                 headSize ? DV.svgHeadTail("Head", type) : "", tailSize ? DV.svgHeadTail("Tail", type) : "", dashing ? "10.5,9,0,0" : undefined),
diff --git a/src/view/viewElement/view.tsx b/src/view/viewElement/view.tsx
index e1b41b51d..34fed74d3 100644
--- a/src/view/viewElement/view.tsx
+++ b/src/view/viewElement/view.tsx
@@ -43,8 +43,13 @@ export class DViewElement extends DPointerTargetable {
 
     // own properties
     name!: string;
-    constants?: string; // evalutate 1 sola volta all'applicazione della vista o alla creazione dell'elemento.
-    preRenderFunc?: string; // evalutate tutte le volte che l'elemento viene aggiornato (il model o la view cambia)
+
+    // evaluate 1 sola volta all'applicazione della vista o alla creazione dell'elemento.
+    constants!: string;
+
+    // evaluate tutte le volte che l'elemento viene aggiornato (il model o la view cambia).
+    preRenderFunc!: string;
+
     jsxString!: string; // l'html template
     usageDeclarations?: string;
     forceNodeType?: DocString<'component name (Vertex, Field, GraphVertex, Graph)'>;
@@ -234,13 +239,13 @@ export class LViewElement<Context extends LogicContext<DViewElement, LViewElemen
     bendingMode!: EdgeBendingMode;
     __info_of__bendingMode: Info = {isEdge: true, enum: EdgeBendingMode, type: '"L" | "Q" | "C" | "T" | "S" | "A" | "QT" | "CS"',
         label:"path mode",
-        txt: <><div>How Svg path should use the EdgePoints <a href={"https://css-tricks.com/svg-path-syntax-illustrated-guide/"}>to bend his shape</a></div></>}
+        txt: <><div>How Svg path should use the EdgePoints to bend his shape{/*<a href={"https://css-tricks.com/svg-path-syntax-illustrated-guide/"}>to bend his shape</a>*/}</div></>}
 
     edgeGapMode!: EdgeGapMode;
     __info_of__edgeGapMode: Info = {isEdge: true, enum: EdgeGapMode, type: '"gap" | "average" | "autoFill" | "lineFill" | "arcFill"',
         label:"gap mode",
-        txt: <><div>How the segment should treat the EdgePoint interruptions.\n<br/>"gap" leaves an empty space to not overlap the EdgePoint,
-            \n<br/>"linefill" makes the edge stop at the EdgePoint borders, but then connects the gap with a line...</div></>}
+        txt: <><div>How the segment should treat the EdgePoint interruptions.<br/>"gap" leaves an empty space to not overlap the EdgePoint,
+            <br/>"linefill" makes the edge stop at the EdgePoint borders, but then connects the gap with a line.</div></>}
 
     /*
     bindVertexSizeToView!: boolean;
@@ -249,7 +254,7 @@ export class LViewElement<Context extends LogicContext<DViewElement, LViewElemen
             <br/>This causes the vertex to have different positions according to the view currently appied to it.</div>}*/
     storeSize!: boolean;
     __info_of__storeSize: Info = {isNode: true, type: ShortAttribETypes.EBoolean, label:"bind sizes to view",
-        txt: "Active: the node position depends from the view currently displayed.\nInactive: it depends from the graph."}
+        txt: "Active: the node position depends from the view currently displayed.Inactive: it depends from the graph."}
 
     lazySizeUpdate!: boolean;
     __info_of__lazySizeUpdate: Info = {isGlobal: true, type: ShortAttribETypes.EBoolean, label:"lazy size update",
@@ -302,6 +307,22 @@ export class LViewElement<Context extends LogicContext<DViewElement, LViewElemen
     __info_of__getSize: Info = {isNode:true, hidden:true, type:"Function(Pointer<GraphElement | ModelElement>) => GraphSize",
         txt:<div>Gets the size stored in this view for target element.</div>}
 
+    public get_constants(c: Context): this['constants'] {
+        return c.data.constants;
+    }
+    public set_constants(value: this['constants'], c: Context): boolean {
+        const _value: string = value ? value : '{}';
+        return SetFieldAction.new(c.data.id, 'constants', _value, '', false);
+    }
+
+    public get_preRenderFunc(c: Context): this['preRenderFunc'] {
+        return c.data.preRenderFunc;
+    }
+    public set_preRenderFunc(value: this['preRenderFunc'], c: Context): boolean {
+        const _value = value ? value : '() => {}';
+        return SetFieldAction.new(c.data.id, 'preRenderFunc', _value, '', false);
+    }
+
     public get_edgeHeadSize(c: Context): this["edgeHeadSize"] { return new GraphPoint(c.data.edgeHeadSize.x, c.data.edgeHeadSize.y); }
     public get_edgeTailSize(c: Context): this["edgeTailSize"] { return new GraphPoint(c.data.edgeTailSize.x, c.data.edgeTailSize.y); }
     public set_edgeHeadSize(v: Partial<this["edgeHeadSize"]>, c: Context): boolean {