I have the code to change state with React
const newArray = upfiles;
newArray[i] = { ...upfiles[i], status: 'Ready' };
setUpfiles([...newArray]);
I wonder if it can be done in one line.
setUpfile(Object.values({...upfiles, [i]:{...upfiles[i], status: "Ready"}}))
This should do the job in one line.
Also
setUpfile(upfiles.map((upfile, index) => index === i ? {...upfile, status:"Ready"} : upfile))
should work
Related
I'm trying to figure out a way to build a progress bar with React. I have a forEach loop that iterates through an array of about 7,000 indexes. Each time I validate a row, I want to update a state variable with percentage completion (and render this on the page live). I've tried iterating through these indexes, and updating my state variable (hoping to update the page) in the loop but I'm realizing that will not work. I obviously can't do this with a normal variable as it will reset when the component re-renders. Can anyone give me some insight on this topic?
Thanks.
Here is a code snippet from what I'm looking at:
parsedAssets.forEach(asset => {
newAssetValidated = validateBulkUpload(asset, parsedAssets, assetList, accountLogged, jobSites);
!newAssetValidated.reject_err ? validatedAssetList.accepted.push(newAssetValidated) : validatedAssetList.rejected.push(newAssetValidated);
setStateAssets({ ...stateAssets, validatedAssetList });
});
}
So essentially, as each asset is either accepted or rejected we add it to "stateAssets", and I'm hoping to build the progress bar from the length of the combined arrays that are getting set in stateAssets. However, when the forEach loop is completed, only the last validated asset is getting set due to it not updating until the forEach loop is completed.
Personally I can't imagine such a heavy validation, that you need progress-bar, but anyway.
First solution is to separate validation itself from state update for progress-bar into separate "threads". But since JS is single threaded, you may use some tricks with setTimeout or setInterval functionality. It may be very tricky, and in general not recommended practice with React.
Another way is - to set the work into queue & process 1 item at a time.
As an example I would do it something like this:
function ComponentWithProgress({parsedAssets, setParsedAssets}) {
const [validatedAssetList, setValidatedAssetList] = useState([])
const [progress, setProgress] = useState(0)
const [toDo, setToDo] = useState([])
if(parsedAssets && parsedAssets.length>0) {
setToDo(parsedAssets)
// clear parsedAssets in parent component to: [], false, null ...
// so you put it into toDo only once
setParsedAssets([])
}
if(toDo.length > 0) {
const asset = toDo[0]
const newToDo = toDo.slice(1) // All but 0th element
const newAssetValidated = validateBulkUpload(asset);
setValidatedAssetList([ ...validatedAssetList, newAssetValidated ]);
setToDo(newToDo)
setProgress( newToDo.length / ( validatedAssetList.length + newToDo.length ) * 100 )
}
// ... Render here
// If you need only accepted
const accepted = validatedAssetList.filter(v => !v.reject_err)
}
This example maybe not work for you as is, because you didn't showed us the context, but the main idea is here.
I have an array of json objects, and I want to be able to show either all of them, or remove some of them by filtering them by a key value.
I achieved this by creating a new constant:
const filtered = data.filter((item) => item.highVariance === false);
And a different constant:
const showHighVar = isHighVar ? data : filtered;
And then I have a checkbox that lets me toggle the shotHighVar constant in:
input type="checkbox" onChange={() => setHighVar(!isHighVar)}/>
In order to map it later in code:
{sorted(showHighVar).slice(0, 25 * pageIndex).map((x) => (...))}
But it seems to me like there should be a better way of doing this, but I can't figure it out.
There is nothing wrong with the way you are doing it. the one thing that i would change is that instead of creating filtered variable all the time just filter the data when isHighVar is false. So your code should look something like this -
const showHighVar = isHighVar ? data : data.filter((item) => item.highVariance === false);
{sorted(showHighVar).slice(0, 25 * pageIndex).map((x) => ( .....))}
Or when you are running the map function after sorting and slicing. just add a if statement in map function and check if isHighVar is false then return null else do whatever you are doing.
eg.
{sorted(data).slice(0, 25 * pageIndex).map((x) => {
if(isHighVar===false && x.highVariance!==false){
return null;
}
....
})}
I have the following Google Chrome executeScript.
chrome.tabs.executeScript(
tabs[0].id,
{code: 'document.querySelectorAll(".col-9.col-md-10")[3].innerText'}, citationResult => {
console.log(citationResult);
});
This code gets the 4th element which has the classes col-9 AND `col-md-10' and then gets the inner text of that element. That is a string.
I would like a generalized query which instead returns every element which has col-9 AND `col-md-10'. However, when I try something like this:
chrome.tabs.executeScript(
tabs[0].id,
{code: 'document.querySelectorAll(".col-9.col-md-10")}, citationResult => {
console.log(citationResult);
});
I seem to get an empty array.
Is there a way to get those four elements returned rather than just getting the innerText of that single element?
As wOxxOm said, I needed to return an array of primitives. This is what solved my problem.
'var x = document.querySelectorAll(".col-9.col-md-10"); const finalArray = []; \n' +
'for (let i = 0; i < x.length; i++) {\n' +
' finalArray.push(x[i].innerText);\n' +
'} finalArray;'
I need to reacreate the model browser structure, but so far I haven't been sucessfull, I'm trying to join the parents and childs to reacrete the structure in the viewer.
One of my requirements is to use the model.sdb database, so I can't use the tree structure inside the viewer. (Viewer API) OR the model derivative API
So anything between a SQL query and a linq expression would solve my problem.
Thanks!
var queryBranches = universe.Where(o => o.ObjectsEav.Any(eav => eav.Attribute.Name == "child" && eav.Attribute.Category == "__child__"));
var queryLeafs = universe.Where(o => o.ObjectsEav.Any(eav => eav.Attribute.Name == "parent" && eav.Attribute.Category == "__parent__")).Except(queryBranches);
//Get Structure
foreach (var leaf in leafs)
{
var leafAttr = leaf.ObjectsEav.FirstOrDefault(eav => eav.Attribute.Name == "parent");
if (leafAttr == null)
leafAttr = leaf.ObjectsEav.FirstOrDefault(eav => eav.Attribute.Name == "parent");
...
}
One of my requirements is to use the model.sdb database, so I can't use the tree structure inside the viewer. (Viewer API) OR the model derivative API.
You can either query the property db in client browser or in your backend.
Alternatively try model.getPropertyDb().executeUserFunction():Promise to execute function in worker thread against the PropertyDatabase instance:
executeUserFunction(function(pdb) {
var dbId = 1;
pdb.enumObjectProperties(dbId, function(propId, valueId) {
// do stuff
});
})
Below is the code snippet for a barchart with colored bars:
var Dim2 = ndx.dimension(function(d){return [d.SNo, d.something ]});
var Group2 = Dim2.group().reduceSum(function(d){ return d.someId; });
var someColors = d3.scale.ordinal().domain(["a1","a2","a3","a4","a5","a6","a7","a8"])
.range(["#2980B9","#00FFFF","#008000","#FFC300","#FF5733","#D1AEF1","#C0C0C0","#000000"]);
barChart2
.height(250)
.width(1000)
.brushOn(false)
.mouseZoomable(true)
.x(d3.scale.linear().domain([600,800]))
.elasticY(false)
.dimension(Dim2)
.group(Group2)
.keyAccessor(function(d){ return d.key[0]; })
.valueAccessor(function(d){return d.value; })
.colors(someColors)
.colorAccessor(function(d){return d.key[1]; });
How do I add a legend to this chart?
Using composite keys in crossfilter is really tricky, and I don't recommend it unless you really need it.
Crossfilter only understands scalars, so even though you can produce dimension and group keys which are arrays, and retrieve them correctly, crossfilter is going to coerce those arrays to strings, and that can cause trouble.
Here, what is happening is that Group2.all() iterates over your data in string order, so you get keys in the order
[1, "a1"], [10, "a3"], [11, "a4"], [12, "a5"], [2, "a3"], ...
Without changing the shape of your data, one way around this is to sort the data in your legendables function:
barChart2.legendables = function() {
return Group2.all().sort((a,b) => a.key[0] - b.key[0])
.map(function(kv) {
return {
chart: barChart2,
name: kv.key[1],
color: barChart2.colors()(kv.key[1]) }; }) };
An unrelated problem is that dc.js takes the X domain very literally, so even though [1,12] contains all the values, the last bar was not shown because the right side ends right at 12 and the bar is drawn between 12 and 13.
So:
.x(d3.scale.linear().domain([1,13]))
Now the legend matches the data!
Fork of your fiddle (also with dc.css).
EDIT: Of course, you want the legend items unique, too. You can define uniq like this:
function uniq(a, kf) {
var seen = [];
return a.filter(x => seen[kf(x)] ? false : (seen[kf(x)] = true));
}
Adding a step to legendables:
barChart2.legendables = function() {
var vals = uniq(Group2.all(), kv => kv.key[1]),
sorted = vals.sort((a,b) => a.key[1] > b.key[1] ? 1 : -1);
// or in X order: sorted = vals.sort((a,b) => a.key[0] - b.key[0]);
return sorted.map(function(kv) {
return {
chart: barChart2,
name: kv.key[1],
color: barChart2.colors()(kv.key[1]) }; }) };
Note that we're sorting by the string value of d.something which lands in key[1]. As shown in the comment, sorting by x order (d.SNo, key[0]) is possible too. I wouldn't recommend sorting by y since that's a reduceSum.
Result, sorted and uniq'd:
New fiddle.