Reusing components - clojurescript

Can someone please help me to better understand components, queries, etc. I'm struggling with a seemingly trivial task, I need one component with parametrized query. Instances of that component need to be included in a parent component,
for example I want lists of different kinds of fruits that need to be distributed among group of kids and each row would show kid's name and a quantity of fruits of one kind:
(defui FruitsLedger
static om/IQuery
(query [this]
'[(:data/fruits) {:kind ?kind}])
Object (render [this]
(let [{:keys [data/fruits]} (om/props this)]
(dom/ul nil (apply #(dom/li nil (str "for " (% :kid) " " (% :qt))))))))
now I need to have let's say two instances of this component in another component
where :params
for the 1st instance would be: {:kind :apples}
for the 2nd instance would be: {:kind :oranges}
this should render 2 lists similar to this:
| apples | oranges |
|---------------+---------------|
| for Aaron 2 | for Katie 1 |
| for Dan 1 | for Rob 3 |
| for Charles 0 | for Charles 3 |
| | |
|---------------+---------------|

I'm sure that parameterized queries have their uses. But perhaps this problem and other similar ones can be solved without resort to them.
Have :app/fruit-query-kinds in your db (default db format). It will be a list of fruits. You already have the fruit component, but you will need another component that has this idea of being a list of fruit kinds for querying purposes. Give this component a query and an ident. It doesn't matter if it is going to be displayed or not. Most important thing is getting the data structure right. Its ident will just be something like: '[:fruit-query-kind/by-id 1100], and it might consist of '[:fruit/by-id 10] and '[:fruit/by-id 20]. As per your example 10 will be the id for apples and 20 for oranges. That will be the refs value (a vector of idents in default db storage) of the key :app/fruit-query-kinds. 1100 is just a unique number that won't be expected to change.
The data structure is the important thing, and everything can be modelled in it, even query parameters.
You will need mutations and some buttons (or other input) that call transact! somewhere that directly change the fruit query kinds in your db. If you don't need any re-rendering to happen call transact! with the app's reconciler rather than with a component.
The idea is that you can then have component/s that query on the choices previously made by the user. So your first list component there won't know that it is to be for apples - all it knows is that it is to display fruits of the first fruit query kind.
I've found that you can do as much to-ing and fro-ing between the view and the db as you like, having the db not just store data but the current state of the view. So far the only time I got into trouble with this was when I mistakenly transacted on the not of the boolean key in the component's query. That of course ended up in a forever flickery screen.
In my opinion the way to work simply with Om Next on the Client is for all your reads to look exactly the same, all using db->tree. Once you accept this approach the next step is to get rid of them all together, which you can do by switching to the Untangled framework.

Related

Watir: How do i get inner_html of multiple span, with same class name

I am using this code, to grab the inner_html of the span class.
weather = browser.span(:class => "_Xbe kno-fv").inner_html
puts weather
However, Multiple inner_html exists with the same class, in the page. How do I retrieve all of them at once?
I am trying to get the information relating to weather from this page
weather = browser.span(:class => "_Xbe kno-fv").text
puts weather
This above code, prints, the text but not consistently. I beleive, since multiple elements exists with the same class or the information is dynamic and hence? I am not sure. Is there a way to get this?
4
Result in the first run
Examples:
| Search |
| Bangalore | 741 km²
Result in the second run
Examples:
| Search |
| Bangalore | 17°C, Wind E at 3 km/h, 69% Humidity
The element that you are targeting is contained within a <div> with a unique data attribute. I'd advise using that approach:
require 'watir'
b = Watir::Browser.new :chrome
b.goto "https://www.google.com/?gfe_rd=cr&ei=w7-YWN75OsyAoAPK_oDYBQ#q=bangalore"
puts b.div(:data_attrid => "kc:/location/citytown:current weather").text
#=> Weather: 59°F (15°C), Wind S at 2 mph (3 km/h), 83% Humidity
For reference--as #JustinKo demonstrates--watir can use data attributes as locators with some minor tweaks.
Sidenote: running automated searches against Google may be a violation of their Terms of Service, and you may find yourself blocked. You should investigate if you can use one of their many APIs to harvest this data.
I'm not sure if it is the cause of your problem, but one significant issue is that you are using multiple class values when a class locator can only accept one:
Don't do this: browser.span(:class => "_Xbe kno-fv")
Do this: browser.span(css: "._Xbe.kno-fv")

Traverse a DAG (Directed Acyclic Graph) from specified node to create a tree view

I am putting together a parts database using the method below for directed acyclic graphs.
http://www.codeproject.com/Articles/22824/A-Model-to-Represent-Directed-Acyclic-Graphs-DAG-o
I am able to build my data set using the SQL queries from that page which I have converted to MySQL.
Previously I have used the nested sets model although we found that deletions became a problem.
I am unable to find any information on how to traverse the tree using this model. I simply need to be able to create a html tree to show the descendants from a selected parent node and identify leaf nodes (will be using jstree).
I can post the code from the nested sets model if that helps. I don't need any help with the html it is the SQL I am stuck with.
Does anyone have any idea where I can find information on the query I need.
EDIT:
Following on from the commments I'd like to adapt to something more closely linked to Bill Karwins closure model. http://www.slideshare.net/billkarwin/models-for-hierarchical-data
I notice however that on slides 49-50 which is where I want to select the descendants of a node that the output doesn't seem to provide enough to draw a simple tree. Previously with the nested sets model I was able to get a similar output that would traverse left to right, top to bottom. I'll try to explain.
Item | Depth
1 | 0
2 | 0
3 | 1
6 | 2
7 | 0
9 | 1
This allowed me to draw a tree as the SQL listed the order of descendants in a more manipulatable way. I believe it created "depth" by using a COUNT of subtrees and I will dig out the query if it would be useful here.
Thanks again for all your help.

Group Delimited Flat Data using Flex

I've got some delimited data that I need to get into a Flex tree view (or some other kind of control that can display a hierarchy.) The data looks like this:
item1,groupA,mainGroup,root
item2,groupA,mainGroup,root
groupA,mainGroup,root
groupB,mainGroup,root
item3,groupB,mainGroup,root
item4,groupB,mainGroup,root
mainGroup,root
groupC,mainGroup,root
groupD,someOtherGroup,root
root
My flex app is connected to a jboss server that could potentially remove the root element (if necessary), but it really can't build the tree structure (for a variety of reasons unrelated to this question.)
At any rate, that needs to translates to a tree like this (the actual order doesn't matter, just the hierarchy.):
++ root
|-+ mainGroup
| |-+ groupA
| | - item1
| | - item2
| |-+ groupB
| | - item3
| | - item4
| |-+ groupC
|-+ someOtherGroup
| |-+ groupD
I know how to group flat data using a grouping collection, as is described here. But I haven't had any luck figuring out a way to get flex to actually read/interpret the delimited format (without preprocessing it and building the correct structure myself.)
Thanks in advance for any suggestions.
I think pre-processing it is going to be the only way. What I mean by that is having a method you write that creates the GroupingCollection appropriately based on an algorithm which is based on your initial data.
The split method:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/String.html#split()
GroupingCollection:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/GroupingCollection.html#grouping
Grouping:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/Grouping.html#fields
GroupingField:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/GroupingField.html
In looking through the docs they do have those groupingObjectFunction properties though for the life of me I can't understand what that's supposed to do.

Graphs - find common data

I've just started to read upon graph-teory and data structures.
I'm building an example application which should be able to find the xpath for the most common links. Imagine a Google serp, my application should be able to find the xpath for all links pointing to a result.
Imagine that theese xpaths were found:
/html/body/h2/a
/html/body/p/a
/html/body/p/strong/a
/html/body/p/strong/a
/html/body/p/strong/a
/html/body/div[#class=footer]/span[#id=copyright]/a
From these xpats, i've thought of a graph like this (i might be completely lost here):
html
|
body
h2 - p - div[#class=footer]
| | |
a (1) a - strong span[#id=copyright]
| |
a (3) a (1)
Is this the best approach to this problem?
What would be the best way (data structure) to store this in memory? The language does not mather. We can see that we have 3 links matching the path html -> body -> p -> strong -> a.
As I said, i'm totally new to this so please forgive me if I thought of this completely wrong.
EDIT: I may be looking for the trie data structure?
Don't worry about tries yet. Just construct a tree using standard graph representation (node = {value, count, parent} while immediately collapsing same branches and incrementing the counter. Then, sort all the leaves by count in descending order and traverse from each leaf upwards to get a path.

actionscript array with index and key

What would be the best way to create an array that can have an index and a key at the same time ?
i mean something like this
index | key | value
0 | "myItem" | "Some value"
1 | "anotherItem" | "Some other value"
2 | "blabla" | "Bla Bla"
I know i can create a normal Array/Vector and then use an Object/Dictionary to map the keys to the index in the current array.
But if the array changes then the Dictionary needs to change all the indexes that would have been affected because an item has been removed for example.
I can go ahead and create a class that tries to synchronize the map with the array etc...
But i dont think it is the best way of doing it at all... :)
I wanna use it to have a list... that holds queued items for example.
You should be able to get a particular item by its key :
item = list["myItem"]
But you should also be able to find out the index of an item, they have to be ordened , and it should be possible to loop through it as a normal array.
What would be the best way to do something like this in as3 ?
You say you don't want to have a reverse index for the keys, so I don't see how you could achieve what you are after other than having a function that does a linear search in the array and finds an item given an id.
This assumes your items have a value but also an id: {value:"someValue, id="myItem"}.
A linear search is not a bad idea anyway, unless you have lots of items in your queue and retrieve them by id very often (specially in a tight loop).
Now, if you want to go all the way, you can extend Array functionality by extending the Proxy class to make index / id access transparent (that is, your code would get items with queue[0] or queue['myItem']). You'd still have to synchronize the items internally if you have a reverse index or you could just look them up dinamically (with a linear search).
Check out this answer for pointers on how to do this: extending AS3's Array access operators to 'wrap' out-of-bound index values