Giter VIP home page Giter VIP logo

editor's Introduction

DataSift Visual Query Editor

DataSift Visual Query Editor is a visual editor for the CSDL.

More details here: http://dev.datasift.com/editor

Installation

The VQB is available on Bower:

bower install jcsdl

Usage

index.html

<html>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../minified/jcsdl.min.css" />
    <script type="text/javascript" src="../minified/jcsdl.definition.js"></script>
    <script type="text/javascript" src="../minified/jcsdl.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
</html>

<body>
    <div id="editor"></div>
</body>
</html>

index.js

// returns editor instance
var editor = new JCSDL.GUI('#editor', {
	// options
});
var code = ''; // read code from somewhere
editor.loadJCSDL(code);

Or as jQuery plugin:

// returns jQuery object (for chaining)
$("#editor").jcsdlGui({
	// options
});
var code = ''; // read code from somewhere
$("#editor").jcsdlGui('loadJCSDL', code);

Options

You can pass an object literal as the 2nd argument of the constructor (or 1st argument when using the editor as jQuery-plugin).

{
	save : function(code) {
		// function to execute when user clicks the save button
	},

	hideTargets : ['facebook'], // array of targets to hide
	
	cancelButton : true, // false if you want to hide the cancel button, selector or jQuery object if you want to use your own
	saveButton : null, // false if you want to hide the save button, selector or jQuery object if you want to use your own
	
	googleMapsApiKey : '', // your own Google Maps API key
	mapsMarker : 'jcsdl/img/maps-marker.png', // path to the maps-marker.png if it doesn't work for you

	// event hooks - functions called on various events happening in the editor
	// 'this' always refers to the editor instance
	change : function() {},
    save : function(code) {},
    saveError : function(error) {},
    cancel : function() {
        this.hide();
    },
    invalidJCSDL : function(code) {},
    viewModeChange : function(mode) {},
    filterNew : function() {},
    filterEdit : function(filter) {},
    filterDelete : function(filter) {},
    filterSave : function(filter) {},
    filterCancel : function(filter) {},
    targetSelect : function(target) {},
    operatorSelect : function(operator) {},
    caseSensitivityChange : function(on) {},

    // logic event hooks
    logicChange : function(logic) {},
    logicError : function(error) {},
    advancedLogicChange : function(expression) {},
    manualLogic : function() {},
    manualLogicChange : function(expression) {},
    graphicalLogic : function() {},
    graphicalLogicChange : function(expression) {},
    graphicalLogicTokenMove : function(expression) {},
    parenthesisAdd : function(expression) {},
    parenthesisDelete : function(expression) {},
    logicOperatorSwitch : function(expression) {},
}

Contributing

The editor uses Bundy to build minified version. Install it using NPM:

$ npm install bundy

And then run bundy.js:

$ node bundy.js

This will minify all JavaScript and CSS files and copy image files and place them inside minified/ directory.

editor's People

Contributors

blakeembrey avatar dtsn avatar michaldudek avatar quipo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

editor's Issues

Query Builder does not validate "Contains words near" properly

The contains_near operator requires a minimum of 2 words to operate.

Currently, the Query Builder does not validate this, and so when the user uses "Contains words near" with one word, it accepts the filter, but on save the generated CSDL fails to validate (and the user gets a "Stream could not be saved" error).

Dragging issue with jQuery UI 1.10.3

Steps to reproduce:

  • Load an embedded editor with jQuery UI 1.10.3
  • Create some filters.
  • Choose 'Advanced logic'
  • Attempt to drag or add parens
  • UI breaks.

Expected behaviour:

  • UI should be draggable.

This seems to be an issue with jQuery UI's deprecation of isOverAxis, and returns the following error:

Object #<Object> has no method 'isOverAxis

Please see screenshot, attached.

screen shot 2013-10-05 at 3 53 43

Handling loading exception

Hi,

What's the best way / right event handle, to deal with bad csdl load.
and have custom handler vs showing "Error:The given JCSDL did not verify!"

Thanks

Tagging

Hi

What's the plan for tagging and releasing a stable version

thanks
@salehsed

Jquery 1.9+

Hi

Is there any plan to upgrade the jquery to 1.9+
we are experiencing issues with jquery 1.9 and it doesn't work with it .

TypeError: Cannot read property 'msie' of undefined

Thanks

Input field can't focus on first click in IE11

The "Add To List" input doesn't receive focus on "first" click in IE11.

User has to repeatedly click the target for it to focus.

Cannot reproduce in other browsers, so it appears to be an IE11 isolated issue.

datasift

How to prevent certain keywords in search

Hi

While using visual query builder, we found out that someone can put a single character in search term , which can cause a huge data load in stream. is there any way to prevent it.

e.g. final CSDL =>

interaction.content contains_any " "

thanks

Icons corrupt on zoom?

