Drag-and-drop Sortable Component for Nested Data and Hierarchies

React Sortable Tree 

A React component for Drag-and-drop sortable representation of hierarchical data. Checkout the Storybook for a demonstration of some basic and advanced features.

Table of Contents

• Getting Started
• Usage
• Props
• Data Helpers
• Themes
• Browser Compatibility
• Troubleshooting
• Contributing

Getting started

Install react-sortable-tree using npm.

# NPM
npm install react-sortable-tree --save

# YARN
yarn add react-sortable-tree

ES6 and CommonJS builds are available with each distribution. For example:

// This only needs to be done once; probably during your application's bootstrapping process.
import 'react-sortable-tree/style.css';

// You can import the default tree with dnd context
import SortableTree from 'react-sortable-tree';

// Or you can import the tree without the dnd context as a named export. eg
import { SortableTreeWithoutDndContext as SortableTree } from 'react-sortable-tree';

// Importing from cjs (default)
import SortableTree from 'react-sortable-tree/dist/index.cjs.js';
import SortableTree from 'react-sortable-tree';

// Importing from esm
import SortableTree from 'react-sortable-tree/dist/index.esm.js';

Usage

import React, { Component } from 'react';
import SortableTree from 'react-sortable-tree';
import 'react-sortable-tree/style.css'; // This only needs to be imported once in your app

export default class Tree extends Component {
  constructor(props) {
    super(props);

    this.state = {
      treeData: [
        { title: 'Chicken', children: [{ title: 'Egg' }] },
        { title: 'Fish', children: [{ title: 'fingerline' }] },
      ],
    };
  }

  render() {
    return (
      <div style={{ height: 400 }}>
        <SortableTree
          treeData={this.state.treeData}
          onChange={treeData => this.setState({ treeData })}
        />
      </div>
    );
  }
}

Props

