react

React is a declarative framework that allows us to describe how our components should look at any given point in time and will manage all the UI updates when the underlying data changes. If we follow best practices for managing state, such as keeping around only the minimal set of state needed for the UI and computing everything else on demand, we generally write a lot less imperative code. Following this practice also has the benefit of eliminating an entire class of bugs related to inconsistent UI state. However, there are situations where properties of a component’s state can depend on each other in a way that one isn’t always computed from another, and intuitive attempts to keep state within these constraints can introduce dreaded imperative code. This article will demonstrate such a scenario and suggest a more declarative way of keeping state consistent.

The Example

We want a component that renders a list of items. We can select an item to toggle its checked state. If any item is checked, the component will show a “Selected” tab that, when clicked, shows only checked items. We implement this with a component that has two state properties. The first is checkedSet which holds a set of the checked items, and the second is onlyShowChecked. When the latter property is true the component shows only checked item and the Selected tab is “active”. Sounds simple, here’s the code:

JS Bin

Looks good, but there’s an undesirable state. When we’re in the Selected tab and uncheck all the items, our UI isn’t showing any items and there isn’t an active tab anymore. We’d probably want to fix this by automatically switching back to the show all tab whenever we uncheck the last item. The most obvious place to implement that behavior is of course in the action that got us into this state. That is, in toggleChecked we’d want to check whether we’ve just unchecked the last item and if so set onlyShowChecked to false. Our modified toggleChecked may look something like this:

Sure enough, replay that scenario and it’ll work as desired: JS Bin

However, there are a couple things wrong with this approach. The toggleChecked function now has multiple responsibilities. In addition to toggling the checked state of an item, it now also sets the onlyShowChecked property. The next developer reading this code won’t understand it at a glance, compared to the previous version. They will have to think about why this check was introduced and will always need to keep this edge case in their head when modifying or adding features.

Now consider what can happen when we add a button to uncheck everything at once. This button calls the uncheckAll function, which clears checkedSet:

JS Bin

Indeed, it’s again possible to get into that unwanted state since we can use this new button to uncheck all the items while in the Selected tab. At this point it’s considered a bug and there are a couple of intuitive ways to fix this.

One obvious fix is to inline the same check that we introduced to toggleChecked, but again this would add to the responsibility of uncheckAll and duplicating logic is never good for maintainability.

Another way is to loop over the checked items and call toggleChecked on each one. This would work, but it would feel like we’re doing much more work then we need to. And who can predict the rendering behavior when calling setState that many times in a function call? Also the only reason we would even consider doing it this way is because we know toggleChecked has the side effect that we want, and this would tightly couple the two functions together.

Either way, let’s say a couple of months from now we want to introduce a third way of toggling items, say by adding a button that inverts the checked state of each item. This is effectively an uncheck all if all items are checked. At this point it’s natural to forget that we’ve been adding code to prevent our component from getting into an undesirable state and reintroducing the bug is all too easy.

The fundamental problem is that there isn’t an obvious way in React to declaratively describe the dependencies between our state properties. That is, in our case, onlyShowChecked should never be true when checkedSet is empty. So, in order to maintain that invariant, we end up writing imperative state manipulations reminiscent of the imperative DOM manipulations that we used to write with jQuery, which will inevitably lead to maintainability problems down the road. This is what I call imperative creep.

In Angular, or another framework that provides observables, we can just watch the checkedSet property in order to keep showSelected in the correct state. The best way we’ve found to manage dependent state in React is by mutating the state directly at the very top of the render function:

Now we admit this looks like bad practice in any React application, but we didn’t come to this conclusion lightly. We’ve tried managing state in the shouldComponentUpdate lifecycle method, but that introduced a bunch of incompatibilities such as when using a mixin that already provides shouldComponentUpdate, or when state is an Immutable instead of a plain javascript object, or having forceUpdate completely bypass shouldComponentUpdate.

