SiLeBAT/FSK-Lab

View on GitHub
de.bund.bfr.knime.fsklab.nodes/js-src/de/bund/bfr/knime/fsklab/v2.0/fskdbview/fskdbview.js

Summary

Maintainability
F
2 wks
Test Coverage
fskdbview = function () {
    
    var view = {
        version: "0.0.1"
    };
    view.name = "FSK DB View"
    //transform JQuery :contains selector to case insensitive
    jQuery.expr[':'].contains = function (a, i, m) {
        return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };
    window.selectedModels = [];
    let selectionMap = {};
    let selectedModelIndex = -1;
    window.downloadURs = [];
    window._endpoint;
    var _WebRepositoryVars = {};
    var _appVars = {};
    let uploadDates =[];
    let executionTimes = [];
    let _app;
    // These sets are used with the th-filters
    let _lazySriptsfetching = false;
    let editorAvailable = false;
    let _representation;
    let _value;
    let initiated = function(){
        editorAvailable =  true;
        window.multipleview = true;
    }
     var selectionEdited = function (modelMetaDatax) {
        if(!modelMetaDatax.changeSet.added)
            return;
        let selectedEditedModel = JSON.parse(JSON.stringify(modelMetaDatax.changeSet.added[0]));
        if(window.selectedModels && selectionMap[selectedModelIndex] != undefined && window.selectedModels[selectionMap[selectedModelIndex]]){        
            window.selectedModels[selectionMap[selectedModelIndex]] = selectedEditedModel;
            knimeService.setSelectedRows('b800db46-4e25-4f77-bcc6-db0c21joiner' , [{"selecteModels":window.selectedModels, "downloadURs":window.downloadURs}],{elements:[]});
        }
        _app._mainTable._metadata[selectedModelIndex] = selectedEditedModel;
        _app._mainTable._refresh(selectedModelIndex, selectedEditedModel);
    }
                               
    view.init = function (representation, value) { 
        
        knimeService.subscribeToSelection('b800db46-4e25-4f77-bcc6-db0c21Global', initiated);
        _representation = representation;
        knimeService.setSelectedRows('b800db46-4e25-4f77-bcc6-db0c21GlobalInit' , [{"tableID":_representation.tableID}],{elements:[]})
        _value = value;
        parent.tableID = _representation.tableID;
        //subscribe to events emitted by editor
        knimeService.subscribeToSelection('b800db46-4e25-4f77-bcc6-db0c21EditorSaved', selectionEdited);
        window._token = _representation.token
        window._endpoint = _representation.remoteRepositoryURL ? _representation.remoteRepositoryURL : "https://knime.bfr.berlin/backend/";
        window._endpoints     = {
            metadata        : window._endpoint + 'metadata/',
            image            : window._endpoint + 'image/',
            download        : window._endpoint + 'download/',
            uploadDate        : window._endpoint + 'uploadDate/',
            executionTime    : window._endpoint + 'executionTime/',
            simulations        : window._endpoint + 'simulations/',
            execution         : window._endpoint + 'execute/',
            search             : window._endpoint + 'search/',
            filter             : window._endpoint + 'filter',
            modelscriptEndpoint: window._endpoint + "modelscript/",
            visualizationscriptEndpoint: window._endpoint + "visualizationscript/",
            readmeEndpoint: window._endpoint + "readme/",
            simulationsEndpoint: window._endpoint + "simulations/"
        };
        createDBViewUI();
        
    };
    
    view.getComponentValue = function () {
        _value.table = _representation.table;
        return _value;
    };

    view.validate = function () {
        return true;
    }

    async function createDBViewUI(){
        // add Page Loader animation
        let loader = {};
        loader._$el = $( '<div class="loader loading"></div>' ).appendTo('body');
        loader._$el.addClass( 'loading' );
        const metadata = await getMetadata();
        _representation.metadata = metadata;
        
        $(document).ready(() => {
            let rootDiv = $('<div />').appendTo('body');
            createVars();
            let webRepositoryFlag = false;
            if( _representation.showHeaderButtonChecked == "true" ||
                _representation.showDetailsButtonChecked == "true" || 
                _representation.showExecuteButtonChecked == "true" || 
                _representation.showDownloadButtonChecked == "true" ){
                    
                webRepositoryFlag = true;
                
            }
            if(webRepositoryFlag && _representation.table && _representation.table.rows && _representation.table.rows.length > 0){
                _app = new APPLandingpage(_WebRepositoryVars, rootDiv, metadata, uploadDates, executionTimes);
            }else{
                _app = new APPLandingpage(_appVars, rootDiv, metadata);
            }
            // remove page loader animation 
            loader._$el.removeClass( 'loading' );
        });
    }
   
    /**
     * Get a metadata property or return empty string if missing.
     * @param {object} modelMetadata Whole metadata of a model
     * @param {string} toplevel Name of the metadata component. It can be
     *  *generalInformation*, *scope*, *dataBackground* or *modelMath*.
     * @param {string} name Name of the metadata property 
     */
    function getData(modelMetadata, toplevel, name) {
        try {
            return modelMetadata[toplevel][name];
        } catch (err) {
            return "no information for " + name;
        }
    }
   
    async function create_UUID(){
        var dt = new Date().getTime();
        var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = (dt + Math.random()*16)%16 | 0;
            dt = Math.floor(dt/16);
            return (c=='x' ? r :(r&0x3|0x8)).toString(16);
        });
        return uuid;
    }
   
    async function getMetadata() {
        if (_representation.table && _representation.table.rows && _representation.table.rows.length > 0) {
            const j = [];

            $.each(_representation.table.rows, function (index, rawdata) {
                var json = JSON.parse(rawdata.data[0]);
                var metaData = json[0];
                uploadDates.push(metaData['uploadDate']?metaData['uploadDate']:" | ")
                executionTimes.push(metaData['executionTime']?metaData['executionTime']:"")
                metaData['modelType'] = "genericModel";
                j.push(metaData);
            });
            return j;
        } else {
            parent.tableID = await create_UUID();
            _representation.tableID = parent.tableID;
            token = _representation.token
            const rep = await fetch(window._endpoints.metadata + token);
            const j = await rep.json();
            _lazySriptsfetching = true;
            for (index = 0; index < j.length; index++) {
                let row = j[index];
                

                if (_representation.table && _representation.table.rows) {
                    _representation.table.rows.push({
                        data: [
                            JSON.stringify(row)
                        ],
                        rowKey: 'Row'+index+'#'
                    });
                }
            }
            
            return j;
        }
    }
    function createVars(){
       _WebRepositoryVars = {
        header          : {
            brand           : {
                title           : _representation.title // false or ''
            },
            nav             : $.parseJSON(_representation.sandwichList)
        },
        mainTable           : {
            rowSelectable   : 'multiple',
            cols            : [
                {
                    id          : 'colModel',
                    label       : 'Model',
                    field       : 'modelName',
                    classes     : {
                        th          : 'td-label min-200',
                        td          : 'td-label min-200 td-model'
                    },
                    sortable    : true, // sortable
                },
                {
                    id          : 'colSoftware',
                    label       : 'Software',
                    field       : 'software',
                    classes     : {
                        th          : null,
                        td          : 'td-soft'
                    },
                    sortable    : true, // sortable
                    facet       : {
                        tooltip             : true,
                        select2             : true,
                        select2SingleRow    : true,
                        placeholder         : 'Software',
                        maxSelectable       : 1
                    }
                },
                {
                    id          : 'colEnvironment',
                    label       : 'Environment',
                    field       : 'environment',
                    classes     : {
                        th          : 'min-300',
                        td          : 'td-env min-300'
                    },
                    sortable    : true, // sortable
                    facet       : {
                        tooltip             : true,
                        select2             : true,
                        select2SingleRow    : true,
                        placeholder         : 'Environment',
                        maxSelectable       : 1
                    },
                    collapsable : true, // data-toggle-td
                    formatter   : '_list' // _formatter subroutine
                },
                {
                    id          : 'colHazard',
                    label       : 'Hazard',
                    field       : 'hazard',
                    classes     : {
                        th          : null,
                        td          : 'td-haz'
                    },
                    sortable    : true, // sortable
                    facet       : {
                        tooltip             : true,
                        select2             : true,
                        select2SingleRow    : true,
                        placeholder         : 'Hazard',
                        maxSelectable       : 1
                    }
                },
                {
                    id          : 'colType',
                    label       : 'Type',
                    field       : 'modelType',
                    classes     : {
                        th          : null,
                        td          : 'td-type'
                    },
                    sortable    : true, // sortable
                    facet       : {
                        tooltip             : true,
                        select2             : true,
                        select2SingleRow    : true,
                        placeholder         : 'Type',
                        maxSelectable       : 1
                    }
                },
                {
                    id          : 'colExecTime',
                    label       : 'Execution Time',
                    field       : 'executionTime',
                    classes     : {
                        th          : null,
                        td          : null
                    },
                    sortable    : true, // sortable
                    sorter      : '_execution', // _sorter subroutine
                    switchable     : true, // data-switchable
                    formatter   : '_execution' // _formatter subroutine
                },
                {
                    id          : 'colUploadDate',
                    label       : 'Upload Date',
                    field       : 'uploadDate',
                    classes     : {
                        th          : null,
                        td          : null
                    },
                    sortable    : true, // sortable
                    sorter      : '_date', // _sorter subroutine
                    switchable     : true, // data-switchable
                    formatter   : '_uploadDate' // _formatter subroutine
                }
            ],
            rowActions      : [],
            on              : {         
                afterInit       : ( O ) => {
                    _log( 'on > afterInit', 'hook' ); // example hook output
                    _log( O );
                },
                create          : ( O ) => {
                    // create details modal
                    O._modalDetails = new APPModalMTDetails( {
                        data        : O._metadata,
                        id          : 'mtModalDetails',
                        classes     : 'modal-details',
                        type        : 'mtDetails'
                    }, O._$container );
                    _log( O._modalDetails );
    
                    // create simulations modal
                    O._modalSim = new APPModalMTSimulations( {
                        data        : O._metadata,
                        id          : 'mtModalSim',
                        classes     : 'modal-sim',
                        type        : 'mtSim',
                        on          : {
                            simRunModelView : ( O, modelId, simulation )=> {
                                _log( 'on > simRunModelView', 'hook' ); // example hook output
                                _log( O );
                                _log( modelId );
                                _log( simulation );
                            }
                        }
                    }, O._$container );
                    _log( O._modalSim );
                },
                afterPopulate   : ( O, tableData ) => {
                    _log( 'on > afterPopulate', 'hook' ); // example hook output
                    _log( O );
                    _log( tableData );
                    if(editorAvailable){
                        $('button[role="mtActionEdit"]').each(function() {
                           $(this).attr('hidden',false );
                        });
                        $('button[role="mtActionDetails"]').each(function() {
                           $(this).attr('hidden',true );
                        });
                    }
                },
                selectAllRow       : ( O, rowIndex, rowData ) => {
                    this.checked = true;
                    $(this).closest("tr").css("background-color", "#e1e3e8");
                    window.selectedModels.push(_representation.metadata[rowIndex]);
                    _value.selection.push(_representation.table.rows[rowIndex].rowKey);
                    return;
           
                },
                selectRow       : ( O, rowIndex, rowData ) => {
                            
                            if(O.selectAllClicked){
                                    this.checked = true;
                                    $(this).closest("tr").css("background-color", "#e1e3e8");
                                    window.selectedModels.push(_representation.metadata[rowIndex]);
                                    _value.selection.push(_representation.table.rows[rowIndex].rowKey);
                                    return;
                            }
                            if (window.selectedModels.length >= _representation.maxSelectionNumber) {
                                    $(this).prop("checked", false);
                                    return;
                            }
                            
                            this.checked = true;
                            $(this).closest("tr").css("background-color", "#e1e3e8");
                            //fetch scripts
                            let modelIdentifier = getData(_representation.metadata[rowIndex], "generalInformation", "identifier")
                            if(!_representation.metadata[rowIndex]['modelscript']){
                                const simulations = fetch(window._endpoints.simulationsEndpoint + modelIdentifier + window._token);
                                simulations.then(function(response) {
                                    return response.json();
                                }).then(function(data) {
                                    _representation.metadata[rowIndex]['simulation'] = data; // this will be a json
                                    const modelscript =  fetch(window._endpoints.modelscriptEndpoint + modelIdentifier + window._token);
                                    modelscript.then(function(response) {
                                        return response.text();
                                    }).then(function(data) {
                                        _representation.metadata[rowIndex]['modelscript'] = data; // this will be a string
                                        const visualizationscript =  fetch(window._endpoints.visualizationscriptEndpoint + modelIdentifier + window._token);
                                        visualizationscript.then(function(responsevis) {
                                            return responsevis.text();
                                        }).then(function(datavis) {
                                            _representation.metadata[rowIndex]['visualization'] = datavis; // this will be a string
                                            // save selected model
                                            selectionMap[rowIndex] = window.selectedModels.length;
                                            window.selectedModels.push(_representation.metadata[rowIndex]);
                                            _value.selection.push(_representation.table.rows[rowIndex].rowKey);
                                            // emit selection event
                                            window.downloadURs.push(window._endpoints.download  + modelIdentifier + window._token);
                                            knimeService.setSelectedRows('b800db46-4e25-4f77-bcc6-db0c21joiner' ,
                                                    [{"selecteModels":window.selectedModels, "downloadURs":window.downloadURs}]
                                            /* [window.selectedModels,window.downloadURs]*/,{elements:[]}) 
                                        });
                                    });
                                });
                            }else{
                                // save selected model
                                selectionMap[rowIndex] = window.selectedModels.length;
                                window.selectedModels.push(_representation.metadata[rowIndex]);
                                _value.selection.push(_representation.table.rows[rowIndex].rowKey);
                                // emit selection event
                                window.downloadURs.push(window._endpoints.download  + modelIdentifier + window._token);
                                knimeService.setSelectedRows('b800db46-4e25-4f77-bcc6-db0c21joiner' ,
                                        [{"selecteModels":window.selectedModels, "downloadURs":window.downloadURs}]
                                /* [window.selectedModels,window.downloadURs]*/,{elements:[]}) 
                            }
                        

                        
                    },
                    deselectRow     : ( O, rowIndex, rowData ) => {
                        _log( 'on > deselectRow', 'hook' ); 
                        _log( O );
                        _log( rowIndex );
                        _log( rowData );
                        
                        this.checked = false;
                        $(this).closest("tr").css("background-color", "transparent");
                        
                        //filter out the model if the Checkbox is unchecked
                        window.selectedModels = window.selectedModels.filter(function (value, index, arr) {
                            let selectedModelID = getData(_representation.metadata[rowIndex], "generalInformation", "identifier")
                            let currentModelId = getData(value, "generalInformation", "identifier");
                            return selectedModelID != currentModelId;
                        });
                        
                        _value.selection = _value.selection.filter(function (value, index, arr) {
                            let indexToBeSelected = value.replace("Row","").replace("#","");
                            return indexToBeSelected != rowIndex;
                        }); 
                        knimeService.setSelectedRows('b800db46-4e25-4f77-bcc6-db0c21joiner' ,
                                [{"selecteModels":window.selectedModels, "downloadURs":window.downloadURs}],{elements:[]});
                        delete selectionMap[rowIndex];
                          
                    },
                updateFilter    : ( O, filtered ) => {
                    _log( 'on > updateFilter', 'hook' ); // example hook output
                    _log( O );
                    _log( filtered );
                }
            }
        }
    };
    if(_representation.showHeaderButtonChecked == "true"){
        _WebRepositoryVars.header.brand.logo = 'js-lib/bfr/fskapp/img/RAKIP_logo.jpg' ; // or  'js-lib/bfr/fskapp/img/bfr_logo.gif'
    }
    
    if(_representation.showDetailsButtonChecked == "true"){
        _WebRepositoryVars.mainTable.rowActions.push({
                    type            : 'modal',
                    idPrefix        : 'mtActionDetails_',
                    role            : "mtActionDetails",
                    icon            : 'icon-eye',
                    title           : 'Details',
                    target          : '#mtModalDetails'
                });
    }
    if(_representation.showExecuteButtonChecked == "true"){
        _WebRepositoryVars.mainTable.rowActions.push({
                    type            : 'modal',
                    idPrefix        : 'mtActionSim_',
                    role            : "mtActionSim",
                    icon            : 'icon-play',
                    title           : 'Simulation',
                    target          : '#mtModalSim'
                });
    }
    if (_representation.showDownloadButtonChecked == "true") {
        _WebRepositoryVars.mainTable.rowActions.push({
            type: 'link',
            idPrefix: 'mtActionDownload_',
            icon: 'icon-download',
            title: 'Download',
            on: {
                click: (O, $action, rowIndex, rowData) => {
                    let modelIdentifier = rowData["modelMetadata"]["generalInformation"]["identifier"];
                    window.open(_endpoints.download + modelIdentifier + window._token, '_blank');
                }
            }
        });
    }


    _WebRepositoryVars.mainTable.rowActions.push({
        type: 'link',
        idPrefix: 'mtActionEdit_',
        role: "mtActionEdit",
        icon: 'icon-edit-2',
        hidden: true,
        title: 'Edit',
        on: {
            click: (O, $action, modelIndex, rowData) => {
                _log('on > clickEdit', 'hook');
                _log(O);
                _log($action);
                _log(modelIndex);
                _log(rowData);
                selectedModelIndex = modelIndex;
                // emit selection event
                let selectedModel = rowData.modelMetadata;
                //fetch scripts
                let modelIdentifier = getData(selectedModel, "generalInformation", "identifier")
                if (_lazySriptsfetching) {
                    const modelscript = fetch(window._endpoints.modelscriptEndpoint + modelIdentifier + window._token);
                    modelscript.then(function(response) {
                        return response.text();
                    }).then(function(data) {
                        selectedModel['modelscript'] = data; // this will be a string
                        const visualizationscript = fetch(window._endpoints.visualizationscriptEndpoint + modelIdentifier + window._token);
                        visualizationscript.then(function(responsevis) {
                            return responsevis.text();
                        }).then(function(datavis) {
                            selectedModel['visualization'] = datavis; // this will be a string
                            knimeService.setSelectedRows('b800db46-4e25-4f77-bcc6-db0c215846e1', [selectedModel], { elements: [] })
                        });
                    });

                } else {
                    knimeService.setSelectedRows('b800db46-4e25-4f77-bcc6-db0c215846e1', [selectedModel], { elements: [] })
                }
            }
        }
    });
    
    
    _appVars = {
            header              : false,
            mainTable           : {
                rowSelectable   : 'multiple',
                rowActions      : [
                    
                    {
                        type            : 'link',
                        idPrefix        : 'mtActionEdit_',
                        role: "mtActionEdit",
                        icon: 'icon-edit-2',
                        hidden: true,
                        title           : 'Edit',
                        on              : {
                            click           : ( O, $action, modelIndex, rowData ) => {
                                _log( 'on > clickEdit', 'hook' ); 
                                _log( O );
                                _log( $action );
                                _log( modelIndex );
                                _log( rowData );
                                selectedModelIndex = modelIndex;
                                // emit selection event
                                let selectedModel = rowData.modelMetadata;
                                
                                //fetch scripts
                                let modelIdentifier = getData(selectedModel, "generalInformation", "identifier")
                                if(_lazySriptsfetching){
                                    const modelscript =  fetch(window._endpoints.modelscriptEndpoint + modelIdentifier + window._token);
                                    modelscript.then(function(response) {
                                        return response.text();
                                    }).then(function(data) {
                                        selectedModel['modelscript'] = data; // this will be a string
                                        const visualizationscript =  fetch(window._endpoints.visualizationscriptEndpoint + modelIdentifier + window._token);
                                        visualizationscript.then(function(responsevis) {
                                            return responsevis.text();
                                        }).then(function(datavis) {
                                            selectedModel['visualization'] = datavis; // this will be a string
                                            knimeService.setSelectedRows('b800db46-4e25-4f77-bcc6-db0c215846e1' , [selectedModel],{elements:[]}) 
                                        });
                                    });
                                    
                                }else{
                                    knimeService.setSelectedRows('b800db46-4e25-4f77-bcc6-db0c215846e1' , [selectedModel],{elements:[]})
                                }
                            }
                        }
                    }
                ],
                cols            : [
                    {
                        id          : 'colModel',
                        label       : 'Model',
                        field       : 'modelName',
                        classes     : {
                            th          : 'td-label min-200',
                            td          : 'td-label min-200 td-model'
                        },
                        sortable    : true, // sortable
                    },
                    {
                        id          : 'colSoftware',
                        label       : 'Software',
                        field       : 'software',
                        classes     : {
                            th          : null,
                            td          : 'td-soft'
                        },
                        sortable    : true, // sortable
                        facet       : {
                            tooltip             : true,
                            select2             : true,
                            select2SingleRow    : true,
                            placeholder         : 'Software',
                            maxSelectable       : 1
                        }
                    },
                    {
                        id          : 'colEnvironment',
                        label       : 'Environment',
                        field       : 'environment',
                        classes     : {
                            th          : 'min-300',
                            td          : 'td-env min-300'
                        },
                        sortable    : true, // sortable
                        facet       : {
                            tooltip             : true,
                            select2             : true,
                            select2SingleRow    : true,
                            placeholder         : 'Environment',
                            maxSelectable       : 1
                        },
                        collapsable : true, // data-toggle-td
                        formatter   : '_list' // _formatter subroutine
                    },
                    {
                        id          : 'colHazard',
                        label       : 'Hazard',
                        field       : 'hazard',
                        classes     : {
                            th          : null,
                            td          : 'td-haz'
                        },
                        sortable    : true, // sortable
                        facet       : {
                            tooltip             : true,
                            select2             : true,
                            select2SingleRow    : true,
                            placeholder         : 'Hazard',
                            maxSelectable       : 1
                        }
                    },
                    {
                        id          : 'colType',
                        label       : 'Type',
                        field       : 'modelType',
                        classes     : {
                            th          : null,
                            td          : 'td-type'
                        },
                        sortable    : true, // sortable
                        facet       : {
                            tooltip             : true,
                            select2             : true,
                            select2SingleRow    : true,
                            placeholder         : 'Type',
                            maxSelectable       : 1
                        }
                    },
                ],
                on              : {         
                    afterInit       : ( O ) => {
                        _log( 'on > afterInit', 'hook' ); 
                        _log( O._tableData );
                    },
                    afterPopulate   : ( O, tableData ) => {
                        _log( 'on > afterPopulate', 'hook' ); 
                        _log( O );
                        _log( tableData );
                        if(editorAvailable){
                            $('button[role="mtActionEdit"]').each(function() {
                               $(this).attr('hidden',false );
                            });
                            $('button[role="mtActionDetails"]').each(function() {
                               $(this).attr('hidden',true );
                            });
                        }
                        let tbl = O._tableData;
                        $.each(_representation.selection,function(index,value){
                            let indexToBeSelected = value.replace("Row","").replace("#","");
                            let $tr = $(tbl[indexToBeSelected].el[0]);     
                            $tr.addClass('tr-selected');
                            $tr.data('selected', true);
                            $tr.find( "input.checkbox" ).prop('checked', true);
                            window.selectedModels.push(_representation.metadata[indexToBeSelected]);
                        });
                        
                    },
                    selectAllRow       : ( O, rowIndex, rowData ) => {
                        console.log('slect All', rowIndex);
                        this.checked = true;
                        $(this).closest("tr").css("background-color", "#e1e3e8");
                        window.selectedModels.push(_representation.metadata[rowIndex]);
                        _value.selection.push(_representation.table.rows[rowIndex].rowKey);
                        return;
               
                    },
                    selectRow       : ( O, rowIndex, rowData ) => {
                            if (window.selectedModels.length >= _representation.maxSelectionNumber) {
                                $(this).prop("checked", false);
                                return;
                            }
                            this.checked = true;
                            $(this).closest("tr").css("background-color", "#e1e3e8");
                            //fetch scripts
                            let modelIdentifier = getData(_representation.metadata[rowIndex], "generalInformation", "identifier")
                            if(_lazySriptsfetching){
                                
                                const simulations = fetch(window._endpoints.simulationsEndpoint + modelIdentifier + window._token);
                                simulations.then(function(response) {
                                    return response.json();
                                }).then(function(data) {
                                    _representation.metadata[rowIndex]['simulation'] = data; // this will be a json
                                    const modelscript =  fetch(window._endpoints.modelscriptEndpoint + modelIdentifier + window._token);
                                    modelscript.then(function(response) {
                                        return response.text();
                                    }).then(function(data) {
                                        _representation.metadata[rowIndex]['modelscript'] = data; // this will be a string
                                        const visualizationscript =  fetch(window._endpoints.visualizationscriptEndpoint + modelIdentifier + window._token);
                                        visualizationscript.then(function(responsevis) {
                                            return responsevis.text();
                                        }).then(function(datavis) {
                                            _representation.metadata[rowIndex]['visualization'] = datavis; // this will be a string
                                            // save selected model
                                            selectionMap[rowIndex] = window.selectedModels.length;
                                            window.selectedModels.push(_representation.metadata[rowIndex]);
                                            _value.selection.push(_representation.table.rows[rowIndex].rowKey);
                                            // emit selection event
                                            window.downloadURs.push(window._endpoints.download + modelIdentifier + window._token);
                                            knimeService.setSelectedRows('b800db46-4e25-4f77-bcc6-db0c21joiner' ,
                                                    [{"selecteModels":window.selectedModels, "downloadURs":window.downloadURs}]
                                            /* [window.selectedModels,window.downloadURs]*/,{elements:[]})  
                                        });
                                    });
                                });
                                
                            }else{
                                // save selected model
                                window.selectedModels.push(rowData.modelMetadata);
                                _value.selection.push(_representation.table.rows[rowIndex].rowKey);
                                // emit selection event
                                knimeService.setSelectedRows('b800db46-4e25-4f77-bcc6-db0c21joiner' ,
                                        [{"selecteModels":window.selectedModels, "downloadURs":[]}] /*[window.selectedModels]*/,{elements:[]})  
                            }
                        

                        
                    },
                    deselectRow     : ( O, rowIndex, rowData ) => {
                        _log( 'on > deselectRow', 'hook' ); 
                        _log( O );
                        _log( rowIndex );
                        _log( rowData );
                        
                        this.checked = false;
                        $(this).closest("tr").css("background-color", "transparent");
                        
                        //filter out the model if the Checkbox is unchecked
                        window.selectedModels = window.selectedModels.filter(function (value, index, arr) {
                            let selectedModelID = getData(_representation.metadata[rowIndex], "generalInformation", "identifier")
                            let currentModelId = getData(value, "generalInformation", "identifier");
                            return selectedModelID != currentModelId;
                        });
                        
                        _value.selection = _value.selection.filter(function (value, index, arr) {
                            let indexToBeSelected = value.replace("Row","").replace("#","");
                            return indexToBeSelected != rowIndex;
                        }); 
                        knimeService.setSelectedRows('b800db46-4e25-4f77-bcc6-db0c21joiner' ,
                                [{"selecteModels":window.selectedModels, "downloadURs":window.downloadURs}],{elements:[]});
                        delete selectionMap[rowIndex];
                          
                    },
                    updateFilter    : ( O, filtered ) => {
                        _log( 'on > updateFilter', 'hook' ); 
                        _log( O );
                        _log( filtered );
                    }
                }
            }
        }; 
    }
    
    return view;
}();