Prop	Type	Description
treeData (required)	object[]	Tree data with the following keys: title is the primary label for the node. subtitle is a secondary label for the node. expanded shows children of the node if true, or hides them if false. Defaults to false. children is an array of child nodes belonging to the node. Example: [{title: 'main', subtitle: 'sub'}, { title: 'value2', expanded: true, children: [{ title: 'value3') }] }]
onChange (required)	func	Called whenever tree data changed. Just like with React input elements, you have to update your own component's data to see the changes reflected. ( treeData: object[] ): void
getNodeKey (recommended)	func	Specify the unique key used to identify each node and generate the path array passed in callbacks. With a setting of getNodeKey={({ node }) => node.id}, for example, in callbacks this will let you easily determine that the node with an id of 35 is (or has just become) a child of the node with an id of 12, which is a child of ... and so on. It uses defaultGetNodeKey by default, which returns the index in the tree (omitting hidden nodes). ({ node: object, treeIndex: number }): string or number
generateNodeProps	func	Generate an object with additional props to be passed to the node renderer. Use this for adding buttons via the buttons key, or additional style / className settings. ({ node: object, path: number[] or string[], treeIndex: number, lowerSiblingCounts: number[], isSearchMatch: bool, isSearchFocus: bool }): object
onMoveNode	func	Called after node move operation. ({ treeData: object[], node: object, nextParentNode: object, prevPath: number[] or string[], prevTreeIndex: number, nextPath: number[] or string[], nextTreeIndex: number }): void
onVisibilityToggle	func	Called after children nodes collapsed or expanded. ({ treeData: object[], node: object, expanded: bool, path: number[] or string[] }): void
onDragStateChanged	func	Called when a drag is initiated or ended. ({ isDragging: bool, draggedNode: object }): void
maxDepth	number	Maximum depth nodes can be inserted at. Defaults to infinite.
rowDirection	string	Adds row direction support if set to 'rtl' Defaults to 'ltr'.
canDrag	func or bool	Return false from callback to prevent node from dragging, by hiding the drag handle. Set prop to false to disable dragging on all nodes. Defaults to true. ({ node: object, path: number[] or string[], treeIndex: number, lowerSiblingCounts: number[], isSearchMatch: bool, isSearchFocus: bool }): bool
canDrop	func	Return false to prevent node from dropping in the given location. ({ node: object, prevPath: number[] or string[], prevParent: object, prevTreeIndex: number, nextPath: number[] or string[], nextParent: object, nextTreeIndex: number }): bool
canNodeHaveChildren	func	Function to determine whether a node can have children, useful for preventing hover preview when you have a canDrop condition. Default is set to a function that returns true. Functions should be of type (node): bool.
theme	object	Set an all-in-one packaged appearance for the tree. See the Themes section for more information.
searchMethod	func	The method used to search nodes. Defaults to defaultSearchMethod, which uses the searchQuery string to search for nodes with matching title or subtitle values. NOTE: Changing searchMethod will not update the search, but changing the searchQuery will. ({ node: object, path: number[] or string[], treeIndex: number, searchQuery: any }): bool
searchQuery	string or any	Used by the searchMethod to highlight and scroll to matched nodes. Should be a string for the default searchMethod, but can be anything when using a custom search. Defaults to null.
searchFocusOffset	number	Outline the <searchFocusOffset>th node and scroll to it.
onlyExpandSearchedNodes	boolean	Only expand the nodes that match searches. Collapses all other nodes. Defaults to false.
searchFinishCallback	func	Get the nodes that match the search criteria. Used for counting total matches, etc. (matches: { node: object, path: number[] or string[], treeIndex: number }[]): void
dndType	string	String value used by react-dnd (see overview at the link) for dropTargets and dragSources types. If not set explicitly, a default value is applied by react-sortable-tree for you for its internal use. NOTE: Must be explicitly set and the same value used in order for correct functioning of external nodes
shouldCopyOnOutsideDrop	func or bool	Return true, or a callback returning true, and dropping nodes to react-dnd drop targets outside of the tree will not remove them from the tree. Defaults to false. ({ node: object, prevPath: number[] or string[], prevTreeIndex: number, }): bool
reactVirtualizedListProps	object	Custom properties to hand to the internal react-virtualized List
style	object	Style applied to the container wrapping the tree (style defaults to {height: '100%'})
innerStyle	object	Style applied to the inner, scrollable container (for padding, etc.)
className	string	Class name for the container wrapping the tree
rowHeight	number or func	Used by react-sortable-tree. Defaults to 62. Either a fixed row height (number) or a function that returns the height of a row given its index: ({ treeIndex: number, node: object, path: number[] or string[] }): number
slideRegionSize	number	Size in px of the region near the edges that initiates scrolling on dragover. Defaults to 100.
scaffoldBlockPxWidth	number	The width of the blocks containing the lines representing the structure of the tree. Defaults to 44.
isVirtualized	bool	Set to false to disable virtualization. Defaults to true. NOTE: Auto-scrolling while dragging, and scrolling to the searchFocusOffset will be disabled.
nodeContentRenderer	any	Override the default component (NodeRendererDefault) for rendering nodes (but keep the scaffolding generator). This is a last resort for customization - most custom styling should be able to be solved with generateNodeProps, a theme or CSS rules. If you must use it, is best to copy the component in node-renderer-default.js to use as a base, and customize as needed.
placeholderRenderer	any	Override the default placeholder component (PlaceholderRendererDefault) which is displayed when the tree is empty. This is an advanced option, and in most cases should probably be solved with a theme or custom CSS instead.

Data Helper Functions

Need a hand turning your flat data into nested tree data? Want to perform add/remove operations on the tree data without creating your own recursive function? Check out the helper functions exported from tree-data-utils.js.