Hey apologies if this is already fixed (I'm running an older version, which I've modified and don't have time to merge just now) - it did happen on the examples (eg) on dev.datasift.com for what that's worth, and I couldn't immediately see it in the closed issues list.

This is very simple to reproduce: bring up the datasift editor in chrome, and zoom in: all the icons become "corrupt", examples:

datasift_bug2

datasift_bug

Big fan of the query editor, incidentally, nice work!

Google's Map Update

Hi

Is the any plan to use newer google map api , for GEO searches?
Updating map will be very helpful for us to improve the UX

Current map parametes :
-navigationControl
-navigationControlOptions
-NavigationControlStyle.

Map option names should be updated to:
-zoomControl
-zoomControlOptions
-ZoomControlStyle

thanks in advance
Saleh

Missing assets

Hi

After updating to latest version (jquery 1.9+)
There are some missing assets
'''
images/ui-bg_highlight-soft_100_eeeeee_1x100.png 404 (Not Found) jquery.js:7124
images/ui-bg_gloss-wave_35_f6a828_500x100.png 404 (Not Found) jquery.js:7124
images/ui-bg_glass_100_f6f6f6_1x400.png 404 (Not Found) jquery.js:7124
'''

Editor Generates Invalid CSDL, Possibly Due to RTL Language Content

Output from the Visual Editor with Arabic language terms produces a CSDL query that fails validation (and compilation), with message "Error: We are unable to parse this stream. At line 4 position 43 we were expecting a colon (:)".

The offending query follows:

// JCSDL_MASTER 1dd66349649bcb953d6176220f99edd2 1|2
// JCSDL_VERSION 2.1
// JCSDL_START b4c00e8901cdb5a2e494d0ba3769d7fb interaction.content,contains_near,35-25 1
interaction.content contains_near "السفارة الأمريكية,هجوم:10"
// JCSDL_END
OR
// JCSDL_START 7dc96cb8c04d81f56401b0f380139b39 interaction.content,contains_near,35-18 2
interaction.content contains_near "هجوم,الأميركيون:10"
// JCSDL_END
// JCSDL_MASTER_END

Here are two screenshots to verify everyone sees the correct text direction:

visual editor with query

visual editor query output

Error:The given JCSDL did not verify!

Hi

We used query builder to create following CSDL, But after reload ing same CSDL into in, we saw following error :
"Error:The given JCSDL did not verify!"

// JCSDL_MASTER c46c6f5e9bf8e27467238a0d7f47d876 AND
// JCSDL_VERSION 2.1
// JCSDL_START 1d4292a06f3a0fd35a8bbccb32f34c37 augmentation.demographic.location-city,contains_any,40-11 1
demographic.location.city contains_any "Los Angeles"
// JCSDL_END
AND
// JCSDL_START e71764977f28a41ea3cc71a5834586e4 augmentation.salience.content.entities-type,contains_any,45-11 2
salience.content.entities.type contains_any "Los Angeles"
// JCSDL_END
AND
// JCSDL_START 4b4514579f46bd3a0f02d9ceef4e8e7a interaction.content,contains_any,34-38 3
interaction.content contains_any "DWTS,dancingabc,dancing with the stars"
// JCSDL_END
// JCSDL_MASTER_END

Brackets and braces are allowed on manual logic edit, but not in list of valid tokens

Brackets and braces are valid keydowns: (jcsdl.gui.logic.js, line 932)

$input.keydown(function(ev) {
    var k = ev.which,
    s = ev.shiftKey;

    if (
...
        // allow open bracket
        || k == 219
...
        // allow close bracket
        || k == 221
...
    ) {
        return;
    } else {
        // disallow anything else
        ev.preventDefault();
    }

...but not valid tokens: (jcsdl.gui.logic.js, line 520):

tokensMap : {
    '(' : 'bracketOpen',
    ')' : 'bracketClose',
    '&' : 'operatorAnd',
    '|' : 'operatorOr',
    '!' : 'operatorNot',
    'filter' : 'filter'
},

...

if (this.tokensMap[t] === undefined) {
    throw 'Invalid character "' + token + '" in the logic!';
}

Looks like brackets and braces need to either be removed from the list of valid keydowns, or added to tokensMap.

JCSDL not Verifying

The following CSDL verifies in the advanced editor, but does not in the editor. Ideas?

// JCSDL_MASTER ed0648a7329a1aa481d196dc75251288 ((1 | 2) & (3 | 4)) & 5
// JCSDL_VERSION 2.1
((
// JCSDL_START eee4359313491c9ff3a486a9be864e7f twitter.text,contains_any,27-3 1
twitter.text contains_any "SUV"
// JCSDL_END
OR
// JCSDL_START e9d078d1770aea4d6bbab1700b9cf5f3 twitter.text,contains_any,27-3 2
twitter.text contains_any "suv"
// JCSDL_END
) AND (
// JCSDL_START d551dc5b60177178930b60ac40bf27db twitter.text,contains_any,27-3 3
twitter.text contains_any "bmw"
// JCSDL_END
OR
// JCSDL_START 0cc02a0926b258078310f98a70730fae twitter.text,contains_any,27-3 4
twitter.text contains_any "BMW"
// JCSDL_END
)) AND
// JCSDL_START 7486bd013a0302464ee361a3a2dbd538 augmentation.demographic.sex,equals,20-6 5
demographic.sex == "female"
// JCSDL_END
// JCSDL_MASTER_END

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.