diff --git a/sandbox.tsx b/sandbox.tsx
index eec8a9c8c..2d6333fcf 100644
--- a/sandbox.tsx
+++ b/sandbox.tsx
@@ -9,7 +9,15 @@ let data:any, node:any, view:any, component:any;
 let otherViews: any, m1Objects:any, firstPackage:any, DefaultNode: any, otherPackages:any, refEdges:any, extendEdges:any, React:any, Edge:any;
 /*
 
+lvalue <Select value and values> are working
+need to test <select multi={true} value and values/>
 
+
+
+with manuual view assignment (edges) if you type wrong view it becomes a mess crash
+
+when deleting viewpoint, it is not removed from project.viewpoints.
+make multiselect o isAplialeto && referece default view
 !!!!!!!!! for offset
 fai che offset settadelle variabili --offset-x, --offset-y che settano in css left e top del grafo.
 MA: disabilita la regola se il grafo ha ui-dragging o simile qualsiasi cosa metta jqui
@@ -41,9 +49,9 @@ node crazy pos: when i resize a node with an edge it goes off screen?
 
  only when changing relative % -> absolute it goes crazy, i think it uses absolute pos as a %
 
-<div onDragEnd={"dragAnchor("+i+")"}></div>
-<div onDragEnd={e()=> node.anchor[1].x = e.x;}></div>
-<div onDragEnd={e()=> node.anchor[2].x = e.x;}></div>
+ <div onDragEnd={"dragAnchor("+i+")"}></div>
+ <div onDragEnd={e()=> node.anchor[1].x = e.x;}></div>
+ <div onDragEnd={e()=> node.anchor[2].x = e.x;}></div>
 
 
  anchor roadmap
@@ -53,7 +61,6 @@ node crazy pos: when i resize a node with an edge it goes off screen?
 // todo: check oldprops.views-nextprops.views and always set shouldupdate to views newly introduced or remo**ved
 
 
-
 // need to merge file declarations? or use a filename such as the imports will work (use inmemory://? or real urls)
 // advanced mode and simple mode: hide some features like positional editor in simple mode or the entire tab in view/node, start in simple mode.
 // make .overlap.left .top .dow .right, .y-cemter, x-cemter, .cemter css selectors
@@ -249,7 +256,6 @@ for (keys in []) gives "joinOriginal" and "separator"!!! i did not override the
 // because currently in package, it is child[0].child[0], but in model it's just child[0]
 
 
-
 // optimize actions, verify toolbox create must make only 1 compositeaction for dmodelelement and 1 for dgraphelement. thenverify transaction nested nad beign end nested
 // view selection in jsx by name instead of pointer (or both)
 /*
diff --git a/src/common/DV.tsx b/src/common/DV.tsx
index a9ad8ec98..455e1e008 100644
--- a/src/common/DV.tsx
+++ b/src/common/DV.tsx
@@ -375,7 +375,6 @@ export class DefaultView {
     {!data && "Model data missing."}
 
     {/* metamodel */}