• getTreeFromFlatData: Convert flat data (like that from a database) into nested tree data.
• getFlatDataFromTree: Convert tree data back to flat data.
• addNodeUnderParent: Add a node under the parent node at the given path.
• removeNode: For a given path, get the node at that path, treeIndex, and the treeData with that node removed.
• removeNodeAtPath: For a given path, remove the node and return the treeData.
• changeNodeAtPath: Modify the node object at the given path.
• map: Perform a change on every node in the tree.
• walk: Visit every node in the tree in order.
• getDescendantCount: Count how many descendants this node has.
• getVisibleNodeCount: Count how many visible descendants this node has.
• getVisibleNodeInfoAtIndex: Get the th visible node in the tree data.
• toggleExpandedForAll: Expand or close every node in the tree.
• getNodeAtPath: Get the node at the input path.
• insertNode: Insert the input node at the specified depth and minimumTreeIndex.
• find: Find nodes matching a search query in the tree.
• isDescendant: Check if a node is a descendant of another node.
• getDepth: Get the longest path in the tree.

Themes

Using the theme prop along with an imported theme module, you can easily override the default appearance with another standard one.

Featured themes

File Explorer	Full Node Drag	Minimalistic theme inspired from MATERIAL UI
react-sortable-tree-theme-file-explorer	react-sortable-tree-theme-full-node-drag	react-sortable-tree-theme-minimal
Github | NPM	Github | NPM	Github | NPM

Help Wanted - As the themes feature has just been enabled, there are very few (only two at the time of this writing) theme modules available. If you've customized the appearance of your tree to be especially cool or easy to use, I would be happy to feature it in this readme with a link to the Github repo and NPM page if you convert it to a theme. You can use my file explorer theme repo as a template to plug in your own stuff.

Browser Compatibility

Browser	Works?
Chrome	Yes
Firefox	Yes
Safari	Yes
IE 11	Yes

Troubleshooting

If it throws "TypeError: fn is not a function" errors in production

This issue may be related to an ongoing incompatibility between UglifyJS and Webpack's behavior. See an explanation at create-react-app#2376.

The simplest way to mitigate this issue is by adding comparisons: false to your Uglify config as seen here: https://github.com/facebookincubator/create-react-app/pull/2379/files

If it doesn't work with other components that use react-dnd

react-dnd only allows for one DragDropContext at a time (see: https://github.com/gaearon/react-dnd/issues/186). To get around this, you can import the context-less tree component via SortableTreeWithoutDndContext.

// before
import SortableTree from 'react-sortable-tree';

// after
import { SortableTreeWithoutDndContext as SortableTree } from 'react-sortable-tree';

Contributing

Please read the Code of Conduct. I actively welcome pull requests :)

After cloning the repository and running yarn install inside, you can use the following commands to develop and build the project.

# Starts a webpack dev server that hosts a demo page with the component.
# It uses react-hot-loader so changes are reflected on save.
yarn start

# Start the storybook, which has several different examples to play with.
# Also hot-reloaded.
yarn run storybook

# Runs the library tests
yarn test

# Lints the code with eslint
yarn run lint

# Lints and builds the code, placing the result in the dist directory.
# This build is necessary to reflect changes if you're
#  `npm link`-ed to this repository from another local project.
yarn run build

Pull requests are welcome!

---

Author: frontend-collective
Source Code: https://github.com/frontend-collective/react-sortable-tree
License: MIT license

#react-native #react 

What is GEEK

Buddha Community

Your Data Architecture: Simple Best Practices for Your Data Strategy

If you accumulate data on which you base your decision-making as an organization, you should probably think about your data architecture and possible best practices.

If you accumulate data on which you base your decision-making as an organization, you most probably need to think about your data architecture and consider possible best practices. Gaining a competitive edge, remaining customer-centric to the greatest extent possible, and streamlining processes to get on-the-button outcomes can all be traced back to an organization’s capacity to build a future-ready data architecture.

In what follows, we offer a short overview of the overarching capabilities of data architecture. These include user-centricity, elasticity, robustness, and the capacity to ensure the seamless flow of data at all times. Added to these are automation enablement, plus security and data governance considerations. These points from our checklist for what we perceive to be an anticipatory analytics ecosystem.

#big data #data science #big data analytics #data analysis #data architecture #data transformation #data platform #data strategy #cloud data platform #data acquisition

Getting Started With Data Lakes

Frameworks for Efficient Enterprise Analytics