By managing dependent state at the top of a render function we don’t have to deal with these incompatibilities. The benefits are that we’ve eliminated the root cause of our UI bug and it encourages developers to keep all the rules for dependent state properties in one place.

This article was written by Kenneth Chung.

Screen-Shot-2015-01-30-at-5.19.11-PM-300x258

MAYA Heat Transfer Technologies has recently signed a Channel Partner agreement with Rescale, a leading cloud simulation provider offering a high performance computing platform for engineering and scientific simulations. Under the agreement, MAYA will become a sales representative for Rescale’s offering of Siemens PLM Software’s NX™ Nastran® based on their Software as a Service (Saas) model.  Siemens PLM recently announced the availability of NX™ Nastran® on the Rescale platform, enabling users to run NX Nastran solutions using Rescale’s simple, secure, on-demand service.

As the largest North American reseller of CAE software for Siemens PLM, MAYA offers extensive expertise with the complete Siemens portfolio of Digital Lifecycle Simulation products. MAYA’s partnership with Rescale extends their offering to encompass cloud-based usage of Siemens PLM software, enabling their customers to access additional solver capacity without the long-term commitment of a purchase or to perform large-scale DOEs or multidisciplinary optimizations efficiently.

To contact MAYA Heat Transfer Technologies about running NX Nastran on Rescale’s platform, please visit here.

For questions about Rescale, please contact info@rescale.com.

To learn more information about Rescale’s platform, please visit www.rescale.com.

This article was written by Rescale.

graphs

Background

Many engineers tasked with running HPC applications are usually intent on monitoring their simulations to ensure the computation is progressing as expected, determine when the solution error is below typical engineering error thresholds, or verify the integrity of the physical phenomena they are simulating. While most commercial applications offer some form of visualizing or plotting this type of data within their graphical driven interfaces, the options for plotting are usually limited, and the plots themselves are unattractive or otherwise unsuitable for presenting or documenting results for others.

Gnuplot is a portable command-line driven graphic utility that exists for several platforms that was originally created to assist scientists and students visualize mathematical functions and data interactively, but it has since grown to support many non-interactive uses. Gnuplot provides several advantages to help users automate plot creation and create terrific plots. Users can setup scripts, or templates, that can be re-used across different functions or datasets. These scripts can define how the plots should be formatted, how the data used should be parsed, and so on. Gnuplot’s versatility is highlighted in the examples shown in Figures 1 through 5.

matlab_line_colors_2014

Figure 1: Bassel functions from order zero up to six plotted with the default Matlab R2014 line colors

klein_bottle

Figure 2: Klein Bottle

world_color_3d (1)

Figure 3: Natural Earth II shaded relief and water plot of the world

equirectangular_projection

Figure 4: Equirectangular projection of the world

animate_bessel

Figure 5: Animation of Bessel Function

Analysis Description

To demonstrate using Gnuplot in a way  that engineers and  scientists may find beneficial for monitoring their own simulations on  Rescale,  in addition to generating plots of their results suitable for publication, a simple 3D Reynolds-Averaged Navier-Stokes (RANS) simulation is run using Stanford  University’s Unstructured  (SU2) open- source, finite-volume solver.  Plots are generated periodically using Gnuplot for both solution residual  and  aerodynamic coefficient metrics that are being monitored throughout the CFD simulation. Users can view the plots being generated as they are refreshed on the Job Status page  for their particular simulation while  it runs.

The process is outlined by first defining a Gnuplot command or script file wherein the format for plot is defined, the plots themselves are generated, and so forth. Within this Gnuplot command file, a simple statement is added at the end of the file to have Gnuplot reread the command file periodically.  As the RANS simulation runs and  the monitor files are updated, Gnuplot will generate new plots using the updated simulation results until the solver exits.

For this example, the file SU2.gnu is used.

The command file begins by defining a terminal setting in which the postscript terminal is used. Several terminals are available within Gnuplot, and those available for use  can  be listed by typing at a Gnuplot prompt, ”set terminal”.  Typically the postscript terminal option is preferred when generating plots to be used  within documentation; whereas, svg and pngcairo terminals are preferred when output is to be used  for web publishing. Options also exist for integrating mathematical formulas or text within LATEXor TEXdocuments.

