orcascope

question_text_1 = f"The list of marks scored by the student is stored in a list as marks=[7,3,8,6,1,9]"
in_a1 = 'input("Write the statement to get the 3rd mark")'
ans_1 = 'marks[2]'

question_text_2 = f"The list of marks scored by the student is stored in a list as marks=[7,3,8,6,1,9]"
in_a2 = 'input("Write the statement to get the total count of items in the list")'
ans_2 = 'len(marks)'

orcascope

Within FilterBox/FilterBox.jsx, there is a function called changeFilter(), which is attached to the dropdown UI as onChange event handler. When the filter box is changed, the function gets triggered. within the function body this.props.onChange is triggered. onChange is nothing but onAddFilter (mapping takes place in transformProps.js)

How does onAddFilter reached the FilterBox component ?
Container/DashboardComponent is the parent of gridComponent.
dashboard/container/Chart imports the addFilter Action.
gridComponents/chart pass down addFilter as a prop into chart/chart.jsx (thru container chart/chartContainer.jsx). chart/chart/jsx calls chart/chartRenderer.
chartRenderer maps this.props.addFilter to this.handleFilter,further to onAddFilter and make it a chartProps.

orcascope

Actions 
Simply objects with a mandatory 'type' key { type: 'REFRESH_CHART' }
Per Redux official docs, Action is 'what happened'. (why past tense?)
Actions work to change the state.

Reducers
Signature of a Reducer is (prev State, Action) => (New State)
Reducers are pure functions, meaning they can't call any API or alter its arguments or change the value of any global variable.
As the signture indicates, Reducers return the new state based on the action received. 
  Within a reducer function, Action brings in the change to be made, along with the current State. Most times, reducers 

orcascope

You have a decent idea about React and you know that Redux is used for State management in general. A React component can 
talk directly to the Redux Store with the Redux APIs. But that cud become messy when the application grows.
Here comes React-Redux, which simplifies the interactions of React component with the Redux store.

React Redux acts a bridge between React and Redux , as a wrapper on the React component using its connect function. The connect function gets two args, MapStatetoProps
and MapDispatchtoProps. As the name says, these functions convert the state properties as well as action dispathcher functions 
into props. Being a wrapper, it injects down these additional props into the React Component. 

Hold on... why all the fuss? 
  Because it allows to implement the Presentational Component/Container Component pattern. Presentational component is concerned

orcascope

How does React and Flask talk to each other ? React takes care of the Frontend and Flask is supposed to take care of the Backend. When you go thru React files you will come across a lot of JSX files. These JSX files never comes to the foreground (when I say foreground, you can't see any JSX files when you inspect the resulting HTML). The JSX files would be built by npm build process and the instructions to build them will be present in webpack.config.js. Inside the webpack config file, you will see an entry object. As you see below, the name addSlice is assigned to all the react components that arise and branch out of '/src/addSlice/index.jsx'. If you are familiar with React, you will know that React is made up of multiple tiny components that are imported together to deliver the functionality.

entry: { theme: path.join(APP_DIR, '/src/theme.js'),

orcascope

Disappearing Menu Items

orcascope

// https://d3js.org v5.7.0 Copyright 2018 Mike Bostock
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(t.d3=t.d3||{})}(this,function(t){"use strict";function n(t,n){return t<n?-1:t>n?1:t>=n?0:NaN}function e(t){var e;return 1===t.length&&(e=t,t=function(t,r){return n(e(t),r)}),{left:function(n,e,r,i){for(null==r&&(r=0),null==i&&(i=n.length);r<i;){var o=r+i>>>1;t(n[o],e)<0?r=o+1:i=o}return r},right:function(n,e,r,i){for(null==r&&(r=0),null==i&&(i=n.length);r<i;){var o=r+i>>>1;t(n[o],e)>0?i=o:r=o+1}return r}}}var r=e(n),i=r.right,o=r.left;function a(t,n){return[t,n]}function u(t){return null===t?NaN:+t}function f(t,n){var e,r,i=t.length,o=0,a=-1,f=0,c=0;if(null==n)for(;++a<i;)isNaN(e=u(t[a]))||(c+=(r=e-f)*(e-(f+=r/++o)));else for(;++a<i;)isNaN(e=u(n(t[a],a,t)))||(c+=(r=e-f)*(e-(f+=r/++o)));if(o>1)return c/(o-1)}function c(t,n){var e=f(t,n);return e?Math.sqrt(e):e}function s(t,n){var e,r,i,o=t.length,a=-1;if(null==n){for(

orcascope

Line Generator uses an array of points, like [x,y],[x,y]. In order to draw a line this point set must be an array member. So to draw a single line
we need to have an array of array of points, while the points are arrays of their own. i.e [[[x,y],[x,y]]]. The above will draw a single line, as 
[[x,y],[x,y]] will make the points to draw a single line. Having multiple point set arrays will make multiple lines.

The case of diagonal is different. diagonal needs just two points, source & target. In fact, v5 has no diagonal function. But manually it can be generated,
given two points. {source:{x,y},target:{x,y}}

orcascope

orcascope

<head>

<script  src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
</head>
<body>
<div id="vis"></div>
<script>
var height = 860,width=940,
    margin = {top:30,left:100,right:40,bottom:30},
	  barWidth = 30;