-
     {data.isMetamodel && 
         [<div className={'edges'}>
             {[
@@ -388,14 +387,12 @@ export class DefaultView {
         level >= 1 && firstPackage && firstPackage.children.filter(c => c).map(classifier => <DefaultNode key={classifier.id} data={classifier} />)]
     }
 
-    {/* metamodel */}
-    
+    {/* model */}
     {level >= 1 && m1Objects.filter(o => o).map(m1object => <DefaultNode key={m1object.id} data={m1object} />)}
     {decorators}
 </Scrollable>
 
-    {/* language designer defined controls */}
-    
+{/* language designer defined controls */}
 <Control title={'Semantic'} payoff={'Zooming'}>
     <Slider name={'level'} title={'Detail level '} node={node} max={3} />
 </Control>
@@ -448,14 +445,13 @@ export class DefaultView {
 
     /* CLASS */
 
-public static class(): string { return (`<View className={"root class"} onClick={()=>{/*node.events.e1(Math.random().toFixed(3))*/}}>
-
-{/* ver 2.1 */}
+// <View className={"root class " + (level === 1 && abstract ? "abstract")} + onClick={()=>{/*node.events.e1(Math.random().toFixed(3))*/}}>
 
+public static class(): string { return (`<View className={"root class"} onClick={()=>{/*node.events.e1(Math.random().toFixed(3))*/}}>
 <div className={'header'}>
-    {data.isSingleton && <i className='bi bi-1-square'></i>} 
-    {level > 1 && <b className={'class-name'}> {interface ? 'Interface' : abstract ? 'Abstract Class' : 'Class'}:</b>}
-    {level === 1 && !data.isSingleton && <i className="bi bi-c-square-fill"></i>} <Input data={data} field={'name'} hidden={true} autosize={true} />
+    {data.isSingleton && <i className='bi bi-1-square'>&nbsp;</i>}
+    {level > 1 && <b className={'class-name'}>{interface ? 'Interface' : abstract ? 'Abstract Class' : 'Class'}: </b>}    
+    {level === 1 && <i className="bi bi-c-square-fill"></i>}<Input data={data} field={'name'} hidden={true} autosize={true} />
 </div>
 
 {level > 2 && data.children.length > 0 && <hr/>}
@@ -534,7 +530,7 @@ public static enum(): string { return (
 );}
 
     /* PARAMETER */
-    
+
 public static parameter(): string { return (
 `<View className={'root parameter w-100'}>
     <span className={'feature-name'}>
diff --git a/src/common/Defaults.ts b/src/common/Defaults.ts
index 50eada15a..a10279b2f 100644
--- a/src/common/Defaults.ts
+++ b/src/common/Defaults.ts
@@ -24,12 +24,14 @@ export class Defaults { /// TODO: this really needs to become dynamically genera
         'Pointer_ViewEdgePoint',
         // 'Pointer_ViewAnchors',
     ];
+    static viewpoints: Pointer<DViewPoint>[] = ['Pointer_ViewPointDefault', 'Pointer_ViewPointValidation'];
+
     // @ts-ignore
     static defaultViewsMap: Dictionary<Pointer, boolean> = Defaults.views.reduce((acc, val) => { acc[val] = true; return acc; }, {}); // U.objectFromArrayValues(Defaults.views);
-
-    static viewpoints: Pointer<DViewPoint>[] = ['Pointer_ViewPointDefault', 'Pointer_ViewPointValidation'];
+    // @ts-ignore
+    static defaultViewPointsMap: Dictionary<Pointer, boolean> = Defaults.viewpoints.reduce((acc, val) => { acc[val] = true; return acc; }, {});
 
     static check(id: string): boolean {
-        return !!Defaults.defaultViewsMap[id]; // id.indexOf('Pointer_View') !== -1
+        return !!Defaults.defaultViewsMap[id] || !!Defaults.defaultViewPointsMap[id]; // id.indexOf('Pointer_View') !== -1
     }
 }
diff --git a/src/common/UX.tsx b/src/common/UX.tsx
index bc050456d..4fe3392fa 100644
--- a/src/common/UX.tsx
+++ b/src/common/UX.tsx
@@ -2,7 +2,7 @@ import ReactJson from 'react-json-view' // npm i react-json-view
 import React, {ReactElement, ReactNode} from "react";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
-import type { GraphElementOwnProps, GObject, Dictionary, DocString, Pointer, LGraph } from "../joiner";
+import {GraphElementOwnProps, GObject, Dictionary, DocString, Pointer, LGraph, MultiSelectOptGroup} from "../joiner";
 import type { InputOwnProps, SelectOwnProps } from '../components/forEndUser/Input';
 import type {  } from '../components/forEndUser/Select';
 import {
@@ -349,6 +349,34 @@ export class UX{
         catch (ee: any) { e = ee; jsxCompiled = GraphElementComponent.displayError(e, "JSX Syntax", v, undefined, undefined, true) as any; }
         return jsxCompiled;
     }
+    static stopEvt(e: GObject<React.SyntheticEvent>): void{
+        if (!e) return;
+        e.persist?.();
+        (e as any).stopImmediatePropagation?.();
+        e.stopPropagation?.();
+        let ne: any = e.nativeEvent;
+        e._jjIsStopped = true;
+        if (!ne) return;
+        ne.stopImmediatePropagation?.();
+        ne.stopPropagation?.();
+        if (!ne.isPropagationStopped) ne.isPropagationStopped = ()=>true;
+        ne._jjIsStopped = true;
+    }
+    static isStoppedEvt(e: GObject<React.SyntheticEvent>): boolean{
+        if (!e) return true;
+        if (e._jjIsStopped || e.isPropagationStopped?.()) return true;
+        let ne: any = e.nativeEvent;
+        if (!ne) return false;
+        return !!(ne._jjIsStopped || ne.isPropagationStopped?.());
+    }
+
+    static options(validTargets: MultiSelectOptGroup[]): JSX.Element[] {
+        return validTargets
+            .filter(e=>!!e)
+            .map(e => <optgroup label={e.label}>
+                { e.options.filter(o=>!!o).map(o=><option value={o.value}>{o.label}</option>) }
+            </optgroup>);
+    }
 }
 
 
diff --git a/src/components/abstract/tabs/MetamodelTab.tsx b/src/components/abstract/tabs/MetamodelTab.tsx
index 72795efaf..29bf898c4 100644
--- a/src/components/abstract/tabs/MetamodelTab.tsx
+++ b/src/components/abstract/tabs/MetamodelTab.tsx
@@ -1,6 +1,6 @@
 import React, {Dispatch, ReactElement} from "react";
 import {connect} from "react-redux";
-import type {DModel, Pointer} from "../../../joiner";
+import {DModel, Pointer, Try} from "../../../joiner";
 import {
     DState,
     CreateElementAction,
@@ -45,9 +45,11 @@ function MetamodelTabComponent(props: AllProps) {
 
         <div className={'d-flex h-100'}>
             <ToolBar model={model.id} isMetamodel={model.isMetamodel} />
-            <div className={"GraphContainer h-100 w-100"} style={{position:"relative"}}>
-                {graph && <DefaultNode data={model} nodeid={graph.id} graphid={graph.id}/> || <div>Error: missing DGraph prop</div> }
-            </div>
+            <Try>
+                <div className={"GraphContainer h-100 w-100"} style={{position:"relative"}}>
+                    {graph && <DefaultNode data={model} nodeid={graph.id} graphid={graph.id}/> || <div>Error: missing DGraph prop</div> }
+                </div>
+            </Try>
         </div>
     </div>);
 
diff --git a/src/components/abstract/tabs/ModelTab.tsx b/src/components/abstract/tabs/ModelTab.tsx
index 516dd4d6f..00e53d32d 100644
--- a/src/components/abstract/tabs/ModelTab.tsx
+++ b/src/components/abstract/tabs/ModelTab.tsx
@@ -1,6 +1,6 @@
 import React, {Dispatch, ReactElement} from "react";
 import {connect} from "react-redux";
-import type {DModel, Pointer} from "../../../joiner";
+import {DModel, Pointer, Try} from "../../../joiner";
 import {CreateElementAction, DGraph, DModelElement, DState, LGraph, LModel, LModelElement} from "../../../joiner";
 import {DefaultNode} from "../../../joiner/components";
 import ToolBar from "../../toolbar/ToolBar";
@@ -24,9 +24,11 @@ function ModelTabComponent(props: AllProps) {
         <ContextMenu />
         <div className={'d-flex h-100'}>
             <ToolBar model={model.id} isMetamodel={model.isMetamodel} metamodelId={props.metamodelid} />
-            <div className={"GraphContainer h-100 w-100"} style={{position:"relative"}}>
-                {graph && <DefaultNode data={model} nodeid={graph.id} graphid={graph.id} />}
-            </div>
+            <Try>
+                <div className={"GraphContainer h-100 w-100"} style={{position:"relative"}}>
+                    {graph && <DefaultNode data={model} nodeid={graph.id} graphid={graph.id} />}
+                </div>
+            </Try>
         </div>
     </div>);
 }
diff --git a/src/components/editors/Info.tsx b/src/components/editors/Info.tsx
index b6cb621dc..65a4c1695 100644
--- a/src/components/editors/Info.tsx
+++ b/src/components/editors/Info.tsx
@@ -91,7 +91,7 @@ class builder {
                 <MultiSelect isMulti={true} options={extendOptions as any} value={extendValue} onChange={(v) => {
                     console.log('setting extend', v);
                     lclass.extends = v.map(e => e.value) as Any<string[]>;
-                }}></MultiSelect>
+                }} />
             </label>
             <label className={'input-container'}>
                 <b className={'me-2'}>Final:</b>
@@ -329,67 +329,7 @@ class builder {
             case DReference.cname: isReference = true; break;
             default: isShapeless = true; break;
         }
-        let selectOptions: JSX.Element | JSX.Element[] | null;
-        if (isReference) {
-            let isContainment: boolean = value.containment;
-            let containerObjectsID: Pointer[] = value.fatherList.map(lm => lm.id);
-            let validObjects = Selectors.getObjects().filter((obj) => (featureType as LClass).isSuperClassOf(obj.instanceof, true));
-            validObjects =  validObjects.filter( obj => !containerObjectsID.includes(obj.id)); // avoiding containment loops damiano todo: put this filter in set_value too
-            let freeObjects = [];
-            let boundObjects = [];
-            for (let o of validObjects) {
-                // todo: this check of self contain is too simple does not detect loops, would need to use fatherChain
-                if (isContainment && o.id === value.father.id) continue; // no self contain
-                if (o.isRoot) freeObjects.push(o); else boundObjects.push(o);
-            }
-            let map = (object: LObject) => <option key={object.id} value={object.id}>{object.name/*.feature('name')*/}</option>;
-            selectOptions = <><optgroup label={'Free     Objects'}>{freeObjects.map(map)}</optgroup><optgroup label={'Bound Objects'}>{boundObjects.map(map)}</optgroup></>; }
-        else if (isEnumerator) {
-            selectOptions = <optgroup label={'Literals of ' + featureType.name}>{(featureType as LEnumerator).literals.map((literal, i) => <option key={literal.id} value={literal.id}>{literal.name}</option>)}</optgroup>;
-        }
-        else if (isShapeless) {
-            // damiano todo: rewrite entirely this section to separate bound and free objects, copying from if(isref)
-            // pointables = {objects: Selectors.getObjects(), literals: LPointerTargetable.fromArr(Selectors.getAllEnumLiterals())};
-            let isContainment: boolean = value.containment;
-            let enums: LEnumerator[] = LPointerTargetable.fromArr(Selectors.getAllEnumerators())
-            let classes: LClass[] = LPointerTargetable.fromArr(Selectors.getAllClasses())
-            let shapelessObjects: LObject[] = Selectors.getObjects().filter((o) => !o.instanceof);
-            // console.log('select_options', {enums, classes, shapelessObjects});
-            let classmap: Dictionary<DocString<'classname'>, {free:LObject[], bound:LObject[], all: LObject[]}> = {};
-            let shapeless: {free:LObject[], bound:LObject[], all: LObject[]} = {free:[], bound:[], all: shapelessObjects};
-            for (let c of classes) {
-                let row: {free:LObject[], bound:LObject[], all: LObject[]} = {free: [], bound:[], all: c.instances};
-                classmap[c.name] = row;
-                for (let o of row.all) {
-                    // todo: this check of self contain is too simple does not detect loops, would need to use fatherChain
-                    if (isContainment && o.id === value.father.id) continue; // no self contain
-                    if (o.isRoot) row.free.push(o); else row.bound.push(o);
-                }
-            }
-            for (let o of shapelessObjects) { if (o.isRoot) shapeless.free.push(o); else shapeless.bound.push(o); }
-
-            selectOptions = <>
-                <option value={''} key={0}>--- Not a Reference ---</option>
-                {Object.keys(classmap).map((cname) => !classmap[cname].all.length ? null :
-                    <>
-                        {!classmap[cname].free.length ? null :
-                            <optgroup label={'Free    instances of ' + cname} key={'f-' + cname}>
-                                {classmap[cname].free.map((o) => <option value={o.id} key={o.id}>{o.name}</option>)}
-                            </optgroup>
-                        }
-                        {!classmap[cname].bound.length ? null :
-                            <optgroup label={'Bound instances of ' + cname} key={'b-' + cname}>
-                                {classmap[cname].bound.map((o) => <option value={o.id} key={o.id}>{o.name}</option>)}
-                            </optgroup>
-                        }
-                    </>) }
-                {!shapeless.free.length ? null : <optgroup label={'Free    shapeless objects'}>{shapeless.free.map( (o) => <option value={o.id} key={o.id}>{o.name}</option>)}</optgroup>}
-                {!shapeless.bound.length ? null : <optgroup label={'Bound shapeless objects'}>{shapeless.bound.map( (o) => <option value={o.id} key={o.id}>{o.name}</option>)}</optgroup>}
-                {enums.map((c) => !c.literals.length ? null : <optgroup label={'Literals of ' + c.name}>{ c.literals.map((o)=> <option value={o.id} key={o.id}>{o.name}</option>)}</optgroup>)}
-            </>
-            // console.log('select_options post', {select_options, enums, classes, shapelessObjects});
-        }
-        else selectOptions = null;
+        let selectOptions: JSX.Element | JSX.Element[] | null = value.validTargetsJSX;
 
         let isPtr = isAttribute ? false : (isEnumerator || isReference ? true : undefined);
         const valueslist = (filteredValues).map((val, index) =>
diff --git a/src/components/editors/info.scss b/src/components/editors/info.scss
index d8effe870..72025652e 100644
--- a/src/components/editors/info.scss
+++ b/src/components/editors/info.scss
@@ -1,6 +1,6 @@
-section {
-  padding: .5rem; // p-2
-}
+/*section {
+  padding: .5rem; // p-2 too generic selector
+}*/
 
 .console {
 
diff --git a/src/components/editors/languages/Js.tsx b/src/components/editors/languages/Js.tsx
index 4f6092c69..9631f8eb0 100644
--- a/src/components/editors/languages/Js.tsx
+++ b/src/components/editors/languages/Js.tsx
@@ -1,30 +1,39 @@
 import React, {CSSProperties, Dispatch, ReactElement, ReactNode, useEffect} from 'react';
 import {connect} from 'react-redux';
 import Editor, {useMonaco} from '@monaco-editor/react';
-import {Defaults, DState, DViewElement, LViewElement, Pointer} from '../../../joiner';
+import {
+    Defaults,
+    DPointerTargetable,
+    DState,
+    DViewElement,
+    LPointerTargetable,
+    LViewElement, Overlap,
+    Pointer
+} from '../../../joiner';
 import {useStateIfMounted} from 'use-state-if-mounted';
 import {FakeStateProps} from '../../../joiner/types';
 import { CommandBar, Btn } from '../../commandbar/CommandBar';
 
 function JsEditorComponent(props: AllProps) {
-    const {view, field, placeHolder, height, title, getter, setter, jsxLabel} = props;
-    const [js, setJs] = useStateIfMounted(view.jsCondition);
-    const [show, setShow] = useStateIfMounted(props.initialExpand ? props.initialExpand(view, field) : false);
-
+    const {placeHolder, height, title, getter, setter, jsxLabel, field} = props;
+    let data: LPointerTargetable = LPointerTargetable.wrap(props.data) as any;
+    let value = getter ? getter(data, field) : ((data|| {}) as any)[field as any];
+    const [js, setJs] = useStateIfMounted(value);
+    const [show, setShow] = useStateIfMounted(props.initialExpand ? props.initialExpand(data, field) : false);
     const [expand, setExpand] = useStateIfMounted(false);
+    const monaco = useMonaco();
+    (window as any).monaco = monaco;
 
-    const readOnly = props.readonly !== undefined ? props.readonly : Defaults.check(view.id);
+    const readOnly = props.readonly !== undefined ? props.readonly : !props.debugmode && Defaults.check(data.id);
     const change = (value: string|undefined) => {
         /* save in local state for frequent changes */
-        if(value !== undefined) setJs(value);
+        if (value !== undefined) setJs(value);
     }
     const blur = () => {
         /* confirm in redux state for final state */
-        if(js && setter) setter(js);
-        else if(field) (view as any)[field] = js;
+        if (js && setter) setter(js, data, field);
+        else if(field) (data as any)[field] = js;
     }
-    const monaco = useMonaco();
-    (window as any).monaco = monaco;
 
     useEffect(() => {
         if (!monaco) return;
@@ -43,13 +52,11 @@ function JsEditorComponent(props: AllProps) {
         monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
         monaco.languages.typescript.typescriptDefaults.addExtraLib(`declare var data: 'datatype';`);
     }, [monaco]);
+    if (!((data && field) || (getter && setter))) return(<>Either props.data & field or both getter & setter are required.</>);
 
-    let value = '';
-    if(getter) value = getter();
-    else if(placeHolder) value = placeHolder;
-    else if(field && view[field]) value = (view as any)[field];
+    if (placeHolder && !js) value = placeHolder;
 
-    const lines = (Math.round(view.oclCondition.split(/\r|\r\n|\n/).length*1.8) < 5 ? 10 : Math.round(view.oclCondition.split(/\r|\r\n|\n/).length*1.8));
+    const lines = (Math.round(value.split(/\r|\r\n|\n/).length*1.8) < 5 ? 10 : Math.round(value.split(/\r|\r\n|\n/).length*1.8));
 
     return <>
         <div style={{...(props.style || {})}} className={'cursor-pointer d-flex'} onClick={e => setShow(!show)}>
@@ -83,25 +90,28 @@ function JsEditorComponent(props: AllProps) {
 }
 interface OwnProps {
     readonly?: boolean;
-    viewID: Pointer<DViewElement, 1, 1, LViewElement>;
-    field?: keyof LViewElement;
+    data?: Pointer | DPointerTargetable | LPointerTargetable;
+    field?: string;
     placeHolder?: string;
     title?: ReactNode;
     height?: number;
     style?: CSSProperties;
     jsxLabel?: ReactNode;
-    getter?: () => string;
-    setter?: (js: string) => void;
-    initialExpand?: (data: LViewElement, field?: string) => boolean;
+    getter?: (data?:LPointerTargetable, field?: string) => string;
+    setter?: (js: string, data?:LPointerTargetable, field?: string) => void;
+    initialExpand?: (data: LPointerTargetable, field?: string) => boolean;
 }
-interface StateProps { view: LViewElement }
+interface StateProps {
+    data?: LPointerTargetable;
+    debugmode: boolean;}
 interface DispatchProps {}
-type AllProps = OwnProps & StateProps & DispatchProps;
+type AllProps = Overlap<Overlap<OwnProps, StateProps>, DispatchProps>;
 
 
 function mapStateToProps(state: DState, ownProps: OwnProps): StateProps {
     const ret: StateProps = {} as FakeStateProps;
-    ret.view = LViewElement.fromPointer(ownProps.viewID);
+    ret.data = LViewElement.wrap(ownProps.data);
+    ret.debugmode = state.debug;
     return ret;
 }
 
diff --git a/src/components/editors/skeleton.scss b/src/components/editors/skeleton.scss
index 9f7fd29c6..b18207668 100644
--- a/src/components/editors/skeleton.scss
+++ b/src/components/editors/skeleton.scss
@@ -186,7 +186,7 @@
   }
 }
 
-.dock-content-holder #DockComponent_rightbar_4 {
+.dock-content-holder.tree-view {
 
   // Tree View
 
@@ -196,11 +196,11 @@
     border-radius: var(--tab-radius);
 
   }
-
+/*
   & section:has(section) section {
     padding: 0;
     margin: 0;
-  }
+  }*/
 
   & section:has(section) section .command-bar:nth-child(1) {
     display: none;
@@ -549,4 +549,8 @@ input[type="number"]::-webkit-outer-spin-button {
 
 
 }
+section{
+  padding: 0;
+  margin: 0;
+}
 
diff --git a/src/components/editors/views/NestedView.tsx b/src/components/editors/views/NestedView.tsx
index e999be3f2..7f2e1f716 100644
--- a/src/components/editors/views/NestedView.tsx
+++ b/src/components/editors/views/NestedView.tsx
@@ -104,7 +104,7 @@ function NestedViewComponent(props: AllProps) {
 
         const max_priority = l.explicitApplicationPriority
 
-        return <li className={"entry-root" + d.className + (d.id === activeViewpointId ? ' selected' : '')} key={d.id}>
+        return <li className={"entry-root " + d.className + (d.id === activeViewpointId ? ' selected' : '')} key={d.id}>
 
             <div className={'inline-row'} onClick={()=>setView(d.id)} onDoubleClick={(e) => {select(d.id)}}> {/* activate anche con il dblclick */}
 
@@ -169,7 +169,9 @@ function NestedViewComponent(props: AllProps) {
                             </>
                         }
                         <Tooltip tooltip={<div>is {d.isExclusiveView ? "" : "not"} mutually exclusive with other "Ex" views.</div>} position={"bottom"} inline={true}>
-                            <span className={"right-icon feature-border ex-icon vertical-centering " + (d.isExclusiveView ? '' : "hidden")}></span></Tooltip>
+                            <span className={"right-icon feature-border ex-icon vertical-centering " + (d.isExclusiveView ? '' : "hidden")}
+                                  onClick={()=>l.isExclusiveView = !d.isExclusiveView}
+                            /></Tooltip>
                     </div>
                 </div>
             </div>
diff --git a/src/components/editors/views/data/CustomData.tsx b/src/components/editors/views/data/CustomData.tsx
index e2d14f177..fc72488ae 100644
--- a/src/components/editors/views/data/CustomData.tsx
+++ b/src/components/editors/views/data/CustomData.tsx
@@ -26,13 +26,13 @@ function ViewEventsComponent(props: AllProps) {
     return(<section className={'p-3 events-tab'}>
         <h1 className={'view'}>View: {view.name}</h1>
         <h2>Default Events</h2>
-        <JsEditor viewID={view.id} field={'onDataUpdate'} title={'onDataUpdate'} initialExpand={initialExpand} readonly={readOnly}/>
-        <JsEditor viewID={view.id} field={'onDragStart'} title={'onDragStart'} initialExpand={initialExpand} readonly={readOnly}/>
-        <JsEditor viewID={view.id} field={'whileDragging'} title={'whileDragging'} initialExpand={initialExpand} readonly={readOnly}/>
-        <JsEditor viewID={view.id} field={'onDragEnd'} title={'onDragEnd'} initialExpand={initialExpand} readonly={readOnly}/>
-        <JsEditor viewID={view.id} field={'onResizeStart'} title={'onResizeStart'} initialExpand={initialExpand} readonly={readOnly}/>
-        <JsEditor viewID={view.id} field={'whileResizing'} title={'whileResizing'} initialExpand={initialExpand} readonly={readOnly}/>
-        <JsEditor viewID={view.id} field={'onResizeEnd'} title={'onResizeEnd'} initialExpand={initialExpand} readonly={readOnly}/>
+        <JsEditor key='odu' data={view} field={'onDataUpdate'} title={'onDataUpdate'} initialExpand={initialExpand} readonly={readOnly}/>
+        <JsEditor key='ods' data={view} field={'onDragStart'} title={'onDragStart'} initialExpand={initialExpand} readonly={readOnly}/>
+        <JsEditor key='odw' data={view} field={'whileDragging'} title={'whileDragging'} initialExpand={initialExpand} readonly={readOnly}/>
+        <JsEditor key='ode' data={view} field={'onDragEnd'} title={'onDragEnd'} initialExpand={initialExpand} readonly={readOnly}/>
+        <JsEditor key='ors' data={view} field={'onResizeStart'} title={'onResizeStart'} initialExpand={initialExpand} readonly={readOnly}/>
+        <JsEditor key='orw' data={view} field={'whileResizing'} title={'whileResizing'} initialExpand={initialExpand} readonly={readOnly}/>
+        <JsEditor key='ore' data={view} field={'onResizeEnd'} title={'onResizeEnd'} initialExpand={initialExpand} readonly={readOnly}/>
         <div className={'d-flex mx-auto'} style={{marginTop: '14px'}}>
             <h2>Custom Events</h2>
             <CommandBar className={'ms-auto'} style={{paddingTop: '12px'}}>
@@ -45,7 +45,7 @@ function ViewEventsComponent(props: AllProps) {
             if (!val) return;
             return <>
             <JsEditor
-            viewID={view.id} key={k/* if val does not update, concatenate it to the key (k+val)*/}
+            data={view} key={k/* if val does not update, concatenate it to the key (k+val)*/}
             readonly={readOnly}
             initialExpand={()=>true}
             title={<input defaultValue={k} disabled={readOnly} onBlur={(e)=>{
diff --git a/src/components/editors/views/data/InfoData.tsx b/src/components/editors/views/data/InfoData.tsx
index 096d50a57..a2fb69d9c 100644
--- a/src/components/editors/views/data/InfoData.tsx
+++ b/src/components/editors/views/data/InfoData.tsx
@@ -12,7 +12,7 @@ import {
     Input,
     LPointerTargetable,
     LViewElement,
-    LViewPoint,
+    LViewPoint, MultiSelect,
     Pointer,
     Select,
     Vertexes
@@ -20,7 +20,7 @@ import {
 import {JsEditor, OclEditor} from "../../languages";
 import {FakeStateProps} from "../../../../joiner/types";
 import {connect} from "react-redux";
-import "./style.scss";
+import "./viewapplyto.scss";
 import "./viewoptions.scss"
 
 
@@ -34,9 +34,10 @@ function InfoDataComponent(props: AllProps) {
     // readOnly = false;
 
     const objectTypes = ['', 'DModel', 'DPackage', 'DEnumerator', 'DEnumLiteral', 'DClass', 'DAttribute', 'DReference', 'DOperation', 'DParameter', 'DObject', 'DValue', 'DStructuralFeature'];
-    const classesOptions = <optgroup label={'Object type'}>
+    const classesOptionsJSX = <optgroup label={'Object type'}>
             {objectTypes.map((o)=><option key={o} value={o}>{o ? o.substring(1) : 'anything'}</option>)}
     </optgroup>;
+    const classesOptions = [{label:'apply to', options: objectTypes.map(o=>({value:o, label:o ? o.substring(1) : 'anything'}))}];
 
     let isVP: boolean = view.className === DViewPoint.cname;
     let isV: boolean = !isVP;
@@ -73,7 +74,9 @@ function InfoDataComponent(props: AllProps) {
                 </>
             } setter={(val, data, key) => { view.forceNodeType = val === 'unset' ? undefined : val; }}
                     getter={(data, key) => { return data[key] || 'unset_'; }} />
-            <Select data={view} field={'appliableToClasses'} label={'Appliable to:'} readonly={readOnly} options={classesOptions} />
+
+            <Select data={view} field={'appliableToClasses'} label={'Appliable to:'} readonly={readOnly} isMultiSelect={true} options={classesOptions as any} />
+            {/*<Select data={view} field={'appliableToClasses'} label={'Appliable to:'} readonly={readOnly} options={classesOptions} />*/}
 
             <Select readonly={readOnly} data={view} field={'father'} label={"Viewpoint:"} getter={()=> vpid}>
                 {dallVP.map((viewpoint) => (
@@ -85,9 +88,9 @@ function InfoDataComponent(props: AllProps) {
                     <option key={view.id} value={view.id}>{view.name}</option>
                 ))}
             </Select>
-            <OclEditor viewID={view.id} />
+            <OclEditor viewID={view.id} readonly={readOnly} />
             <JsEditor
-                viewID={view.id} field={'jsCondition'}
+                data={view} field={'jsCondition'}
                 placeHolder={'/* Last line must return a boolean */'}
             />
         </>}
diff --git a/src/components/editors/views/data/style.scss b/src/components/editors/views/data/viewapplyto.scss
similarity index 92%
rename from src/components/editors/views/data/style.scss
rename to src/components/editors/views/data/viewapplyto.scss
index 5d0703c2a..65c3d198f 100644
--- a/src/components/editors/views/data/style.scss
+++ b/src/components/editors/views/data/viewapplyto.scss
@@ -9,6 +9,7 @@ section.page-root{
     display: flex;
     padding-top: 0.125em;
     padding-bottom: 0.125em;
+    min-height: min-content;
     height: 32px;
     font-size: 1.1em!important;
     color: var(--color);
diff --git a/src/components/forEndUser/Input.tsx b/src/components/forEndUser/Input.tsx
index e3901789d..13c4e7e03 100644
--- a/src/components/forEndUser/Input.tsx
+++ b/src/components/forEndUser/Input.tsx
@@ -2,54 +2,70 @@ import React, {Dispatch, KeyboardEvent, LegacyRef, ReactElement, ReactNode, useR
 import {connect} from 'react-redux';
 import {DState} from '../../redux/store';
 import {
+    Any,
     Defaults,
     DObject,
     DPointerTargetable,
     GObject,
     Keystrokes, LAttribute,
-    LClass, LEnumerator, LModel, LObject,
-    LPointerTargetable, LReference, LValue,
+    LClass, LEnumerator, LEnumLiteral, LModel, LObject,
+    LPointerTargetable, LReference, LValue, MultiSelect, MultiSelectOptGroup,
+    MultiSelectOption,
     Overlap,
     Pointer, PrimitiveType, Selectors,
     store,
-    U
+    U,
+    UX
 } from '../../joiner';
 import {useStateIfMounted} from 'use-state-if-mounted';
 import './inputselect.scss';
 import { Tooltip } from './Tooltip';
 
 
-export function getSelectOptions(data: any, field: string, options: ReactNode, children?: ReactNode) {
+export function getSelectOptions_raw(data: any, field: string): MultiSelectOptGroup[] {
+    if (!data) return [];
     // console.log("select options", {data, field, children, options});
-    if (options) return options;
-    // children is auto-filled to empty array even if it is not set explicitly in jsx
-    if (Array.isArray(children) && children.length > 0) return children;
     let returns: LClass[] | undefined;
     let primitives: LClass[] | undefined;
     let classes: LClass[] | undefined;
     let enumerators: LEnumerator[] | undefined;
-    let objects: LObject[] | undefined;
+    let objects: (LObject | LEnumLiteral)[] | undefined;
     let m2classname: string | undefined;
     let hasPrimitives: boolean = false;
     let hasReturnTypes: boolean = false;
-    if ((field) === 'type') {
-        if (data) {
+    let cname = data.className;
+    if (!field) switch(cname) {
+        case 'DAttribute':  case 'DReference': case 'DOperation': case 'DParameter': field = 'type'; break;
+        case 'DValue': field = 'values'; break;
+        case 'DClass': field = 'extends'; break;
+    }
+    switch(field) {
+        case 'type':
             let model = data.model;
-            switch (data.className) {
-                case 'DValue':
-                    let m2: LReference | LAttribute | undefined = (data as LValue).instanceof;
-                    if (!m2) return (data as LValue).model.allSubObjects;
-                    let dm2 = m2.__raw;
-                    if (dm2.className === "DAttribute") break;
-                    m2classname = dm2.name;
-                    let m1modelid = model.id;
-                    return m2.instances.filter( o => o.model.id === m1modelid);
+            switch (cname) {
+                default: break;
                 case 'DAttribute': enumerators = model.enums; hasPrimitives = true; break;
                 case 'DReference': classes = model.classes; break;
                 case 'DOperation': classes = model.classes; enumerators = model.enums; hasPrimitives = hasReturnTypes = true; break;
                 case 'DParameter': classes = model.classes; enumerators = model.enums; hasPrimitives = true; break;
             }
-        }
+            break;
+        case 'value': case 'values':
+            if (cname !== 'DValue') break;
+            objects = (data as LValue).validTargets;
+            /*
+            let m2: LReference | LAttribute | undefined = (data as LValue).instanceof;
+            if (!m2) {
+                objects = (data as LValue).model.allSubObjects;
+                break;
+            }
+            let dm2 = m2.__raw;
+            if (dm2.className === "DAttribute") break;
+            let type: LClass = m2.type as LClass;
+            if (!type) break;
+            m2classname = type.name;
+            let m1modelid = data.model.id;
+            objects = (type.allInstances || []).filter( o => o.model.id === m1modelid);*/
     }
     let state: DState | undefined;
     // todo: all this stuff might be better moved in mapstatetoprops, or the select list won't update properly.
@@ -59,53 +75,58 @@ export function getSelectOptions(data: any, field: string, options: ReactNode, c
     }
     if (hasReturnTypes) {
         if (!state) state = store.getState();
-        primitives = LPointerTargetable.fromPointer(state.returnTypes);
+        returns = LPointerTargetable.fromPointer(state.returnTypes);
     }
 
     // console.log("select options", {data, field, returns, primitives, classes, enumerators});
 
-    return (
-        <>
-            {(returns && returns.length > 0) && <optgroup label={'Defaults'}>
-                {returns.map((returnType, i) => {
-                    return <option key={i} value={returnType.id}>{returnType.name}</option>
-                })}
-            </optgroup>}
-            {(primitives && primitives.length) && <optgroup label={'Primitives'}>
-                {primitives.map((primitive, i) => {
-                    return <option key={i} value={primitive.id}>{primitive.name}</option>
-                })}
-            </optgroup>}
-            {(enumerators && enumerators.length > 0) && <optgroup label={'Enumerators'}>
-                {enumerators.map((enumerator, i) => {
-                    return <option key={i} value={enumerator.id}>{enumerator.name}</option>
-                })}
-            </optgroup>}
-            {(classes && classes.length > 0) && <optgroup label={'Classes'}>
-                {classes.map((classifier, i) => {
-                    return <option key={i} value={classifier.id}>{classifier.name}</option>
-                })}
-            </optgroup>}
-            {(objects && objects.length > 0) && <optgroup label={m2classname ? 'Instances of ' + m2classname : "All objects"}>
-                {objects.map((classifier, i) => {
-                    return <option key={i} value={classifier.id}>{classifier.name}</option>
-                })}
-            </optgroup>}
-            {/*options*/}
-        </>);
+    let ret:MultiSelectOptGroup[] = [];
+    if (returns && returns.length) ret.push({label: 'Defaults', options: returns.map((r, i)=>({value: r.id, label:r.name}))});
+    if (primitives && primitives.length) ret.push({label: 'Primitives', options: primitives.map((r, i)=>({value: r.id, label:r.name}))});
+    if (enumerators && enumerators.length) ret.push({label: 'Enumerators', options: enumerators.map((r, i)=>({value: r.id, label:r.name}))});
+    if (classes && classes.length) ret.push({label: 'Classes', options: classes.map((r, i)=>({value: r.id, label:r.name}))});
+    if (objects && objects.length) ret.push({label: m2classname ? 'Instances of ' + m2classname : "All objects", options:
+            [{value: undefined as any, label: '_empty_'}, ...objects.map((r, i)=>({value: r.id, label:r.name}))]});
+    return ret;
+}
+export function getSelectOptions(data: any, field: string, options: ReactNode, children?: ReactNode): ReactNode {
+    if (options) return options;
+    // children is auto-filled to empty array even if it is not set explicitly in jsx
+    if (Array.isArray(children) && children.length > 0) return children;
+    let ret = getSelectOptions_raw(data, field);
+    return selectOptionsToJSX(ret);
 }
+function selectOptionsToJSX(ret: MultiSelectOptGroup[]): ReactNode{
+    return(
+        <>{
+            ret.map(optgrp => <optgroup label={optgrp.label}>{
+                optgrp.options.map((e, i) => <option key={i} value={e.value}>{e.label}</option>)
+            }</optgroup>).filter(e=>!!e)
+        }</>);
+}
+
 export function InputComponent(props: AllProps) {
     const data = props.data;
     const getter = props.getter;
     const setter = props.setter;
     const field: string = props.field as string;
-    const oldValue: PrimitiveType | LPointerTargetable = (getter) ? getter(data, field) : (data ? data[field] : undefined); // !== undefined); ? data[field] : 'undefined'
-    let [value, setValue] = useStateIfMounted<PrimitiveType | LPointerTargetable>(oldValue);
+    const oldValue: PrimitiveType | PrimitiveType[] | LPointerTargetable = (getter) ? getter(data, field) : (data ? data[field] : undefined); // !== undefined); ? data[field] : 'undefined'
+    let [value, setValue] = useStateIfMounted<PrimitiveType | PrimitiveType[] | LPointerTargetable>(oldValue);
 
     const [isTouched, setIsTouched] = useStateIfMounted(false);
     const inputRef = useRef<Element | null>(null);
     if (props.tag === 'select') value = oldValue; // select does not use state.
-    let serializeValue = (val: LPointerTargetable | PrimitiveType): string | PrimitiveType => (val as LPointerTargetable)?.id || (val as any);
+    let serializeValue = (val: LPointerTargetable | PrimitiveType | PrimitiveType[], maxDepth=1, currDepth = 0): string | PrimitiveType | PrimitiveType[] => {
+        if (Array.isArray(val)) {
+            if (props.isMultiSelect && currDepth < maxDepth) {
+                // return val.map(e => serializeValue(e, maxDepth, currDepth + 1)) as PrimitiveType[];
+                return val.map(e => (e as any)?.id||e) as PrimitiveType[];
+            }
+            if (currDepth < maxDepth) return serializeValue(val[0], maxDepth, currDepth + 1);
+            else return undefined;
+        }
+        return (val as LPointerTargetable)?.id || (val as any);
+    };
 
     function valueDidChange(v1: any, v2: any): boolean {
         return serializeValue(v1) !== serializeValue(v2);
@@ -131,7 +152,7 @@ export function InputComponent(props: AllProps) {
 
     let type = (props.type) ? props.type : 'text';
     let subtype: string = type;
-    switch (type){
+    switch (type) {
         case 'toggle': type = 'checkbox'; subtype = 'switch'; break;
         case 'checkbox3': case 'switch': type = 'checkbox'; break;
         case 'slider': type = 'range'; break;
@@ -201,13 +222,13 @@ export function InputComponent(props: AllProps) {
         if (props.tag === 'select') return;
         confirmValue(evt);
     }
-    const confirmValue = (evt: { target: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement }) => {
+    const confirmValue = (evt: { target: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement }|undefined, val?: PrimitiveType|PrimitiveType[]) => {
         if (readOnly || isBoolean) return;
-        const newValue: string = getValueFromEvent(evt);
+        const newValue = val || (evt && getValueFromEvent(evt));
         const oldValue = getter ? getter(data, field) : data[field];
-        // console.log("onChange confirm", {evt, newValue, oldValue, changed: valueDidChange(newValue, oldValue), readOnly, isBoolean, nnv:serializeValue(newValue)});
+        console.log("onChange confirm", {evt, newValue, oldValue, field, changed: valueDidChange(newValue, oldValue), readOnly, isBoolean, setter, nnv:serializeValue(newValue)});
         if (valueDidChange(newValue, oldValue)){
-            if (setter) setter(newValue, data, field);
+            if (setter) setter(newValue as any, data, field);
             else data[field] = serializeValue(newValue);
         }
         // I terminate my editing, so I communicate it to other <Input /> that render the same field.
@@ -240,7 +261,9 @@ export function InputComponent(props: AllProps) {
     let inputProps: GObject = {...otherprops,
         className: [props.inputClassName||'', css].join(' '),
         style: (props.inputStyle || {}),
-        spellCheck: (props as any).spellCkeck || false, readOnly, disabled: readOnly, type, value: serializeValue(value), checked,
+        spellCheck: (props as any).spellCkeck || false, readOnly, disabled: readOnly, type,
+        value: serializeValue(value),
+        checked,
         onChange, onBlur, onKeyDown} // key:`${field}.${data?.id}`
     if (!inputProps.style.cursor && cursor === 'not-allowed') { inputProps.style.cursor = cursor; }
     switch(subtype){
@@ -277,29 +300,54 @@ export function InputComponent(props: AllProps) {
         delete rootprops[k];
     }*/
 
+    let wrap = true;
     if (autosize) rootprops.className = (rootprops.className || '') + ' autosize-input-container';
-    else if (!label && !postlabel) {
+    else if (!label && !postlabel && !props.isMultiSelect) {
         if (rootprops.className) inputProps.className = rootprops.className + ' ' + inputProps.className;
         if (rootprops.style) U.objectMergeInPlace(inputProps.style, rootprops.style);
         inputProps = {...rootprops, ...inputProps};
-        switch (props.tag){
-            case "textarea": return <textarea {...inputProps}>{inputProps.value}</textarea>;
-            case "select": return <select {...inputProps}>{getSelectOptions(data, field, props.options, props.children)}</select>;
-            case null: case undefined: case "": case "input": return <input {...inputProps} />;
-            default:
-                inputProps.contentEditable = inputProps.contentEditable !== false;
-                return React.createElement(props.tag, inputProps, props.children);
-        }
+        wrap = false;
     }
 
     switch (props.tag){
         case "textarea": input = <textarea {...inputProps}>{inputProps.value}</textarea>; break;
-        case "select": input = <select {...inputProps}>{getSelectOptions(data, field, props.options, props.children)}</select>; break;
+        case "select":
+            if (props.isMultiSelect){
+                let options = props.options as any || getSelectOptions_raw(data, field);
+                let multiOptions = options as MultiSelectOptGroup[];
+                console.log('setting multiselect pre', {multiOptions, value, ivalue: inputProps.value, options, data, df:data[field], field});
+                let valuesMap = U.objectFromArrayValues((inputProps.value||[]));
+                delete valuesMap[undefined as any];
+                inputProps.value = [];
+                for (let optgrp of multiOptions) for (let opt of optgrp.options) if (valuesMap[opt.value]) inputProps.value.push(opt);
+                // rootprops.className = (rootprops.className || '') + ' clearfix';
+                let old = {...rootprops};
+                rootprops.onMouseMove = (e:any) => { UX.stopEvt(e); old.onMouseMove?.(); console.log('multiselect onmove'); };
+                /*rootprops.onMouseDown = (e:any) => { UX.stopEvt(e); old.onMouseDown?.(); console.log('multiselect onMouseDown'); };
+                rootprops.onMouseUp = (e:any) => { UX.stopEvt(e); old.onMouseUp?.(); console.log('multiselect onMouseUp'); };
+                rootprops.onClick = (e:any) => { UX.stopEvt(e); old.onClick?.(); console.log('multiselect onClick'); };
+                rootprops.onMouseLeave = (e:any) => { UX.stopEvt(e); old.onMouseLeave?.(); console.log('multiselect onMouseLeave'); };*/
+                // @ts-ignore
+                input = <MultiSelect {...inputProps} isMulti={true} options={options}
+                    onChange={((v0: MultiSelectOption[]) => {
+                        let v = v0.map(v => v.value);
+                        confirmValue(undefined, v);
+                        console.log('setting multiselect onchange', {v, v0, value, ivalue: inputProps.value, options});
+                    }) as any}
+                />;
+            }
+            else {
+                let options = getSelectOptions(data, field, props.options, props.children);
+                input = <select {...inputProps}>{options}</select>;
+            }
+            break;
         case null: case undefined: case "": case "input": input = <input {...inputProps} />; break;
         default:
             inputProps.contentEditable = inputProps.contentEditable !== false;
             input = React.createElement(props.tag, inputProps, props.children); break;
     }
+    if (!wrap) return input;
+
     if (typeof label === "string") label = <span>{label}</span>;
     if (typeof postlabel === "string") postlabel = <span>{postlabel}</span>;
 
@@ -315,7 +363,7 @@ export function InputComponent(props: AllProps) {
         select?.click();
     }
     return <label className={'input-container'} {...rootprops} /*onClick={openSelect}*/>
-    {label || undefined}{input}{postlabel || undefined}</label>;
+        {label || undefined}{input}{postlabel || undefined}</label>;
     /*
     return(<label className={'p-1'} {...otherprops}
                   style={rootStyle}>
@@ -341,7 +389,6 @@ export function InputComponent(props: AllProps) {
     */
 }
 
-InputComponent.cname = 'InputComponent';
 export interface InputOwnProps {
     data?: LPointerTargetable | DPointerTargetable | Pointer<DPointerTargetable, 1, 1, LPointerTargetable>;
     field?: string;
@@ -370,7 +417,8 @@ export interface InputOwnProps {
 
 export interface SelectOwnProps extends Omit<InputOwnProps, 'setter'> {
     options?: JSX.Element;
-    setter?: (value: string, data: any, field: string) => void; // parent select has value: string | boolean
+    setter?: (value: string/*|PrimitiveType[]*/, data: any, field: string) => void; // parent select has value: string | boolean
+    isMultiSelect?: boolean;
 }
 interface RealOwnProps extends Omit<SelectOwnProps, 'setter'>{
     setter: InputOwnProps['setter'];
@@ -399,25 +447,31 @@ function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
 }
 
 export const InputConnected =
+    // @ts-ignore
     connect<StateProps, DispatchProps, RealOwnProps, DState>(InputMapStateToProps, mapDispatchToProps)(InputComponent);
 
 
 // export function Input(props: InputOwnProps, children: (string | React.Component)[] = []): ReactElement { return 'input' as any; }
 export function Input(props: InputOwnProps): ReactElement {
+    // @ts-ignore
     return <InputConnected {...props as any}>{props.children}</InputConnected>;
 }
 
 // export function TextArea(props: InputOwnProps, children: (string | React.Component)[] = []): ReactElement { return 'textarea' as any; }
-export function TextArea(props: InputOwnProps): ReactElement {
-    return <InputConnected {...{...props, tag:"textarea"} as any}>{props.children}</InputConnected>;
+export function TextArea(props: InputOwnProps, c: any): ReactElement {
+    // @ts-ignore
+    return <InputConnected {...{...props, tag:"textarea"} as any}>{props.children||c}</InputConnected>;
 }
 //export function Select(props: SelectOwnProps, children: (string | React.Component)[] = []): ReactElement { return 'select' as any; }
-export function Select(props: SelectOwnProps): ReactElement {
-    return <InputConnected {...{...props, tag:"select"} as any}>{props.children}</InputConnected>;
+export function Select(props: SelectOwnProps, c: any): ReactElement {
+    // @ts-ignore
+    return <InputConnected {...{...props, tag:"select"} as any}>{props.children||c}</InputConnected>;
 }
 export const Edit = Input;
 
+// @ts-ignore
 InputComponent.cname = 'InputComponent';
+// @ts-ignore
 InputConnected.cname = 'InputConnected';
 Input.cname = 'Input';
 TextArea.cname = 'TextArea';
diff --git a/src/components/forEndUser/Tree.tsx b/src/components/forEndUser/Tree.tsx
index 2e86f7130..805fe17fe 100644
--- a/src/components/forEndUser/Tree.tsx
+++ b/src/components/forEndUser/Tree.tsx
@@ -81,12 +81,14 @@ function Tree(props: TreeProps) {
 
     let up = data?.father;
     let down = data?.children[0];
-    if (data) return(<>
-        <CommandBar>
-            <Btn icon={'up'} size={'medium'} disabled={!up} action={(e) => { setME(up)} } tip={'Click to go up to the ancestor element'} />
-            <Btn icon={'down'} size={'medium'} disabled={!down} action={(e) => { setME(down)} } tip={'Select the first child'} />
-        </CommandBar>
-        <DataTree data={data} depth={depth} hide={hide} setFilter={setFilter}  /></>)
+    if (data) return(
+        <>
+            {!props.depth && <CommandBar>
+                <Btn icon={'up'} size={'medium'} disabled={!up} action={(e) => { setME(up)} } tip={'Click to go up to the ancestor element'} />
+                <Btn icon={'down'} size={'medium'} disabled={!down} action={(e) => { setME(down)} } tip={'Select the first child'} />
+            </CommandBar>}
+            <DataTree data={data} depth={depth} hide={hide} setFilter={setFilter} />
+        </>)
     if (children) return(<><HtmlTree data={children} hide={hide} depth={depth} setFilter={setFilter} /></>);
     return(<></>);
 }
@@ -120,7 +122,7 @@ function DataTree(props: DataTreeProps): JSX.Element {
         case 'DValue': icon = ''; break;
     }*/
 
-    return(<section>
+    return(<section className={'datatree-entry-root'}>
 
         <div className={'d-flex tree'}>
             {data.children?.length >= 1 ? ((data.children?.length && hide) ?
diff --git a/src/components/forEndUser/tree.scss b/src/components/forEndUser/tree.scss
index b8cc9d2da..15488128c 100644
--- a/src/components/forEndUser/tree.scss
+++ b/src/components/forEndUser/tree.scss
@@ -81,8 +81,10 @@
   opacity: 0.5!important;
 }
 
+section.datatree-entry-root, div.d-flex tree{
+  padding: 0.125rem;
+}
 .tree-item .parent-class {
-  color: rent;
 }
 
 .tree-DModel, .tree-Model {
@@ -169,4 +171,4 @@
   background-color: white;
   border: 2px solid #C2B2B4;
   color: var(--bg-5);
-}
+}
\ No newline at end of file
diff --git a/src/graph/graphElement/graphElement.tsx b/src/graph/graphElement/graphElement.tsx
index ec027e897..6fa9f7522 100644
--- a/src/graph/graphElement/graphElement.tsx
+++ b/src/graph/graphElement/graphElement.tsx
@@ -173,7 +173,10 @@ export class GraphElementComponent<AllProps extends AllPropss = AllPropss, Graph
             Log.w(!!explicitView, "Requested main view "+ownProps.view+" not found. Another view got assigned: " + ret.view?.__raw.name, {requested: ownProps.view, props: ownProps, state: ret});
         }
         if (!tn.validMainViews?.[0] || tn.validMainViews[0].id !== tn.mainView?.id) tn.validMainViews = [tn.mainView, ...(tn.validMainViews || [])];
-        Log.ex(!ret.view, "Could not find any view appliable to element.",
+        // @ts-ignore
+        let vname: string = !ret.view && ownProps.view ? ' Check the manual assignment of props view={"'+(ownProps.view?.name || ownProps.view) +'"}' : '';
+        let pview: LViewElement|undefined = !ret.view ?  ret.node?.father?.view : undefined;
+        Log.ex(!ret.view, "Could not find any view applicable to element." + vname + (pview ? ' in view "'+pview.name+'"' : ''),
             {data:ret.data, props: ownProps, state: ret, scores: (ret as any).viewScores, nid: ownProps.nodeid, tn:transientProperties.node[ownProps.nodeid as any]});
 
         if (explicitViews){
@@ -712,12 +715,13 @@ export class GraphElementComponent<AllProps extends AllPropss = AllPropss, Graph
 
     static mousedownComponent: GraphElementComponent | undefined;
     onMouseDown(e: React.MouseEvent): void {
+        if (UX.isStoppedEvt(e)) return;
         e.stopPropagation();
         GraphElementComponent.mousedownComponent = this;
         TRANSACTION(()=>{
             if (e.button === Keystrokes.clickRight) { this.doContextMenu(e); }
             let p: GObject = this.props;
-            console.log('try drag', {p, ig: p.isGraph, iv:p.isVertex});
+            console.log('try drag', {p, ig: p.isGraph, iv:p.isVertex, e});
             // if ((p.isGraph && !p.isVertex) || (p.isGraph && p.isVertex && e.ctrlKey)) GraphDragManager.startPanning(e, this.props.node as LGraph);
         })
     }
@@ -797,7 +801,7 @@ export class GraphElementComponent<AllProps extends AllPropss = AllPropss, Graph
                 let de = e.__raw;
                 if (de.isExtend) {
                     let data: LClass = this.props.data as any;
-                    data.unsetExtends(e.end.model as LClass);
+                    data.unsetExtends( e.end.model as LClass);
                     // SetFieldAction(data.id, 'extends', )
                 }
                 if (de.isReference){
@@ -835,7 +839,7 @@ export class GraphElementComponent<AllProps extends AllPropss = AllPropss, Graph
         let state: DState = store.getState();
         if (e.button !== Keystrokes.clickRight && state.contextMenu?.display) SetRootFieldAction.new("contextMenu", {display: false, x: 0, y: 0}); // todo: need to move it on document or <App>
         const edgePendingSource = this.props.isEdgePending?.source;
-        console.log('mousedown select() check PRE:', {name: this.props.data?.name, isSelected: this.props.node.isSelected(), 'nodeIsSelectedMapProxy': this.props.node?.isSelected, nodeIsSelectedRaw:this.props.node?.__raw.isSelected});
+        console.log('mousedown select() check PRE:', {e, name: this.props.data?.name, isSelected: this.props.node.isSelected(), 'nodeIsSelectedMapProxy': this.props.node?.isSelected, nodeIsSelectedRaw:this.props.node?.__raw.isSelected});
 
         if (edgePendingSource) {
             if (this.props.data?.className !== "DClass") return;
@@ -852,7 +856,7 @@ export class GraphElementComponent<AllProps extends AllPropss = AllPropss, Graph
             SetRootFieldAction.new('isEdgePending', { user: '',  source: '' });
             return;
         }
-        console.log('mousedown select() check:', {isSelected: this.props.node.isSelected(), 'nodeIsSelectedMapProxy': this.props.node?.isSelected, nodeIsSelectedRaw:this.props.node?.__raw.isSelected});
+        console.log('mousedown select() check:', {e, isSelected: this.props.node.isSelected(), 'nodeIsSelectedMapProxy': this.props.node?.isSelected, nodeIsSelectedRaw:this.props.node?.__raw.isSelected});
         BEGIN();
         windoww.node = this.props.node;
         this.props.node.toggleSelected(DUser.current);
diff --git a/src/joiner/classes.ts b/src/joiner/classes.ts
index 8b02fca5d..5cd402e94 100644
--- a/src/joiner/classes.ts
+++ b/src/joiner/classes.ts
@@ -1040,6 +1040,7 @@ export class Constructors<T extends DPointerTargetable = DPointerTargetable>{
         const project = user?.project;
         if (!project) return this;
         this.setExternalPtr(project.id, 'viewpoints', '+=');
+        // thiss.cssIsGlobal = true;
         // thiss._persistCallbacks.push( SetFieldAction.create(project.id, 'stackViews', [], '', false) );
         return this;
     }
@@ -1618,6 +1619,10 @@ export class LPointerTargetable<Context extends LogicContext<DPointerTargetable>
             "<span>Unique identifier, and value used to point this object.</span></a>"};
 
     private __info_of____readonly = {type:"boolean", txt:"prevent any change to the current object."};
+    project!: LProject|null;
+    protected get_project(c: GObject<Context>): LProject | null {
+        return LPointerTargetable.fromPointer(DUser.current as Pointer<DUser>)?.project || null;
+    }
     protected set___readonly(val: any, c: Context): boolean {
         val = !!val;
         let thiss: GObject = this;
@@ -2188,8 +2193,7 @@ export class LUser<Context extends LogicContext<DUser> = any, D extends DUser =
 
     protected get_project(context: Context): this['project'] {
         const project = context.data.project;
-        if(project) return LProject.fromPointer(project);
-        return null;
+        return project && LProject.fromPointer(project) || null;
     }
     protected set_project(val: Pack<Exclude<this['project'], null>>|null, context: Context): boolean {
         const data = context.data;
diff --git a/src/joiner/index.ts b/src/joiner/index.ts
index 2109252fc..a082b046d 100644
--- a/src/joiner/index.ts
+++ b/src/joiner/index.ts
@@ -32,7 +32,7 @@ export type {Subtract, Class, Empty, Json, GObject, bool, Dictionary, Proxyfied,
     NotFound, DocString, nbool, nnumber, nstring, Nullable, TODO, UnixTimestamp, UObject, IsActually,
     Function, Function2, InOutParam,
     unArr, orArr, PrimitiveType, CClass, NonEmptyString, Overlap, Info,
-    Constructor, AbstractConstructor, ApiResponse, Any
+    Constructor, AbstractConstructor, ApiResponse, Any, MultiSelectOptGroup, MultiSelectOption
 } from "./types";
 
 export type {Pointer, PtrString, getWParams, WUser, WProject, WtoD, WtoL, DtoW, LtoW, LtoD, DtoL, PackArr, Pack, Pack1, ViewScore, EPSize,
diff --git a/src/joiner/types.ts b/src/joiner/types.ts
index 5155890dc..ae4661c95 100644
--- a/src/joiner/types.ts
+++ b/src/joiner/types.ts
@@ -58,6 +58,8 @@ interface NoApply { apply?: never; }
 interface NoCall { call?: never; }
 
 
+export type MultiSelectOption = {value: string, label: string};
+export type MultiSelectOptGroup = {label: string, options: MultiSelectOption[]};
 
 
 export type orArr<T> = T | T[];
diff --git a/src/model/logicWrapper/LModelElement.tsx b/src/model/logicWrapper/LModelElement.tsx
index 30b472126..9fdb52d42 100644
--- a/src/model/logicWrapper/LModelElement.tsx
+++ b/src/model/logicWrapper/LModelElement.tsx
@@ -14,7 +14,7 @@ import {
     VertexPointers,
     ModelPointers,
     LtoD,
-    LVertex, LEdgePoint, LGraph,
+    LVertex, LEdgePoint, LGraph, MultiSelectOptGroup, UX,
 } from "../../joiner";
 import {
     Abstract,
@@ -77,7 +77,7 @@ import {
 import {ValuePointers} from "./PointerDefinitions";
 import {ShortDefaultEClasses} from "../../common/U";
 import {transientProperties} from "../../joiner/classes";
-import {ReactNode} from "react";
+import React, {ReactNode} from "react";
 
 
 @Node
@@ -241,6 +241,7 @@ export class LModelElement<Context extends LogicContext<DModelElement> = any, D
         }
     }
 
+
     public static M1Classes = ['DModel', 'DObject', 'DValue']; // Dstrudturalfeature in shapeless obj??
     public static AbstractClasses = ['DModelElement', 'DNamedElement', '...'];
     public static M2InstantiableClasses = ['DModel', 'DOperation', 'DClass', 'DReference', 'DAttribute'];
@@ -1238,7 +1239,7 @@ export class LClassifier<Context extends LogicContext<DClassifier> = any> extend
         return EcoreParser.classTypePrefix + context.data.name;
     }
 
-    private get_typeString(context: Context) {
+    get_typeString(context: Context) {
         return context.data.name;
     }
 }
@@ -2165,7 +2166,8 @@ export class LClass<D extends DClass = DClass, Context extends LogicContext<DCla
     public isSubClassOf(superClass: LClass, returnIfSameClass: boolean = true): boolean { return this.cannotCall("isSubClassOf"); }
     public isSuperClassOf(subClass: LClass, returnIfSameClass: boolean = true): boolean { return this.cannotCall("isSuperClassOf"); }
     protected get_isSubClassOf(c: Context): ((superClass: LClass, returnIfSameClass?: boolean) => boolean) {
-        return (superClass: LClass, returnIfSameClass: boolean = true) => {
+        return (superClass?: LClass, returnIfSameClass: boolean = true) => {
+            superClass = LPointerTargetable.wrap(superClass);
             if (!superClass) return false;
             if (superClass.id === c.data.id) return returnIfSameClass;
             for (let subclass of this.get_extendsChain(c)) {
@@ -2313,8 +2315,8 @@ export class LClass<D extends DClass = DClass, Context extends LogicContext<DCla
         return true;
     }
 
-    allInstances!: LValue[];
-    __info_of__allInstances: Info = {type: 'LValue[]', txt: "Instances in m1 of this class and of all subclasses."};
+    allInstances!: LObject[];
+    __info_of__allInstances: Info = {type: 'LObject[]', txt: "Instances in m1 of this class and of all subclasses."};
     protected get_allInstances(context: Context): this["instances"] {
         let sc = this.get_allSubClasses(context, true);
         return sc.flatMap( (c) => c.instances);
@@ -2617,11 +2619,22 @@ export class LClass<D extends DClass = DClass, Context extends LogicContext<DCla
 
 
     private _canExtend(c: Context, superclass: LClass, output: {reason: string, allTargetSuperClasses: LClass[]} = {reason: '', allTargetSuperClasses: []}): boolean {
+        if (!output) output = {allTargetSuperClasses:[]} as any;
+        superclass = superclass && LPointerTargetable.wrap(superclass) as any;
         if (!superclass) { output.reason = 'Invalid extend target: ' + superclass; return false; }
-        if (c.data.final) return false;
-        superclass = LPointerTargetable.wrap(superclass) as any;
-        let sealed = c.data.sealed || []
-        if (sealed.length && !sealed.includes(superclass.id)) return false;
+        let sealed = superclass.sealed || [];
+        if (sealed.length) {
+            let inSealed = false;
+            for (let allowed of sealed) if (allowed && allowed.isSubClassOf(c.proxyObject)) { inSealed = true; break; }
+            if (!inSealed) {
+                output.reason = 'sealed on attempted superclass';
+                return false;
+            }
+        }
+        if (superclass.final) {
+            output.reason = 'final on attempted superclass';
+            return false;
+        }
         const thiss: LClass = c.proxyObject;
         if (superclass.id === thiss.id) { output.reason = 'Classes cannot extend themselves.'; return false; }
         // todo: se diversi proxy dello stesso oggetto sono considerati diversi questo fallisce, in tal caso fai thiss.extends.map( l => l.id).indexof(superclass.id)
@@ -4653,6 +4666,16 @@ export class LObject<Context extends LogicContext<DObject> = any, C extends Cont
         return Object.values(bymetaparent).flat();
     }
 
+    typeStr!:string; // derivate attribute, abstract
+    typeString!:string; // derivate attribute, abstract
+    __info_of__typeStr: Info = {type: ShortAttribETypes.EString, txt: <div>Alias of<i>this.typeString</i></div>}
+    __info_of__typeString: Info = {type: ShortAttribETypes.EString, txt: <div>Stringified version of <i>this.type</i></div>}
+    protected get_typeString(c: Context): string { return this.get_typeStr(c); }
+    protected get_typeStr(c: Context): string {
+        let thiss: GObject<this> = this as any;
+        if (!thiss.get_instanceof) return 'shapeless';
+        let meta: any = thiss.get_instanceof(c);
+        return meta?.typeToShortString?.() || "shapeless"; }
 
     // protected get_fromlclass<T extends keyof (LClass)>(meta: LClass, key: T): LClass[T] { return meta[key]; }
     protected get_model(context: Context): LModelElement["model"] {
@@ -5363,9 +5386,8 @@ export class LValue<Context extends LogicContext<DValue> = any, C extends Contex
     __info_of__typeStr: Info = {type: ShortAttribETypes.EString, txt: <div>Alias of<i>this.typeString</i></div>}
     __info_of__typeString: Info = {type: ShortAttribETypes.EString, txt: <div>Stringified version of <i>this.type</i></div>}
     protected get_typeString(c: Context): string { return this.get_typeStr(c); }
-    protected get_typeStr(c: Context): string {
-        let meta = this.get_instanceof(c);
-        return meta ? meta.typeToShortString() : "shapeless"; }
+    // @ts-ignore
+    protected get_typeStr(c: Context): string { return LObject.singleton.get_typeStr.call(this, c); }
 
     // individual value getters
     // if withMetaInfo, returns a wrapper for the first non-empty value found containing his index and metainfo
@@ -5654,14 +5676,16 @@ export class LValue<Context extends LogicContext<DValue> = any, C extends Contex
             let isPtr: boolean = undefined as any;
             let lval: LObject | LEnumLiteral = undefined as any;
             if (val === null) val = undefined;
-            if (context.data.values[index] === val) return { success: false, reason: "identical assignment" };
+            let oldval = context.data.values[index];
+            if (oldval === val) return { success: false, reason: "identical assignment" };
+            let state = store.getState();
             if ((val as any)?.id && (val as any)?.className) {
-                lval = (val.__isProxy ? val : LPointerTargetable.wrap<DObject>(val));
-                isPtr = !!lval;
+                lval = (val.__isProxy ? val : LPointerTargetable.wrap<DObject>(val, state));
+                isPtr = !!(lval || Pointers.isPointer(oldval));//LPointerTargetable.wrap(oldval, state));
                 val = (val as any).id;
             }
             let info = (info0 || {}) as unknown as SetValueAtPositionInfoType;
-            if (isPtr === undefined) isPtr = (info.isPtr === undefined ? Pointers.isPointer(val) : info.isPtr);
+            if (isPtr === undefined) isPtr = (info.isPtr === undefined ? Pointers.isPointer(val) || Pointers.isPointer(oldval) : info.isPtr);
 
             // set sideeffect part
             if (val !== undefined) {
@@ -5719,22 +5743,27 @@ export class LValue<Context extends LogicContext<DValue> = any, C extends Contex
 
             // clear sideeffect part
             this._clearValueAtPosition(context, index, info, true);
-
+            console.log('set value index', {index, val, isPtr});
             // actual set
             SetFieldAction.new(context.data, 'values.' + index as any, val, '', isPtr);
             if (info.setMirage !== false) SetFieldAction.new(context.data, 'isMirage', false, '', false);
 
-            // assegnato a giordano todo: wrap this and set toaster with failure message if it fails or better launch Log.w and bind toasts of different colors to Log funcs
+            // todo: wrap this func and set toaster with failure message if it fails or better launch Log.w and bind toasts of different colors to Log funcs
             return {success: true};
         }
     }
     protected set_values(val: orArr<D["values"]>, context: Context): boolean {
-        const list: D["values"] = ((Array.isArray(val)) ? val : [val]) as D["values"];
+        const list: D["values"] = (Array.isArray(val) ? val : [val]) as D["values"];
         let modified = false;
-        for (let i = 0; i < list.length; i++) {
-            modified = this.get_setValueAtPosition(context)(i, list[i], {setMirage: false} as any).success || modified;
-        }
-        if (modified) context.data.isMirage && SetFieldAction.new(context.data, 'isMirage', false, '', false);
+        list.length = Math.max(list.length, context.data.values.length);
+        TRANSACTION(()=>{
+            for (let i = 0; i < list.length; i++) {
+                let out = this.get_setValueAtPosition(context)(i, list[i], {setMirage: false} as any);
+                modified = out.success || modified;
+                console.log('set_values', {list, i, modifiedreason:out});
+            }
+            if (modified) context.data.isMirage && SetFieldAction.new(context.data, 'isMirage', false, '', false);
+        });
         return true;
 
         // old implementation
@@ -5782,6 +5811,56 @@ export class LValue<Context extends LogicContext<DValue> = any, C extends Contex
         return r.success;
     }
 
+    get_isCrossReference(c: Context): boolean {
+        return false; // todo
+    }
+    validTargetsJSX!: JSX.Element[];
+    validTargets!: (LObject | LEnumLiteral)[];
+    get_validTargetsJSX(c: Context): this['validTargetsJSX'] {
+        let opts: MultiSelectOptGroup[] = [];
+        this.get_validTargets(c, opts);
+        return UX.options(opts);
+    }
+
+    get_validTargets(c: Context, out?: MultiSelectOptGroup[]): this['validTargets'] {
+        let selectOptions: MultiSelectOptGroup[];
+        let meta: LReference | LAttribute = this.get_instanceof(c) as LReference | LAttribute;
+        let isShapeless = !meta;
+        let isReference = isShapeless || meta.className === 'DReference';
+        let isAttribute = isShapeless || meta.className === 'DAttribute';
+        let isCrossRef = this.get_isCrossReference(c);
+        let freeObjects: LObject[] = [];
+        let boundObjects: LObject[] = [];
+        let literals: LEnumLiteral[] = [];
+        let isContainment = isShapeless || isReference && (meta as LReference).containment;
+        let m1: LModel = this.get_model(c);
+        let m2 = m1.instanceof;
+        let map = (object: LNamedElement) => ({value:object.id, label: object.name});
+        if (isReference) {
+            let isContainment: boolean = this.get_containment(c);
+            let containerObjectsID: Pointer[] = this.get_fatherList(c).map(lm => lm.id);
+            let validObjects = (isCrossRef ? Selectors.getObjects() : m1.allSubObjects)
+            if (isContainment) validObjects = validObjects.filter(obj => !containerObjectsID.includes(obj.id));
+            let type = meta.type;
+            if (!isShapeless) validObjects = validObjects.filter((obj) => (type as LClass).isSuperClassOf(obj.instanceof, true))
+            // avoiding containment loops damiano todo: put this filter in set_value too
+            for (let o of validObjects) {
+                //  continue; // no self contain
+                if (o.isRoot) freeObjects.push(o); else boundObjects.push(o);
+            }
+            if (out) out.push({label: 'Free     Objects', options: freeObjects.map(map)});
+            if (out) out.push({label: 'Bound Objects', options: freeObjects.map(map)});
+        }
+        if (isAttribute) {
+            let enumm: LEnumerator[] = isShapeless ? (isCrossRef || !m2 ? LPointerTargetable.from(Selectors.getAllEnumerators()) : m2.enumerators) : [meta.type as LEnumerator].filter(t=>t?.className === 'DEnumerator');
+            for (let e of enumm) {
+                let currLiterals = e.literals;
+                literals.push(...currLiterals);
+                if (out) out.push({label: 'Literals of ' + e.name, options: currLiterals.map(map)});
+            }}
+        return U.arrayMergeInPlace(freeObjects, boundObjects, literals as any);
+    }
+
     protected generateEcoreJson_impl(context: Context, loopDetectionObj: Dictionary<Pointer, DModelElement> = {}): Json {
         loopDetectionObj[context.data.id] = context.data;
         let values = this.get_values(context, true, false, true, false, false);
diff --git a/src/pages/Project.tsx b/src/pages/Project.tsx
index 3bd8d0b3a..1b041e724 100644
--- a/src/pages/Project.tsx
+++ b/src/pages/Project.tsx
@@ -55,7 +55,9 @@ function ProjectComponent(props: AllProps): JSX.Element {
         })();
     }, [id]);
 
-    let allViews = user?.project?.viewpoints.flatMap((vp: LViewPoint) => vp && vp.allSubViews) || [];
+    let vparr = user?.project?.viewpoints || [];
+    let allViews = vparr.flatMap((vp: LViewPoint) => vp && vp.allSubViews);
+    allViews.push(...vparr as LViewElement[]);
     allViews = allViews.filter(v => v);
     const viewsDeDuplicator: Dictionary<Pointer<DViewElement>, LViewElement> = {};
     for (let v of allViews) viewsDeDuplicator[v.id] = v;
@@ -64,7 +66,7 @@ function ProjectComponent(props: AllProps): JSX.Element {
         <Try>
         <Dashboard active={'Project'} version={props.version} project={user.project}>
                 <React.Fragment>
-                    <style id={"views-css-injector"}>
+                    <style id={"views-css-injector-p"}>
                         {Object.values(viewsDeDuplicator).map(v => v.compiled_css).join('\n\n')}
                     </style>
                     {CSS_Units.jsx}
diff --git a/src/pages/components/Dashboard.tsx b/src/pages/components/Dashboard.tsx
index 3f3421113..bee1466b3 100644
--- a/src/pages/components/Dashboard.tsx
+++ b/src/pages/components/Dashboard.tsx
@@ -317,7 +317,9 @@ function ProjectDashboard(props: DashProps): any {
     const id = query.get('id') || '';
     const project: LProject = LProject.fromPointer(id);
 
-    let allViews = project?.viewpoints.flatMap((vp: LViewPoint) => vp && vp.allSubViews) || [];
+    let vparr = project?.viewpoints || [];
+    let allViews = vparr.flatMap((vp: LViewPoint) => vp && vp.allSubViews);
+    allViews.push(...vparr as LViewElement[]);
     allViews = allViews.filter(v => v);
     const viewsDeDuplicator: Dictionary<Pointer<DViewElement>, LViewElement> = {};
     for (let v of allViews) viewsDeDuplicator[v.id] = v;
@@ -325,7 +327,7 @@ function ProjectDashboard(props: DashProps): any {
     return (<>
         <Try>
             <>
-                <style id={"views-css-injector"}>
+                <style id={"views-css-injector-d"}>
                     {Object.values(viewsDeDuplicator).map(v => v.compiled_css).join('\n\n')}
                 </style>
                 {CSS_Units.jsx}
diff --git a/src/redux/VersionFixer.ts b/src/redux/VersionFixer.ts
index 3858937f5..f69a5ac56 100644
--- a/src/redux/VersionFixer.ts
+++ b/src/redux/VersionFixer.ts
@@ -172,6 +172,7 @@ everytime you put hands into a D-Object shape or valid values, you should docume
             c.rootable = undefined;
         }
         for (let c of (s.viewelements).map(p=> this.d(p, s))) { c.father = c.viewpoint; }
+        for (let c of (s.viewpoints).map(p=> this.d(p, s))) { c.cssIsGlobal = true; }
         for (let c of (s.projects).map(p=> this.d(p, s))) { c.favorite = {}; c.description = ''; }
         for (let c of (s.references).map(p=> this.d(p, s))) { if (c.composition === undefined) c.aggregation = !(c.composition = !!(c as any).containment); }
         return s;
diff --git a/src/redux/action/action.ts b/src/redux/action/action.ts
index d4ede9912..b2ddd5615 100644
--- a/src/redux/action/action.ts
+++ b/src/redux/action/action.ts
@@ -16,6 +16,7 @@ import {
     RuntimeAccessible,
     RuntimeAccessibleClass,
     store,
+    U,
     unArr,
     windoww
 } from "../../joiner";
@@ -438,11 +439,21 @@ export class SetFieldAction extends SetRootFieldAction {
     }
 
     fire(forceRelaunch: boolean = false): boolean {
+        let fire = this.fire0(forceRelaunch);
+        console.log('set value index firing', {fire});
+        return fire;
+
+    }
+    fire0(forceRelaunch: boolean = false): boolean {
         // if action would not change the value, i don't fire it at all
         // by id because if item was updated, this.me as DElement might be an old version, different from the one in store.
         let d: GObject<any> = DPointerTargetable.from((this.me as DPointerTargetable)?.id || this.me as any);
         // console.warn("me fire", {thiss:this, d, typeofd:typeof d, field:this.me_field, dfield:d[this.me_field], val:this.value});
-        if (d && typeof d === "object" && d[this.me_field] === this.value) return false;
+        if (d && typeof d === "object") {
+            let oldv = U.followPath(d, this.me_field);
+            console.log('set value index firing 0', {ov:d[this.me_field], me_field:this.me_field, oldv, d, newv:this.value});
+            if (oldv === this.value) return false;
+        }
         return super.fire(forceRelaunch, false);
     }
 }
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 8b7d1c9f5..5bef502a8 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -90,10 +90,12 @@ body {
 
 .autosize-input-container > input, .autosize-input-container::after{
   display: flex;
-  margin: 0;
-  padding: 0;
-  border: none;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
   height: 1lh;
+  max-height: 1lh !important;
+  min-height: 1lh !important;
   font-style: inherit !important;
 }
 input[type="color"] {
@@ -387,8 +389,44 @@ i.bi {
   border-radius: 4px;
   padding-left: 10px;
 }
+.clearfix{
+  display: inline-block;
+  display: flow-root;
+  &::after{
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
 
 
+.Pointer_ViewModel{
+  &, & [data-nodetype], & [data-nodetype] > * {
+    &:has(.css-1nmdiq5-menu) {
+      min-height: min-content !important;
+    }
+  }
+}
+
+.css-b62m3t-container{
+  min-height: fit-content;
+}
+
+// multi-select popup
+body .css-1nmdiq5-menu{
+  margin: -10px 0px;
+  padding: 18px 0px;
+  background-color: transparent;
+  box-shadow: none;
+  //position: unset;
+  position: relative;
+  z-index: 1;
+  &>*{
+    background-color: rgb(255, 255, 255);
+    border-radius: 4px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px;
+  }
+}
 // LOGIN
 
 .login {
diff --git a/src/view/viewElement/view.tsx b/src/view/viewElement/view.tsx
index 91bede2ac..fb72e97f2 100644
--- a/src/view/viewElement/view.tsx
+++ b/src/view/viewElement/view.tsx
@@ -9,7 +9,7 @@ import {
     DModelElement,
     DNamedElement,
     DocString,
-    DPointerTargetable,
+    DPointerTargetable, DProject,
     DState,
     DViewPoint, DVoidEdge,
     EdgeBendingMode,
@@ -24,7 +24,7 @@ import {
     Info, LEdge, LEdgePoint, LGraphElement, LModelElement,
     Log,
     LogicContext,
-    LPointerTargetable, LUser,
+    LPointerTargetable, LProject, LUser,
     LViewPoint,
     LVoidEdge,
     MyProxyHandler,
@@ -561,7 +561,9 @@ export class LViewElement<Context extends LogicContext<DViewElement, LViewElemen
     private css_MUST_RECOMPILE!: boolean;
     public cssIsGlobal!: boolean;
     __info_of__cssIsGlobal: Info = {type: ShortAttribETypes.EBoolean, txt: "Use with caution!\nIf true, custom css can affect even elements not matched with this view, or outside the graph."}
-    get_cssIsGlobal(c: Context): this["cssIsGlobal"] { return c.data.cssIsGlobal; }
+    get_cssIsGlobal(c: Context): this["cssIsGlobal"] {
+        return c.data.cssIsGlobal;
+    }
     set_cssIsGlobal(val: this["cssIsGlobal"], c: Context): boolean {
         TRANSACTION(()=>{
             SetFieldAction.new(c.data, "cssIsGlobal", !!val, '', false);
@@ -585,6 +587,11 @@ export class LViewElement<Context extends LogicContext<DViewElement, LViewElemen
     compiled_css!: string;
     __info_of__compiled_css: Info = { hidden: true, txt:'css + palettes compiled from less in css'};
     get_compiled_css(c: Context): this["compiled_css"] {
+        if (c.data.isExclusiveView && c.data.className === DViewPoint.cname && !Defaults.check(c.data.id) ) {
+            let project = this.get_project(c);
+            let dproject = project?.__raw as DProject | undefined;
+            if (!(dproject && dproject.activeViewpoint === c.data.id)) return '';
+        }
         if (!c.data.css_MUST_RECOMPILE) return c.data.compiled_css; // return c.proxyObject.r.__raw.compiled_css;
         let s = '';
         const allowLESS = false;
@@ -668,7 +675,7 @@ export class LViewElement<Context extends LogicContext<DViewElement, LViewElemen
             }
         }
         s += '\n\t' + U.replaceAll(c.data.css, '\n', '\n\t');
-        const localViewSelector = '.'+c.data.id; // '[data-viewid="'+c.data.id+'"]';
+        const localViewSelector: string = (c.data.className === 'DViewPoint') ? '.GraphContainer' : '.'+c.data.id; // '[data-viewid="'+c.data.id+'"]';
         s = (!c.data.cssIsGlobal ? localViewSelector : 'body') +' {\n' + s + '\n}';
         // not an error, i'm updating directly d-view that is usually wrong, this is to prevent multiple nodes with same view to trigger compile and redux actions
         // count as if it's a derived attribute not really part of the store.