Next a  few  line  styles with colors are defined to help  distinguish a  number of metrics being  used in  a  single plot involving solution residuals.   The key—or legend—is positioned at the bottom right and  text is  left justified. A color (gray) and  line weight for the axes are specified, and  formatting for the tics and  their placement are supplied. Once all of the plot’s formatting options are configured, the actual data is plotted using SU2’s history.plt file wherein data associated with the simulation is output for each  iteration while the simulation is running.

Gnuplot includes a seemingly limitless array of formatting options. While the number of options may be daunting at first, once you have  configured the charts to appear as you prefer, there’s little need  to make changes for subsequent charts. You can edit just the few lines needed to update the data or functions used in making the specific  plots as needed. Thus, reusability of these command files can help save precious time in the long run.

The  last two lines add a thirty second  delay, and then prompt Gnuplot to reread or execute the command file once again. Any data that has been added to data source file(s)  will be added to the plots the next time the command file is executed; thereby, updating what is plotted with the latest changes.

On Rescale, a simple wrapper script that initiates Gnuplot with a supplied command file, places that process in the background, and  runs the solver is all that is needed. Alternatively, these separate commands can  be added in the ”Command” field of the Software Settings page when setting up your job on Rescale. For this specific RANS  simulation example with SU2, the run-su2 wrapper script was used and  can serve as an  example for creating your own custom scripts.

Simulation Solution

The entire job setup can be cloned and run by using the following  URL: https://platform.rescale. com/jobs/HfvgT/clone/.  Examples of the plots generated an available while the simulation is running appear in Figures 6 through 9.

residuals

Figure 6: Solution residuals history

lift

Figure 7: Coefficient of lift (CLift) history

drag

Figure 8: Coefficient of drag (CDrag) history

lift-drag

Figure 9: Plot of the drag ratio (L/D) versus lift coefficient (CLift)

Summary

Post-processing and reporting results from simulations that have been generated from HPC applications in order to verify the integrity of the physical phenomena being modeled can be a labor intensive  process for any  engineer or scientist.  Gnuplot offers a non-interactive means to automate much of the work involved in generating attractive plots suitable for publishing. On Rescale, Gnuplot is accessible to any of your simulations and provides the additional benefit of allowing you to easily visualize and monitor the specific metrics that are important to you while your simulation runs.

Try out the example outlined here on Rescale’s cloud-based HPC platform today!

This article was written by Rescale.

February 2, 2015 – San Francisco, CA. Today, Rescale releases lower pricing across its high performance computing (HPC) cloud hardware.  This price change will be effective immediately for all customers.  The cloud simulation platform provider has dropped prices on average by 40% and now offers increased accessibility to budget-restricted projects – while maintaining its position as the most competitive enterprise HPC platform solution in the market.

With the price decrease, comes the release of new, higher performing hardware with the availability of Intel’s new Haswell processors – the Rescale “Onyx” hardware configuration. For certain applications, users can expect over 20% increase in performance of their simulations.
In addition to new pricing, users will also see a new naming schema for Rescale’s HPC and GPU hardware. The naming selection is designed to provide users a broader selection and increased flexibility across multiple similar hardware solutions. The added granularity for hardware types will further allow users to select the best hardware configuration for each simulation.

Rescale maintains the largest global footprint of high performance computing hardware specifically designed for computer aided engineering simulations and analyses. Engineers and scientists around the world utilize Rescale’s cloud simulation platform to lead the market with innovative designs and products.

To see the full list of hardware and new, lower pricing, visit www.rescale.com/pricing.
For questions on hardware or pricing, please contact info@rescale.com.
To begin instantly accessing the newest HPC resources at competitive costs, visit platform.rescale.com to create an account and begin running simulations.

This article was written by Rescale.