The opportunities big data offers also come with very real challenges that many organizations are facing today. Often, it’s finding the most cost-effective, scalable way to store and process boundless volumes of data in multiple formats that come from a growing number of sources. Then organizations need the analytical capabilities and flexibility to turn this data into insights that can meet their specific business objectives.

This Refcard dives into how a data lake helps tackle these challenges at both ends — from its enhanced architecture that’s designed for efficient data ingestion, storage, and management to its advanced analytics functionality and performance flexibility. You’ll also explore key benefits and common use cases.

Introduction

As technology continues to evolve with new data sources, such as IoT sensors and social media churning out large volumes of data, there has never been a better time to discuss the possibilities and challenges of managing such data for varying analytical insights. In this Refcard, we dig deep into how data lakes solve the problem of storing and processing enormous amounts of data. While doing so, we also explore the benefits of data lakes, their use cases, and how they differ from data warehouses (DWHs).

---

This is a preview of the Getting Started With Data Lakes Refcard. To read the entire Refcard, please download the PDF from the link above.

#big data #data analytics #data analysis #business analytics #data warehouse #data storage #data lake #data lake architecture #data lake governance #data lake management

How Has COVID-19 Impacted Data Science?

The COVID-19 pandemic disrupted supply chains and brought economies around the world to a standstill. In turn, businesses need access to accurate, timely data more than ever before. As a result, the demand for data analytics is skyrocketing as businesses try to navigate an uncertain future. However, the sudden surge in demand comes with its own set of challenges.

Here is how the COVID-19 pandemic is affecting the data industry and how enterprises can prepare for the data challenges to come in 2021 and beyond.

#big data #data #data analysis #data security #data integration #etl #data warehouse #data breach #elt

Applications Of Data Science On 3D Imagery Data

CVDC 2020, the Computer Vision conference of the year, is scheduled for 13th and 14th of August to bring together the leading experts on Computer Vision from around the world. Organised by the Association of Data Scientists (ADaSCi), the premier global professional body of data science and machine learning professionals, it is a first-of-its-kind virtual conference on Computer Vision.

The second day of the conference started with quite an informative talk on the current pandemic situation. Speaking of talks, the second session “Application of Data Science Algorithms on 3D Imagery Data” was presented by Ramana M, who is the Principal Data Scientist in Analytics at Cyient Ltd.

Ramana talked about one of the most important assets of organisations, data and how the digital world is moving from using 2D data to 3D data for highly accurate information along with realistic user experiences.

The agenda of the talk included an introduction to 3D data, its applications and case studies, 3D data alignment, 3D data for object detection and two general case studies, which are-

• Industrial metrology for quality assurance.
• 3d object detection and its volumetric analysis.

This talk discussed the recent advances in 3D data processing, feature extraction methods, object type detection, object segmentation, and object measurements in different body cross-sections. It also covered the 3D imagery concepts, the various algorithms for faster data processing on the GPU environment, and the application of deep learning techniques for object detection and segmentation.

#developers corner #3d data #3d data alignment #applications of data science on 3d imagery data #computer vision #cvdc 2020 #deep learning techniques for 3d data #mesh data #point cloud data #uav data

What Is ETLT? Merging the Best of ETL and ELT Into a Single ETLT Data Integration Strategy

Data integration solutions typically advocate that one approach – either ETL or ELT – is better than the other. In reality, both ETL (extract, transform, load) and ELT (extract, load, transform) serve indispensable roles in the data integration space:

• ETL is valuable when it comes to data quality, data security, and data compliance. It can also save money on data warehousing costs. However, ETL is slow when ingesting unstructured data, and it can lack flexibility.
• ELT is fast when ingesting large amounts of raw, unstructured data. It also brings flexibility to your data integration and data analytics strategies. However, ELT sacrifices data quality, security, and compliance in many cases.

Because ETL and ELT present different strengths and weaknesses, many organizations are using a hybrid “ETLT” approach to get the best of both worlds. In this guide, we’ll help you understand the “why, what, and how” of ETLT, so you can determine if it’s right for your use-case.

#data science #data #data security #data integration #etl #data warehouse #data breach #elt #bid data