DEV Community: Amr shadid

Django Signals part 1

Amr shadid — Fri, 30 Sep 2022 13:36:39 +0000

In this article, I will explain what Django built-in signals are. and where are they implemented? And why are they so effective and useful? Let's get started!

Django signal helps decoupled applications get notified when actions occur elsewhere in the framework.

This means that the function is notified to be executed when a certain condition is met. For instance when we add a new record to a database, Sometimes we would need to perform the function before or after saving, deleting and so on.

What can Django Signals do for us? Consider the following scenario: suppose we have a blog platform with many users, and if any user publishes a new article, all other users should be notified by sending a short notification such as "A new article has been added, check it out."

In this case, we can use Django signal to notify a function that is used to send a notification to all other users once the article has been successfully saved on the database.

Django comes with five built-in signals: Model, Management, HTTP requests, Testing, and Database wrappers. Each of those signals is an object from the signal class, which provides a set of functions for signal handling, such as connecting and disconnecting.

signals have two parameters that are commonly used: sender and receiver. We may specify who will send the signal and where we will receive it. Which function should be run?

In this part of our Django signals series, we'll look at request/response (HTTP) signals, explain their specifics, and demonstrate how to utilize them easily and correctly.

Request/response signals are used to work with HTTP requests to do a variety of things such as generate a performance report for the request or perform some operations when the request begins, when it is completed, or when an error occurs.

request/response signals:

request_started signal
Request_finished signal
got_request_exception signal

To work with signals, the receiver function must have a '**Kwargs' parameter.

#request/response signals can import statement 
from django.core.signals import <#Name-Signal#>

request_started signal:

import statement:
from django.core.signals import request_started

When a request is initiated, this signal is used to execute a function. For example, when a request is initiated, start a timer.

Parameters:

-1 sender: In the default configuration, the sender of the request_started signal is WSGI.
-2 environ: The environ dictionary provided to the request

request_finished signal

import statement:
from django.core.signals import request_finished

This signal is used to executed a function when request is finished. Follow to previous example we want to stop timer when request is finished.

request_finished have one parameter:

-1 sender: as above

got_request_exception

This signal is used for request exceptions. For example, we want to save our failure logs to a text file.

import statement:
from django.core.signals import got_request_exception

request_finished have one parameter:

-1 sender: Not used (always None)
-2 request: The HTTPRequest object, provided by HTTPRequest class from Django framework,

Code :

import time 
import logging
from django.core.signals import request_started,\
    request_finished,\
    got_request_exception

def started(sender, **kwargs):
     global started
     started = time.time()

def finished(sender, **kwargs):
    total = time.time() - started
    print ("Timer| %.4fs" % total)

def log(**kwargs):
    logging.exception('error')

request_started.connect(started) 
request_finished.connect(finished) 
got_request_exception.connect.connect(log)

React zoom and pan with draggable elements

Amr shadid — Mon, 21 Mar 2022 00:04:53 +0000

I just try to build drag-able elements then move them around the screen and zoom it using mouse events, So how we can implement that using React.

I was searching in npm.io to find a package that can provide those features. Finally, I found some packages that can implement what I want, for that, I want to share the outcome here and highlight how I make integrate these packages with each other.

The first chapter will explain how we can create draggable elements, is a great existing package called
react-draggable, This package is powerful that can provide draggable elements using JavaScript.

It's very easy to use and has powerful features.

The below code snippet explains how we can create drag-able elements. Draggable elements have powerful functions that are called when on-drag start or on end to perform some routine like update state or do something.



import * as React from 'react'
import Draggable from 'react-draggable'

export default function Table(props: ITableProps
                                    & ITableOptionsProps) {

    return (
        <Draggable onDrag={props.onDrag} onStop={props.onStop}>
            <div className='table'>

                <div className='table-name'>
                    <h3>{props.name}</h3>
                </div>

                {props.att.map((value,index)=>(

                    <div key={index} className='attribute' id={props.name+"."+value.name}>
                        <div className='element'><h3>{value.name}</h3></div>
                        <div className='element type'><h3>{value.type}</h3></div>
                        <div className='element null'><h3>{value.null}</h3></div>
                        <div className='element pk'>{value.pk?<h3>pk</h3>:null}</div>
                    </div>
                ))}
            </div>
        </Draggable>
    );}

CSS:



.table{
  position: fixed;
  display: flex;
  flex-direction: column;
  cursor: move;
  align-items: center;
  background-color: transparent;
  min-width: 380px;
  min-height: 200px;
  border: 2px solid #9BA1A6;
  border-radius: 7px;
}

the output of the above code block is div have style class called table <div className='table'> these table elements can drag around the page using mouse.

Now the second chapter explains how we can build a transform Wrapper that can provide zoom and pan, of course using the great package called react-zoom-pan-pinch, react-zoom-pan-pinch is a powerful package that provides transform wrapper, transform component, and zoom controlling features.

After we create drag-able elements now we need to contain these elements in the transform wrapper to enable zoom controlling and pan the elements as a group.



import * as React from 'react';
import { AppContext } from '../../context';
import Table from '../table';
import { 
TransformWrapper, 
TransformComponent 
} from "react-zoom-pan-pinch";


export default function Main(props: IMainProps) {
  const context = React.useContext(AppContext)
  const [isMoveable, setIsMoveable] = React.useState<boolean>(false);

  const onDrag = () => {
    setIsMoveable(true)
    //etc
  }
  const onStop = () => {
    setIsMoveable(false)
    //etc 

  }


  return (
    <>
      <TransformWrapper
        initialScale={1}
        disabled={isMoveable}
        minScale={.5}
        maxScale={1}
        limitToBounds={false}
        onPanning={updateXarrow}
        onZoom={updateXarrow}
        pinch={{ step: 5 }}
      >

        <TransformComponent 
          contentClass='main' 
          wrapperStyle={{ height: '100vh', width: '80vw' }}>


          {context?.database.schema.map((value, index) => (
            <Table 
              key={index} 
              name={value.name} 
              att={value.att} 
              onDrag={onDrag} 
              onStop={onStop}/>
          ))}

        </TransformComponent>
      </TransformWrapper>

    </>
  );
}

CSS for content on transform component:



.main{
  display: flex;
  flex-direction: row;
  position: absolute;
}

we passed two functions to draggable element the first one is onDrag this function will perform when the user start drag element and the last one onStop is will perform when the user finished dragging element, The main ideas of using this function:

provide enable control for transform wrapper to fix a conflict between draggable elements and transform wrapper.
perform some updater functions like when we have an arrow between two draggable elements and we move one then we need to update arrow positions.

Now we have draggable elements and transform wrapper, you can visit sql builder tool on Github to get a full example with source code.